CSS基础-03-文本和字体（文本颜色、文本对齐、删除线、下划线
2022-06-12 本文已影响0人
玄德公笔记
1.文本
1.1 文本颜色 （color:xxx）
- 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜀</title>
<style>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>这是标题 1</h1>
<p>这是一个普通的段落。请注意,本文是红色的。页面中定义默认的文本颜色选择器。</p>
<p class="ex">这是一个类为"ex"的段落。这个文本是蓝色的。</p>
</body>
</html>
-
显示
image.png
1.2 文本对齐（text-align）
- 居中
text-align:center;
- 右对齐
text-align:right;
- 两端对齐
text-align:justify;
1.3 上/中/下划线（text-decoration）
- 上划线
text-decoration:overline;
- 中划线（删除线）
text-decoration:line-through;
- 下划线
text-decoration:underline;
- 不划线（如超链接）
text-decoration:none
1.4 大小写转换（text-transform）
- 小写转大写
text-transform:uppercase;
- 大写转小写
text-transform:lowercase;
- 首字母大写
text-transform:capitalize;
1.5 文本缩进（text-inden）
text-indent:50px;
2. 字体
2.1 字体系列（font-family）
font-family:xxxx,"xx xx",xxxx;
说明：
可以定义几个，后边是备用
空格或汉语要加引号
2.2 字体样式（font-style）
- 正常显示
font-style:normal;
- 斜体
font-style:italic;
2.3 字体大小（font-size）
- 用像素设置
font-size:40px;
- 用em设置（1em = 16px）
font-size:2.5em;
- 用百分数定义
font-size:50%;
2.4 字体加粗（font-weight）
font-weight:normal;
font-weight:lighter;
font-weight:bold;
font-weight:800;
2.5 变体和正常体（font-variant）
font-variant:small-caps;
font-variant:nomal;
-
显示示例
image.png
