补充属性
单位
px:像素
em:1em==一个文字的大小
一个文字的大小不同浏览器有不同的默认值,也可以自己设置font-size:20px;
颜色的表示方法
1.写具体的颜色单词(red,blue…)
2.使用十六进制表示颜色(#000~fff)
3.rgb(三原色)
r red (0~255)
g green (0~255)
b blue (0~255)
background-color:rgb(100.231.211);
4.rgba:设置半透明的效果(只设置背景半透明,不对其中的文本起作用)
a alpha (0~1)0代表全透明,1代表不透明
background-color:rgba(0,23,21,0.5);
5.opacity(实现半透明的效果,对其中的内容也起作用)
取值:0~1之间(0代表全透明,1代表不透明)
background-color:#000000;
opacity:0.2;
字体样式属性
font-size:设置文字大小
font-family:设置文字字体
font-family:"微软雅黑";
可以同时设置多个字体,中间以逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个,直到找到合适的字体
font-family:Arial,"微软雅黑","宋体";
注意
1.各个字体之间必须使用英文状态下的逗号隔开。
2.中文字体需要加英文状态下的引号,英文字体一般不需要加(如果英文字体名中有空格,则需要加引号)
3.当设置英文字体时,英文字体名必须在中文字体名前面。
font-family:"Times New Roman",Arial,"微软雅黑","宋体";
使用字体对应的单词表示
font-weight:设置文字的粗细(100~900之间)
normal:默认值400
bold:j加粗700
bolder:更粗
lighter:更细
font-style:设置字体风格(normal | italic【斜体】)
line-height: 设置文字行高(暂时理解文字的高度)
通过该属性可以改变文字的上下间距
font属性联写
总结:
◆ 在font属性联写中 必须设置font-size 和 font-family
◆ 在font属性联写中,font-size 必须 设置在font-family之前
◆如果要设置行高,那么行高必须设置到font-size之后,其他属性没顺序
font:italic bold 30px/20px "微软雅黑";
文本的外观属性
color:设置文本的颜色(前景色)
letter-spacing:字间距(字符与字符之间的空白)
word-spacing:单词间距(对中文无效)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div {
color: red;
width: 200px;
height: 200px;
background-color:#000000;
letter-spacing:2em;
}
</style>
</head>
<body>
<div>只剩下麻木的我没有了当年的热血</div>
</body>
</html>
text-decoration:文本修饰
none:没有修饰
overline:上划线
underline:下划线
line-through:删除线
可以给文本添加多个显示效果
text-decoration:underline overline;
text-align:设置水平对齐方式(可文本可图片)
left | right | center(只适合于块级元素,对行内元素无效)
text-indent:设置首行文本缩进(只适合于块级元素,对行内元素无效)
white-space:空白符处理
normal:常规(默认值),文本的空格,空行无效,满行后自动换行
pre:预格式化,按文档的书写格式保留空格,空行原样显示
nowrap:空格空行无效,强制文本不能换行。除非遇到换行标签<br>
。内容超过 标签的边界也不换行,若超出浏览器页面则会自动增加滚动条。
text-shadow: 设置文字阴影
text-shadow: 0px 0px 10px red;
◆第一个值可以设置正数或者负数,设置文字阴影在水平方向的一个偏移量
◆第二个值可以设置正数或者负数,设置文字阴影在垂直方向的偏移量
◆第三个值代表的是文字阴影的模糊度, 不能设置负数
◆第四个值代表文字阴影的颜色。
可设置多个阴影叠加
text-shadw:0px 8px 2px red,2px -2px 3px blue;
总结:
◆文字阴影使用text-shadow
◆如果设置多个阴影,用逗号隔开
text-overflow:对象内文本的溢出
ellipsis:用省略符号表示被修剪的文本
clip:修剪溢出文本,无省略符号显示。
通常和另外三个属性一起使用,具体步骤如下:
1.为包含文本的对象定义宽度。
2.应用white-space:nowrap;强制文本不能换行。
3.应用overflow:hidden;隐藏溢出文本。
4, ellipsis:用省略符号表示被修剪的文本。