CSS属性.docx

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:

单独设置垂直方向溢出的处理方式