CSS文本属性详解：从字体到颜色-CSDN博客

本文链接：https://blog.csdn.net/weixin_55101030/article/details/117306908

3.字体属性

3.1字体系列

CSS使用font-family属性定义文本的字体系列。
P { font-family: “微软雅黑”;}
div {font- family: Arial, “Microsoft Yahei”, “微软雅黑”;}
●各种字体之间必须使用英文状态下的逗号隔开
●- 般情况下，如果有空格隔开的多个单词组成的字体加引号.
●尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示
●最常见的几个字体: body {font- family: ‘Microsoft YaHei’ ,tahoma,arial’Hiragino Sans GB’; }

3.2字体大小

CSS使用font- size属性定义字体大小。
P{
font-size: 20px;
}
●px(像素 )大小是我们网页的最常用的单位
●谷歌浏览器默认的文字大小为16px
●不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小
●可以给 body指定整个页面文字的大小.

例子

<style>
    h2 {
        font-family: '微软雅黑';
    }
    p {
        /* font-family: 'Microsoft Ya Hei','Arial'; */
        font-family: 'Roman','Times',serif;
    }
    body {
        font-size: 15px;
    }
    /* 标题标签比较特殊，需要单独指定文字大小 */
    h2 {
        font-size: 25px;
    }
</style>

</head>
<body>
    <h2>我的秘密</h2>
    <p>我是你爸爸吧简洁大方将你介绍给</p>
    <p>我是你爸爸吧简洁大方将你介绍给</p>
    <p>我是你爸爸吧简洁大方将你介绍给</p>
    <p>我是你爸爸吧简洁大方将你介绍给</p>
    <p>我是你爸爸吧简洁大方将你介绍给</p>
</body>

3.3字体粗细

CSS使用font-weight属性设置文本字体的粗细。
P {
font -weight: bold;

}

属性值          描述
normal        默认值(不加粗的)
bold           定义粗体(加粗的)
100-900        400等同于normal,而700等同于bold注意这个数字后面不跟单位

●学会让加粗标签 (比如h和strong等)不加粗,或者其他标签加粗
●实际开发时,我们更喜欢用数字表示粗细

示例

}

.bold {

/* font-weight: bold; */

/* 这个700后面不要跟单位，等价于bold都是加粗的效果 */

提倡使用数字

font-weight: 700;

h2 {

/* font-weight: 400; */

/* normal正常的文字 */

font-weight: normal;

}

3.4文字样式

CSS使用font-style属性设置文本的风格。
P{
font-style: normal;
}

属性值             作用
normal   默认值，浏览器会显示标准的字体样式font-style: normal;
italic         浏览器会显示斜体的字体样式。
注意:平时我们很少给文字加斜体。反而要给斜体标签(em, i)改为不倾斜字体。

示例

   <style>
        p {
            font-style: italic;
        }
        em {
            /* 让倾斜的字体不倾斜 */
            font-style: normal;
        }
    </style>
</head>
<body>
    <p>同学,上课时的状态</p>
    <em>下课的你</em>

3.5字体的复合属性

字体属性可以把以上文字样式综合来写，这样可以更节约代码
body {
font: font-style font-weight font-size/line-height
font-family;
}
●使用font属性时,必须按上面语法格式中的顺序泻,不能更换序,并且各个属性间以空格隔开
●不需要设置的属性可以省略(取默认值) , 但必须保留font-size和font-family属性,否则font属性将不起作用

示例

 <style>
        /* 想要的div文字,倾斜,加粗,字号16像素 */
        div {
            /* font-style: italic;
            font-weight: 700;
            font-size: 16px;
            font-family: 'Microsoft yahei'; */
            /* font: font-style font-weight font-size/line-height font-family; */
            /* font: italic 700 16px 'Microsoft yahei'; */
            font: 20px 'Microsoft yahei';
        }
    </style>
</head>
<body>

    <div>三生三世十里桃花</div>

3.6字体属性总结

属性            表示                     注意点
font-size       字号             我们通常用的单位是px 像素，-定要跟上单位
font-family    字体                实际工作中按照团队约定来写字体
font-weight     字体粗细       记住加粗是700或者bold不加粗是normal或者400 记住数字不要跟单位
font-style          字体样式            记住倾斜是italic    不倾斜是normal工作中我们最常用normal
font           字体连写               1.字体连写是有顺序的   不能随意换位置2.其中字号和字体必须同时出现

4.文本属性

4.1文本颜色

CSS Text (文本)属性可定义文本的外观,比如文本的颜色、对挤文本装饰文本、文本缩进、行间距等。
文本颜色
color属性用于定义文本的颜色。
div {
color: red;
}
表示表示属性值

预定义的颜色值           red, green, blue, 还有我们的御用色pink
十六进制                   #FF00OO，#FF6600， #29D794
RGB代码                           rgb(255,0.0或rgb(19%.0%.0%)

例子

 <style>
       div {
           /* color: deeppink; */
           /* color: #6200ff */
           color: rgb(0, 255, 0);
       } 
    </style>
</head>
<body>

    <div>喜欢pink的都是喜欢狗儿</div>

4.2对齐文本

text- align属性用于设置元素内文本内容的水平对齐方式。
div {
text-align: center;
}

属性值       解释
left             左对齐(默认值)
right         右对齐 

center        居中对齐

示例

   <style>
       h1 {
           /* 本质是h1盒子里面的文字水平居中对齐 */
           text-align: right;
       } 
    </style>
</head>
<body>

    <h1>居中对齐文本</h1>

4.3装饰文本

text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线上划线等。
div {
text-decoration: underline;

}

属性值                    描述.
none                  默认。没有装饰线(最常用)
underline               下划线。链接a自带下划线(常用)
overline                上划线。(几乎不用)
line-through                删除线。(不常用)

4.4文本缩进

text-indent属性用来指定文本的第一行的缩进,通常是将段落的首行缩进。
div {
text- indent: 10px;

}

通过设置该属性,所有元素的第一行都可以缩进一个给定的长度 ,甚至该长度可以是负值
P {
text- indent: 2em;

}

em是-一个相对单位.就是当前元素( font-size) 1个文字的大小，如果当前元素没有设置大小，则会按照父元
素的1个文字大小。

示例

<style>
        p {
            /* 文本的第一行首行缩进多少距离 */
           /* text-indent: 24px; */
           /* 如果此时写了2m则是缩进当前元素2个文字大小的距离 */
           text-indent: 2em;
        }
    </style>
</head>
<body>
    <p>文字是人类用符号记录表达信息以传之久远的方式和</p>
    <p>工具。现代文字大多是记录语言的工具。人类往往先</p>
    <p>有口头的语言后产生书面文字，很多小语种，有语言但</p>
    <p>没有文字。文字的不同体现了国家和民族的书面表达的方式和思维不
    同。文字使人类进入有历史记录的文明社会。</p>

4.5行间距

line- -height属性用于设置行间的距离(行高).可以控制文字行与行之间的距离.
P {
line- height: 26px;

}

示例

 <style>
        div {
            line-height: 16px;
        }
        p {
            line-height: 35px;
        }
    </style>
</head>
<body>
    <div>中国人</div>
    <p>文字是人类用符号记录表达信息以传之久远的方式和</p>
    <p>工具。现代文字大多是记录语言的工具。人类往往先</p>
    <p>有口头的语言后产生书面文字，很多小语种，有语言但</p>
    <p>没有文字。文字的不同体现了国家和民族的书面表达的方式和思维不
    同。文字使人类进入有历史记录的文明社会。</p>

4.6文本属性

CSS Text (文本)属性可定义文本的外观,比如文本的颜色、对挤文本装饰文本、文本缩进、行间距等。

属性                         表示                               注意点
color                     文本颜色                       我们通常用十六进制比如而且是简写形式#fff
text-align                文本对齐                          可以设定文字水平的对齐方式
text-indent                  文本缩进                    通常我们用于段落首行缩进2个字的距离text-indent: 2em;
text-decoration          文本修饰                 记住添加下划线underline取消下划线none
line-height                         行高                         控制行与行之间的距离