文本属性

一、字体大小

默认px；

font-size 字体大小：单位px，浏览器默认16px，设计图常用字号是12
font-famliy

字体：当字体是中文字体、英文字体中间有空格时，需要加双引号。

可以使用多个字体，中间用逗号隔开，先解析第1个字体，没有不支

持，则继续解析第二个字体，都不支持，则使用浏览器的默认字体。

注：字体类型很多，具体需要时查阅资料即可
color

颜色：有三种表达方式

a，red，blue等等

b，16进制表示

c，rgb()方法
font-weight

字体加粗，

数字方式：取值100-900，常用的为100，400，700， 100-500不加粗，600-900加粗

单词方式：bloder（更粗），blod（加粗），normal(常规)
font-style 字体倾斜:italic（斜体），oblique（倾斜的文字），normal(常规，即不倾斜)
text-align

text-align:left 水平靠左

text-align:right 水平靠右

text-align:center 水平居中

text-align:justify 水平2端对齐，但只对多行起作用

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

line-height 行高

 

 

 

字体大小示例：

<!DOCTYPE html>　　
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #p{
            font-size: 20px;
        }
    </style>
</head>
    <p id="p">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
        Quia recusandae quam dignissimos fugiat odio ullam fuga, 
        ex quod facere quibusdam quas earum molestiae reiciendis, 
        nemo velit sint esse consequuntur? Nemo.
    </p>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
        Quia recusandae quam dignissimos fugiat odio ullam fuga, 
        ex quod facere quibusdam quas earum molestiae reiciendis, 
        nemo velit sint esse consequuntur? Nemo.
    </p>
<body>
    
</body>
</html>

执行结果：

 

 

 字体示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #p{
            font-family: 宋体;
        }
    </style>
</head>
    <p id="p">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
        Quia recusandae quam dignissimos fugiat odio ullam fuga, 
        ex quod facere quibusdam quas earum molestiae reiciendis, 
        nemo velit sint esse consequuntur? Nemo.
    </p>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
        Quia recusandae quam dignissimos fugiat odio ullam fuga, 
        ex quod facere quibusdam quas earum molestiae reiciendis, 
        nemo velit sint esse consequuntur? Nemo.
    </p>
<body>
    
</body>
</html>

执行结果：

 

 

 颜色示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .p1{
        color:Red;
    }
        .p2{
            color:rgb(100, 0, 100);
        }
        .p3{
            color:#ff00ff;
        }
    </style>
</head>
<body>
    <p class='p1'>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
        Dolorem dolorum placeat saepe. Excepturi a, tenetur sit 
        nulla maxime soluta quaerat. Voluptas, cumque autem. Veritatis
         deserunt quas, quia magni dolorem ex.
    </p>
    <p class='p2'>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
        Dolorem dolorum placeat saepe. Excepturi a, tenetur sit 
        nulla maxime soluta quaerat. Voluptas, cumque autem. Veritatis
         deserunt quas, quia magni dolorem ex.
    </p>
    <p class='p3>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
        Dolorem dolorum placeat saepe. Excepturi a, tenetur sit 
        nulla maxime soluta quaerat. Voluptas, cumque autem. Veritatis
         deserunt quas, quia magni dolorem ex.
    </p>
</body>
</html>

效果：

 

 

 

 

 

 

 粗体和斜体的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .p1{
            font-weight: bolder;
        }
        .p2{
            font-style: italic;
        }
    </style>
</head>
<body>
    <P class="p1">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Consequuntur atque ullam quis ad ipsum, veritatis cupiditate 
        praesentium dignissimos quo, rem, ratione illo reiciendis 
        recusandae natus laboriosam! Possimus sint omnis quos?
    </P>
    <P class="p2">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Consequuntur atque ullam quis ad ipsum, veritatis cupiditate 
        praesentium dignissimos quo, rem, ratione illo reiciendis 
        recusandae natus laboriosam! Possimus sint omnis quos?
    </P>
</body>
</html>

效果：

 文本水平对齐与单行文本垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            /* text-align还有left和right */
           text-align: center; 
        }
    </style>
</head>
<body>
    <div class="box1">大家好</div>
</body>
</html>

效果：

多行文本的居中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            /* text-align还有left和right */
           text-align: center; 
           width: 150px;
           background-color: blanchedalmond;
        }
        .box2{
            text-align: center;
            width: 150px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box1">大家好</div>
    <div class="box2">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
        Deserunt illo nesciunt ullam incidunt sed pariatur voluptate 
        neque placeat suscipit, iure id aut! Harum quaerat veritatis 
        molestias pariatur, consectetur labore esse!
    </div>
</body>
</html>

效果：

 

posted @ 2022-04-12 12:45  Target_L  阅读(179)  评论(0)    收藏  举报