21.1 CSS Text Styles

1. Font slant

font-style属性: 为文本设置字体样式.

常用取值:    
normal: 正常显示文本.  快捷键: fs+tab.
italic: 显示斜体文本.  快捷键: fsn+tab.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font style</title>
    <style>
        p {
      
      
            font-style: italic;
        }
    </style>
</head>
<body>
<p>你好！</p>
</body>
</html>

2. Font weight

font-weight属性: 设置文本的字体粗细程度.

常用取值:                        
normal:  默认值, 表示标准的字体粗细; 快捷键: fwn+tab.   
bold:    表示加粗文本;              快捷键: fwb+tab.               
lighter: 表示更轻的字体权重;         快捷键: fwl+tab 
bolder:  表示更重的字体权重;         快捷键: fwbr+tab 
数字值: 可以使用数值来指定相对于标准字体的粗细程度, 如100, 200, 300等, 或使用绝对值的粗细程度, 如400, 700, 900等.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font weight</title>
    <style>
        p {
      
      
            font-weight: bold;
          
        }
    </style>
</head>
<body>
<p>你好！</p>
</body>
</html>

3. Font size

font-size属性: 设置文本的字号大小. 它可以应用于任何具有文本内容的HTML元素.

在CSS中, 可以使用像素(px), 百分比(%), em, rem等单位来指定字号大小.
以下是一些示例:
font-size: 16px;   使用像素作为单位;                        快捷键: fz16 + tab.
font-size: 80%;    相对于父元素字号的百分比;                 快捷键: fz80% + tab.
font-size: 2em;    相对于父元素字号的倍数;                   快捷键: fz2e + tab.
font-size: 0.8rem; 相对于根元素(通常是<html>)字号的倍数;      快捷键: fz0.8r + tab.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font size</title>
    <style>
        p {
      
      
            font-size: 30px;
        }
    </style>
</head>
<body>
<p>你好！</p>
</body>
</html>

4. Text font

font-family属性: 用于指定文本的字体系列. 它可以应用于任何具有文本内容的HTML元素.

在CSS中, 可以通过指定一系列字体名称或字体族来设置字体系列.
在字体系列的列表中, 浏览器会按优先级依次尝试使用字体, 直到找到合适的可用字体为止.

值: 字体名称, 默认为宋体.
常用字体: 宋体(SimSun), 黑体(SimHei), 微软雅黑(Microsoft YaHei).
快捷键: ff+tab font-family:;

注意事项: 
* 1. 中文字体中包含英文, 英文字体没有包含中文, 设置后能影响到中文的就是中文字体否则就是英文字体.
* 2. 如果取值是中文, 需要加单引号或双引号.
* 3. 设置的字体是电脑系统上安装的了的字体.
* 4. 设置的字体不存在, 会使用默认使用宋体显示.
* 6. 可以设置备选方案, 设置多个值, 值与值之间用逗号隔开.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font family 1</title>
    <style>
        p {
      
       
            font-family: '楷体', '微软雅黑';
        }
    </style>
</head>
<body>
    <p>你好！</p>  
</body>
</html>

让中英文分别使用不同的字体: 预备方案先设置英文字体再设置中文字体, 让字母使用英文字体, 中文使用中文字体.
遇到中文时英文字体不起作用就使用备用的字体方案.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font family 2</title>
    <style>
        p {
      
      
            font-family: Arial, '楷体';
        }
    </style>
</head>
<body>
<p>abc 你好！</p>
</body>
</html>

5. Text Style

font属性: 设置文字样式的属性, 它可以接受多个值, 用空格分隔.
font: font-style font-weight font-size/line-height font-family;

注意事项:
font-style与font-weight的值可以省略, 可以互换位置.
font-size与font-family的值不可以省略, 不可以互换位置, 必须写在的最后两位.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font</title>
    <style>

        p {
      
      
            /*
            font-style: italic;
            font-weight: bold;
            font-size: 30px;
            font-family: '楷体';
            */
            font: italic bold 30px '楷体';
        }
    </style>
</head>
<body>
<p>
    abc, 你好！
</p>
</body>
</html>

6. Font color

color属性: 设置文字的颜色.

可以使用以下不同的值来定义颜色:
* 1. 预定义颜色名称(如red, blue, green等).
* 2. 十六进制颜色值(如#FF0000表示红色); 每两位十六进制为一组, 分别代表R/G/B.
* 3. RGB颜色值(如rgb(255, 0, 0)表示红色); 三原色数字代码光源的亮度, 0不发光, 255最亮.
* 4. RGBA颜色值(如rgba(255, 0, 0, 0.5)表示带有透明度的红色, 透明度值范围为0-1).
* 5. HSL颜色值(如hsl(0, 100%, 50%)表示红色).
* 6. HSLA颜色值(如hsla(0, 100%, 50%, 0.5)表示带有透明度的红色, 透明度值范围为0-1).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字颜色属性</title>
    <style>
        p {
      
      
            color: rgba(00, 255, 255, 0.5);
        }
    </style>
</head>
<body>
    <p>你好！</p>
</body>
</html>

7. Font decoration

text-decoration属性: 设置文字的装饰效果, 可以添加或删除文字的下划线, 删除线, 上划线.

常用取值:
none: 无任何装饰效果(默认值); 快捷键: td+tab.
underline: 添加下划线;       快捷键: tau+tab. 
overline: 添加上划线;        快捷键: tao+tab.
line-through: 添加删除线;    快捷键: tal+tab.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text decoration</title>
    <style>
        p {
      
      
            text-decoration: overline;
        }

        a {
      
       /* 取出a标签的下划线 */
            text-decoration: none;
        }
    </style>
</head>
<body>
<p>你好！</p>
<a href="https:www.baidu.com">百度</a>
</body>
</html>

8. Horizontal alignment

text-align属性: 设置文字在其容器中的水平对齐方式.

常用取值:
left: 将文字左对齐;      快捷键: ta+tab.
right: 将文字右对齐;     快捷键: tar+tab.
center: 将文字居中对齐;  快捷键: tac+tab.
justify: 将文字两端对齐, 尽可能平均分布在容器中.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text align</title>
    <style>
        p {
      
      
            text-align: center;
        }
    </style>
</head>
<body>
<p>你好！</p>
</body>
</html>

9. Font indentation

text-indent属性: 用于设置文本块(block-level element)的首行缩进量.
通过设置text-indent, 可以在段落或其他块级元素的每一行的开头添加一个空格或指定的缩进值.

常用取值:
* 1. 像素值(px): 可以使用具体的像素数值来设置缩进值.              快捷键: ti2+tab  -->  text-indent: 2px.
* 2. em单位(em): em单位是相对于当前元素的字体大小的倍数.          快捷键: ti2e+tab -->  text+indent: 2em.
* 3. 百分比(%):  可以使用百分比值来相对于父元素的宽度来设置缩进值. 快捷键: ti80%    -->  text-indent: 80%.
* 4. 继承值(inherit) 可以使用inherit关键字让元素继承父元素的text-indent值.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text indent</title>
    <style>
        p {
      
      
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <p>hello  world!</p>
</body>
</html>

21.1 CSS Text Styles

1. Font slant

2. Font weight

3. Font size

4. Text font

5. Text Style

6. Font color

7. Font decoration

8. Horizontal alignment

9. Font indentation

Guess you like