标签：css选择器
1.如何使用CSS
四中方式：
1.外链式：使用link标签引入指定的CSS文件
<link href=”css的地址” rel=”stylesheet” type=”text/css”>
2.导入式:使用style标签配合@import 语法引入指定的CSS文件
<style>
@import url(“css文件地址”);
</style>
3.嵌入式：将CSS代码直接书写在HTML文件的STYLE标签
<style>
Body{color:cyan;}
</style>
4.内联式：直接在标签内部以style属性的方式引入CSS属性
<标签 style=”CSS属性”></标签>
2.选择器
现在css2.0中一共有七种选择器：
HTML元素选择器：
页面中任何一个存在的标签都是一个已经存在的选择器，可以选中页面中的所有同名标签，进行样式设定。
类（class）选择器：
在指定的元素中添加class属性，并且指定一个值，那么所有带有当前属性和值得元素会被归结为一类当中，在CSS中可以使用.class值得方式选中所有带有class属性和值得元素。
ID选择器：
在指定的元素中添加ID属性，并且指定一个值，#+ID值得方式来选中元素。
组合选择器：
多个选择器使用同一组样式时，可以使用所有选择器用逗号分隔的方式，只写一份CSS样式。
关系选择器或者后代选择器：
具有嵌套关系的标签可以使用外部标签的选择器 内部标签的选择器的方式选定指定部分。
通用选择器：
选中页面中的所有元素
*{margin:0;padding:0;list-style:none;}
伪元素选择器：
选中的不是某个标签，而是标签的具体状态。
正常连接(正常状态) :link
鼠标经过 :hover
鼠标点击 :active
访问过后 :visited
只有超链接标签有这四种状态，其他标签只有:hover
3.字体相关属性
Font-size 设置字体的大小，可以无限大，但是不能无限小
值为长度单位：
Px 像素
Em 一个汉字的大小
Ex 一个英文x的大小
% 百分比
Color 设置字体的颜色
颜色值：
1.英文单词：red,green,blue
2.Rgb模式
3.HEX模式，如果三种颜色的每两位值都相同，例如：#FFAAFF，就可以简写成#FAF。
Font-weight 设置字体的粗细
Normal 正常字体
Bold 加粗
800 加粗
Font-style 是否斜体
Normal 正常字体
Italic 斜体
Oblique 没人用的斜体
Font-variant 设置字母的大小写
Normal 正常字体
Small-caps 设置为小型的大写字母
Font-family 设置字体的类型
一般情况下不要设置
4.文本属性
Text-decoration 文本修饰属性
None 没有修饰或者说去掉下划线
Underline 下划线
Overline 上划线
Line-through 中横线
Text-indent 设置内容的首行缩进
值为长度单位
一般建议用em
Line-height 设置单行的文本高度
值为长度单位，作用：单行文本垂直居中
Text-align 设置内容的水平对齐方式
Left 左对齐
Center 居中对齐
Right 右对齐
1.div和span
Div 无意义标签，在页面布局中标识块状
Span 无意义标签，在页面布局中标识行内标签
2.背景属性
Background-color 设置元素的背景颜色
值为颜色值
Background-image 设置元素的背景图片
格式：background-image:url(图片地址);
Background-repeat 设置背景图片的重复方式
Repeat 所有方向重复，默认值
Repeat-x 横向重复
Repeat-y 纵向重复
No-repeat 不重复
Background-position 背景图片位置属性
格式：background-position：横向坐标 纵向坐标
坐标值不仅可以使用长度单位，还可以使用位置单词：
横坐标单词：left 左边 right 右边 center 中间
纵向坐标单词：top 上 center 中间 bottom 下
*Background-attachment 设置背景图片的滚动方式
Scroll 背景图片跟随内容一起滚动，所有的默认值
Fixed 背景图片绑定在页面中不滚动
Background 背景综合属性
所有的背景属性可以在当前属性中直接书写，而且没有先后顺序
3.边框属性
Border-width: 设置四个边框的宽度
Border-color: 设置四个边框的颜色
Border-style: 设置边框的样式
Solid 单实线
Double 双实线
Dashed 虚线
Border:宽度 颜色 风格
上面三个属性不可以少，可以更改顺序
Border-left 设置左边的边框
4.列表属性
List-style-type: 设置列表的标识类型
None 不要标识
Decimal 数字标识
Disc 实心圆
Circle 空心圆
List-style-image 设置列表的图片
格式：list-style-image:url(“图片地址”);
List-style-position 设置列表表示的位置
Outside 标识在内容之外 默认值
Inside 标识在内容之内
List-style 列表综合属性
1.外间距属性margin
Margin-top
Margin-left
Margin-right
Margin-bottom
Margin:的使用方式
一个值的使用方式：
Margin: 上下左右
两个值的使用方式：
Margin: 上下 左右
三个值的使用方式：
Margin:顶部 左右 底部
四个值的使用方式：
Margin:上 右 下 左
居中：margin: 上下值 auto
2.padding 内间距/内补白
Padding-left
Padding-right
Padding-top
Padding-bottom
Padding的使用方式：
四个值的使用方式：顶部 右侧 底部 左侧
三个值的使用方式：上 左右 下
两个值的使用方式： 上下 左右
一个值得使用方式：上下左右
布局属性
float 元素浮动属性
left 元素左浮动
right 元素右浮动
none 元素不浮动
一个元素设置了float属性相当于一块石头变成了木头，浮在水面上，水面之下是空白的，后面的元素可以再木头之下存在。
注意：浮动之后的属性不占用物理空间。
所有浮动的元素，高度最好给给死。
clear 清除浮动
left 清除左浮动
right 清除右浮动
both 清除左右浮动
display 设置元素的显示方式
none 将元素设置为不显示
block 将元素设置为块状元素
inline 将元素设置为行内元素
*inline-block 将元素设置为行内块状元素（不要用来布局）
overflow 设置元素的溢出方式
hidden 超出部分隐藏
scroll 超出部分出现滚动条
visible 超出部分显示，默认值
visibility 设置元素是否显示（极少使用）
hidden 隐藏元素
visible 显示元素
本文出自 “青春笔录” 博客，请务必保留此出处http://foreverlovephp.blog.51cto.com/10018264/1835466
标签：css选择器
原文地址：http://foreverlovephp.blog.51cto.com/10018264/1835466
