常见CSS样式
css中文名称：层叠样式表。
英文全称： Cascading Style Sheets,简称css。
css的作用：
在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制
目录
1.css选择器
（1）标签选择器
（2）类（class）选择器
（3）id选择器
（4）三种选择器的优先级：
2.网页中引入css样式
（1）：内联（行内）样式
（2）：内部样式表
（3）：外部样式表
(4)三种css样式优先级
3.基础样式
(1):字体样式
（2）.文本样式
(3).鼠标样式（cursor）
(4).背景样式
（5）.列表样式
4.css伪类
5.css高级选择器
6.边框样式
（1）
（2）边框颜色：
（3）边框粗细：
（4）边框简写：
7.盒子模型
（1）内边距（padding）
（2)外边距（margin）
8.display属性
9.overflow属性
10.动画
11.css浮动
12.css定位
补充
1.css选择器
（1）标签选择器
html中的所有标签都可以作为选择器
例如：
h1{}
h2{}（2）类（class）选择器
body内的所有标签都有class属性。
注：class名称可以重复使用
类选择器使用标志符（句点）开头，后面写上类的名称
例如：
bod
（3）id选择器
body内所有元素都有id属性。
注：一个页面中只能使用一个id名，id名必须是唯一。
id选择器使用散列符号（#）开头，后面写上id的名称
（4）三种选择器的优先级：
id选择器>类选择器>标签选择器
2.网页中引入css样式
（1）：内联（行内）样式
html中的所有标签都有style属性，在style属性中直接写入css样式。
例如：
这是内联样式
（2）：内部样式表
将html代码和css样式做简单分离，在网页头部创建style标签，在其中写入css样式。
（3）：外部样式表
将css样式单独写入到一个 xxx.css外部文件中。
（1）使用link标签引入外部css文件。
（2）使用@import导入外部css文件
(4)三种css样式优先级
内联样式>内部样式表>外部样式表
注：同一个标签中使用三种方式引入CSS样式，浏览器会优先执行内联样式。
3.基础样式
(1):字体样式
font-family
字体类型；例如："宋体"
font-size
字体大小；例如："20px"
font-style
字体风格；例如："italic"（倾斜）
font-weight
字体粗细；例如："300"(100-900)
（2）.文本样式
属性
属性值
举例
color
设置文本颜色
*red
*#362596
*rgb(32,250,50)
text-aligin
设置元素水平对齐方式
*left
*center
*right
text-indent
设置首行文本缩进
*20px
line-height
设置文本的行高
*30px
text-decoration
设置文本装饰
none,标准文本
underline：定义文本下划线
overline：定义文本上划线
line-through:定义穿过文本的一条线
(3).鼠标样式（cursor）
defalut
默认光标
pointer
超链接指针
wait
等待状态
help
指示可用的帮助
text
指示文档
crosshair
鼠标呈十字状
例如：cursor：pointer;
(4).背景样式
background-color
背景颜色
*red
*#362596
*rgb(32,250,50)
background-image:url(图片路径)
背景图片地址
*绝对路径
*相对路径
background-repeat
背景重复样式
*no-repeat 不重复
*repeat-x 水平重复
*repeat-y 垂直重复
*repeat 默认重复
background-position
背景定位
*像素：px
*水平方向：left、center、bottom
背景样式简写：
background:背景地址，图片重复方式，背景颜色，背景定位
* 网页开发中比较常用
* 属性值之间没有先后顺序
（5）.列表样式
list-style-type(无序列表)
*disc实体圆心（默认）
*circle空心圆
*square实体圆心
*none无列表标记
list-style-image
自定义列表标记为图片
url(图片路径)
list-style-position
列表标记定位
outside
inside
list-style-type(有序列表)
1/a/A/i/I
列表样式简写：
list-style: 1.列表标记属性 2.自定义列表标记图片 3.列表标记定位
4.css伪类
link
单机访问前
visited
单机访问后
hover
鼠标悬浮其上
active
单击未释放
div.op a:hover{
color: #be1111;
}
5.css高级选择器
并集选择器
多个选择器通过逗号连接
div,span,.one,#hello{}
交集选择器
• 由两个选择器连接构成，选中二者范围的交集，两个选择器之间不能有空格
• 第一个必须是标签选择器，第二个必须是类选择器或者 ID 选择器
div.codeup{
color:red;
font-size:20px;
}
•
div#codeup{
color:red;
font-size:20px;
}
后代选择器
外层写在前面，内层写在后面
div .codeup{
color:red;
font-size:20px;
}
子集选择器
通过>连接在一起
仅仅作用于子元素
div>.codeup{
color:red;
font-size:20px;
}
属性选择器
选取带有指定属性和值得元素
input[name]{
border:1px soild red;
}
input[type=”text”]{
border:1px soild red;
}
div[ class=“codeup”]{
color:red;
}
6.边框样式
（1）
属性
说明
样式值
border-top-style
上边框样式
*none:无边框
*solid：实线边框
*dashed：虚线边框
*dotted:双线边框
*hidden:与none相同，应用于解决边框冲突
border-right-style
右边框样式
border-bottom-style
下边框样式
border-left-style
左边框样式
border-style
设置四个边框样式
（2）边框颜色：
border-left-color,border-top-color,border-right-color,border-bottom-color。
border-color：同时设置四个边框颜色
（3）边框粗细：
border-top-width
上边框
border-right-width
右边框
border-bottom-width
下边框
border-left-width
左边框
border-width
简写
（4）边框简写：
border-top,border-right,border-bottom,border-left.同时设置各个边框的粗细，颜色，样式
border：同时设置四个边框的粗细，颜色，样式
7.盒子模型
（1）内边距（padding）
padding-top
顶部内边距
padding-right
右侧内边距
padding-bottom
底部内边距
padding-left
左侧内边距
box-sizing属性：
content-box:•盒子的实际宽度和高度仅应用于元素内容，不包括内边距和边框
*默认，撑大容器以改变内边距
border-box:•盒子的实际高度和宽度包括元素内容、边框和内边距
*大小不变，改变元素位置以改变内边距
（2)外边距（margin）
margin-top
顶部外边距
margin-left
左侧外边距
margin-right
右侧外边距
margin-bottom
底部外边距
8.display属性
*控制元素显示和隐藏
*块级元素和内联元素的转变
none
元素不被显示
inline
元素显示为内联元素
block
元素显示为块级元素
inline-block
元素显示为行内块元素
9.overflow属性
*超出容器的内容
overflow:auto; 自适应，如果内容超出容器，会以滚动条的形式
overflow：hidden;超出内容被隐藏
注：word-break:break-all; 容器中英文与数字不会自动换行，该属性能使之换行
10.动画
transition ：过度动画； 例如：transition: linear 0.5s all; linear(匀速)
transform：将元素转为2d或3d；transform：scale(1.2); 缩放1.2倍
11.css浮动
float:left;左浮动
float:right;右浮动
clear属性：
*clear属性规定了在元素那一侧不允许有浮动元素
both
左右两侧不允许浮动元素
left
左侧不允许浮动元素
right
右侧不允许浮动元素
12.css定位
position属性：
static
默认值，没有定位
relative
相对定位
*不会脱离标准文本流
*基于自身原来的位置进行偏移
*元素基于top,left,right,bottom四个方位进行偏移
absolute
绝对定位
*会脱离标准文本流
*以最近的一个已经定位的祖先元素为基准进行偏移
*元素基于top,left,right,bottom四个方位进行偏移
fixed
固定定位
*相对于浏览器窗口进行定位，不会根据滚动条移动
*会脱离标准文本流
*元素基于top,left,right,bottom四个方位进行偏移
z-index属性：
*调整元素定位时重叠层的上下位置
*默认为0，值大的在值小的之上
css伪元素：
例：.one::after{content:""} 在类名为one的内容之后加内容
补充：
1.-wekit-appearance:none; 去掉浏览器提供的默认样式
2. outline:none; 去掉标签默认边框
3. box-shadow: 水平阴影距离，垂直阴影距离，阴影模糊距离，阴影颜色;
4.rgba(0,0,0,0.3) 调整透明度