1.导入格式
- 内部样式：在head中使用style标签，在style中直接编写css代码
<style>
h1{
color: green;
}
</style>
- 外部样式（推荐使用）:在head中用link标签，link标签中的href中填写css文件的地址
<link rel="stylesheet" href="css/style.css">
- 行内样式：在标签元素中，编写一个style属性，编写样式即可
<h1 style="color: red">我是标题</h1>
优先级：就近原则，谁离代码最近，谁的优先级最高（即行内样式最高，外部样式和内部样式谁在下面谁优先）
2.选择器
基本选择器
- 标签选择器：选择页面上所有的这个标签的元素
h1{}
p{}
- 类选择器:选中所有该类的标签
.class{}
- id选择器:选中该id的标签(id必须全局唯一)
#id{}
优先级：不遵循就近原则！id选择器>类选择器>标签选择器
层次选择器
- 后代选择器：父级元素下所有的该标签
div div{}
body p{}
- 子选择器:父级元素下的第一代标签元素（只有一代）
body>p{}
- 相邻兄弟选择器:只选中一个，为该元素同级向下的第一个元素
.active+p{}
- 通用选择器:选中该元素同级向下的所有元素
.active~p{}
结构伪类选择器
ul的第一个元素
ul li:first-child{
background: cornflowerblue;
}
ul的最后一个元素
ul li:last-child{
background: #cb7b1c;
}
选中p元素，定位到其父元素，若父元素下的第一个子元素为p，则这个p元素的背景元素为红色
p:nth-child(1){
background:red
}
选中父元素下的p元素的第二个
p:nth-of-type(2){
background: darkgray;
}
属性选择器
/*选中class中含有links的元素*/
a[class*="links"]{
background: green;
}
/*选中有id的元素*/
a[id]{
background: yellow;
}
/*选中href中以/开头的元素*/
a[href^="/"]{
background: #cb7b1c;
}
/*选中href中以.doc结尾的元素*/
a[href$=".doc"]{
background: deeppink;
}
- =：绝对等于
- *=：包含
- ^=：以……开头
- $=：以……结尾
3.美化网页元素
span标签
span元素是无语义的行内元素，它可以对元素进行分组，使它们以不同的样式显示
字体样式
- font-size：字体大小
- font-weight：字体粗细
-
font-family：字体选择（楷体、宋体等）
可以将所有样式写在一起：
字体风格（斜体等） 字体粗细 字体大小 字体选择
p{
font: oblique bolder 50px "楷体";
}
文本样式
text-align 排版（center居中）
text-indent 首行缩进（单位为em）
行高(line-height)和框的高度(height) 一致即可上下居中
text-decoration: underline 下划线
text-decoration: line-through 中划线
text-decoration: overline 上划线
text-decoration: none 超链接去下划线
文字与图片水平对齐（用span标签将文字选中）
img,span{
vertical-align: middle;
}
超链接伪类
- 鼠标悬浮的状态
a:hover{}
- 鼠标按住未释放的状态
a:active{}
- 阴影
text-shadow:阴影颜色 水平偏移 垂直偏移 阴影半径
列表
- list-style：none 去掉圆点
- list-style：circle 空心圆
- list-style：square 正方形
- list-style：decimal 数字
背景
- 背景加图片
background-image: url("图片地址");
- 图片平铺方式
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
- 写在一起为：
background: 背景颜色 url("图片地址") 图片位置（eg：10px 5px） 平铺方式;
渐变
渐变css源码网址
点击跳转
4.盒子模型
- 外边距：margin
- 内边距：padding
-
边框：border
外边距的妙用：居中元素（前提：1. 块元素 2. 有固定的宽度）
margin：0 auto
边框圆角
border-radius
当border-radius、width、height相同时，可变成圆形
5.display
- display：none 此元素不会显示
- display：block 此元素将显示为块级元素，此元素前后会带有换行符
- display：inline 默认。此元素会被显示为内联元素，元素前后没有换行符
- display：inline-block 行内块元素，是块元素，但可以内联，在同一行
6.浮动
float：left/right/none
清除浮动
clear:right 右侧不允许有浮动
left 左侧不允许有浮动
both 两侧不允许有浮动
父级边框塌陷问题解决
- 增加一个新的空标签，清除浮动
<div class="clear1"></div>
.clear1{
margin: 0;
padding: 0;
clear: both;
}
- 在父级元素中增加一个overflow：hidden
- 父类添加一个伪类after
#father:after{
content: '';
display: block;
clear: both;
}
7.定位
相对定位
position：relative
生成相对定位的元素，相对于其正常位置进行定位(仍然在标准文档流中，原来的位置会被保留)
![CSS的伪元素和伪类的区别[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)