CSS 字体风格

粗体

font-weight 属性可以设置文本的粗细。

它有两个属性:

normal 普通粗细
bold 粗文本

示例：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>font-weight</title>

<style>

.a{

font-weight:nomal;

}

.b{

font-weight:bold;

}

</style>

</head>

<body>

<h1>利永贞网</h1>

<p class="a">学编程，上利永贞网</p>

<p class="b">study hard, improve every day</p>

</body>

</html>

斜体

font-style 属性可以设置文本倾斜。

它有3个属性:

normal 正常显示
italic 手写风格斜体
oblique 斜体

示例：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>font-style</title>

<style>

.a{

font-style:nomal;

}

.b{

font-style:italic;

}

.c{

font-style:oblique;

}

</style>

</head>

<body>

<h1>利永贞网</h1>

<p class="a">study hard, improve every day</p>

<p class="b">study hard, improve every day</p>

<p class="c">study hard, improve every day</p>

</body>

</html>

大写和小写

text-transform 属性可以设置文本的大写或小写。

它有3个属性:

upercase 使文本大写显示
lowercase 使文本小写显示
captialize 使每个单词的首字母大写

示例：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>text-transform</title>

<style>

.a{

text-transform:uppercase;

}

.b{

text-transform:lowercase;

}

.c{

text-transform:capitalize;

}

</style>

</head>

<body>

<h1>利永贞网</h1>

<p class="a">study hard, improve every day</p>

<p class="b">study hard, improve every day</p>

<p class="c">study hard, improve every day</p>

</body>

</html>

下划线和删除线

text-decoration 属性可以给文本设置线条。

它有5个属性:

none 删除文本的装饰线
underline 在文本底部增加一条实线
overline 在文本顶部增加一条实线
line-through 在文本中间穿一条线
blink 文本动态闪烁

示例：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>text-decoration</title>

<style>

.a{

text-decoration:none;

}

.b{

text-decoration:underline;

}

.c{

text-decoration:overline;

}

.d{

text-decoration:line-through;

}

.e{

text-decoration:blink;

}

</style>

</head>

<body>

<h1>利永贞网</h1>

<p class="a">study hard, improve every day</p>

<p class="b">study hard, improve every day</p>

<p class="c">study hard, improve every day</p>

<p class="d">study hard, improve every day</p>

<p class="e">study hard, improve every day</p>

</body>

</html>

行间距

line-height 属性可以设置行间距。

行间距会使文本垂直方向的空隙增大。

设置行间距单位使用em，不要使用px，这样的好处是可以根据用户选择的文本大小来设定。

行间距的初始值最好设定在1.4em~1.5em之间。

示例：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>line-height</title>

<style>

.a{

line-height:1.4em;

}

.b{

line-height:2.4em;

}

</style>

</head>

<body>

<h1>利永贞网</h1>

<p class="a">study hard, improve every day</p>

<p class="b">study hard, improve every day</p>

</body>

</html>

字母间距

letter-spacing 属性可以设置字母间距。

示例：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>letter-spacing</title>

<style>

.a{

letter-spacing:2em;

}

.b{

letter-spacing:1em;

}

</style>

</head>

<body>

<h1>利永贞网</h1>

<p class="a">study hard, improve every day</p>

<p class="b">study hard, improve every day</p>

</body>

</html>

单词间距

word-spacing 属性可以设置单词之间距离。

示例

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>word-spacing</title>

<style>

.a{

word-spacing:2em;

}

.b{

word-spacing:1em;

}

</style>

</head>

<body>

<h1>利永贞网</h1>

<p class="a">study hard, improve every day</p>

<p class="b">study hard, improve every day</p>

</body>

</html>

对齐方式

text-align属性可以设置文本的对齐方式。

它有4个属性:

left 设置文本左对齐
right 设置文件右对齐
center 设置文本居中显示
justify 设置文本两端对齐

示例：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>text-align</title>

<style>

.a{

text-align:left;

}

.b{

text-align:right;

}

.c{

text-align:center;

}

.d{

text-align:justify;

}

</style>

</head>

<body>

<h1>利永贞网</h1>

<p class="a">study hard, improve every day</p>

<p class="b">study hard, improve every day</p>

<p class="c">study hard, improve every day</p>

<p class="d">study hard, improve every day</p>

</body>

</html>

垂直对齐

vertical-align 垂直对齐通常在文本做为内联元素时使用。

它的属性有：

baseline 使元素的基线与父元素的基线对齐
sub 使元素的基线与父元素的下标基线对齐
super 使元素的基线与父元素的上标基线对齐
text-top 使元素的顶部与父元素的字体顶部对齐
text-bottom 使元素的底部与父元素的字体底部对齐
middle 使元素的中部与父元素的基线加上父元素x-height的一半对齐
top 使元素及其后代元素的顶部与整行的顶部对齐
bottom 使元素及其后代元素的底部与整行的底部对齐

示例：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>text-align</title>

<style>

.a{

vertical-align:text-top;

}

.b{

vertical-align:middle;

}

.c{

vertical-align:text-bottom;

}

</style>

</head>

<body>

<h1>利永贞网</h1>

<p>

<img class="a" src="https://www.liyongzhen.com/liyongzhen/docs/images/downloadmediazip.png"/>

study hard, improve every day

</p>

<p>

<img class="b" src="https://www.liyongzhen.com/liyongzhen/docs/images/downloadmediazip.png"/>

study hard, improve every day

</p>

<p>

<img class="c" src="https://www.liyongzhen.com/liyongzhen/docs/images/downloadmediazip.png"/>

study hard, improve every day

</p>

</body>

</html>

文本缩进

text-indent 属性可以设置首行文本缩进。

中文的首行缩进两个字可以设置为2em。

示例：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>text-indent</title>

<style>

.a{

text-indent:2em;

}

</style>

</head>

<body>

<h1>利永贞网</h1>

<p class="a"

>一日，许褚走马入东门，正迎许攸，攸唤褚曰：“汝等无我，安能出入此门乎？”褚怒曰：“吾等千生万死，身冒血战，夺得城池，汝安敢夸口！”攸骂曰：“汝等皆匹夫耳，何足道哉！”褚大怒，拔剑杀攸，提头来见曹操，说“许攸如此无礼，某杀之矣。”操曰：“子远与吾旧交，故相戏耳，何故杀之！”深责许褚，令厚葬许攸。乃令人遍访冀州贤士。冀民曰：“骑都尉崔琰，字季珪，清河东武城人也。数曾献计于袁绍，绍不从，因此托疾在家。”操即召琰为本州别驾从事，而谓曰：“昨按本州户籍，共计三十万众，可谓大州。”琰曰：“今天下分崩，九州幅裂，二袁兄弟相争，冀民暴骨原野，丞相不急存问风俗，救其涂炭，而先计校户籍，岂本州士女所望于明公哉？”操闻言，改容谢之，待为上宾。

</p>

<p>study hard, improve every day</p>

</body>

</html>

投影

text-shadow 属性可以设置文本的投影效果。

它有4个值，同时使用，也可以有选择地使用：

第一个值设置阴影左右延伸长度，负值向左，正值向右
第二个值设置阴影上下延伸长度，负值向上，正值向下
第三个值设置阴影的模糊程度
第四个值设置阴影的颜色

示例：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>text-align</title>

<style>

.a{

text-shadow:1px 1px 0px #df3232;

}

.b{

text-shadow:1px 1px 5px #df3232;

}

.c{

text-shadow:2px 2px 9px #red;

}

.d{

text-shadow:1px 1px 10px blue;

}

</style>

</head>

<body>

<h1>利永贞网</h1>

<p class="a">study hard, improve every day</p>

<p class="b">study hard, improve every day</p>

<p class="c">study hard, improve every day</p>

<p class="d">study hard, improve every day</p>

</body>

</html>

首字母

:first-letter 属性可以设置首字母

它是一个伪选择器。

示例:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>:first-letter</title>

<style>

.b:first-letter{

font-size:2em;

font-weight:bold;

}

</style>

</head>

<body>

<h1>利永贞网</h1>

<p class="a">学编程，上利永贞网</p>

<p class="b">study hard, improve every day</p>

</body>

</html>

首行文本

:first-line属性可以设置首字母

它是也一个伪选择器。

示例:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>:first-line</title>

<style type="text/css">

p.a:first-line {

font-weight: bold;

}

</style>

</head>

<body>

<h1>利永贞网</h1>

<p class="a">study hard, improve every day</p>

<p>学编程，上利永贞网</p>

<p>study hard, improve every day</p>

</body>

</html>

链接样式

链接样式也是伪选择器，有两个：

:link 未访问过的链接样式

:visited 已经单击过的样式

示例：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>链接样式</title>

<style type="text/css">

a:link{

color:#000;

}

a:visited{

color:#982312;

}

</style>

</head>

<body>

<h1>利永贞网</h1>

<p class="a">study hard, improve every day</p>

<a href="https://www.liyongzhen.com/" target="_blank">学编程，上利永贞网</a>

<p>study hard, improve every day</p>

</body>

</html>

响应用户

响应用户有3个伪选择器：

:hover 鼠标悬停时的样式

:active 用户在元素上操作时生效

:focus 元素拥有焦点时生效

示例：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>链接样式</title>

<style type="text/css">

a:link{

color:#000;

}

a:visited{

color:#982312;

}

a:hover{

color:yellow;

}

a:active{

color:red;

}

a:focus{

color:blue;

}

</style>

</head>

<body>

<h1>利永贞网</h1>

<p class="a">study hard, improve every day</p>

<a href="https://www.liyongzhen.com/" target="_blank">学编程，上利永贞网</a>

<p>study hard, improve every day</p>

</body>

</html>