目录：
学习资料：
尚硅谷前端HTML5视频_HTML & CSS 核心基础教程（103集实战教学，从入门到精通）
一、CSS
CSS，Cascading Style Sheet，层叠样式表，用来为网页创建样式表，通过样式表可以对网页进行装饰，设置字体样式、位置等。
所谓层叠，可以将整个网页想象成是一层一层的结构，层次高的将会覆盖层次低的。
而CSS就可以分别为网页的各个层次设置样式。
二、层叠样式的类型
1 内联样式
将CSS样式编写到元素的style属性当中
<body>
<p style="color:red">我是红色的</p>
<body>
这种样式成为内联样式，只对当前的元素中的内容起作用
不方便复用。结构与表现耦合，不方便后期维护，不推荐使用
2 内部样式
将CSS样式编写到<head>中的<style>标签里
<head>
<style type="text/css">
p{color:skyblue}
</style>
</head>
3 css文件
将样式表编写到外部的css文件中，然后通过link标签来将外部的css文件引入到当前页面中。
在html文件中：
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
href的值是文件路径
在css文件中：
p{color:yellow;font-size:200px}
这样使得结果与表现完全分离，实现样式复用、统一样式
另外也可利用浏览器缓存加快用户访问速度，因为不需要再将css文件读一遍。如果使用内部样式的话，则要重新读一遍。
三、CSS基础
1 选择器
通过选择器可以选中页面中指定的元素，并且将声明块中的样式应用到选择器对应的元素上。
2 声明块
声明块紧跟在选择器的后面，使用一对{}扩起来。
声明块是一组一组的名值对结构，名是要设置的样式名，值是样式的具体值，名与值之间用:隔开
一个声明块中可以写多个声明，声明之间使用;隔开
如上例：
p{color:yellow;font-size:200px}
p为选择器，{}及包括的内容为声明块，此声明块包含两组名值对。
3 分组/分类
- class
为元素设置class属性可以对对此元素进行分类，同一元素可以属于多类，不同类名之间用空格隔开
用选择器选择元素class属性的格式为：
属性名.class_name
例如：
<body>
<p class="color yellow">my color is yellow</p>
<p class="color green">my color is green</p>
</body>
p.color{background:pink}
p.yellow{color:yellow}
p.green{color:green}
效果：
一共有两句话，第一句话的class为color和yellow，第二句话的class为color和green。
为这两句话添加相同的分红底色：p.color{background:pink}
分别设置这两句话的文字颜色：p.yellow{color:yellow} p.green{color:green}
- id
可以为元素设置id属性，id，顾名思义代表着特定的某个元素，因此id的值不能复用，而class的值可以复用
用选择器选择id属性的格式为：
属性名#id
例如：
<body>
<p id="abc">my color is yellow</p>
<p id="def">my color is green</p>
</body>
#abc {color:yellow}
#def {color:green}
效果：
4 元素的父子关系
-
父元素
直接包含子元素的元素
-
子元素
直接被父元素包含的元素
-
祖先元素
直接或间接包含后代元素的元素
-
后代元素
直接或间接被祖先元素包含的元素
-
兄弟元素
同级元素
5 后代元素选择器
作用：选中指定元素的后代元素
语法：祖先元素 后代元素
例子：
<body>
<div class="first">
<p id="abc">my color is yellow</p>
<p id="def">my color is green</p>
<span>my color is blue</span>
</div>
<span>normal span</span>
</body>
.first p {background:pink}
.first #abc {color:yellow}
.first #def {color:green}
.first span {color:blue}
效果：
6 子元素选择器
作用：选中父元素的指定子元素
语法：父元素>子元素
7 兄弟选择器
-
选择紧邻的后面的一个兄弟元素
语法：
前一个元素 + 后一个元素为sapn元素后面的p元素设置样式：
- span + p {}
-
选中后面的所有兄弟元素
语法：
前一个元素 ~ 后面所有
8 伪类选择器
伪类专门用来表示元素的一种特殊的状态，比如：访问过的超链接、普通的超链接、获取焦点的文本框，当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类。
用法：
-
正常连接：a:link
-
访问过的链接：a:visited
-
鼠标滑过时的链接：a:hover
-
正在点击的链接：a:active
<body>
<div><a href="http://www.baidu.com" target="_blank" class="a1">百度</a></div>
</body>
.a1:link{color:red}
.a1:visited{color:orange}
.a1:hover{color:grey}
.a1:active{color:black}
9 否定伪类
否定伪类语法：p:not(.class_name) {}
例如：
- 为所有的p元素设置一个北京颜色，除了class值为hello的p元素：
p:not(.hellow) {}
10 伪元素
使用伪元素来表示元素中的一些特殊的位置-
- 首字母：p:first-letter{}
- 首行：p:first-line{}
- 元素最前端的部分：p:first-letter{}
- 元素最后端的部分：p:first-letter{}
p:first-letter{color:red}
p:first-line{background:pink}
p:before{content:"我在p元素前面 "}
p:after{content:" 我在p元素后面"}
11 title属性
title属性可以给任何标签指定标题，即当鼠标移入到元素上时，元素的title属性将会作为提示弹出显示
- 为含有title属性值的元素设置样式：
p[title_name]{}
- 为特定title值得元素设置样式
p[title_name=""]{}
- 为title值以特定字符开头的元素设置样式
p[title_name^=""]{}
- 为title值包含特定字符的元素设置样式
p[title_name$=""]{}
12 样式的继承
给父级元素设置样式，子级则继承
但不是所有的样式都会被继承，如背景样式
13 选择器的优先级
当使用不同的选择器（class、title、style、id、*）选中同一元素时，要遵循优先级：
- 内联样式（style属性）：1000
- id：100
- 类和伪类：10
- 元素选择器：1
- 通配符：0
- 继承：没有
当选择器中包含多种选择器时，需要将多种选择器的优先级值相加再相加。但是，选择器的优先级值相加不会超过它的最大数量级。
如果选择器的优先级一样，则使用靠后的样式。
网友评论