CSS属性.docx
《CSS属性.docx》由会员分享，可在线阅读，更多相关《CSS属性.docx（9页珍藏版）》请在冰豆网上搜索。
CSS属性
CSS属性
1.字体相关属性
font-size设置字体的大小，可以无限大，但不能无限小
值为长度单位：
px像素单位
em一个汉字的大小
ex一个英文x的大小
%百分比
color设置字体的颜色
颜色值
英文单词red,green,blue
Rgb模式
HEX模式如果三种颜色的每两位值都相同。
例如#FFAAFF，可以缩写成#FAF
font-weight设置字体的粗细
normal正常字体
bold粗体或者使用800即可
font-style字体风格，设置是否是斜体
normal正常字体
italic斜体或者oblique（没人用）
font-variant:
设置字体的字母的大小写
normal正常字体
Small-caps:
设置为小型大写字母（仅对英文有效）
font-family:
设置字体的类型
各种字体的名称，注意，字体必须是客户端系统中存在的字体
font综合属性
可以将所有的字体属性使用一个属性名写出来。
（顺序不可以变）
字体综合属性的顺序
font：
[[||||]?
[/]?
]
一般不用，因为顺序难以掌握。
2.背景属性
Background-color:
设置元素的背景颜色
值为颜色值
Background-image设置元素的背景图片
格式：
background-image:
url（图片地址）
Background-repeat:
设置背景图片的重复方式
repeat所有方向重复默认值
repeat-x横向重复
repeat-y纵向重复
No-repeat不重复
Background-position:
背景图片位置属性
派生子属性
Background-position-x:
设置背景图片的横向坐标
Background-position-y:
设置背景图片的纵向坐标
Background-position:
横向坐标纵向坐标
坐标值：
可以使用长度单位也可以使用位置单词
x单词:
left左center中right右
y单词:
top上center中bottom下
Background-attachment:
设置背景图片的滚动方式
scroll：
背景图片跟随内容一起滚动
fixed：
背景图片绑定在页面中不滚动
一般用于body标签。
Background:
背景综合属性
所有背景属性都可以在当前属性中直接书写，而且没有先后顺序。
3.文本属性：
text-decoration:
文本修饰属性
none没有修饰或者去掉下划线
underline下划线
overline上划线
Line-through横穿线删除线中横线
Text-indent:
设置内容的首行缩进
值为长度单位，一般使用em
Line-height:
设置单行的文本高度
值：
长度单位
作用：
设置单行文本垂直居中。
Text-align:
设置内容的水平对齐方式
left左对齐
center居中对齐
right右对齐
Vertical-align:
设置行内元素的垂直对齐方式
top顶部对齐
middle居中对齐
bottom底部对齐
注意：
当前属性仅对内联元素有效，然而正常的内联元素并没有宽度和高度，他对表格的支持不错，单行文本的垂直居中可以使用line-height来实现
边框属性border
border同时设置四个边的边框宽度,风格,颜色
格式：
Border:
宽度颜色风格；不限顺序
按照值划分出三种属性
Border-width：
设置四个边框的宽度
Border-style：
设置四个边框的风格
Border-color:
设置四个边框的颜色
按照方向划分四种属性：
Border-top:
设置顶部边框的颜色宽度和风格
Border-bottom:
设置底部边框的颜色宽度和风格
Border-left:
设置左侧边框的颜色宽度和风格
Border-right:
设置右边框的颜色宽度和风格
按照方向划分完毕再按照值划分12种属性
Border-top-width:
设置顶部边框的宽度
Border-top-style:
设置顶部边框的风格
Border-top-color:
设置顶部边框的颜色
Border-bottom-width:
设置底部边框的宽度
Border-bottom-style:
设置底部边框的风格
Border-bottom-color:
设置底部边框的颜色
Border-left-width:
设置左侧边框的宽度
Border-left-style:
设置左侧边框的风格
Border-left-color:
设置左侧边框的颜色
Border-right-width:
设置右侧边框的宽度
Border-right-style:
设置右侧边框的风格
Border-right-color:
设置右侧边框的颜色
内间距/内补白属性padding
padding-top:
设置元素顶部的内补白
Padding-bottom:
设置元素底部的内补白、
Padding-left:
设置元素左侧的内补白
padding-right:
设置元素右侧的内补白
padding:
元素内补白的综合属性设定
使用方式：
四个值的使用方式
padding:
顶部右侧底部左侧;
三个值的使用方式
padding:
顶部左右侧底部;
两个值的使用方式：
padding:
上下左右;
一个值的使用方式：
padding:
上下左右
注意：
正常的width和height设定设置的是元素的内容高度。
padding在增加的时候不会考虑元素内部内容的问题，直接将补白属性添加到元素中，会导致元素宽高发生变化。
如果要保证元素本身宽高固定，增加padding的情况下，需要减少宽高设定。
外间距属性margin：
margin-top:
设置元素顶部的外间距
margin-bottom:
设置元素底部的外间距、
margin-left:
设置元素左侧的外间距
margin-right:
设置元素右侧的外间距
margin:
元素外间距的综合属性设定
使用方式：
四个值的使用方式
margin:
顶部右侧底部左侧;
三个值的使用方式
margin:
顶部左右侧底部;
两个值的使用方式：
margin:
上下左右;
一个值的使用方式：
margin:
上下左右
注意：
margin设置不会改变元素本身的大小，调整margin也不会改变外部元素的大小。
margin的特殊作用:
设置元素水平居中margin:
上下值auto
对于body标签自带8像素的margin，所以一般在使用时会先去除。
内容：
content:
注意使用content属性必须和伪元素选择器中的。
列表属性list-style：
List-style-type：
设置列表的标识类型
none不要标志
decimal数字标识
disc实心圆
circle空心圆
List-style-image:
设置列表标识的图片
格式：
url（图片地址）
List-style-position：
设置列表标识的位置
outside标志在内容之外默认
inside标志在内容里面
List-style列表标识综合属性
定位属性：
position定位方式设置属性
absolute绝对定位方式鱼缸外部
relative相对定位方式鱼缸底部（可以移动的东西）
static静态定位（默认值）不能移动的东西
Fixed绑定定位相对于页面进行定位
相对定位和绝对定位的区别
1.绝对定位的元素已经脱离文档流（鱼缸外），而相对定位元素并没有脱离，只是可以移动。
2.关于定位参考点：
相对定位的参考点是以当前元素原来的位置进行计算。
绝对定位的参考点是当前元素最近的外部非静态定位元素，如果没有非静态定位元素，则以body体进行定位。
left设置距离参考点左侧的距离
right设置距离参考点右侧的距离
top设置距离参考点顶部的距离
bottom设置距离参考点底部的距离
z-index：
设置元素的显示顺序。
在同样定位属性的前提下（不是static定位），z-index的数值越大，显示越靠前，所有的元素默认z-index是0;z-index的取值可以是正数负数也可以是0;
布局属性：
float元素浮动属性
Left元素左浮动
right元素右浮动
Clear:
清除浮动
left清除左浮动
right清除右浮动
both清除左右浮动
注意：
一个元素设置了float属性相当于由一块石头变成一块木头，浮在水面上，水面之下是空白的，后面的元素可以在木头元素之下存在，如果不想存在与其元素之下，需要使用clear属性，保证其另起一行。
float主要用于页面的左右布局以及横向导航等类似效果。
display设置元素的显示方式、
none将元素设置为不显示，该方式不会占用物理空间，
block将元素设置为块状元素
inline将元素设置为行内元素
Inline-block将元素设置为行内块状元素。
（不要用来布局）
Visibility设置元素是否显示
设置元素显示或者隐藏，占用物理空间（穿了隐身衣）
inherit继承元素的显示状态（除了body之外所有元素的默认值，body默认是visible）
Hidden隐藏元素
visible显示元素
overflow：
设置元素溢出的处理方式
hidden设置超出部分隐藏
scroll设置超出部分出现滚动条
visible设置超出部分显示（默认值）
overflow的派生子属性：
Overflow-x：
单独设置水平方向溢出的处理方式
Overflow-y:
单独设置垂直方向溢出的处理方式
升级会员 