目录
具体参考:CSS3 文本效果 | 菜鸟教程 (runoob.com)
一、字体属性
1.字体系列
语法:
font-family:'字体1', ‘字体2';
多个字体,若电脑没有字体1,则显示字体2...
常用字体:'微软雅黑',tahoma,arial,'Hiragino San GB'
2.字体大小
定义字体大小,不同浏览器可能默认显示的字号大小不一致,尽量定义一个明确值大小。
语法:
p{
font-family: '微软雅黑';
font-size: 20px;
}
3.字体粗细
正常字体大小为normal,相当于400。700为bold为加粗。
数字取值为100~900。
语法:
p{
font-weight: 100;
}
/* 100后不要添加单位 */
4.文字样式
设置文本风格,主要为设置斜体。italic为斜体。
语法:
p{
font-style: italic;
}
5.字体复合属性
简写,顺序不可以改变。不需要设置的属性可以省略,但必须保留font-size和font-family。
语法:
font: font-style font-weight font-size/line-height font-family
例:
div{
font: italic 700 16px '微软雅黑'
}
二、文本属性
定义文本的外观,如文本颜色、对齐文本、装饰文本、文本缩进、行间距等。
1.文本颜色
表示形式:
(1)预定义的颜色值。
(2)十六进制
(3)RGB代码
语法:
div{
color: red;
}
2.文本对齐
text-align只能设置元素内文本内容水平对齐方式。
语法:
div{
text-align: center;
}
center为居中对齐。right为右对齐。left为左对齐(默认值)。
3.装饰文本
即给文本添加下划线、上划线、删除线等。
语法:
div{
text-decoration: underline;
}
none:默认。没有装饰线。
underline:下划线,链接a自带下划线。
overline:上划线。
line-through:删除线。
4.文本缩进
用来指定文本第一行的缩进。
语法:
div{
text-indent: 2em;
}
em为当前元素(font-size)1个文字的大小。也可以用长度单位表示,可以是负值。
5.行间距
一个行间距为上间距+文本高度+下间距,改变的是上间距和上间距 。
语法:
p{
line-height: 26px;
}
具体参考:CSS3 文本效果 | 菜鸟教程 (runoob.com)
三、引入方式
1.行内样式表(行内式)
在元素标签内部的style属性中设置css样式,在双引号中间。
例:
<div style="color: red; font-size: 12px;">行内样式表</div>
2.内部样式表(嵌入式)
在html页面内部i书写样式,单独写道style标签内部。
3.外部样式表(链接式)
(1)将代码放入css文件中 ,css文件中只有定义没有标签。
(2)在HTML页面中,使用<link>标签引入这个文件。
<link rel="stylesheet" href="css文件路径">
stylesheet表示被链接色文档是一个样式表文件。href可以是相对路径也可以是绝对路径。