常见样式声明
[信息量大]
- color
元素内部的文字颜色
预设值:定义好的单词
三原色,色值:光学三原色(红、绿、蓝),每个颜色可以使用0-255之间的数字来表达
/* RGB表示法 */
rgb(0, 0, 0)
/* HEX(16进制)表示法 */
12345678910ABCDEF,两位表示一种颜色#红绿蓝
淘宝红:#ff4400 = #f40
黑:#000000 = #000
白:#ffffff = #fff
灰:#cccccc = #ccc
红:#ff0000 = #f00
黄:#ffff00 = #ff0
绿:#00ff00 = #0f0
蓝:#0000ff = #00f
青:#00ffff = #0ff
紫:#ff00ff = #f0f
-
background-color
元素背景颜色 -
font-size
元素内部文字尺寸大小
1). px:像素,绝对单位
2). em:相对单位,相对于父元素的字体大小;若无声明,则直接使用父元素的字体大小;若无父元素,则直接使用基准字号(浏览器中设置的字号)
user agent(ua):用户代理(浏览器)
- font-weight
文字粗细程度,可以取值数字,也可以取值为预设值,默认值为normal
<strong>
表示重要的,不能忽视的内容,默认加粗
</strong>
strong元素表示重要的,不能忽视的内容- font-family
文字类型[必须是用户计算机中存在的字体才有效]
使用多个字体,以匹配不同环境
font-family:大虞海棠体dyht体,2799体,sans-serif
sans-serif:非衬线字体(指字体边缘不加修饰的字体)
- font-style
字体样式,通常用它设置斜体
i、em元素的默认样式是倾斜字体;实际通常用i来表示一个图标(icon)
<i>
i
</i>
<em>
表示强调的内容,默认斜体
</em>
iem元素表示强调的内容,默认斜体
- text-decoration
文本修饰,给文本加线
<p style="text-decoration:line-through">
$$$
</p>
$$$ ***
a元素:默认underline
del元素:错误的内容,默认line-through
s元素:过期的内容,默认line-through
<del>
错误的内容
</del>
年货价:¥27,原价¥270
- text-indent
首行文本缩进
<p style=text-indent:27px>
首行文本缩进首行文本缩进首行文本缩进首行文本缩进首行文本缩进首行文本缩进
</p>
首行文本缩进首行文本缩进首行文本缩进首行文本缩进首行文本缩进首行文本缩进
- line-height
行高,每行文本的高度
<p style=line-height:1.5>
首行文本缩进首行文本缩进首行文本缩进首行文本缩进首行文本缩进首行文本缩进
</p>
首行文本缩进首行文本缩进首行文本缩进首行文本缩进首行文本缩进首行文本缩进
设置行高为容器的高度,可以让单行文本垂直居中
<p class="dyht" style="background-color: firebrick; color: indianred; height: 270px; line-height:270px;">
大虞海棠幸福美满
</p>
大虞海棠幸福美满
行高可以设置为纯数字,表示相对于当前元素的字体大小
line-height=1.5
- width
宽度
width:500px
-
height
高度 -
letter-spacing
文字间隙
letter-spacing:6px
- text-align
元素内部文字的水平排列方式
text-align: left