CSS学习77~86（CSS文本属性+CSS引入方式）

前进的北极熊

已于 2022-09-09 22:47:37 修改

阅读量184

点赞数

分类专栏： HTML&CSS 文章标签： css 学习

于 2022-09-09 21:56:57 首次发布

本文链接：https://blog.csdn.net/m0_57809042/article/details/126789134

版权

HTML&CSS 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

4 CSS文本属性

CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐方式、装饰文本、文本缩进、行间距等。

4.1 文本颜色

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

div {
    color: red;
}

在这里插入图片描述

开发中最常用的是十六进制

4.2 对齐文本

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

div {
    text-align: center;
}

在这里插入图片描述

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文本外观之文字对齐</title>
    <style>
        h1 {
            /* 本质是让h1盒子里面的文字水平居中对齐 */
            /* text-align: center; */
            text-align: right;
        }
    </style>
</head>
<body>
    <h1>居中对齐的标题</h1>
</body>
</html>

4.3 装饰文本

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

div {
    text-decoration: underline;
}

在这里插入图片描述

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文本外观之装饰文本</title>
    <style>
        div {
            /* 下划线 */
            /* text-decoration: underline; */
            /* 删除线 */
            /* text-decoration: line-through; */
            /* 上划线 */
            text-decoration: overline;
        }
        a {
            text-decoration: none;
            color: #333;
        }
    </style>
</head>
<body>
    <div>粉红色的回忆</div>
    <a href="#">粉红色的回忆</a>
</body>
</html>

4.4 文本缩进

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

div {
    text-indent: 10px;
}

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

P{
    text-indent: 2em;
}

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

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文本外观之文本缩进.</title>
    <style>
        p {
            /* 文本的第一行首行缩进 多少距离 */
            /* text-indent: 20px; */
            /* 如果此时写了2em 则是缩进当前元素 2个文字大小的距离 */
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <p>打开北京、上海与广州的地铁地图，你会看见三张纵横交错的线路网络，这代表了中国最成熟的三套城市轨道交通系统。</p>

       <p> 可即使这样，在北上广生活的人依然少不了对地铁的抱怨，其中谈及最多的问题便是拥挤——对很多人而言，每次挤地铁的过程，都像是一场硬仗。更何况，还都是败仗居多。</p>
        
       <p> 那么，当越来越多的二线甚至三线城市迎接来了自己的地铁，中国哪里的地铁是最拥挤的呢？</p>
</body>
</html>

4.5 行间距

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

p {
    line-height: 26px;
}

在这里插入图片描述

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文本外观之行间距</title>
    <style>
        div {
            line-height: 26px;
        }
        p {
            line-height: 25px;
        }
    </style>
</head>
<body>
    <div>中国人</div>
       <p>打开北京、上海与广州的地铁地图，你会看见三张纵横交错的线路网络，这代表了中国最成熟的三套城市轨道交通系统。</p>

       <p> 可即使这样，在北上广生活的人依然少不了对地铁的抱怨，其中谈及最多的问题便是拥挤——对很多人而言，每次挤地铁的过程，都像是一场硬仗。更何况，还都是败仗居多。</p>

       <p> 那么，当越来越多的二线甚至三线城市迎接来了自己的地铁，中国哪里的地铁是最拥挤的呢？</p>
</body>
</html>

4.6 文本属性总结

在这里插入图片描述

5 CSS引入方式

5.1 CSS的三种样式表

按照CSS样式书写的位置(或者引入的方式) , CSS样式表可以分为三大类:

行内样式表(行内式)
内部样式表(嵌入式)
外部样式表(链接式)

5.2 内部样式表

div {
            color: red;
            font-size: 12px;
        }

<style>标签理论上可以放在HTML文档的任何地方,但一般会放在文档的<head>标签中
通过此种方式,可以方便控制当前整个页面中的元素样式设置
代码结构清晰,但是并没有实现结构与样式完全分离
使用内部样式表设定CSS ,通常也被称为嵌入式引入,这种方式是我们练习时常用的方式

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内部样式表</title>
    <style>
        div {
            color: pink
        }
    </style>
</head>
<body>
    <div>所谓内部样式表，就是在html页面内部写样式，但是是单独写到dtyle标签内部</div>
</body>
</html>

5.3 行内样式表

<p style=“color: pink; font-size: 20px;”>给我一个粉红的回忆</p>

style其实就是标签的属性
在双引号中间,写法要符合CSS规范
可以控制当前的标签设置样式
由于书写繁琐,并且没有体现出结构与样式相分离的思想,所以不推荐大量使用,只有对当前元素添加简单样式的时候,可以考虑使用
使用行内样式表设定CSS ,通常也被称为行内式引入

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内样式表</title>
</head>
<body>
    <p>夏天夏天悄悄过去留下小秘密</p>

        <p>压心底压心底不能告诉你</p>
        
        <p> 晚风吹过温暖我心底我又想起你</p>
        
        <p> 多甜蜜多甜蜜怎能忘记</p>
        
        <p>不能忘记你把你写在日记里</p>
        
        <p>不能忘记你心里想的还是你</p>
        
        <p>浪漫的夏季还有浪漫的一个你</p>
        
        <p style="color: pink; font-size: 20px;">给我一个粉红的回忆</p>
</body>
</html>

5.4 外部样式表

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

引入外部样式表分为两步:

新建一个后缀名为.css的样式文件,把所有CSS代码都放入此文件中。
在HTML页面中,使用标签引入这个文件。

<link rel=“stylesheet” href=“css文件路径”>

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部样式表</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>来呀~快活呀，反正有大把时光...</div>
</body>
</html>

css文件

/* 这个css文件只有样式没有标签 */
div {
    color: pink;
}

5.5 CSS引入方式总结

在这里插入图片描述

前进的北极熊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习77~86（CSS文本属性+CSS引入方式）

行内样式表(行内式)内部样式表(嵌入式)外部样式表(链接式)
复制链接

扫一扫

专栏目录

CSS学习77~86（CSS文本属性+CSS引入方式）

4 CSS文本属性

4.1 文本颜色

4.2 对齐文本

4.3 装饰文本

4.4 文本缩进

4.5 行间距

4.6 文本属性总结

5 CSS引入方式

5.1 CSS的三种样式表

5.2 内部样式表

5.3 行内样式表

5.4 外部样式表

5.5 CSS引入方式总结

“相关推荐”对你有帮助么？