1、字体
字体 font-family
字体样式 font-style
缩写形式 font的缩写形式依次为font-style、font-weight、font-size、font-family,分别对应了字体样式、字体粗细、字号、字体族.
2、字号与颜色属性
1 、设置字体粗细:font-weight,可选属性值:bold加粗、lighter细体或者填写100-900的数字(400为正常,700为加粗)
2、 设置字体大小:font-size,属性值通常为px或者%
3、 设置字体颜色:color 属性值有三种表达方式
1)直接写颜色的英文名字:red、green、blue 等。
2)十六进制写法:#FFFFFF,#后每位可选值为数字 0~9 以及英文的 a~f,每两位表
示一种颜色,分别对应红绿蓝的比例(最常用,推荐)。
3)rgb 写法:
rgb(0~255,0~255,0~255)
rgba(0~255,0~255,0~255,0~1) 第 4 位数表示透明度,0 表示全透明,1 表示不透明。
1)直接写颜色的英文名字:red、green、blue 等。
2)十六进制写法:#FFFFFF,#后每位可选值为数字 0~9 以及英文的 a~f,每两位表
示一种颜色,分别对应红绿蓝的比例(最常用,推荐)。
3)rgb 写法:
rgb(0~255,0~255,0~255)
rgba(0~255,0~255,0~255,0~1) 第 4 位数表示透明度,0 表示全透明,1 表示不透明。
4、设置透明度:opacity: 属性值为0-1的数字。此处需要注意一个点,那就是使用opacity时当前元素以及子元素都会透明,而使用rgba调整时,只会使当前元素透明,不会改变子元素透明度。
3、文本属性
1.line-height
设置行高,属性值有三种表达方式
1)像素单位,如48px
2)纯数值,表示正常行高的倍数
3)百分数,表示正常行高的百分数
2.text-align
设置块级元素中文字的水平对齐方式,属性值有left、center、right.
3.letter-spacing
设置字符间距,即字与字之间的间距,属性值通常为**px。
4.text-decoration
文本修饰属性,常用的有四个,分别为下划线underline、删除线line-through、上划线overline、不做修饰none。
5.overflow(overflow-x和overflow-y)
控制超出范围文本的显示方式,常用属性值有以下三个。
1)auto:根据文字多少自动显示滚动条
2)scroll:始终显示滚动条。
3)hidden:超出范围文本隐藏,可以通过overflow-x和overflow-y分别设置水平垂直方向的隐藏。
6.text-overflow
设置多余文字的显示方式,常用属性值有两个。
1)clip:剪裁文本;
2)ellipsis:使用省略号代替多余文字。
7.white-space
设置元素内的空白符怎样处理,常用属性有三个
1)normal:默认,空白会被浏览器忽略
2)nowrap:设置中文行末不断行显示。
3)pre:空白会被浏览器保留。作用类似于HTML中的<pre>标签
重点:如何让每行多余文字显示省略号?
1)white-space:nowrap;如果是中文,需设置行末不断行。
2)overflow:hidden;设置控件超出范围隐藏。
3)text-overflow:ellipsis;设置多余文本省略号显示。
8.text-shadow
设置文本阴影,有四个属性值。
1)水平阴影距离:必写,数值越大,阴影右移。
2)垂直阴影距离:必写,数值越大,阴影下移。
3)阴影模糊距离:可写,数值越大,阴影越模糊。默认为0,不模糊。
4)阴影颜色:可写,默认为黑色。
进阶版也可以设置多个阴影,看个人需求吧,中间以逗号隔开就可。
9.text-indent
首行缩进,可以使用像素值调整段落文字的首行缩进大小。
10.text-stroke
设置文字描边,需要注意text-stroke只能在webkit内核浏览器使用,所以平时我们必须使用前缀“-webkit-”,共接收两个属性值分别为描边的粗细,描边的颜色。
4、CSS常用的背景属性
1 背景颜色属性
background-color;
2. 背景图像属性
1、background-image
设置背景图像,背景和背景色同时存在时,背景图会覆盖背景色
2、background-repeat
当背景图大小小于元素实际区域时,会默认将背景图进行平铺展示,可选属性有四个分别为
1、no-repeat:不平铺
2、repeat:平铺(默认)
3、repeat-x:水平方向平铺
4、repeat-y:垂直方向平铺
3、background-size
设置背景图大小,可以分为两种方式设置
(1)指定宽度和高度
指定宽高的写法也分为两种,第一种是直接写带像素单位的数值;第二种是写百分比(即宽高为父容器宽高的百分比).两种方式都有两个属性值,第一个属性值为宽度。第二个属性值为高度。
当只有一个属性值时,默认为宽度和高度等比缩放。
当有两个属性值时,会按照指定的高度与宽度进行压缩或拉伸显示。
(2)等比缩放
等比缩放也有两种方式,分别是contain和cover。
contain:图片等比缩放,缩放到宽或高的某一边等于父容器的宽高,另一边按照图片大小缩放(可能导致部分区域无法覆盖).
cover:图片等比缩放,使背景图完全覆盖背景区域(可能导致背景图部分区域无法显示)
4、background-position
设置背景图像的起始位置,属性值有两种写法,第一种使用指定位置关键字;第二种是使用数值。
(1)指定位置关键字:属性值有left、right、top、bottom和center。当只写一个属性值时,另一个默认为center。
(2)使用数值:两个值,分别表示水平位置和垂直位置,可以采用像素值或百分比形式。
在使用background-position属性时需要注意以下三点:
1)当只写一个属性值时,默认为水平方向,垂直设为居中。
2)当使用像素时,数值表示图片的左上角往各个方向移动的实际距离。
需要注意的是,在水平方向上,正数右移,负数左移,在竖直方向上,正数下移,负数上移
3)当使用百分数时,一般只能拿正数。百分数表示去掉图片的大小后,元素中剩余空白距离的分布比例。
5、background-origin
设置背景图的定位方式,属性值有三个:
(1)border-box:从边框外缘开始。
(2)padding-box:从边框内缘开始。
(3)content-box:从文字内容区开始。
background-origin不改变背景图显示区域大小,只决定左上角定位位置。
6、background-clip
裁切背景图和背景色显示区域,其属性值有三个:
(1)border-box:从边框外缘开始显示。
(2)padding-box:从边框内缘开始显示。
(3)content-box:从文字内容区开始显示。
7、background-attachment
设置背景图像是否固定或者随着页面的其余部分滚动,主要属性值有两个:
(1)scroll:默认值,背景图像会随着页面其余部分的滚动而滚动。
(2)fixed:当页面的其余部分滚动时,背景图像不会随之移动。
8、background
背景的简写属性,在一个声明中设置所有的背景属性,当使用简写属性时,属性值的顺序如下所示:
background-color
background-image
background-repeat
background-attachment
background-position
5、css其他常用属性
1、列表常用属性
list-style规定列表的样式,即每个列表前的标志
属性值 方式
none 无样式
circle 空心圆
disc 实心圆
square 实心正方形
decimal 数字
2、超链接样式属性
超链接与其他标签相比比较特殊,可以选择多个状态,如“未访问状态”“已访问状态”等,而用于表示不同状态样式的选择器就叫做伪类选择器
a:link 未被访问的状态
a:visited 已被访问的状态
a:hover 鼠标指针移动到链接上
a:active 正在被单击的链接
需要注意的时,当为链接不同 状态设置不同样式时,按如下规则
1)a:hover必须位于a:link和a:visited之后。
2)a:active必须位于a:hover之后
6.表格属性
表格的CSS属性:
1.表格的高度 height: 100px;
2.表格的宽度 width:100px;
3.表格的表框 border:1px;
4.表格的背景色 bgcolor:red;(也可以使用16进制表示法,如红色16进制表示为 #ff0000);
5.单元格与单元格之间的间距 cellsapcing:2px;
6.单元格与内容之间的空隙 cellspdding:2px;
7.水平对齐方式 align:left(左对齐)/center(居中对齐)/right(右对齐);
8.垂直对齐方式 valign:top(顶对齐)/middle(中间对齐)/bottom(底部对齐);
9. 合并单元格属性:
(1) 合并行 rowspan="所需要合并的行数";
(2) 合并列 colspan="所需要合并的列数";
(以下为表单高级)
10.合并相邻的单元格边框
border-collapse:separate(边框分开)/collapse(边框合并,可以用来制作1像素边框的表格);
11. 单元格间距(这个属性一定要加在table上)
border-sapcing:2px;
12. 无内容单元格的显示/隐藏
empty-cells:show(显示)/hide(隐藏);
13.固定宽度,不会虽内容的多少改变单元格的宽度
table-layout:auto(自动)/fixed(固定);
14. 表格的列标题
<th></th> 要放到tr里边,
15.添加组分割线
rules:rows(行与行之间)/cols(列与列之间)/all(行与列之间)/
groups(行组与列组之间)/none(没有线条)
16 .数据的行分组
<thead></thead> 表头
<tbody></tbody> 表体
<tfoot></tfoot> 表尾
(一个table中只能包含一个thead,一个tfoot,可以有多个tbody)
17. 数据列分组
<colgroup span="value" > </colgroup>
<col span="value"> </col>
18.vertical-align
元素的垂直对齐方式,行内元素以及置换元素
7.盒子属性
- width:元素的宽度
- height:元素的高度
- margin:元素的外边距
- padding:元素的内边距
- border:元素的边框
- box-sizing:元素盒模型的设定
- display:元素的显示方式
- position:元素的定位方式
- float:元素的浮动方式
- clear:元素浮动方式的清除方式。
边距四边全写默认为上右下左