CSS3简介:
CSS(cascading style sheet,层叠式样式表)是用来给HTML标签添加样式的语言。
CSS3是CSS的最新版本,增加了大量的样式、动画、3D特效和移动端特性等。
前端三层: 语言 功能 结构层 HTML 搭建结构、放置部件、描述语义 样式层 CSS 美化页面、实现布局 行为层 Javascript 实现交互效果、数据收发、表单验证
CSS使样式和结构分离:
CSS使样式和结构分离,样式和结构不用杂糅着写,而是彼此分开:HTML就负责结构,CSS负责样式。
CSS3书写位置:
内嵌式:
在学习CSS时,最常使用内嵌式,顾名思义,内嵌式在.html文件中。
在<head></head>标签对中,书写<style></style>标签对,里面书写CSS语句。
<style>
h1{
color:red;
}
</style>
外链式: 可以将CSS单独存为.css文件,然后使用\标签引入它
<link rel="stylesheet" href="....">
外链式的优点:多个html网页,可以共用一个css样式表文。
导入式:
导入式是最不常见的样式表导入方法:
<style>
@import url(......);
</style>
使用导入式引入的样式表,不会等待css文件加载完毕,而是会立即渲染HTML结构,所以页面会有几秒“素面朝天”的时间。
行内式: 样式可以直接通过style属性写在标签身上。
<h2 style="color:red;">我是一个二级标题</h2>
行内样式牺牲了样式表的批量设置样式的能力,只能给一个标签设置样式,所以不常用。
CSS3选择器:
传统CSS2.1选择器:
1、标签选择器和id选择器
2、class选择器
3、符合选择器
4、伪类
CSS3新增选择器:
1、元素关系选择器
2、序号选择器
3、属性选择器
4、CSS3新增伪类选择器
5、伪元素
标签选择器:
标签选择器也称元素选择器、类型选择器,它直接使用元素的标签名当做选择器,将选择页面上所有该种标签。
标签选择器将选择页面上所有该种标签,无论这个标签所处
位置的深浅。
标签选择器的常见作用:
标签选择器覆盖面比较大,所以通常用于标签的初始化:
id属性:
标签可以有id属性,是这个标签的唯一标识。
<p id="para1">我是一个段落</p>
id的名称只能由字母、数字、下划线、短横组成,且不能以数字开头,字母区分大小写,但一般是小写。
同一个页面上不能有相同id
class选择器:
class属性表示“类名”
<p class="waring"> 我是段落</P>
类名的命名规范与id的命名规范相同。
class选择器非常灵活:
复合选择器:
1、后代选择器:
2、交集选择器:
3、并集选择器:
复合选择器:
总结:一定要注意空格!
伪类:
伪类的书写顺序:
爱恨准则:
link:未访问状态
visited:访问后的状态
hover:鼠标悬浮状态
active:鼠标按下不松开的状态
元素关系选择器:
子选择器:
注意子选择器与后代选择器的区分:
举例:
子选择器从IE7开始兼容。
相邻兄弟选择器:
举例:
相邻兄弟选择器从IE7开始兼容。
通用兄弟选择器:
通用兄弟选择器从IE7开始兼容。
序号选择器:
序号选择器的兼容性:
属性选择器:
CSS3新增伪类选择器:
伪元素:
CSS3新增了“伪元素”特性,顾名思义,表示虚拟动态创建的元素。
伪元素用双冒号表示,IE8可以兼容单冒号。
::selection:
::selectionCSS伪元素应用于文档中被用户高亮的部分(使用鼠标圈选的部分)。
::first-letter和::first-line:
层叠性和权重性计算:
层叠性:CSS全名叫做“层叠式样式表”,层叠性是它很重要的性质。
层叠性:多个选择器可以同时作用于同一个标签,效果叠加。
!important提升权重: