CSS基础-03-文本和字体(文本颜色、文本对齐、删除线、下划线、大小写转换text-transform、文本缩进,字体系列、字体样式、字体大小、字体加粗、字体变体)

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>
  • 显示
    在这里插入图片描述

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;
  • 显示示例
    在这里插入图片描述

posted on 2022-03-31 12:14  运维开发玄德公  阅读(8)  评论(0编辑  收藏  举报  来源

导航