1. 什么是CSS
层叠样式表 (Cascading Style Sheets)
样式通常存储在样式表中
解决内容与表现分离的问题
多个样式定义可层叠为一个
2. CSS发展史
CSS1.0：基本样式美化
CSS2.0 ：div(块)+css,html与css结构分离
CSS2.1：浮动，定位
CSS3.0：圆角，阴影，动画....
使用CSS的好处：
- 内容和表现分离
- 网页结构表现单一，可以实现复用
- 样式十分丰富
- 有利于SEO，容易被搜索引擎收录
3. 三种引入CSS的方式
- 行内样式：在标签元素中，使用style属性，编写样式即可。
- 内部样式：在head标签中，增加style，声明样式。
- 外部样式：新建一个css样式表，使用link标签引入。（推荐使用）
外部样式导入：<link rel="stylesheet" href="css/index.css">
样式优先级：行内样式>内部样式>外部样式，就近原则
4. 选择器
4.1 三种基本选择器
作用：选择页面上某一个或者某一类元素
分类（3种）：
-
标签选择器：选择一类标签 标签{}
-
class选择器：选择所有class属性一致的标签 .类名{}
-
id选择器：全局唯一 #id名{}
优先级：不遵循就近原则，id选择器>class选择器>标签选择器
4.2 高级选择器
1、后代选择器：在某个元素的后面
/* 后代选择器 */
body p{
background-color: #01A252;
}
2、子选择器 :一代的所有元素
/* 子选择器 */
body>p{
background-color: red;
}
3、相邻兄弟选择器:同辈（向下第一个）
/* 相邻兄弟选择器 */
.active + p{
background-color: green;
}
4、通用选择器：选中当前元素向下的所有兄弟元素
/* 通用选择器 */
.active~p{
background-color: blue;
}
<!DOCTYPE html>
<html>
<head>
<style>
/* 后代选择器 */
/* body p{
background-color: #01A252;
} */
/* 子选择器 */
/* body>p{
background-color: red;
} */
/* 相邻兄弟选择器 */
/* .active + p{
background-color: green;
} */
/* 通用选择器 */
.active~p{
background-color: blue;
}
</style>
</head>
<body>
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<ul>
<li><p>p4</p></li>
<li><p>p5</p></li>
<li><p>p6</p></li>
</ul>
<p>p7</p>
</body>
</html>
4.3 结构伪类选择器
<!DOCTYPE html>
<html>
<head>
<style>
/* ul的第一个子元素 */
ul li:first-child{
background-color: red;
}
/* ul的最后一个子元素 */
ul li:last-child{
background-color: red;
}
/* 选中p1:定位父元素,选择当前p元素的父级元素,选中父级元素的第一个并且是p元素才生效. 按顺序 */
p:nth-child(1){
background-color: green;
}
/* 选中p1:定位父元素,选择当前p元素的父级元素,选中父级元素下的第3个p元素生效. 按类型 */
p:nth-of-type(3){
background-color: green;
}
/* 悬浮变色 */
a:hover{
background-color: yellow;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
<p>p7</p>
<ul>
<li>li4</li>
<li>li5</li>
<li>li6</li>
</ul>
<a href="">这是一个超链接</a>
</body>
</html>
4.4 属性选择器（常用）
<!DOCTYPE html>
<html>
<head>
<style>
.demo a{
float:left;
display: block;
height: 50px;
50px;
border-radius: 10px;
background: gray;
text-align: center;
color:red;
text-decoration: none;
margin-right: 5px;
font:bold 20px/50px arial;
/* line-height: 50px; */
}
/* 属性名,属性名=属性值(可以使用正则）)
=绝对等于
*=包含这个元素
^=以这个元素开头
$=以这个元素结尾 */
/* 存在id属性的元素 */
/* a[id]{
background: green;
} */
/* id=last的元素 */
/* a[id=last]{
background: green;
} */
/* class中包含links的元素 */
/* a[class*=links]{
background: green;
} */
/* 选中href中以开头的元素 */
/* a[href^=http]{
background: green;
} */
/* 选中href中以doc结尾的元素 */
a[href$=pdf]{
background: green;
}
</style>
</head>
<body>
<p class="demo">
<a href="1.doc" class="links item first" id="first">1</a>
<a href="2.doc" class="links item active" title="test" target="_blank">2</a>
<a href="3.xml" class="links item">3</a>
<a href="4.xml" class="links item">4</a>
<a href="http.doc" class="links item">5</a>
<a href="6.doc" class="links item">6</a>
<a href="http.jpg" class="links item">7</a>
<a href="8.jpg" class="links item">8</a>
<a href="9.pdf" class="links item">9</a>
<a href="10.pdf" class="links item last" id="last">10</a>
</p>
</body>
</html>
5. 美化网页元素
5.1 为什么要美化网页(span标签)
- 有效的传递页面信息；
- 美化网页，吸引用户；
- 凸显页面的主题；
- 提升用户体验。
5.2 字体样式
font-family:字体种类
font-size:字体大小
font-weight:字体粗细
color:字体颜色
5.3 文本样式
- 颜色：color RGB RGBA
- 文本对齐方式：text-align:center
- 段落首行缩进：text-indent:2em
- 行高：line-height 单行文字上下居中
- 装饰：text-decoration
- 文本图片水平对齐：vertical-align:middle
- 阴影：
/* text-shadow:阴影颜色 水平偏移 垂直偏移 阴影半径 */
#first{
text-shadow:#3cc75f 10px -10px 2px;
}
- 超链接伪类：
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
注意：伪类的名称不区分大小写。
-
背景
background-image /*添加背景图片*/ background-size /*规定背景图片的尺寸。*/ background-origin /*规定背景图片的定位区域。*/ background-clip /*规定背景的绘制区域。*/ -
渐变
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
径向渐变（Radial Gradients）- 由它们的中心定义
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
6. 盒子模型
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
元素大小计算：
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
6.1 margin(外边距)
margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
margin:25px 50px 75px 100px; /*上右下左 顺时针*/
margin:25px 50px 75px; /*上 左右 下*/
margin:25px 50px; /*上下 左右*/
margin:25px; /*所有4个边距都是25px*/
6.2 border(边框)
指定一个元素边框的样式和颜色。
border:5px solid red;/*边框的像素 边框的线型 边框的颜色*/
6.3 padding(填充)
当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。
单独使用 padding 属性可以改变上下左右的填充。
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
padding:25px 50px 75px 100px; /*上右下左 顺时针*/
padding:25px 50px 75px; /*上 左右 下*/
padding:25px 50px; /*上下 左右*/
padding:25px; /*所有4个边距都是25px*/
7. display(显示)
块级元素(block)特性：
- 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
- 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性：
- 和相邻的内联元素在同一行;
- 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;
块级元素主要有：
- address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
内联元素主要有：
- a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
可变元素(根据上下文关系确定该元素是块元素还是内联元素)：
- applet ,button ,del ,iframe , ins ,map ,object , script
CSS中块级、内联元素的应用：
利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。
主要用的CSS样式有以下三个：
- display:block -- 显示为块级元素
- display:inline -- 显示为内联元素
- display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
我们常将所有