css选择器的基本语法格式,CSS的初识部分（CSS概念和基础语法，引入CSS的三种方式，CSS基础选择器，CSS高级选择器）...

01. CSS概念和基础语法

CSS的概念 ：Cascading Style Sheet 层叠样式表

用途：表现HTML文件样式的语言 u包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定

CSS的发展史：

1996年 CSS1.0 u1998年 CSS2.0 。融入了DIV+CSS的概念，提出了HTML结构与CSS样式表的分离

2004年 CSS2.1 u融入了更多高级的用法，如浮动，定位等。

2010年 CSS3.0 它包括了CSS2.1下的所有功能，是目前最新的版本，它向着模块化的趋势发展， 又加了很多使用的新技术，如字体、多背景、圆角、阴影、动画等高级属性， 但是它需要高级浏览器的支持。由于现在IE 6、IE 7使用比例已经很少，对市场 企业进行调研发现使用CSS3的频率大幅增加，学习CSS3已经成为一种趋势.

CSS的优势：

内容与表现分离

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

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

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

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

CSS的基础语法：

CSS的格式：

注意：CSS的最后一条声明后的“;”可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束“;” 都要写上 。

Style标签：

Style 标签在HTML文档中的位置 ， 在 和 之间

初识CSS

狂神

西部开源

运行结果：

通过对Style中选择器指定的标签，将h1所包含的狂神渲染成蓝色，将西部开源字体变大处理。

02. 引入CSS的方式

行内样式 ：使用style属性引入CSS样式

你好，CSS

nihao,css

Hello,css

GOODBYE,CSS

运行结果：

内部样式表 ：CSS代码写在的标签中

运行结果：

3. 外部样式表

外部样式表分为链接式和导入式

**标签属于XHTML，@import是属于CSS2.1

使用链接的CSS文件先加载到网页当中，再进行编译显示

使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页 当中

@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的

CSS样式优先级(就近原则)

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

链接式 ：

在resources目录下建立css目录，在css下建立Style.css文件即下面这段代码

div{

color: #ff5f5d;

font-size: 100px;

}

span{

color: #539bff;

font-size: 50px;

}

外部导入css

认真虚席Java

运行结果：

导入式 ：

外部导入css

认真虚席Java

运行结果：

03. CSS基础选择器：

1.标签选择器：

2.类选择器：

Title

来西部开源

成就IT梦想

好好学习，天天向东航

cool

你好啊

3.id选择器：

id选择器

1

2

3

4

运行结果：

4.总结

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

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

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

基本选择器的优先级：ID选择器>类选择器>标签选择器，且基本选择器不遵循 “ 就近原则 ”

基本选择器优先级

西部开源

运行结果：

04.CSS高级选择器

高级选择器包括层次选择器，结构伪选择器，属性选择器

层次选择器

选择器

类 型

功能描述

E F

后代选择器

选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内

E>F

子选择器

选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素

E+F

相邻兄弟选择器

选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面

E~F

通用兄弟选择器

选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

后代选择器

层次选择器

1

2

3

4

5

6

3

运行结果：

子选择器

层次选择器

1

2

3

4

5

6

3

运行结果：

相邻兄弟选择器

层次选择器

1

2

3

4

5

6

3

运行的结果：

通用兄弟选择器

层次选择器

1

2

3

4

5

6

3

结构伪类选择器

选择器

功能描述

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元素

结构伪类选择器

1

2

3

li1

li2

li3

运行结果：

属性选择器

属性选择器

功能描述

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与属性值中的任意位置相匹配

运行结果：