CSS字体,文本属性与引入方式

最新推荐文章于 2023-01-28 15:14:51 发布

Ly-on

最新推荐文章于 2023-01-28 15:14:51 发布

阅读量494

点赞数

分类专栏：前端学习文章标签： css

本文链接：https://blog.csdn.net/LyonBlog/article/details/107538949

版权

前端学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

CSS字体,文本属性与引入方式

CSS字体,文本属性与引入方式

1CSS字体属性

CSS Fonts (字体)属性用于定义字体系列、小粗细、文字样式(如斜体)。

1.1字体系列

CSS使用font- family属性定义文本的字体系列。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 各种字体之间必须使用英文状态下的逗号隔开
       一般情况下,如果有空格隔开的多个单词组成的字体加引号
       尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示 */
    /* 可以直接给body更改字体样式就是改全部
       也可以用通配符 */
    div {
        font-family: 'Microsoft YaHei',Arial;
    }
    p {
        font-family: '宋体';
    }
</style>
<body>
    <div>你好吗</div>
    <p>我很好</p>
    <span>大家都好</span>
</body>
</html>

1.2字体大小

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 谷歌浏览器默认的文字大小为16px
       不同浏览器可能默认显示的字号大小不一致,我们尽量给一 个明确值大小,不要默认大小
       可以给body指定整个页面文字的大小 也可以用通配符*/

    body {
        font-size: 30px;
    }
    h1 {
        font-size: 20px;
    }
</style>
<body>
    <h1>Hello</h1>
    <!-- 标题标签比较特殊，需要单独指定字体大小 -->
    <div>你好吗</div>
    <p>我很好</p>
    <span>大家都好</span>
</body>
</html>

1.3字体粗细

CSS使用font-weight属性设置文本字体的粗细。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 
    normal 正常字体  相当于number  400
    bold 粗  相当于number 700
    bold 特粗体
    lighter 细体
    number 100  200  300  400  500  600  700  800  900 数字后不跟单位*/
    h1 {
        font-weight: normal;
    }
    p {
        font-weight: bold;
    }
    span {
        font-weight: 700;
    }
</style>
<body>
    <h1>Hello</h1>
    <div>你好吗</div>
    <p>我很好</p>
    <span>大家都好</span>
</body>
</html>

1.4文字样式

CSS使用font-style属性设置文本的风格。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /*normal 正常 
    italic 斜体
    平时我们很少给文字加斜体,反而要给斜体标签(em, i)改为不倾斜字体。*/
    h1 {
        font-style: italic;
    }
    em {
        font-style: normal;
    }
</style>
<body>
    <h1>Hello</h1>
    <em>World</em>
    <div>你好吗</div>
    <p>我很好</p>
    <span>大家都好</span>
</body>
</html>

1.5字体复合属性

字体属性可以把以上文字样式综合来写,这样可以更节约代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        /* font-family: 'Microsoft YaHei';
        font-style: italic;
        font-size: 50px;
        font-weight: bold; */

        /* 复合属性 */
         /* font: font-style font-weight font-size/line-height font-family; */
         /* 使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开
        不需要设置的属性可以省略(取默认值) , 但必须保留font-size和font-family 属性,否则font属性将不起作用 */

         /* font: italic bold 30px 'Microsoft YaHei'; */
         font: 30px 'Microsoft YaHei';

    }
</style>
<body>
    <div>Hello，World！你好世界！</div>
</body>
</html>

2CSS文本属性

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

2.1文本颜色

color属性用于定义文本的颜色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        /* color: red; 预定义的颜色值*/
        /* color: #ff0000;  16进制*/
        color: rgb(255, 0, 0);
        /* rgb格式 */
    }
</style>
<body>
    <div>Hello，World！你好世界！</div>
</body>
</html>

2.2对其文本

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        /* text-align: left; 文字默认是左对齐*/
        /* text-align: center; 居中对齐 */
        /* text-align: right;右对齐 */
    }
</style>
<body>
    <div>Hello，World！你好世界！</div>
</body>
</html>

2.3装饰文本

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        /* none是默认值 */
        
        /* 下划线 */
        /* text-decoration: underline; */
        /* 删除线 */
        /* text-decoration: line-through; */
        /* 上划线 */
        text-decoration: overline;
    }
    a {
        text-decoration: none;
    }
</style>
<body>
    <div>Hello，World！你好世界！</div>
    <a href="#">百度一下</a>
</body>
</html>

2.4文本缩进

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    p {
        /* text-indent: 50px; */

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

    }
</style>
<body>
    <p>打开北京、上海与广州的地铁地图,你会看见三张纵横交错的线路网络,这代表了中国最成熟的三套城市轨道交通系统。</p>
    <p>即使这样,在北上广生活的人依然少不了对地铁的抱怨,其中谈及最多的问题便是拥挤一-对很多 人而言,每次挤地铁的过程,都像是一场硬仗。更何况,还都是败仗居多。</p>
    <p>那么,当越来越多的线甚至 三线城市迎接来了自己的地铁 ,中国哪里的地铁 是最拥挤的呢</p>
</body>
</html>

2.5行间距

line-height属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    p {
        line-height: 50px;
    }
</style>
<body>
    <p>打开北京、上海与广州的地铁地图,你会看见三张纵横交错的线路网络,这代表了中国最成熟的三套城市轨道交通系统。</p>
    <p>即使这样,在北上广生活的人依然少不了对地铁的抱怨,其中谈及最多的问题便是拥挤一-对很多 人而言,每次挤地铁的过程,都像是一场硬仗。更何况,还都是败仗居多。</p>
    <p>那么,当越来越多的线甚至 三线城市迎接来了自己的地铁 ,中国哪里的地铁 是最拥挤的呢</p>
</body>
</html>

3CSS引入方式

3.1内部样式表

内部样式表(内嵌样式表)是写到htmI页面内部.是将所有的CSS代码抽取出来,单独放到一个<style>标签中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        color: red;
    }
</style>
<body>
    <div>Hello,World</div>
</body>
</html>

3.2行内样式

行内样式表(内联样式表)是在元素标签内部的style属性中设定CSS样式。适合于修改简单样式.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <!-- style其实就是标签的属性
          在双引号中间,写法要符合CSS规范
          可以控制当前的标签设置样式 -->
    <div style="color: red; font-size: 50px;">Hello,World</div>
</body>
</html>

3.3外部样式表

实际开发都是外部样式表.适合于样式比较多的情况.核心是:样式单独写到CSS文件中,之后把CSS文件引入到HTML页面中使用.

引入外部样式表分为两步:
1.新建一个后缀名为.CSS的样式文件,把所有CSS代码都放入此文件中。
2.在HTML页面中,使用<link>标签引入这个文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css.css">
</head>
<body>
    <div>Hello,World</div>
</body>
</html>

页面中使用.

引入外部样式表分为两步:
1.新建一个后缀名为.CSS的样式文件,把所有CSS代码都放入此文件中。
2.在HTML页面中,使用<link>标签引入这个文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css.css">
</head>
<body>
    <div>Hello,World</div>
</body>
</html>