十一,CSS的属性

1,文字属性

1)文字样式的属性

格式:

font-style:italic;

取值:

normal:正常的(默认取值);

italic:倾斜的。

WS中的快捷键

fs:font-style:italic;

fsn:font-style: normal。

2)文字粗细的属性

格式:font-weight: bold;

单词取值:

bold:加粗

bolder:比加粗还要粗

lighter:细线(默认)

数字取值:100~900之间整百的数字。

快捷键

fw font-weight:;

fwb font-weight: bold;

fwbr  font-weight: bolder;

3)文字大小的属性

格式:font-size:40px;(其中单位px是像素pixel的缩写)

注意:在设置字体大小的时候,一定要带单位,也就是数字后面一定要有px。

快捷键:z30 font-size: 30px;

4)文字字体属性

格式:font-family:"楷体/微软雅黑";

注意:

1)如果取值是中文,需要用双引号或者单引号括起来;

2).设置的字体必须是用户电脑里面已经安装的字体;

3)如果设置的字体不存在,就会使用默认的字体显示,默认字体是宋体;

4)如果设置的字体不存在,又不想使用默认字体,那么我们可以使用备选方案;

格式:font-family:" 黑体","微软雅黑"(备选方案1),"仿宋(备选方案2)"........;

5 )如果想给中文跟英文分别设置字体(用span),但凡是中文字体,里面都包含了英文

但凡是英文字体,里面都没有包含中文,也就是说中文字体可以处理英文,而英文字体不能处理中文。

快捷键:ff:font-family:" ";

常见的字体有:

中文:宋体(simsun)/黑体(simhei)/微软雅黑(Microsoft YaHei)

�英文: "Times New Roman"/Arial

补充:缩写形式

font: style weight size family;

例:font:italic bold 10px "楷体";

其中weight/style可以省略,位置也可以交换;但size/family不能省略,位置也不能互换,size一定放在family之前。

2,文本属性

1)文本装饰的属性

格式:text-decoration:underline;

取值:

下划线:underline

删除线:line-through

上划线:overline

空:none,一般用于去掉超链接的下划线。

快捷键

td  text-decoration: none;

tdu text-decoration: underline;

tdl text-decoration: line-through;

tdo text-decoration: overline;

2)文本水平对齐属性

格式:text-align: right;

取值:

left 左/right右/center中

快捷键

ta text-align: left;

tar text-align: right;il

tac text-align: center;

3)文本缩进属性

格式:text-indent: 2em;(首行缩进两个字符,其中em是单位,表示缩进一个文字的宽度)

快捷键

ti text-indent:;

�ti2e text-indent: 2em;

3,颜色属性

在css中通过color来修改文字的颜色

格式:color:值;

取值:

1)英文单词,如red,yellow,green,blue..........

2)rgb,传说中的三原色:red(红色)green(绿色)blue(蓝色)的首字母缩写。

格式:rgb(0,0,0)

第一个数字就是用来设置三原色的光源元件红色显示的亮度;

第二个数字就是用来设置三原色的光源元件绿色显示的亮度;

第三个数字就是用来设置三原色的光源元件蓝色显示的亮度。

这其中的每一个数字它的取值是0-255之前, 0代表不发光, 255代表发光,值越大就越亮;

红色: rgb(255,0,0);

绿色: rgb(0,255,0);

蓝色: rgb(0,0,255);

黑色: rgb(0,0,0);

白色: rgb(255,255,255);

红色/绿色/蓝色的值都一样就是灰色

3)rgba比rgb多了个a,a代表透明度,取值在0~1,取值越小越透明;

例如: color: rgba(255,0,0,0.2);

4)十六进制,前端开发中通过十六进制来表示颜色,其实本质就是RGB,十六进制中是通过每两位表示一个颜色。

例如: #FFEE00 

FF表示R的取值;

EE表示G的取值;

00表示B的取值。 

你可能感兴趣的:(十一,CSS的属性)