第四章、初识CSS3 （0基础，学HTML)

第四章、初识CSS3

目录

第四章、初识CSS3

1.学习目标

2.CSS的概念

3.CSS的优势

4.CSS的基本语法

4.1 语法结构

4.2 style标签

5.CSS样式

5.1 行内样式

5.2 内部样式表

5.3 外部样式表

5.3.1 链接外部样式表

5.3.2 导入外部样式表

6.CSS基本选择器

6.1 标签选择器

6.2 类选择器

6.3 ID选择器

7.CSS的高级选择器

7.1 层次选择器

7.2 后代选择器

7.3 子选择器

7.4 相邻兄弟选择器

7.5 通用兄弟选择器

7.6 结构伪类选择器

7.7 小结

8.属性选择器

9.总结

---

1.学习目标

1.会使用行内样式、内部样式表和外部样式表三种方式为HTML5文档添加CSS样式

2.会使用CSS3的基本选择器设置字体大小和颜色

3.会使用复合选择器为特定的网页元素添加CSS样式

4.会使用CSS3高级选择器为网页元素添加CSS样式

2.CSS的概念

Cascading Style Sheet 级联样式表 表现HTML或XHTML文件样式的计算机语言 包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定

3.CSS的优势

1.内容与表现分离

2.网页的表现统一，容易修改

3.丰富的样式，使得页面布局更加灵活

4.减少网页的代码量，增加网页的浏览速度，节省网络带宽

5.运用独立于页面的CSS，有利于网页被搜索引擎收录

4.CSS的基本语法

4.1 语法结构

h1 {
    font-size:12px;
    color:#F00;
}

​

4.2 style标签

5.CSS样式

优先使用：

1.行内样式>内部样式表>外部样式表

2.就近原则

5.1 行内样式

使用style属性引入CSS样式

style属性的应用
直接在HTML标签中设置的样式

​

5.2 内部样式表

CSS代码写在的 ​

优点 方便在同页面中修改样式

缺点 不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底

5.3 外部样式表

CSS代码保存在扩展名为.css的样式表中

HTML文件引用扩展名为.css的样式表，有两种方式：

链接式

导入式

5.3.1 链接外部样式表

  ……

……

5.3.2 导入外部样式表

……

CSS基本选择器

6.CSS基本选择器

标签选择器直接应用于HTML标签

类选择器可在页面中多次使用

ID选择器在同一个页面中只能使用一次

优先级：

ID选择器>类选择器>标签选择器

6.1 标签选择器

p { font-size:16px;}
​

6.2 类选择器

.class { font-size:16px;}
​

6.3 ID选择器

#id { font-size:16px;}

7.CSS的高级选择器

7.1 层次选择器

选择器	类 型	功能描述
E F	后代选择器	选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F	子选择器	选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
E+F	相邻兄弟选择器	选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
E~F	通用兄弟选择器	选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

7.2 后代选择器

body p{  background: red;  }

7.3 子选择器

body>p{  background: pink;  }

7.4 相邻兄弟选择器

 .active+p {  background: green;  }

7.5 通用兄弟选择器

.active~p{  background: yellow;  }

7.6 结构伪类选择器

选择器	功能描述
E:first-child	作为父元素的第一个子元素的元素E
E:last-child	作为父元素的最后一个子元素的元素E
E F:nth-child(n)	选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd
E:first-of-type	选择父元素内具有指定类型的第一个E元素
E:last-of-type	选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type(n)	选择父元素内具有指定类型的第n个F元素

ul li:first-child{ background: red;}
ul li:last-child{ background: green;}
p:nth-child(1){ background: yellow;}
p:nth-of-type(2){ background: blue;}

7.7 小结

使用E F:nth-child(n)和E F:nth-of-type(n)的 关键点

E F:nth-child(n)在父级里从一个元素开始查找，不分类型

E F:nth-of-type(n)在父级里先看类型，再看位置

8.属性选择器

属性选择器	功能描述
E[attr]	选择匹配具有属性attr的E元素
E[attr=val]	选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）
E[attr^=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
E[attr$=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
E[attr*=val]	选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配

a[id] { background: yellow; }

a[id=first] { background: red; }

a[id=first] { background: red; }

a[class*=links] { background: red; }

 a[href^=http] { background: red; }

a[href$=png] { background: red; }

9.总结