color:文本颜色 color属性用于定义文本的颜色,其取值方式有如下3种:
1.预定义的颜色值,如red,green,blue等。
2.十六进制,如#FF0000,#FF6600,#29D794等。实际工作中,十六进制是最常见的定义颜色的方式。
3.RGB代码,如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。需要注意的是,如果使用RGB代码的百分比颜色值,取值为0时也不能省略百分号,必须写为0%。
实现代码:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.red{
color:red;
}
li:nth-child(4){
color:#f60;
}
#rgb{
color:rgb(53,50,205);
}
</style>
<body>
<h3>color属性定义文本的颜色,取值方式有如下三种:</h3>
<ol>
<li class="red">预定义的颜色值,如red,green,blue等。</li>
<li>十六进制,如#FF0000,#FF6600,#29D0794等。十六进制是最常用的定义颜色的方式</li>
<li id="rgb">RGB代码,如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。</li>
<li>woahghygyyg</li>
</ol>
</body>
</html>
运行截图:
line-height:行间距(行与行之间的距离)属性值单位一般由三种,像素px,相对值em和百分比%,一般用像素。一般行距字号打7.8的像素。
例如:
div {line-height:6px; }
div {line-height:10.5em; }
代码:
<html>
<head>
<style type="text/css">
p.small {line-height: 90%}
p.big {line-height: 200%}
</style>
</head>
<body>
<p>
这是拥有标准行高的段落。
在大多数浏览器中默认行高大约是 110% 到 120%。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
</p>
<p class="small">
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
</p>
<p class="big">
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
</p>
</body>
</html>
text-align:水平对齐方式(一般用来设置文本内容的水平对齐)
ext-align:center; 文本居中对齐
text-align:left; 文本左对齐
text-align:right; 文本向右对齐
justify:内容两端对齐。写本文档时仅Firefox能看到正确效果
start:内容对齐开始边界。(CSS3)
end:内容对齐结束边界。(CSS3)
代码:
<html>
<head>
<title>text-align</title>
</head>
<body>
<p style="text-align:left;">文本向左</p>
<p style="text-align:right;">文本向右</p>
<p style="text-align:center;">文本居中</p></body>
</html>
代码:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>text-align_CSS参考手册_web前端开发参考手册系列</title>
<style>
.test p{border:1px solid #000;}
.left p{text-align:left;}
.center p{text-align:center;}
.right p{text-align:right;}
.justify p{width:200px;text-align:justify;}
.start p{text-align:start;}
.end p{text-align:end;}
</style>
</head>
<body>
<ul class="test">
<li class="left">
<strong>左对齐</strong>
<p>我是左对齐内容</p>
</li>
<li class="center">
<strong>居中对齐</strong>
<p>我是居中对齐内容</p>
</li>
<li class="right">
<strong>右对齐</strong>
<p>我是右对齐内容</p>
</li>
<li class="justify">
<strong>两端对齐</strong>
<p>我是两端对齐内容,除了最后一行外,我的每行文字两端都是对齐的。你将在Firefox中看到效果。</p>
</li>
<li class="start">
<strong>start</strong>
<p>start效果</p>
</li>
<li class="end">
<strong>end</strong>
<p>end效果</p>
</li>
</ul>
</body>
</html>
实例
缩进段落的第一行50像素:
p
{
text-indent:50px;
}
字间距;p{
letter-spacing:15px;
}
单词间距:p{
work-spacing:10px;
}
让文字半透明:用rgb去实现,
h1{
color:rgb(0,0,0,0.5);
}
最后的数值就是决定透明度,取值在0-1之间,4个参数不能省略。
文字阴影:
h1 { text-shadow: 5px 5px 5px #FF0000; } 代码:
<!DOCTYPE html>
<html>
<head>
<style>
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
</style>
</head>
<body>
<h1>文本阴影效果!</h1>
</body>
</html>
text-shadow: h-shadow v-shadow blur color;
注释:text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表,每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。
h-shadow | 必需。水平阴影的位置。允许负值。 | |
v-shadow | 必需。垂直阴影的位置。允许负值。 | |
blur | 可选。模糊的距离。 | |
color | 可选。阴影的颜色。参阅 CSS 颜色值。 |
前两个参数必须要写。