1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 【温故知新】CSS学习笔记(字体样式属性)附加篇

【温故知新】CSS学习笔记(字体样式属性)附加篇

时间:2023-08-04 19:15:02

相关推荐

【温故知新】CSS学习笔记(字体样式属性)附加篇

CSS字体样式属性

目录

CSS字体样式属性

一、font属性

二、color属性

三、line-height 行间距(行高)

四、text-align 水平对齐方式

五、text-indent 首行缩进

六、text-decoration 文本的装饰

一、font属性

font属性用于对字体样式进行综合设置。

基本语法:

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

字体连写是有顺序的,不能更换顺序,各个属性之间用空格分隔。

font-size和font-family是不能省略的(其他可以省略),否则不起作用。

[样例代码]

<style>

h1{

font:12px "微软雅黑";

}

</style>

二、color属性

color属性用于定义文本的颜色,其取值方式有如下三种:

1、预定义的颜色值,如red、green、blue等;2、十六进制,如#FF0000(或者#F00)、#FF6600(或者#F60)、#29D794等,“#”开头,要是两两相同的话可以缩写(必须三组两两相同);3、RGB代码,如红色可以表示为rgb(255,0,0)或者rgb(100%,0%,0%);

[样例代码]

<style>

span{

color: #ff0000;

}

</style>

三、line-height 行间距(行高)

line-height 属性用于设置行间距,就是行和行之间的距离,俗称行高。

常用的属性值单位是像素px、相对值em和百分比%,实际工作中最常用的同样是px像素

一般情况下,行距比字号大7/8像素左右即可。

[样例代码]

<style>

p{

font-size: 16px;

line-height: 24px;

}

</style>

四、text-align 水平对齐方式

text-align属性用于设置文本内容的水平对齐,相对于html中的align对齐属性。

left:左对齐(默认)right:右对齐center:居中对齐

[样例代码]

<style>

h1{

font:12px "微软雅黑";

text-align: center; /* 让h1里面的文字居中对齐 */

}

</style>

五、text-indent 首行缩进

text-indent 属性用于设置文本的缩进,其属性值可以是不同单位的数值、em字符宽度的倍数或者相对于浏览器窗口宽度的百分比%,允许使用负值,一般建议用em

1em就是一个字的宽度,正常汉字段落,1em就等于1个汉字。

[样例代码]

<style>

p{

font-size: 16px;

line-height: 24px;

text-indent: 2em; /* 段落首行缩进两个字 */

}

</style>

六、text-decoration 文本的装饰

text-decoration通常用于给链接修改装饰效果。

none 无装饰(默认)-取消装饰的时候使用underline下划线 - 常用blink 闪烁overline上划线line-through 贯穿线(删除线)

[样例代码]

<style>

div{

font-size: 40px;

text-decoration: underline;

}

</style>

【助记总结】

倾斜:em和i标签→取消倾斜 font-style:normal; 添加倾斜 font-style:italic;加粗:strong和b标签→取消加粗font-weight:normal; 或者 font-weight:400; 添加加粗 font-weight:bold; 或者 font-weight:700;下划线:u和ins标签→取消下划线 text-decoration:none; 添加下划线 text-decoration:underline;删除线:s和del标签→取消删除线 text-decoration:none; 添加删除线 text-decoration:line-through;

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。