目录
什么是CSS
Cascading Style Sheet 层叠级联样式表
CSS：表现层（美化网页）
字体，颜色，边距，高宽，背景图片，网页定位，网页浮动。。。
CSS的导入方式
行内样式
内部样式
外部样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导入方式</title>
<!-- 外部样式,链接式 链接css文件-->
<link rel="stylesheet" href="css/style.css">
<!-- 外部样式 导入式，不推荐使用-->
<style>@import "css/style.css";</style>
<!-- 内部样式-->
<style>
/*style标签内只能是css代码，注释样式为“/* * /”*/
h1{
color: green;
}
</style>
</head>
<body>
<!--行内样式，在标签元素中，添加style属性，参数中直接写声明句-->
<h1 style="color: red">h1</h1>
</body>
</html>
注：在多个样式同时对一个元素进行样式设置时，遵循“就近原则”
选择器
作用：选择页面上的某一个或者某一类元素
基本选择器：
- 标签选择器：选择页面中所有该标签元素：标签名{}
- 类选择器：选择页面中所有该类元素：.类名{}
- id选择器：选择页面中id对应的元素：#id{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
/*标签选择器:会选择页面上该标签的所以元素*/
h1 {
color: green;
}
/*类选择器的格式：.class的名字{}*/
.a{
color: red;
}
/* id选择器：#ID名称{} 注意：全局id必须唯一*/
#h{
font-size: 100px;
}
</style>
</head>
<body>
<h1 class="a">标题1</h1>
<h1>标题2</h1>
<p class="a">内容1</p>
<p id="h">内容2</p>
</body>
</html>
注意：在这三个选择器之间，存在明确的优先级，不遵循所谓就近原则，优先级：id选择器＞类选择器＞标签选择器。
层次选择器：
- 后代选择器: 1 2{}会选择1内所有的2元素
- 子选择器: 1>2{}会选择1下所有2（只能一代）
- 相邻兄弟选择器 ：1+2{}选择！紧跟！1的所有2元素（1可能是多个，每个1最多只能选择一个2）
- 通用兄弟选择器：1~2{}选择1后面所有兄弟关系的2元素
/*后代选择器: 1 2{}会选择1内所有的2元素*/
body p{
color: red;
}
/*子选择器: 1>2{}会选择1下所有2（只能一代）*/
body>p{
color: green;
}
/*相邻兄弟选择器 ：1+2{}选择！紧跟！1的所有2元素
（1可能是多个，每个1最多只能选择一个2）*/
p + h1{
color: gray;
}
/*通用兄弟选择器 1~2{}选择1后面所有兄弟关系的2元素*/
p~p{
color: blue;
}
注意：其中1、2可以使用包括标签、类、id选择器的格式，且在以上四种选择器之间，应该没有明显优先级，遵循就近原则和基本选择器的优先级。考虑基本选择器的优先级时，以2的优先级为准。
结构伪类选择器
/*第一个元孩子素*/
nl li:first-child{
color: red;
}
/*最后一个儿子元素*/
nl li:last-child{
color: green;
}
/*选择第i个 1:nth-child(i)选择1的父元素内的第i个子元素，且只有在父元素的
第i个子元素是1时，才生效*/
p:nth-child(1){
color: gray;
}
/*1:nth-of-type(i) 选择1父元素内第i个类型为1的子元素*/
p:nth-of-type(2){
color: blue;
}
属性选择器
通过属性甚至属性的值来选择元素
/*1[2]{} 存在2属性的1类型的元素*/
a[id]{
}
/*1[2=3]{} 存在2属性的值等于3的1类型的元素
可以使用*=表包含3或者^=表示以3开头，$=表示以3结尾*/
a[id="123"]{}
美化网页元素
字体样式
文字的字体、文字大小、颜色等属性
body{
/*字体 可以设置两种用逗号隔开，中英文分别应用两种*/
font-family: 楷体;
/*字体大小*/
font-size: 50px;
/*字体粗细*/
font-weight: bold;
}
/*也可一行设置多个属性：*/
p{
font: oblique bold 16px 楷体;
}
文本样式
背景颜色、对其方式、首行缩进、行距和装饰等
/*文字与图片居中对齐*/
a,b{
vertical-align: middle
}
body{
/*颜色color 可以#xxxxxx表示rgb颜色，或者直接颜色命
或者使用rgb()rgba()函数，后者多一个透明度参数*/
color: rgb(0, 0, 0);
/*排版：居中等*/
text-align: center;
/*首行缩进 em为一个字母位置*/
text-indent: 2em;
/*行高和块高，如果一样可以有上下居中的效果*/
height: 100px;
line-height: 100px;
/*上、下、中划线 设置划线颜色大多浏览器不支持
同时只能有一个划线，应该遵循覆盖的就近原则*/
text-decoration-color: #d60005;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
/*超链接去除下划线*/
text-decoration: none;
/*阴影 参数：阴影颜色，水平垂直偏移，模糊半径*/
text-shadow: black 5px 5px 1px
}
超链接伪类
让超链接在被选中或者点击等状态时，有不同的形态
/*正常显示*/
a{}
/*鼠标悬浮的状态*/
a:hover{}
/*鼠标悬浮未释放的状态*/
a:active{}
/*已访问的链接（点过链接紫色的样子）*/
a:visited{}
列表样式
可以更改列表中点的样式或者去掉点
复习之前内容
#nav{
width: 300px;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
}
ul li{
height: 30px;
/*列表的点 none：去除 circle：空心圆 decimal：数字123. square正方形*/
list-style: none;
text-indent: 1em;
}
a{
text-decoration: none;
}
a:hover{
color: orange;
text-decoration: underline;
}
背景
背景颜色、图片
渐变背景
div{
width: 1000px;
height: 700px;
border: 1px solid red;
/*设置背景：默认为平铺*/
background: image("xxx/xxx.jpg");
/*横向平铺和纵向平铺不平铺*/
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
}
Grabient是一个在GitHub上开源的项目，可以获取各种渐变背景的CSS代码。
盒子模型
元素大小=margi+border+padding+内容
margin：外边距
padding：内边距
border：边框
border
在最上方选择body标签可以进行边距、字体等的初始化
/*设置默认边距为0 初始化*/
body{
margin: 0;
padding: 0;
text-decoration: none;
}
from{
background: blue;
}
#box{
/*border:粗细，样式，颜色*/
width: 300px;
border: 1px solid red;
/*外边距*/
padding: 0;
}
/*结构伪类选择器搭配子类选择器*/
/*border: solid实线，dashed虚线*/
div:nth-of-type(1) input{
border: 3px solid black;
}
div:nth-of-type(2) input{
border: 3px dashed black;
}
div:nth-of-type(3) input{
border: 3px dashed black;
}
margin&padding
可以用来居中
#box{
/*可以是1、2、4个参数，1个参数代表上下左右边距一样
2个参数则分别为上下、左右边距，4个分别为上、下、左、右
auto即可设置自动居中 也可使用margin-xxx分别单独设置上下左右属性*/
margin: 0 auto;
}
圆角边框
实现按钮等元素的圆角
绘制圆形扇形
div{
width: 100px;
height: 100px;
border: 10px solid red;
/*边框圆角大小：一个参数则四个角相等
两个参数则左上右下一样，剩下两个一样
四个参数则从左上开始顺时针*/
border-radius: 50px 20px 10px 5px;
/*可以用来画圆，当圆角大小大于（高宽的一半加上边框粗细）就是圆*/
border-radius: 60px;
/*扇形需要三个角为0，另一个圆角大小为（两倍边框粗细加上div的边长）*/
}
盒子阴影
div{
width: 100px;
height: 100px;
border: 10px solid red;
box-shadow: 10px 10px 100px yellow;
}
浮动
块级元素：独占一行 h1~h6 p div 列表…
行内元素：不独占行 span a img strong…
行内元素可以被包含在块级元素中，反之则不可以。
display和float
div{
width: 100px;
height: 100px;
border: 1px red;
/*display: xxx; inline:变为行内元素 block：变为块元素
inline-block 块元素但是可以内联，在一行*/
display: inline;
/*浮动：float 左右浮动*/
float: right;
/*clear：不允许有浮动元素 both：两侧 right、lefe：左、右
none 默认 允许*/
clear: right;
}
父级边框塌陷问题
增加父级元素的高度：固定了父元素高度，就会被限制
在父级元素内最底部增加一个空的div块，清除两侧浮动：简单，但代码中应该尽量避免空div
在父类添加一个伪类：稍微复杂，没有副作用，推荐使用
#father{
border: 1px #000 solid;
height: 800;
}
.clear{
padding: 0;
margin: 0;
clear: both;
}
#father:after{
content: '';
display: block;
clear: both;
}
overflow
如果块内内容大小超过了块所规定的大小，可以使用overflow来控制隐藏超出部分或者添加块内滚动条。
其中overflow：hidden；放在父元素中，可以用来解决父级边框塌陷的问题。但是下拉的一些场景避免使用。
#content{
width: 200px;
height: 100px;
/*overflow: ; hidden:超出部分隐藏 scroll：滚动条*/
overflow: hidden;
}
定位
相对定位
相对定位：position: relative;
相对于自己原来的位置进行指定的偏移，但是，在标准文档流中，仍然处在原来的位置不变（比如说最后一个div进行向下的偏移，并不会使得父级元素的大小向下扩展）
div{
/*相对于自己原来的位置移动*/
position: relative;
/*上下左右移动*/
top: -20px;
}
绝对定位
定位：基于xxx定位，上下左右
若没有父级元素定位，基于浏览器定位
如果父级元素有绝对或者相对定位，则基于父元素定位
在标准文档流中，原来的位置会被改变
div{
position: absolute;
right: 100px;
}
固定定位
fixed：相对于窗口定位
div{
/*固定定位fixed*/
position: fixed;
bottom: 300px;
left: 50px;
}
z-index
图层堆叠
div{
/*设置图层，默认是0，在最底层*/
z-index: 10;
/*设置透明度 此下两句等价*/
opacity: 0.5;
filter: alpha(opacity=50);
}