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

最新推荐文章于 2024-07-06 00:34:38 发布

T5Cloud

最新推荐文章于 2024-07-06 00:34:38 发布

阅读量633

点赞数 1

分类专栏： CSS 文章标签： CSS 字体文本属性用户体验美观

本文链接：https://blog.csdn.net/weixin_43889816/article/details/120917096

版权

CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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

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

1. 有效的传递页面信息

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

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

4. 具有良好的用户体验

一、字体属性

1. 字体设置

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

注意事项：

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

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

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

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

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

    <style>
        h2 {
            font-family: '微软雅黑';
        }
        .songti {
            font-family: '宋体';
        }
        #kaiti {
            font-family: '楷体'
        }
        * {
            font-family: '黑体';
        }
    </style>
</head>
<body>
    <!-- CSS使用font-family属性定义文本的字体系列 -->
    <h2>泰戈尔经典语录</h2>
    <p class="songti">世界上最遥远的距离，不是生与死，而是我就站在你面前，你却不知道我爱你。——泰戈尔《鱼和飞鸟的故事》</p>
    <p id="kaiti">纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。</p>
    <p>寂静在喧嚣里低头不语，沉默在黑夜里与目光结交，于是，我们看错了世界，却说世界欺骗了我们。</p>
    <p>生如夏花之灿烂，死如秋叶之静美。</p>
    <p>不要着急，最好的总会在最不经意的时候出现。</p>
</body>

2. 字体大小和粗细

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

如：p {

font-size: 20px;

}

注意：

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

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

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

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

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

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

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

bolder：特粗体 lighter 细体

<style>
        body {
            font-size: 16px;
        }
        /* 标题标签比较特殊，，需要单独指定文字大小 */
        h2 {
            font-size: 16px;
        }
        .bold {
            font-weight: bold   ;
            /* fong-werght: 700; */
            /* 这个700的后面不跟单位，等价于bold，都是加粗的效果 
            实际开发中，我们提倡使用数字，来表示粗体或细体*/
        }
        /* 也可以用不让字体变粗，如标题： */
        h2 {
            font-weight: 400;
            /* font-weight: normal; */
        }
    </style>
</head>
<body>
    <h2>泰戈尔经典语录</h2>
    <p class="songti">世界上最遥远的距离，不是生与死，而是我就站在你面前，你却不知道我爱你。——泰戈尔《鱼和飞鸟的故事》</p>
    <p id="kaiti">纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。</p>
    <p class="bold">寂静在喧嚣里低头不语，沉默在黑夜里与目光结交，于是，我们看错了世界，却说世界欺骗了我们。</p>
    <p>生如夏花之灿烂，死如秋叶之静美。</p>
    <p>不要着急，最好的总会在最不经意的时候出现。</p>
</body>

3.字体文字样式

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

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

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

    <style>
        h2 {
            font-style: italic;
        }
        em {
            font-style: normal;
        }
    </style>
</head>
<body>
    <h2>泰戈尔经典语录</h2>
    <em>泰戈尔</em>

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属性不起作用。

<style>
     font: italic 700 16px 'Micorsoft Yahei';
    </style>
</head>
<body>
    <div>三生三世十里桃花，一心一意百行代码</div>
</body>

可以产生同样的效果。

二、文本属性

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；

<style>
        h2 {
            color: deeppink;
        }
        p {
            color: #41c526;
        }
        #a {
            color: rgb(228, 37, 37);
        }
    </style>
</head>
<body>
    <h2>泰戈尔经典语录</h2>
    <p id="a">世界上最遥远的距离，不是生与死，而是我就站在你面前，你却不知道我爱你。——泰戈尔《鱼和飞鸟的故事》</p>
    <p>纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。</p>
</body>

2.对齐文本

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

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

<style>
        h2 {
            /* 本质是让h2盒子里的文字水平居中对齐 */
            text-align: center;
        }
    </style>
</head>
<body>
    <h2>泰戈尔经典语录</h2>
</body>

3.文本缩进

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

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

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

<style>
        p {
            text-indent: 20px;
        }
        .two {
            /* 此时写了2em，则是缩进当前元素两个文字大小的距离 */
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <h2>泰戈尔经典语录</h2>
    <p>纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。世界上最遥远的距离，不是生与死，而是我就站在你面前，你却不知道我爱你。——泰戈尔《鱼和飞鸟的故事》。纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。寂静在喧嚣里低头不语，沉默在黑夜里与目光结交，于是，我们看错了世界，却说世界欺骗了我们。生如夏花之灿烂，死如秋叶之静美。</p>
    <p>不要着急，最好的总会在最不经意的时候出现。</p>
    <p class="two">纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。世界上最遥远的距离，不是生与死，而是我就站在你面前，你却不知道我爱你。——泰戈尔《鱼和飞鸟的故事》。纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。寂静在喧嚣里低头不语，沉默在黑夜里与目光结交，于是，我们看错了世界，却说世界欺骗了我们。生如夏花之灿烂，死如秋叶之静美。</p>
</body>

4.装饰文本

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

参数：

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

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

overline 上划线几乎不用

line-through 删除线不常用

<style>
        .underline {
            text-decoration: underline;
        }
        .overline {
            text-decoration: overline;
        }
        .line-throug {
            text-decoration: line-through;
        }
        /* 可以取消链接a默认的下划线 */
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <h2>泰戈尔经典语录</h2>
    <p class="underline">世界上最遥远的距离，不是生与死，而是我就站在你面前，你却不知道我爱你。——泰戈尔《鱼和飞鸟的故事》</p>
    <p class="overline">纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。</p>
    <p class="line-through">寂静在喧嚣里低头不语，沉默在黑夜里与目光结交，于是，我们看错了世界，却说世界欺骗了我们。</p>
    <a href="#">泰戈尔经典语录</a>
</body>

5.行间距

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

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

测量行高工具推荐：FastStone Capture

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

<style>
        div {
            line-height: 26px;
        }
    </style>
</head>
<body>
    <div>泰戈尔经典语录</div>
    <p>纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。世界上最遥远的距离，不是生与死，而是我就站在你面前，你却不知道我爱你。——泰戈尔《鱼和飞鸟的故事》。。</p>
</body>

T5Cloud

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS基础-字体和文本属性设置随学笔记

CSS-美化网页元素-字体和文本属性使用CSS样式美化网页文本具有如下意义。1. 有效的传递页面信息2. 使用CSS美化过的页面文本，使页面漂亮、美观，吸引用户3. 可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容4. 具有良好的用户体验一、字体属性1. 字体设置CSS使用font-family属性定义文本的字体系列，字体可以使用英文字体,也可以使用多个字体，各种字体之间必须使用英文状态下的逗号隔开；注意事项：一般情况下，如果有空格隔开的多个单词组成的字
复制链接

扫一扫