CSS-初识CSS3（非常详细）

CSS的概念

   Cascading Style Sheet  级联样式表

   表现HTML或XHTML文件样式的计算机语言

          包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定

CSS的发展史

      1996年CSS1.0  -->   1998年5月CSS2.0   -->    2004年CSS2.1    -->   2010年CSS3.0

CSS的优势

1.内容与表现分离

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

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

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

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

CSS基本语法结构

语法

h1 (选择器){
	font-size(属性):12px;(值)(声明)
	color:#F00;(声明)
}

style标签

HTML中引入CSS样式

 1.行内样式:使用style属性引入CSS样式

例：

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

 2.内部样式表：CSS代码写在的

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

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

3.外部样式表：①CSS代码保存在扩展名为.css的样式表中；

                         ②HTML文件引用扩展名为.css的样式表，有两种方式：（Ø链接式）（Ø导入式）

链接外部样式表语法：

  ……

……

导入外部样式表语法：

……

链接式与导入式的区别

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

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

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

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

CSS样式优先级

     1.行内样式>内部样式表>外部样式表              2.就近原则

CSS3基本选择器：1.标签选择器        2.类选择器         3.ID选择器

HTML标签作为标签选择器的名称

…

、

、<img/>

标签选择器语法：

p（标签选择器） { font-size（属性）:16px（值）;}（声明）

类选择器语法：

<标签名 class= "类名称">标签内容

.class（类名称） { font-size:16px;}

ID选择器语法：

#id id名称{ font-size:16px;}

小结：

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

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

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

基本选择器的优先级

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

注：标签选择器不遵循“就近原则”，无论是哪种方式引入CSS样式，一般都遵循ID选择器 > class类选择器 > 标签选择器的优先级

CSS的高级选择器：         1.层次选择器         2.结构伪类选择器           3.属性选择器

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

后代选择器语法：

body p{  background: red;  }

注意：后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入

子选择器语法：

body>p{  background: pink;  }

相邻兄弟选择器语法：

.active+p {  background: green;  }

通用兄弟选择器语法：

.active~p{  background: yellow;  }

 

结构伪类选择器

选择器	功能描述
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;}

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

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

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

属性选择器

属性选择器	功能描述
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与属性值中的任意位置相匹配

E[attr]属性选择器语法：

a[id] { background: yellow; }

E[attr=val]属性选择器语法：

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

E[attr=val]属性选择器语法：

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

注意：E[attr=val]属性选择器中，属性和属性值必须完全匹配才能被选中

E[attr*=val]属性选择器语法：

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

E[attr^=val]属性选择器语法：

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

E[attr$=val]属性选择器语法：

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