CSS基础-字体和文本属性设置 随学笔记

CSS-美化网页元素-字体和文本属性

使用CSS样式美化网页文本具有如下意义。

1. 有效的传递页面信息

2. 使用CSS美化过的页面文本，使页面漂亮、美观，吸引用户

3. 可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容

4. 具有良好的用户体验

一、字体属性

1. 字体设置

CSS使用font-family属性定义文本的字体系列，字体可以使用英文字体,也可以使用多个字体，各种字体之间必须使用英文状态下的逗号隔开；

注意事项：

一般情况下，如果有空格隔开的多个单词组成的字体，加引号；

尽量使用系统默认自带的字体，保证在任何用户的浏览器中都能正确显示；

最常见的几个字体：body{font-family： 'MicrosoftYaHei',tahoma,arial,'Hiragino Sans GB';}

使用多个字体的好处是：系统按顺序检测浏览器是否有这个字体，如果不存在，就会转向下一个字体，如果存在，就优先使用；   

实际开发中，字体设置常用于标签，按照团队约定来设置字体。

    

泰戈尔经典语录
世界上最遥远的距离，不是生与死，而是我就站在你面前，你却不知道我爱你。——泰戈尔《鱼和飞鸟的故事》
纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。
寂静在喧嚣里低头不语，沉默在黑夜里与目光结交，于是，我们看错了世界，却说世界欺骗了我们。
生如夏花之灿烂，死如秋叶之静美。
不要着急，最好的总会在最不经意的时候出现。

2. 字体大小和粗细

CSS使用font-size属性定义字体大小

如：p {

        font-size: 20px;

    }

注意：

px（像素）大小是网页最常用的单位；

    谷歌浏览器默认文字大小是16px；

    不同浏览器可能默认的文字大小不一致，我们尽量给一个明确值大小，不要默认大小， 可以给body指定字体大小；

    标题标签比较特殊，，需要单独指定文字大小；

CSS使用font-width设置文字粗细

参数：normal  正常的字体  相当于number为400，声明此值将取消之前的任何设置

    bold：粗体相当于number为700，也相当于b对象的作用

    bolder：特粗体  lighter 细体

泰戈尔经典语录
世界上最遥远的距离，不是生与死，而是我就站在你面前，你却不知道我爱你。——泰戈尔《鱼和飞鸟的故事》
纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。
寂静在喧嚣里低头不语，沉默在黑夜里与目光结交，于是，我们看错了世界，却说世界欺骗了我们。
生如夏花之灿烂，死如秋叶之静美。
不要着急，最好的总会在最不经意的时候出现。

3.字体文字样式

CSS使用font-style属性设置文本样式

参数：normal:默认值，浏览器会显示标准的字体样式

           italic：浏览器会显示斜体的字体样式

    

泰戈尔经典语录
泰戈尔

4. 字体属性-复合属性

所谓

复合属性：就是前几种属性的简写的方式

一般情况下，想要设置div文字变倾斜 加粗 字号设置为16像素，并且是微软雅黑 ，写法如下

        div {

            font-size: 16px;

            font-family: "Microsoft Yahei";

            font-weight: 700;

            font-style: italic;

        }

但这样写比较麻烦，代码行过多，所以我们可以使用复合属性

格式：

            font: font-style font-weight font-size/line-height font-family;

注意： 不能更改顺序，且各个属性之间以空格隔开；

            不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性不起作用。

三生三世十里桃花，一心一意百行代码

可以产生同样的效果。

二、文本属性

1.文本颜色

CSS文本属性可以定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等

color属性用于定义文本颜色：

方式：1.预定义的颜色值：red green blue 等；

           2.十六进制： #FF0000，#FF6600,#29D794等；

           3.RGB代码：rgb（255,0）或rgb（100%，0%，0%） r-red g-green b-blue；

泰戈尔经典语录
世界上最遥远的距离，不是生与死，而是我就站在你面前，你却不知道我爱你。——泰戈尔《鱼和飞鸟的故事》
纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。

2.对齐文本

 text-align属性用于设置元素内文本内容的水平对齐方式

        左对齐 left（默认） 居中对齐 center  右对齐right 

泰戈尔经典语录

3.文本缩进

text-indent 属性用来制定文本的第一行的缩进，通常是将段落的首行缩进；

通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以为负值；

 特别地：em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的一个文字大小

泰戈尔经典语录
纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。世界上最遥远的距离，不是生与死，而是我就站在你面前，你却不知道我爱你。——泰戈尔《鱼和飞鸟的故事》。纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。寂静在喧嚣里低头不语，沉默在黑夜里与目光结交，于是，我们看错了世界，却说世界欺骗了我们。生如夏花之灿烂，死如秋叶之静美。
不要着急，最好的总会在最不经意的时候出现。
纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。世界上最遥远的距离，不是生与死，而是我就站在你面前，你却不知道我爱你。——泰戈尔《鱼和飞鸟的故事》。纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。寂静在喧嚣里低头不语，沉默在黑夜里与目光结交，于是，我们看错了世界，却说世界欺骗了我们。生如夏花之灿烂，死如秋叶之静美。

4.装饰文本

text-decoration属性规定添加到文本的修饰，可以给文本添加下划线、删除线、上划线

参数：

        none（默认）没有装饰线 最常用

        underline 下划线  链接a自带下划线  常用

        overline 上划线  几乎不用

        line-through 删除线 不常用

泰戈尔经典语录
世界上最遥远的距离，不是生与死，而是我就站在你面前，你却不知道我爱你。——泰戈尔《鱼和飞鸟的故事》
纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。
寂静在喧嚣里低头不语，沉默在黑夜里与目光结交，于是，我们看错了世界，却说世界欺骗了我们。
泰戈尔经典语录

5.行间距

line-height属性用来设置行间距，可以控制文字行与行之间的距离

行间距=上间距+文本高度+下间距

测量行高工具推荐：FastStone Capture

测量方法：一行文字的最下端到下一行文字的最下端的距离等同于行间距

泰戈尔经典语录
纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。世界上最遥远的距离，不是生与死，而是我就站在你面前，你却不知道我爱你。——泰戈尔《鱼和飞鸟的故事》。。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！