HTML CSS整理笔记(四)CSS3基础

作者: web 发布时间: 2019-11-08 浏览: 1730 次 编辑

完成笔记链接:https://www.niwoxuexi.com/blog/web/article/1245

——4 CSS3基础——

26.CSS:Cascading Style Sheet层叠样式表,又称风格样式表Style Sheet,用于设计网页风格。

27.CSS3的基本语法结构:

(1)CSS中注释为 /*内容*/

(2)CSS规则由选择器、声明组成。

(3)声明必须放在大括号{}中,声明可以是一或多条。

(4)每条声明由一个属性和值组成,属性和值用冒号:分开,每条语句以分号;结尾如

<style type="text/css"> h1{ font-size : 12px; color : red; } </style> 

28.在HTML中引入CSS样式的方式:

(1)行内样式:直接在标签中用style属性设置CSS样式。

<p style="font-size:10px;">字体大小</p> 

(2)内部样式表:把css代码写在<head>的<style>中,规范化应写为<style type="text/css">

(3)外部样式表:文件扩展名为.css 在外部样式表中可直接写样式代码,不需要<style>标签。

a.链接式引用外部样式表(常用):

<head> <link href="外部样式表路径" type="text/css"/> </head> 

b.导入式引用外部样式表:

<head> <style> @import url("外部样式表路径"); </style> </head> 

29.样式优先级:"就近原则",行内样式>内部样式表>外部样式表

当有很多样式时,用 !important 可以为某一个样式覆盖掉其他所有样式。

如 #textcolor{ clor:pink !important;} 

30.CSS选择器命名规范:驼峰命名法,用语义化单词命名且不能和ID选择器同名.

31.CSS3的基本选择器

(1)标签选择器:以标签名作选择器的名称如 h1{color:red;}

(2)类选择器:选择器名可自定义如 .red{color:red;}同时要设置<标签 class="red">内容</标签>

(3)ID选择器:选择器名可自定义如 #red{color:red;}同时要设置<标签 id="red">内容</标签>,但同一个id属性的选择器在页面中只能用一次。

32.基本选择器的优先级:ID选择器>类选择器>标签选择器

31.CSS3的高级选择器

1.层次选择器:

(1)后代选择器A B{ }:中间用空格隔开,只要是A的后代元素都会被选中。

(2)子选择器A>B{ }:只能选择A的子元素。

(3)相邻兄弟选择器A+B{ }:只用于A后面一个同级元素

(4)通用兄弟选择器A~B{ }:用于A后面所有的同级元素

2.结构伪类选择器:根据文档对象模型DOM的节点(元素级别)来操作。

(1)B:first-child 作为父元素的第一个子元素B,作用和(3)相似

(2)B:last-child 作为父元素的最后一个子元素B

(3)A B:nth-child(n) 在父级中查第n个子元素是不是B,不分类型

(4)B:first-of-type 选择父元素内B类型的第一个元素B

(5)B:last-of-type 选择父元素内B类型的最后一个元素B

(6)A B:nth-of-type(n) 在父级里先是不是B类型,再看位置n

3.属性选择器:

(1)A[arrt] 选择包含属性arrt的A标签(也可写多个属性,但要同时存在)

(2)A[arrt = val] 选择包含属性arrt,且属性值=val(区分大小写)的A标签

(3)A[arrt ^= val] 选择包含属性arrt,且属性值以val开头的任意字符串

(4)A[arrt $= val] 选择包含属性arrt,且属性值以val结尾的任意字符串

(5)A[arrt *= val] 选择包含属性arrt,且属性值包含val字符串的A标签


HTML CSS整理笔记更多笔记

HTML CSS整理笔记(一)HTML5基础

HTML CSS整理笔记(二)列表、表格、媒体元素

HTML CSS整理笔记 (三)表单

HTML CSS整理笔记(四)CSS3基础

HTML CSS整理笔记(五) CSS3美化网页

HTML CSS整理笔记(六)盒子模型

HTML CSS整理笔记 (七) 浮动

HTML CSS整理笔记 (八) 定位网页元素

HTML CSS整理笔记 (九) CSS3做网页动画

HTML CSS整理笔记 (十)HTML部分