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

顺晟科技

2022-09-14 11:04:52

385

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>

5.行间距

line-height属性用来设置行间距，可以控制文字行与行之间的距离行间距=上间距+文本高度+下间距测量行高工具推荐：FastStone Capture 测量方法：一行文字的最下端到下一行文字的最下端的距离等同于行间距

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

上一篇：HTML+CSS笔记 CSS入门下一篇：CSS.01 -- 选择器及相关的属

网站建设

Css

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

Css

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

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