文字样式

文本颜色：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是相对于父元素而言的

em 是一个相对的大小，我们可以这样来设置1 em，0.5 em，1.5 em 等，而且 em 还可以指定到小数点后三位，比如“1.365em”。
而其中“相对”的意思是指相对于元素父元素的 font-size。比如：
使用 em 布局是希望在父节点中修改字体大小时，整个网站的页面字体都跟随变化。
如果在一个<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>

CSS 文字样式第二节相关推荐

各种css文字样式效果——多个行内元素居中，三点，缩进，阴影等
前端基础知识--css样式学习一.文字效果 1. 文本垂直水平居中.(一行和多行) 2. 文本超出显示省略值... 3. 文本换行 4. 文本缩进 5. 文本两端对齐 6. 字体阴影效果一.文字效 ...
css常用样式个人小结
常用的css 1.css的书写方式选择标签{ 书写样式每一个样式结束,必须加分号所有符号都是英文 k:v; k:v } 外联(外链):link 工作中需要使用 ...
Web前端开发笔记——第三章 CSS语言第四节 CSS列表、表格样式
目录一.CSS列表样式 (一)设计列表项前标志类型 (二)设计列表项前标志位置 (三)设计列表项图片 (四)设计整体列表属性二.CSS表格样式 (一)设计表格大小 (二)设计表格边框 (三)奇偶选 ...
（Java高级教程）第四章必备前端基础知识-第二节1：CSS概述和选择器
文章目录一:CSS概述 (1)概述 (2)语法规范 (3)CSS引入方式二:选择器 (1)基础选择器 ①:标签选择器 ②:类选择器 ③:id选择器 ④:通配符选择器总结 (2)复合选择器 ①:后 ...
css常用样式（文字样式、边框样式、背景样式）
CSS常用样式 CSS常用文字样式 color: brown; /*文字颜色*/ /*color: #333333;这样的也可以,这种颜色的表示方法是RGB的方式,没两位数表示一种颜色的度数, 一般情 ...
CSS 3之文字样式
文字样式 1. 定义文字颜色 3. 定义文字的字号 1. 定义文字颜色在 css 样式中,多使用 color属性定义颜色: 例子1 : <!DOCTYPE html> <html& ...
【web前端】CSS高级技巧（精灵图，字体图标，CSS三角，CSS用户界面样式，文字与图片垂直对齐，溢出的文字省略号显示，常见布局技巧，CSS初始化）
使用课程是黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 目录一.精灵图 1.为什么需要精灵图 2.精灵图( sprit ...
【html5+css】文字样式 line-height 和 vertical-align css背景 css边框
**一.文字样式字体可以是列表的形式,一般英语字体放到前面,后面的字体是前面的字体的后备字体字体名称中有空格,必须要用引号来包裹** font-weight:指定字体粗细 -blod normal ...
CSS a控制超链接文字样式
超链接的代码 <a href="http://www.divcss5.com/" target="_blank" title="关于div cs ...
前端笔记（9）元素的隐藏与显示，css用户界面样式，vertical-align垂直对齐，溢出文字省略号显示，css精灵技术，过渡，焦点，滑动门，margin负值
css样式表/层叠样式表(7) 元素的隐藏与显示 (1)dispaly显示 (2)visibility可见性 (3)overflow溢出 css用户界面样式鼠标样式cursor 轮廓线outline ...

CSS 文字样式第二节

文字样式

文本颜色：color

缩进：text-indent

行高：line-height

字母间隔：letter-spacing

水平对齐：text-align

文本装饰：text-decoration

字体大小：font-size

字体加粗：font-weight

文本溢出：text-overflow

文字阴影：text-shadow

CSS 文字样式第二节相关推荐

最新文章

热门文章

CSS 文字样式 第二节

文字样式

文本颜色：color

缩进：text-indent

行高：line-height

字母间隔：letter-spacing

水平对齐：text-align

文本装饰：text-decoration

字体大小：font-size

字体加粗：font-weight

文本溢出：text-overflow

文字阴影：text-shadow

CSS 文字样式 第二节相关推荐

最新文章

热门文章

CSS 文字样式第二节

CSS 文字样式第二节相关推荐