HTML——文本属性

原创已于 2023-01-10 14:31:38 修改 · 3.1k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #css3

于 2023-01-10 14:03:56 首次发布

一、文本属性

1.字体大小

font-size：单位是px，浏览器默认是16px,设计图常用字号是12px。

2.字体

font-family:当字体是中文字体、英文字体中有空格时，需加双引号;多个字体中间用逗号链接,先解析第1个字体,如果没有解析第2个字体,以此类推。

3.字体颜色

color:color:red; color:#ff0; color:rgb(255,0,0);0-255。

4.加粗

font-weight:bolder(更粗的)/bold(加粗)/normal (常规)

font-weight:100-900;100-500不加粗600-900加粗

5.倾斜

font-style: italic(斜体字)/oblique(倾斜的文字)/normal （常规显示);

6.文本水平对齐

text-align:left;水平靠左text-align: right;水平靠右

text-align: center;水平居中text-align:justify;水平2端对齐，但是只对多行起作用。

7.行高

line-height的数据=height的数据，可以实现单行文本垂直居中。

8.首行缩进

text-indent可以取负值;text-indent属性只对第一行起作用。

9.字间距

letter-spacing控制文字与文字之前的距离。如果是英文，用word-spacin。

10.文本修饰

text-decoration:none没有/underline下划线/overline上划线/line-through删除线。

11.文字简写

font是font-style font-weight font-size / line-height font-family的简写。

font:italic 800 30px/80px"宋体";顺序不能改变,必须同时指定font-size和font-family属性时才起作用。

前面的字体加粗跟倾斜属性可以删除，但是后边的字体设置和大小不行。

12.检索大小写（英文的大小写）

全部大写uppercase 全部小写lowercase 首字母大写capitalize 不设置none

text-transform:uppercase;

text-transform: lowercase;

text-transform: capitalize;

text-transform: none;

二、代码举例

<!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>
        #ptext{
            /* 字体大小 */
            font-size: 20px;

            /* 字体：当字体是中文字体、英文字体中有空格时，需加双引号;
            多个字体中间用逗号链接,先解析第1个字体,如果没有解析第2个字体,以此类推 */
            font-family:黑体;

            /* 字体颜色 */
            color: turquoise;

            /* 加粗 
            font-weight:bolder(更粗的)/bold(加粗)/normal (常规)
            font-weight:100-900;100-500不加粗600-900加粗*/
            font-weight: 900;

            /* 倾斜 
            font-style: italic(斜体字)/oblique(倾斜的文字)/normal （常规显示);*/
            font-style: normal;

            /* 文本水平对齐：text-align:left;水平靠左text-align: right;水平靠右
            text-align: center;水平居中text-align:justify;水平2端对齐，但是只对多行起作用。 */
            text-align:left;

            /* 行高 :line-height的数据=height的数据，可以实现单行文本垂直居中*/
            line-height: 50px;

            /* 首行缩进：text-indent可以取负值;text-indent属性只对第一行起作用 */
            /* 一个字体的大小就是一个字的缩进，两个字缩进就要乘以2，但是改变字体大小这个字体缩进也要改变。 */
            /* text-indent: 20px; */
            /* 不管字体大小如何改变，都会缩进2个字。 */
            text-indent:2em;

            /* 字间距：控制文字与文字之前的距离。如果是英文，用word-spacin。*/
            /* letter-spacing: 0cm; */
            word-spacing: 1px;

            /* 文本修饰：text-decoration:none没有/underline下划线/overline上划线/line-through删除线 */
            text-decoration: underline;

            /* 文字简写：font是font-style font-weight font-size / line-height font-family的简写。
            font:italic 800 30px/80px"宋体";顺序不能改变,必须同时指定font-size和font-family属性时才起作用 */
            font:italic 800 30px/80px"宋体" ;

        #p2{
            /* 英文的大小写：全部大写uppercase 全部小写lowercase 首字母大写capitalize 不设置none*/
            /* text-transform:uppercase; */
            /* text-transform: lowercase; */
            /* text-transform: capitalize; */
            /* text-transform: none; */
        }
        }
    </style>
</head>
<body>
    <p>文本属性测试对比对象,初始状态是字体:微软雅黑,初始大小,16px,最小字体大小为12px</p>
    <p id="ptext">文本属性测试对象：沐浴着新年的第一缕阳光，在街头巷尾、在商场集市、在工厂车间、在科研实验室……是热气腾腾、是车水马龙、是争分夺秒、是全力坚守；
        全国各地、各行各业，都铆足了劲儿，要把经济发展的节奏拉上来……美好，就在这人人向往的人间烟火里；
        希望，就在这生机勃勃的中华大地上。这，就是咱中国人朝气蓬勃的精气神儿！Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo odit magnam quis ratione eius.
         Exercitationem magni molestiae laudantium expedita enim, id, iusto debitis repellendus explicabo placeat ratione, quos perspiciatis doloribus.
    </p>

     <p id="p2">大家好！Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
        Assumenda aspernatur tempore, accusantium repellat quidem facilis unde porro iste nihil quaerat saepe expedita similique error animi debitis eos tenetur provident reiciendis!</p>
</body>
</html>