CSS字体样式属性/外观属性/注释/背景属性/三大特性

待我称王封你为后i 2023-06-22 04:23 6阅读 0赞

### 1、CSS 字体样式属性 ###

##### (1)font-size:字号大小 #####

font-size属性:设置字号

font-size属性值:可以使用相对长度单位(常用,推荐用像素单位px),也可以绝对长度单位(较少)。

相对长度单位:

em:相对于当前对象内文本的字体尺寸

px:像素,最常用,推荐用

绝对长度单位:

in:英寸

cm:厘米

mm:毫米

pt:点

##### (2)font-family:字体 #####

font-family属性:设置字体

网页中常用字体:

宋体:SimSun

新宋体:NSimSun

黑体:SimHei

微软雅黑:Microsoft YaHei

楷体\_GB2312:KaiTi\_GB2312

隶书:LiSu

幼园:YouYuan

华文细黑:STXihei

细明体:MingLiU

新细明体:PMingLiU

尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示

##### (3)font-weight:字体粗细 #####

font-weight属性:定义字体的粗细

font-weight属性值:normal、bold、bolder、lighter、100~900（100 的整数倍）。

##### 小技巧: #####

数字 400 等价于 normal，而 700 等价于 bold 。

##### (4)font-style:字体风格 #####

font-style属性:定义字体风格

font-style属性值:

normal:默认值,浏览器会显示标准的字体样式。

italic:浏览器会显示斜体的字体样式。

oblique:浏览器会显示倾斜的字体样式。

##### 小技巧: #####

平时很少给文字加斜体,反而喜欢给斜体标签(em,i)改为普通模式。

##### (5)font:综合设置字体样式 #####

font属性:对字体样式进行综合设置

选择器{font:font-style font-weight font-size/line-height font-famil y;}

使用 font 属性时,必须按上面语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开。

##### 注意:其中不需要设置的属性可以省略（取默认值）,但必须保留 font-size 和 font-family 属性,否则 font属性将不起作用。 #####

### 2、CSS 外观属性 ###

##### (1)color:文本颜色 #####

color属性:定义文本的颜色

color属性值:

a.预定义的颜色值(red,bule等)

b.十六进制(最常见)

c.RGB代码(取值为0时也不能省略%)

##### (2)line-height:行间距(行高) #####

line-height属性:设置行间距(行与行之间的距离,即字符的垂直间距)

line-height属性值单位:px(像素,使用最多)、em(相对值)、%

##### (3)text-align:水平对齐方式 #####

text-align属性:设置文本内容的水平对齐

text-align属性值:left(左对齐)、right(右对齐)、center(居中对齐)

##### (4)text-indent:首行缩进 #####

text-indent属性:设置首行文本的缩进

text-indent属性值:不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%（允许使用负值, 建议使用 em 作为设置单位）

1em 就是一个字的宽度 如果是汉字的段落,1em就是一个汉字的宽度 。

##### (5)letter-spacing:字间距(字符与字符之间的空白) #####

letter-spacing属性:定义字间距

letter-spacing属性值:不同单位的数值(允许使用负值，默认为normal)

##### (6)word-spacing:单词间距 #####

word-spacing属性:定义英文单词之间的间距,对中文字符无效

word-spacing属性值:不同单位的数值(允许使用负值，默认为normal)

##### word-spacing 和 letter-spacing 均可对英文进行设置。不同的是 letter-spacing 定 义的为字母之间的间距,而 word-spacing 定义的为英文单词之间的间距 #####

##### (7)颜色半透明(css3) #####

color: rgba(r,g,b,a);

a(alpha)透明:取值范围(0~1)

##### (8)文字阴影(CSS3) #####

text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;

h-shadow:必需,水平阴影的位置,可负

v-shadow:必须,垂直阴影的位置,可负

blur:可选,模糊的距离

color:可选,阴影的颜色

### 3、CSS 注释 ###

/*  需要注释的内容  */  
    在需要注释的内容前使 用 “/*” 标记开始注释，在内容的结尾使用 “*/”结束。

### 4、CSS 背景 ###

##### (1)background-color:背景颜色 #####

##### (2)background-image:背景图片 #####

background-image属性:设置背景图片地址

background-image属性值:

none:无背景图（默认的）

url:使用绝对或相对地址指定背景图像(url不要加引号)

##### (3)background-repeat:背景平铺 #####

background-repeat属性:是否平铺

background-repeat属性值:

repeat : 背景图像在纵向和横向上平铺（默认的）  
no-repeat : 背景图像不平铺  
repeat-x : 背景图像在横向上平铺  
repeat-y : 背景图像在纵向平铺

##### (4)background-position:背景位置 #####

background-position属性:设置或检索对象的背景图像位置

background-position属性值:

length : 百分数、由浮点数字和单位标识符组成的长度值

position : top、bottom、left、right、center

必须先指定 background-image 属性。默认值为： (0% 0%)。如果只指定了一个值，该值将用于横坐标。纵坐标将默认为 50%。第二个值将用于纵坐标。

##### 注意： #####

##### a:position 后面是 x 坐标和 y 坐标。 可以使用方位名词或者 精确单位 #####

##### b:如果和精确单位和方位名字混合使用,则必须是 x 坐标在前,y 坐标后面 #####

##### (5)背景透明 #####

background: rgba(0,0,0,0.3);

##### (6)多背景 #####

以逗号分隔可以设置多背景,可用于自适应布局

background-image: url('地址'),url('地址');

##### (7)背景的合写(复合属性) #####

background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
    background:red url(image.jpg) repeat-y  scroll 50% 0;

### 5、CSS 三大特性 ###

##### CSS优先级 #####

定义 CSS 样式时,经常出现两个或更多规则应用在同一元素上,则会出现优先级的问题。

a、继承样式的权重为 0

b、行内样式优先

c、权重相同时,CSS 遵循就近原则

d、CSS 定义了一个!important 命令,该命令被赋予最大的优先级

##### (1)CSS层叠性(多种 CSS 样式的叠加) #####

是浏览器处理冲突的一个能力,如果一个属性通过两个选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉。

一般情况下,如果出现样式冲突,则会按照 CSS 书写的顺序,以最后的样式为准 。

CSS 最后的执行口诀:长江后浪推前浪,前浪死在沙滩上。

##### (2)CSS继承性(子承父业) #####

想要设置一个可继承的属性,只需将它应用于父元素。

CSS 最后的执行口诀:龙生龙,凤生凤,老鼠生的孩子会打洞。

##### (3)CSS特殊性(是一个衡量 CSS 值优先级的一个标准) #####

#####  #####

CSS字体样式属性/外观属性/注释/背景属性/三大特性

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 CSS中字体样式属性

相关 CSS-综合样式属性，背景样式属性的使用详解

相关 CSS字体样式属性/外观属性/注释/背景属性/三大特性

相关 CSS属性：字体属性和文本属性

相关 css背景属性_背景重复（CSS属性）

相关 html div背景图片属性,div css 背景样式background属性

相关 CSS外观属性

相关 CSS字体样式属性

相关 CSS属性（背景属性）

相关 CSS（一）字体样式属性