相关单位
绝对单位
-
英寸(in):使用较为广泛的长度单位(1in=2.54cm)
-
厘米(cm):生活中最常用的的长度单位。
-
毫米(mm):在研究领域使用比较广泛。
-
磅(pt):在印刷领域使用较为广泛,也称为点。CSS也常用pt设置字体大小,12磅的字体等于1/6大小(1pt=1/72in)
-
pica(pc):在印刷领域使用较多,1pc=12pt,所以也称为12点活字。
相对单位
-
em
-
em表示元素的字体的高度
-
能够根据字体的font-size属性值来确定单位的大小
p{font-size:24px;line-height:2em;} /*行高为48px*/
-
-
px(多使用)
- px根据屏幕像素点来确定
- 不同的显示分辨率会使相同去指定的像素单位显示出来的效果不同
-
ex
- ex表示以所使用的字体中小写字母x的高度作为参考
- 在实际应用中,浏览器将通过em的值除以2得到ex的值
-
百分比%
- 百分比的值总是通过另一个值来进行计算的
- 一般参考父元素中相同的属性的值
宽和高
- width属性可以为元素设置宽度
- height属性可以为元素设置高度
- 块级标签才设置宽度,内联标签的宽度由内容决定。
字体样式
简写复合
font:font-style font-weight font-variant font-size/line-height font-family
语法说明:
前三个属性值可以不分先后顺序,默认为normal.
大小和字体名称系列必须显式指定,先设置大小再设置字体系列
需要设置行高时,可以写在字体大小的后面,中间用"/"分隔,行高为可选属性
font属性可以继承
字体大小
p {
font-size: 14px;
}
- 如果设置成inherit表示继承父元素的字体大小值。
字体样式
font-style: normal | italic | oblique
属性值 | 说明 |
---|---|
normal | 表示不使用斜体,默认 |
italic | 表示使用斜体显示文字 |
oblique | 表示使用倾斜字体显示 |
字体系列
font-family:字体1,字体2,....
- 属性值为多个字体名称时,使用逗号分隔
- 浏览器依次查找字体,直到找到存在的字体则使用其字体,默认宋体
- 字体名称中存在空格,需要用双引号将其括起来,例如:Times New Roman
字体变体
font-variant: normal | small-caps
- 主要设置英文字体
属性值 | 说明 |
---|---|
normal | 表示正常字体,默认 |
small-caps | 表示使用小型的大写字母字体 |
字体粗细
font-width: normal | bold | bolder | lighter | 100 |...|900
属性值 | 说明 |
---|---|
normal | 正常字体,默认 |
bold | 标准粗体 |
bolder | 特粗体 |
lighter | 细体 |
100~900 | 100表示最细,400等价于normal,700等价于bold |
inherit | 继承父元素字体的粗细 |
文本颜色
- 颜色属性被用来设置文字的颜色
- 常见格式:
- 十六进制值 - 如:#FF0000
- 前两位是表示红色,中间两位表示绿色,后两位表示蓝色
- F是最高级别,0表示最低级别(无色)
- 一个RGB值 - 如:RGB(255,0,0)
- 红绿蓝就是RGB的意思,(Red Green Blue)
- 最高255,最低0
- rgba(255,0,0,0.3)
- 第四个值为alpha,指定了色彩的透明度
- 范围为0.0到1.0之间
- 颜色的名称 - 如:red
- 十六进制值 - 如:#FF0000
文本样式
字符间距
letter-spacing:normal | 长度单位
语法说明:
normal:默认间距,长度一般为正数,也可以为负数,取决于浏览器是否支持
word-spacing属性:主要针对英文单词
letter-spacing属性:对中文、英文字符串均起作用
行距
line-height:normal | length
语法说明:
normal:默认行距
length:百分比、数字。由浮点数字和单位标识符组成的长度值,允许为负值。其百分比取值是基于字体的高度尺寸
首行缩进
text-indent:长度单位 | 百分比单位
- 一个字在页面上的默认大小是16px
字符装饰
- text-decoration属性用来给文字添加特殊效果
text-decoration:none|underline|overline|line-through
值 | 描述 |
---|---|
none | 默认。定义标准的文本。 |
underline | 定义文本下的一条线。 |
overline | 定义文本上的一条线。 |
line-through | 定义穿过文本下的一条线。 |
inherit | 继承父元素的text-decoration属值。 |
-
为a标签去除默认的自划线:
a{text-decoration:none;}
水平对齐
text-align:left|right|center|justify
值 | 描述 |
---|---|
left | 左边对齐 默认值 |
right | 右对齐 |
center | 居中对齐 |
justify | 两端对齐 |
垂直对齐
vertical-align:top|middle|bottom|text-top|text-bottom
属性值 | 说明 |
---|---|
top | 把元素的顶端与行中最高元素的顶端对齐 |
middle | 把此元素放置在父元素的中部 |
bottom | 把元素的顶端与行中最低元素的顶端对齐 |
text-top | 把元素的顶端与父元素字体的顶端对齐 |
text-bottom | 把元素的底端与父元素字体的底端对齐 |
英文大小写转换
text-transform:capitalize|uppercase|lowercase|none
属性值 | 说明 |
---|---|
capitalize | 将每个单词的第一个字母转换成大写,其余不换 |
uppercase | 转换成大写 |
lowercase | 转换成小写 |
none | 不转换 |
CSS背景
简写复合
background:background-color background-image background-repeat background-position background-attachment
语法说明:
- 语法中属性值的设置参考各属性进行设置.
背景颜色
background-color:颜色
背景图像
background-image:url("图像文件名称") | none
语法说明:
none:不用图像作为背景
url("图像文件名称"):图像的相对或绝对路径
背景图像重复
- background-repeat属性用于设置背景图像的重叠覆盖方式
background-repeat:repeat|no-repeat|repeat-x|repeat-y
属性值 | 说明 |
---|---|
repeat | 使用背景图片重复性完全填充元素大小空间 |
repeat-x | 背景图片在水平方向从左到右填充 |
repeat-y | 背景图片在垂直方向从上到下填充 |
no-repeat | 不使用背景图片重复填充 |
背景附件
- background-attachment属性设置背景图像是否随着滚动条一起滚动
background-attachment:scroll|fixed
语法说明:
scroll:表示在文字页面滚动时,背景附件一起滚动
fixed:表示在文字页面滚动时,背景附件固定不滚动
背景图像位置
- background-position属性用于设置背景图像的具体的起始位置
background-position:参数1 参数2
语法说明:
1.图形位置一般需要设置两个参数,且用空格分隔
2.第一个参数表示水平位置,第二个参数表示垂直位置
3.如果只设置一个参数,另一个参数自动为50%或位置居中
属性值 | 说明 |
---|---|
left|center|right | 表示水平方向居左、居中、居右 |
top|center|right | 表示垂直方向顶部、中部、底部 |
x% y% | x%表示水平位置,y%表示垂直位置(左上角是0% 0%) |
xpos ypos | xpos表示水平位置,ypos表示垂直位置(左上角是0 0) |
CSS列表样式
基本语法:
list-style-type:属性值; /*设置列表类型,共九种*/
list-style-image:url("图像文件名称")|none; /*设置列表替代图像*/
list-style-position:outsize|inside /*设置图像位置*/
list-style-type相关属性值
属性值 | 说明 |
---|---|
disc | 实心圆● |
circle | 空心圆○ |
square | 实心方块■ |
decimal | 阿拉伯数字123… |
lower-roman | 小写罗马数字ⅰⅱⅲⅳ… |
upper-roman | 大写罗马数字ⅠⅡⅢⅣ… |
lower-alpha | 小写英文字母abc… |
upper-alpha | 大写英文字母ABC… |
none | 不使用项目符号 |
list-style-position相关属性值
属性值 | 说明 |
---|---|
outsize | 默认,将标志放在文本之外,而且任何换行文本在标志下均不对齐 |
inside | 将标志放在文本之内,而且任何换行文本在标志下均对齐 |
复合属性
list-style:list-style-type list-style-image list-style-position;
知识来源于网上