十一,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常见属性 文字属性 font-style 作用: 规定文字样式 格式: font-style: italic...
    极客江南阅读 9,561评论 2 78
  • CSS 格式: 标签名称{属性名称: 属性对应的值;...} 作用:在前端开发中CSS只有一个作用, 就是用来修改...
    MGd阅读 226评论 0 0
  • “长尾理论”是由克里斯·安德森基于互联网兴起提出的一种理论,自提出之日起就风靡全球,成了很多创业公司的切入点和很多...
    公子在野阅读 6,558评论 1 11
  • 夕阳入梦去, 晚霞留倩影。 天高白云淡, 风轻树木静。 山鸟飞有声, 野花开无名。 萋萋芳草岸, 悠悠故人情。 何...
    泠风思语阅读 321评论 -1 4
  • 我以为这书屋和猫咖是一家的。但是不是。 要是是一家店就好了。 我说过,我的梦想是当一个“家庭主妇”,但这只是前半句...
    蜗牛晴的杂货铺阅读 487评论 0 2