CSS之文字样式
一、文本颜色:color
color 属性规定文本的颜色,该属性设置了一个元素的前景色(在HTML表现中,就是元素文本的颜色)。颜色通常有如下的表达方式,背景颜色 background-color 的用法与文本颜色 color 相同。
color_name 规定颜色值 为颜色名称的颜色(比如red)
hex_number 规定颜色值为十六进制值的颜色(比如#000000)
rgb_number 规定颜色值为rgb代码的颜色(比如rgb(255,0,0))
rgb_alpha 规定颜色的值为 rgb和透明度(比如rgba(255,0,0,0.5))
inherit 规定应该从父元素继承颜色(默认)
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>color</title>
<style>
.p1 {
color: red;
}
.p2 {
color: #ff0000;
}
.p3 {
color: rgb(255, 0, 0);
}
.p4 {
color: rgba(255, 0, 0, 0.5);
}
</style>
</head>
<body>
<p class="p1">red 红色</p>
<p class="p2">#ff0000 十六进制的红色</p>
<p class="p3">rgb(255,0,0) rgb的红色</p>
<p class="p4">rgb(255,0,0,0.5) rgb的红色且透明度为0.5的颜色</p>
</body>
</html>
注意:像 #ff0000 这种层叠的样式可以简写为 #f00,#e30000 不能简写为#e300。
二、缩进:text-indent
text-indent 属性规定文本块中首行文本的缩进。该属性值可以为像素值(px)、百分比或相对值 em,可以为正值或负值,如果使用负值,那么首行会被缩进到左边。
text-indent: 30px;
em 是一个相对的大小,我们可以这样来设置1 em,0.5 em,1.5 em 等,而且 em 还可以指定到小数点后三位,比如“1.365em”。
而其中“相对”的意思是指相对于元素父元素的 font-size。比如:
如果在一个<div>设置字体大小为“16px”,此时这个<div>的后代元素教程了是将继承他的字体大小,除非重新在其后代元素中进行过显示的设置。此时,如果你将其子元素的字体大小设置为“0.75em”,那么其字体大小计算出来后就相当于“0.75 X 16px = 12px”;
使用 em 布局是希望在父节点中修改字体大小时,整个网站的页面字体都跟随变化。
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text-indent</title>
<style>
body {
font-size: 20px;
}
.p1 {
text-indent: 10px;
}
.p2 {
text-indent: 10%;
}
.p3 {
text-indent: 2em;
}
.p4 {
text-indent: 40px;
}
</style>
</head>
<body>
<p class="p1">text-indent</p>
<p class="p2">text-indent</p>
<p class="p3">text-indent</p>
<p class="p4">text-indent</p>
</body>
</html>
三、行高:line-height
line-height 属性用来设置行间的距离(行高),该属性会影响行框的布局,在应用到一个块级元素时,其定义了该元素中基线之间的最小距离,属性值下所示。
normal 默认值。设置合理的行间距
number 设置数字,此数字会与当前字体尺寸相乘来设置行间距(line-height:2)
length 设置固定的行间距(如12px)
% 基于当前字体尺寸的百分比设置行间距
inherit 规定应该从父元素继承line-height属性的值
通常在开发中,经常使用行高大小与父级元素大小相同,达到竖直居中效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>line-height</title>
<style>
* {
margin: 0;
}
body {
font-size: 20px;
}
.p1 {
line-height: 2;
background-color: aqua;
}
.p2 {
line-height: 40px;
background-color: aqua;
}
</style>
</head>
<body>
<p class="p1">line-height</p>
<div class="p2">line-height</div>
</body>
</html>
注意:* { margin: 0; } 是为了清除 p 和 body 标签默认的外边距 margin。
四、字母间隔:letter-spacing
letter-spacing 属性用来定义增加或减少字符间的空白(字符间距)。
normal 默认,规定字符间没有额外的空间
length 定义字符间的固定空间(允许使用负值 10px)
inherit 规定应该从父元素继承letter-spacing属性的值
该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄,指定长度值时,会调整字母之间通常的间隔,normal 就相当于值为0。
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>letter-spacing</title>
<style>
.p1 {
letter-spacing: 10px;
}
</style>
</head>
<body>
<p class="p1">letter-spacing</p>
</body>
</html>
五、水平对齐:text-align
text-align 属性规定元素中文本的水平对齐方式,该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式。
left 左对齐,把文本排列到左边,默认值:由浏览器决定
right 右对齐,把文本排列到右边
center 居中对齐,把文本排列到中间
justify 实现两端对齐文本效果
inherit 规定应该从父元素继承text-align属性的值
值 justify 可以使文本的两端都对齐。在两端对齐文本中,文本行的左右两端都放在父元素的内边界上。然后调整单词和字母间的间隔,使各行的长度恰好相等。两端对齐在实际开发中很少使用。
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text-align</title>
<style>
.p1 {
text-align: left;
}
.p2{
text-align: right;
}
.p3{
text-align: center;
}
.p4{
text-align: justify;
}
</style>
</head>
<body>
<p class="p1">text-align</p>
<p class="p2">text-align</p>
<p class="p3">text-align</p>
<p class="p4">text-align</p>
</body>
</html>
六、文本装饰:text-decoration
text-decoration 属性规定添加到文本的修饰。通常在开发中使用 text-decoration 清除或更换 a 标签的默认样式。
none 默认,定义标准的文本
underline 定义文本下的一条线
overline 定义文本上的一条线
line-through 定义穿过文本的一条线
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text-decoration</title>
<style>
a {
text-decoration: none;
}
.p1 {
text-decoration: underline;
}
.p2 {
text-decoration: overline;
}
.p3 {
text-decoration: line-through;
}
</style>
</head>
<body>
<a href="#">我是a标签</a>
<p class="p1">我是</p>
<p class="p2">我是</p>
<p class="p3">我是</p>
</body>
</html>
练习:按照设计图编写代码
参考代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>再别康桥</title>
<style>
body {
font-size: 20px;
}
.content {
width: 420px;
margin: 0 auto;
}
p, h1 {
text-align: center;
}
.author {
text-indent: 220px;
text-decoration: underline;
}
.p1 {
color: red;
}
.p2 {
color: green;
}
.p3 {
color: blue;
}
.p4 {
color: orange;
}
</style>
</head>
<body>
<div class="content">
<h1>再别康桥</h1>
<p class="author">徐志摩</p>
<p class="p1">轻轻的我走了,正如我轻轻的来;</p>
<p class="p2">我轻轻的招手,作别西天的云彩;</p>
<p class="p3">那河畔的金柳,是夕阳中的新娘;</p>
<p class="p4">波光里的艳影,在我的心头荡漾。</p>
</div>
</body>
</html>
七、字体大小:font-size
font-size 属性用来定义文本的大小。属性值可以为绝对值或相对值。绝对值是将文本设置为指定的大小,此时不允许用户在所有浏览器中改变文本大小(不利于可用性),绝对大小在确定了输出的物理尺寸时很有用。相对值是相对于周围的元素来设置大小,允许用户在浏览器中改变文本大小。
W3C 推荐使用相对值 em 来定义文本大小。1em 等于当前的字体尺寸,如果一个元素的 font-size 为 12 像素,那么对于该元素,1em 就等于12 像素。在设置字体大小时,em 的值会相对于父元素的字体大小的变化而改变。
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字体大小</title>
<style>
body {
font-size:12px;
}
.p1 {
font-size:12px;
}
.p2 {
font-size:14px;
}
.p3 {
font-size:1.5em;
}
.p4 {
font-size:180%;
}
</style>
</head>
<body>
<h3>再别康桥</h3>
<p class="p1">轻轻的我走了,正如我轻轻的来;</p>
<p class="p2">我轻轻的招手,作别西天的云彩。</p>
<p class="p3">那河畔的金柳,是夕阳中的新娘;</p>
<p class="p4">波光里的艳影,在我的心头荡漾。</p>
</body>
</html>
八、字体加粗:font-weight
font-weight 属性用来定义字体的粗细。属性值下所示。
nomal 默认值,定义标准的字符
bold 定义粗体字符
lighter 定义更细的字符
100-900 定义由粗到细的字符,400 等同于normal,而700等同于bold
inherit 规定应该从父元素继承字体的粗细
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字体加粗</title>
<style>
body {
font-size:12px;
font-weight:bold;
}
h3 {
font-weight:normal;
}
.p1 {
font-weight:bold;
}
.p2 {
font-weight:inherit;
}
.p3 {
font-weight:100;
}
.p4 {
font-weight:600;
}
</style>
</head>
<body>
<h3>see you again</h3>
<p class="p1">It's been a long day without you my friend</p>
<p class="p2">It's been a long day without you my friend</p>
<p class="p3">It's been a long day without you my friend</p>
<p class="p4">It's been a long day without you my friend</p>
</body>
</html>
九、文本溢出:text-overflow
在网页开发过程中,可能会遇到内容溢出而导致网页变形的问题。通常会通过 JavaScript 截取字符串或网站后台程序截取一定的字符串,将超出宽度的内容以省略号… 显示,但这两种方法都有其不足之处,如中英文计算字符长度的问题,会导致截取字符串长度无法控制,从而降低程序的通用性。CSS3 新增了 text-overflow 属性,使用该属性可快速地解决上述问题。text-overflow 属性规定当文本溢出包含元素时发生的事情,text-overflow 在使用时父元素必须加 overflow:hidden; 并且强制文本不换行 white-space:nowrap;具体如下所示。
clip 修剪文本(默认)
ellipsis 显示省略符号来代表被修剪的文本
string 使用给定的字符串来代表被修剪的文本(只支持火狐浏览器)
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本溢出</title>
<style>
body {
font-size: 12px;
}
p {
width: 150px;
height: 22px;
line-height: 22px;
overflow: hidden;
white-space: nowrap;
}
.p2 {
text-overflow: clip;
}
.p3 {
text-overflow: ellipsis;
}
.p4 {
text-overflow: "~~~";
}
</style>
</head>
<body>
<h3>再别康桥</h3>
<p class="p1">轻轻的我走了,正如我轻轻的来;</p>
<p class="p2">我轻轻的招手,作别西天的云彩。</p>
<p class="p3">那河畔的金柳,是夕阳中的新娘;</p>
<p class="p4">波光里的艳影,在我的心头荡漾。</p>
</body>
</html>
十、文字阴影:text-shadow
text-shadow 属性用来给页面上的文字添加阴影效果,属性值如下所示。
h-shadow 必需,水平阴影的位置,允许负值
v-shadow 必需,垂直阴影的位置,允许负值
blur 可选,模糊的距离
color 可选,阴影的颜色
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字阴影</title>
<style>
body {
text-align: center;
}
.p1 {
font-size: 30px;
color: #f30;
text-shadow: 10px 10px;
}
.p2 {
font-size: 30px;
color: #f30;
text-shadow: 10px 10px 5px;
}
.p3 {
font-size: 30px;
color: #f30;
text-shadow: 10px 10px 5px #222;
}
.p4 {
font-size: 30px;
color: #f0c;
text-shadow: 10px 10px 3px #ffff00,
20px 20px 6px #66ff66,
30px 30px 9px #00ccff;
}
</style>
</head>
<body>
<h1>再别康桥</h1>
<p class="p1">轻轻的我走了,正如我轻轻的来;</p>
<p class="p2">我轻轻的招手,作别西天的云彩。</p>
<p class="p3">那河畔的金柳,是夕阳中的新娘;</p>
<p class="p4">波光里的艳影,在我的心头荡漾。</p>
</body>
</html>
章节练习:
1.按照如下设计图完成文字排版
参考代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>念奴娇·赤壁怀古</title>
<style>
body{
font-family: "方正行楷简体";
}
.ancientBook {
width: 500px;
height: 300px;
margin: 0 auto;
background-image: url("book.jpg");
background-repeat: no-repeat;
}
.poemTitle {
width: 20px;
line-height: 25px;
font-size: 20px;
float: right;
margin-top: 50px;
margin-right: 2px;
color: brown;
text-shadow: 1px 1px black;
}
.author {
margin-right: 10px;
margin-top: 120px;
float: right;
font-size: 17px;
width: 17px;
text-decoration: underline;
}
p {
margin-top: 25px;
float: right;
font-size: 17px;
width: 17px;
}
.line1 {
margin-right: 15px;
color: rgb(255, 0, 0);
}
.line2 {
margin-right: 15px;
color: rgb(255, 100, 0);
}
.line3 {
margin-right: 15px;
color: rgb(255, 125, 0);
}
.line4 {
margin-right: 13px;
color: rgb(255, 225, 0);
}
.line5 {
margin-right: 15px;
color: rgb(255, 255, 0);
}
.line6 {
margin-right: 15px;
color: rgb(200, 255, 0);
}
.line7 {
margin-right: 13px;
color: rgb(0, 255, 0);
}
.line8 {
margin-right: 13px;
color: rgb(0, 127, 127);
}
.line9 {
margin-right: 13px;
color: rgb(0, 127, 255);
}
.line10 {
margin-right: 15px;
color: rgb(0, 100, 255);
}
.line11 {
margin-right: 15px;
color: rgb(0, 0, 255);
}
.line12 {
margin-right: 15px;
color: rgb(69, 0, 255);
}
.line13 {
margin-right: 15px;
color: rgb(139, 0, 255);
}
.line14 {
margin-right: 13px;
color: rgb(139, 0, 190);
}
</style>
</head>
<body>
<div class="ancientBook">
<h1 class="poemTitle">念奴娇·赤壁怀古</h1>
<h4 class="author">苏轼</h4>
<p class="line1">大江东去 ,浪淘尽 ,千古</p>
<p class="line2">风流人物 。</p>
<p class="line3">故垒西边 ,人道是 ,三国</p>
<p class="line4">周郎赤壁。</p>
<p class="line5">乱石穿空 ,惊涛拍岸 ,</p>
<p class="line6">卷起千堆雪 。</p>
<p class="line7">江山如画,一时多少豪杰</p>
<p class="line8">遥想公瑾当年 ,小乔初嫁</p>
<p class="line9">了 ,雄姿英发 。</p>
<p class="line10">羽扇纶巾 ,谈笑间 ,樯橹</p>
<p class="line11">灰飞烟灭</p>
<p class="line12">故国神游 ,多情应笑我 ,</p>
<p class="line13">早生华发 。</p>
<p class="line14">人生如梦 ,一尊还酹江月 。</p>
</div>
</body>
</html>