css文本属性

最新推荐文章于 2024-07-08 17:09:50 发布

倔强的小白菜

最新推荐文章于 2024-07-08 17:09:50 发布

阅读量284

点赞数

分类专栏：前端基础文章标签： css

本文链接：https://blog.csdn.net/weixin_47481102/article/details/124200117

版权

前端基础专栏收录该内容

51 篇文章 2 订阅

订阅专栏

1.文本颜色

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

div{
    color:red;
}

开发中常见的是十六进制

练习：

<!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: red; */

            /* 十六进制,开发中使用居多 */
            /* color: #2fff00; */

            /* rgb代码 */
            color:rgb(51, 0, 255) ;
        }
    </style>
</head>
<body>
    <div>君不见，黄河之水天上来，奔流到海不复回</div>
</body>
</html>

2.对齐文本

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

div{
    text-align:ceter;
}

练习：

<!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 {
            /* text-align 默认显示左对齐 */
            /* 本质时让div盒子里面的文字水平居中 */
            /* text-align: center; */
            text-align: right;
        }
    </style>
</head>
<body>
    <div>主人何为言少钱，径须沽取对君酌。</div>
    <div>五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。</div>
</body>
</html>

3.装饰文本

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

div{
    text-decoration:underline;
}

总结：重点记住如何添加下划线，如何删除下划线？

练习：

<!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 {
            /* text-decoration  默认没有装饰none  最常用 */
            /* 下划线  常用 */
            text-decoration: underline;
            /* 删除线  不常用 */
            /* text-decoration: line-through; */
            /* 上划线  几乎不用 */
            /* text-decoration: overline; */
        }
        a {
            /* 去掉链接a的下划线 且文字颜色为黑色 */
            text-decoration: none;
            color: black;
        }
    </style>
</head>
<body>
    <div>主人何为言少钱，径须沽取对君酌。</div>
    <a href="https://hanyu.baidu.com/shici/detail?pid=60841450e8714b78a6f7ef385dcb63e0&from=kg0">"将进酒"链接</a>
</body>
</html>

4.文本缩进

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

div {
    text-indent：10px;
}

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

p {
    text-indent：2em；
}

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

练习：

<!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>
        p {
            /* 设置<p>段落文字大小20px */
            font-size: 20px;
            /* 文本的第一行首行缩进  多少距离 */
            /* text-indent: 32px; */
            /* 如果此时写了2em  则是缩进当前元素2个文字大小的距离 1em */
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <p> 这几天心里颇不宁静。今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的光里，总该另有一番样子吧。月亮渐渐地升高了，墙外马路上孩子们的欢笑，已经听不见了；妻在屋里拍着闰儿⑴，迷迷糊糊地哼着眠歌。我悄悄地披了大衫，带上门出去。</p>
    <p>沿着荷塘，是一条曲折的小煤屑路。这是一条幽僻的路；白天也少人走，夜晚更加寂寞。荷塘四面，长着许多树，蓊蓊郁郁⑵的。路的一旁，是些杨柳，和一些不知道名字的树。没有月光的晚上，这路上阴森森的，有些怕人。今晚却很好，虽然月光也还是淡淡的。</p>
    <p>路上只我一个人，背着手踱⑶着。这一片天地好像是我的；我也像超出了平常的自己，到了另一个世界里。我爱热闹，也爱冷静；爱群居，也爱独处。像今晚上，一个人在这苍茫的月下，什么都可以想，什么都可以不想，便觉是个自由的人。白天里一定要做的事，一定要说的话，现 在都可不理。这是独处的妙处，我且受用这无边的荷香月色好了。</p>
</body>
</html>

5.行间距

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

p {
    line-height:26px;
}

练习：

<!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 {
            font-size: 14px;
            color: #333;
            text-indent: 2em;
            line-height: 24px;

        }
        a {
            text-decoration: none;
            color: #333;
        }
    </style>
</head>
<body>
    <h4 align="center" ><a href="https://baike.baidu.com/item/%E8%8D%B7%E5%A1%98%E6%9C%88%E8%89%B2/9765753?fr=aladdin">荷塘月色</a></h4>
    <p> 这几天心里颇不宁静。今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的光里，总该另有一番样子吧。月亮渐渐地升高了，墙外马路上孩子们的欢笑，已经听不见了；妻在屋里拍着闰儿⑴，迷迷糊糊地哼着眠歌。我悄悄地披了大衫，带上门出去。</p>
    <p>沿着荷塘，是一条曲折的小煤屑路。这是一条幽僻的路；白天也少人走，夜晚更加寂寞。荷塘四面，长着许多树，蓊蓊郁郁⑵的。路的一旁，是些杨柳，和一些不知道名字的树。没有月光的晚上，这路上阴森森的，有些怕人。今晚却很好，虽然月光也还是淡淡的。</p>
    <p>路上只我一个人，背着手踱⑶着。这一片天地好像是我的；我也像超出了平常的自己，到了另一个世界里。我爱热闹，也爱冷静；爱群居，也爱独处。像今晚上，一个人在这苍茫的月下，什么都可以想，什么都可以不想，便觉是个自由的人。白天里一定要做的事，一定要说的话，现 在都可不理。这是独处的妙处，我且受用这无边的荷香月色好了。</p>
</body>
</html>

6.总结

案例：

<!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>Document</title>
    <style>
        body {
            font: 16px/28px "Microsoft Yahei";
        }

        h1 {
            /* font-weight 不加粗 */
            font-weight: 400;
            /* text-align  居中展示 */
            text-align: center;
        }
        div {
            text-align: center;
            color: #999;
            font-size: 12px;
        }
        a {
            text-decoration: none;
            color: blue;
        }
        .search {
            color: #666;
            width: 170px;
        }
        .but {
            font-weight: 700;
        }
        p {
            text-indent: 2em;
        }
        .pic {
            text-align: center;
        }
        .footer {
            font-size: 12px;
            color: #888;
        }
    </style>
</head>
<body>
    <h1>北方高温明日达鼎盛 多地地表温度将超60℃</h1>

    <div>2019-07-03 15:26:55 来源： <a href="http://www.weather.com.cn/">中国天气网</a><input type="text" value="请输入查询条件" class="search"> <button class="but">搜索</button>  </div>
    <hr>
    <p>中国天气网讯 今天（3日），华北、黄淮多地出现高温天气，截至下午2点，北京、天津、郑州等地气温突破35℃。预报显示，今后三天（3-5日），这一带的高温天气将继续发酵，高温范围以及强度将在4日达到鼎盛，预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃，其中北京和石家庄的最高气温还有望创今年以来的新高。</p>
    <h4>气温41.4℃！地表温度66.5℃！北京强势迎七月首个高温日</h4>
    <p>今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中，北京、天津、郑州均迎来高温日。</p>
    <p>今天，北京地区迎来今年七月份的首个高温日。监测显示，截至今天下午3点，城区气温普遍在36到39℃之间，古观象台、大观园、回龙观等地气温超过40℃，气温最高的站点出现在昌平区流村，达到41.4℃。</p>
    <p class="pic">
        <img src="./images/1562141378529066504.jpg" alt="">
    </p>
    <p>在阳光暴晒下，地表温度也逐渐走高。今天下午2点，华北黄淮大部地区的地表温度都在50℃以上，部分地区地表温度甚至超过60℃。其中，河北衡水地表温度高达68.3℃，天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。</p>
    <h4>明日热度再升级！京津冀携手冲击38℃+</h4>
    <p>中国天气网气象分析师王伟跃介绍，明天（4日），华北、黄淮地区35℃以上的高温天气还将继续升级，并进入鼎盛阶段，高温强度和范围都将发展到最强。</p>
    <p>不过，专家提醒，济南被雨水天气完美绕开，因此未来一周，当地的高温还会天天上岗。在此提醒当地居民注意防暑降温，防范持续高温带来的各种不利影响。</p>
    <p class="footer">（文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽）</p>
</body>
</html>

倔强的小白菜

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css文本属性

1.文本颜色color属性用于定义文本的颜色。div{ color:red;}开发中常见的是十六进制练习：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport".
复制链接

扫一扫