unit1 初识CSS3

1、CSS基础

1、概念

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

2、用途

1、外观美化
2、布局、定位

3、优势

1、内容与表现分离
2、网页的表现统一，容易修改
3、丰富的样式，使得页面布局更加灵活
4、减少网页的代码量，增加网页的浏览速度，节省网络带宽
5、运用独立于页面的CSS，有利于网页被搜索引擎收录

2、定义css的方式

1、标签选择器直接应用于HTML标签
2、类选择器可在页面中多次使用
3、ID选择器在同一个页面中只能使用一次

方式一：内部样式

将样式放到html网页的style标签中 (style在head中)

1、标签选择器

1）标签选择：以标签名字作为选择器的名字
标签名{
样式列表;
}

2、类选择器

2)类选择器：以标签的类名作为选择器的名字
.标签的类名{
样式列表;
}
补充：所有的标签都有class属性

3、id选择器

3)id选择器:以标签的id值作为选择器的名字
       #id名{
                    样式列表;
                            }
补充：所有的标签都有id属性,id的属性值是唯一了

方式二：外部样式

css定义的方式二：外部样式表(推荐)
              1.创建.css文件
              2.在.css文件中写上样式列表(3种选择器)
              3.引入外部样式表
                     1）link          （推荐）
                     2) import 必须放到style标签中(不推荐)

导入方式

链接式与导入式的区别：
1、<link><link/>标签属于XHTML，@import是属于CSS2.1
2、使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示
3、使用@import导入的CSS文件，客户端显示HTML 结构，再把CSS文件加载到网页当中
4、@import是属于CSS2.1特有的，对不兼容CSS2.1 的浏览器是无效

• 导入式import

• 链接式link

方式三：行内样式表

css定义的方式三：行内样式表(不推荐--复用性很差)
              1.所有标签都有一个style属性
              2.style属性值为样式列表

3、优先级

1、样式表的优先级

样式表优先级：
行内样式表>内部样式表>外部样式表

2、选择器的优先级

选择器的优先级
id选择器>类选择器>标签选择器
注意：选择器的优先级不遵循就近原则。

4、CSS高级选择器

1、层次选择器

/*后代选择器*/
 /*body p{
 background: red;
 }*/
 /*子选择器*/
 /*body>p{
 background: pink;
 }*/
 /*/!*相邻兄弟选择器*!/*/
 /*.active + p{
 background: green;
 }*/
 /*/!*通用选择器*!/*/
 .active~p{
 background: yellow;
 }

<body>
1
2
3
4
<ul>
 <li>
 4
 </li>
 <li>
 5
 </li>
 <li>
 6
 </li>
</ul>

</body>

1、E F 后代选择器

E：父元素
F：子元素
选择匹配的F元素，且匹配的F元素（子元素和孙元素）被包含在匹配的E元素内。

2、E>F 子选择器

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

3、E+F 相邻兄弟选择器

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

4、E~F 通用兄弟选择器

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

2、伪类选择器

1、E F:first-child

选择父元素 E的第一个子元素的元素F

2、E F:last-child

作为父元素的最后一个子元素的元素F

3、E F:nth-child(n)

选择父级元素E的第n个子元素F

4、E F:first-of-type

选择E父元素内具有指定类型为F的第一个元素

5、E F:last-of-type

选择父元素E内具有指定类型为F的最后一个元素

6、E F:nth-of-type(n)

选择父元素E内具有指定类型为F的第n个元素

7、E F:nth-last-child(n)

选择父元素 E 的倒数第n个子元素，且该子元素类型为 F。
此选择器与E:nth-child（n）选择器计算顺序刚好相反。但是使用方法都是一样。
其中：nth-last-child(1)始终匹配最后一个元素，与last-child等同。

8、E F: nth-last-of-type(n)

选择父元素 E 的倒数第二个类型为 F 的子元素

9、only-child

选择父元素 E 的唯一的一个子元素，且该子元素类型为F

10、only-of-type

选择父元素 E 的唯一的一个类型为F 的子元素。

3、属性选择器

1、E[attr]

选择匹配具有属性attr的E元素

2、E[attr=val]

选择匹配具有属性attr的E元素,并且属性值为val（其中 val区分大小写）

3、E[attr^=val]

选择匹配元素E，且E元素定义了属性attr，其属性值是以 val开头的任意字符串

4、E[attr$=val]

选择匹配元素E，且E元素定义了属性attr，其属性值是以 val结尾的任意字符串

5、E[attr*=val]

选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配

CSS3第一章复习笔记