一、CSS介绍：
互联网前端分三层：
HTML：超文本标记语言。从语义的角度描述页面结构；
CSS：层叠样式表。从审美的角度负责页面的样式；
JS：JavaScript。从交互的角度描述页面行为；
HTML的缺陷：
- 不能适应多种设备
- 要求浏览器必须智能化足够大
- 数据与显示没有分开
- 功能不够强大
CSS优点：
- 使数据和显示分开
- 降低网络流量
- 使整个网站视觉效果一致
- 使开发效率提高（耦合性降低，html和css能够分开写）
引入方式：
1. 行内样式：
<!--行内样式-->
<div>
<p style="color: red;">这是 一个行内样式
</p>
</div>
2. 内接样式：
<style type="text/css">
<!--内接样式css代码-->
span{
color: yellow;
}
</style>
3. 外接样式-链接式：
<!--外接样式-链接式-->
<link rel="stylesheet" href="./index.css">
4. 外接样式-导入式：
<style type="text/css">
@import url('./index.css');
</style>
二、CSS基本选择器
1. 标签选择器
标签选择器选中的是所有的标签元素，如：div、ul、p等，不管标签藏得有多深都能选中，并且是所有，而非某一个，所以说是“共性”不是特性。
body{
color:
gray;
font-size:
12px;
}
/*标签选择器*/
p{
color:
red;
font-size:
20px;
}
span{
color:
yellow;
}
2. id选择器
同一个页面中id不能重复，并且任何的标签都可以设置id；
id命名规范为：要以字母开头，可以有数字，下划线区分大小写。
/*id选择器*/
#box{
background:
green;
}
#s1{
color:
red;
}
#s2{
font-size:
30px;
}
3. 类选择器
即class：同id相似，但是相同的类名不是唯一的，可以重复多次出现，属于归类的概念。同一个标签可以携带多个类名，之间用空格分割；
类的使用能够决定css水平的高低，“公共类”也是一个重要的概念。
.lv{
color:
green;
}
.big{
font-size:
40px;
}
.line{
text-decoration:
underline;
}
<body>
<!-- 公共类 共有的属性 -->
<div>
<p class="lv big">段落1
</p>
<p class="lv line">段落2
</p>
<p class="line big">段落3
</p>
</div>
</body>
总结：
- 不要试图用一个类将我们的页面写完。这个标签要携带多个类，共同设置样式
- 每个类要尽可能的小。有公共概念，能够不让更多的标签使用
- id和class的选择：
尽可能的用class。除非一些特殊情况可以使用id，因为id一般是用在js上的。通常js通过id来获取到标签。
三、高级选择器
1. 后代选择器
使用空格表示后代选择器。父元素的后代包括：儿子、孙子等
.container p{
color:
red;
}
.container .item p{
color:
yellow;
}
2. 子代选择器
使用 > 表示子代选择器。例如：div>p，仅仅表示的是当前div元素选中的子代（不包括孙代）元素p
.container>p{
color:
yellowgreen;
}
3. 并集选择器：
多个选择器之间使用逗号隔开。表示选中的页面中的多个标签，一些共性的元素可以使用并集选择器
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
margin:
0;
padding:
0
}
/*使用此并集选择器选中页面中所有的标签，页面布局的时候会使用*/
4. 交集选择器：
使用 . 表示交集选择器。第一个标签必须是标签选择器，第二个标签必须是类选择器。语法：div.active
/*比如有一个<h4 class='active'></h4>这样的标签*/
h4{
width:
100px;
font-size:
14px;
}
.active{
color:
red;
text-decoration:
underline;
}
/* 交集选择器 */
h4.active{
background:
#00BFFF;
}
5. 属性选择器：
根据标签中的属性选中当前的标签
/*根据属性查找*/
[for]{
color:
red;
}
/*找到for属性的等于username的元素 字体颜色设为红色*/
[for='username']{
color:
yellow;
}
/*以....开头 ^*/
[for^='user']{
color:
#008000;
}
/*以....结尾 $*/
[for$='vvip']{
color:
red;
}
/*包含某元素的标签*/
[for*="vip"]{
color:
#00BFFF;
}
/**/
/*指定单词的属性*/
label[for~='user1']{
color:
red;
}
input[type='text']{
background:
red;
}
6. 伪类选择器：
CSS为一些特殊效果准备了特定的工具，我们称之为“伪类”。伪类选择器一般会用在超链接a标签中。使用a标签的伪类选择器我们需要遵循 ——
“爱恨准则”：
a:link，定义正常链接的样式；
a:visited，定义已访问过链接的样式；
a:hover，定义鼠标悬浮在链接上时的样式；
a:active，定义鼠标点击链接时的样式。
/*没有被访问的a标签的样式*/
.box ul li.item1 a:link{
color:
#666;
}
/*访问过后的a标签的样式*/
.box ul li.item2 a:visited{
color:
yellow;
}
/*鼠标悬停时a标签的样式*/
.box ul li.item3 a:hover{
color:
green;
}
/*鼠标摁住的时候a标签的样式*/
.box ul li.item4 a:active{
color:
yellowgreen;
}
7. nth-child()：
为css3中的选择器
/*选中第一个元素*/
div ul li:first-child{
font-size:
20px;
color:
red;
}
/*选中最后一个元素*/
div ul li:last-child{
font-size:
20px;
color:
yellow;
}
/*选中当前指定的元素 数值从1开始*/
div ul li:nth-child(3){
font-size:
30px;
color:
purple;
}
/*n表示选中所有,这里面必须是n, 从0开始的 0的时候表示没有选中*/
div ul li:nth-child(n){
font-size:
40px;
color:
red;
}
/*偶数*/
div ul li:nth-child(2n){
font-size:
50px;
color:
gold;
}
/*奇数*/
div ul li:nth-child(2n-1){
font-size:
50px;
color:
yellow;
}
/*隔几换色 隔行换色
隔4换色 就是5n+1,隔3换色就是4n+1
*
div ul li:nth-child(5n+1){
font-size: 50px;
color: red;
}
8. 伪元素选择器：
存在于代码中，但是不存在与内存中
/*设置第一个首字母的样式*/
p:first-letter{
color:
red;
font-size:
30px;
}
/* 在....之前添加内容 这个属性使用不是很频繁 了解 使用此伪元素选择器一定要结合content属性*/
p:before{
content:
'alex';
}
/*在....之后添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/
p:after{
content:
'&';
color:
red;
font-size:
40px;
}
/*清除浮动*/
.clearfix:after{
content:
'.';
clear:
both;
display:
block;
visibility:
hidden;
height:
0;
}
转载于:https://www.cnblogs.com/jiumo/p/9702595.html
