CSS text文本属性颜色对齐文本装饰文本文本缩进行间距复合样式

最新推荐文章于 2021-07-14 20:40:36 发布

悠然少年心

最新推荐文章于 2021-07-14 20:40:36 发布

阅读量174

点赞数

分类专栏：前端 html

本文链接：https://blog.csdn.net/qq_44116353/article/details/114957502

版权

前端同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

html

13 篇文章 0 订阅

订阅专栏

color属性

<style>
    .wuhu {
        color: cadetblue;
        /* 预定义颜色做DEMO的时候用的比较多 */
    }

    .qifei {
        color: #ff0000;
        /*  十六进制比较常用*/
    }

    .nantong {
        /* color: rgb(red, green, blue);里面填写红绿蓝的值 */
        /* 把鼠标移上去可以选择区域来选择颜色 */
        color: rgb(173, 201, 16);
    }
</style>

<body>
    <div class="wuhu">芜湖起飞</div>
    <div class="qifei">芜湖起飞</div>
    <div class="nantong">芜湖起飞</div>
</body>

</html>

文本对齐

<style>
    /* 三种对齐方式中间对齐 左对齐 右对齐  */
    /* 只将盒子里面的文本对齐 */
    div {
        text-align: center;
    }

    p {
        text-align: left;
    }

    h4 {
        text-align: right;
    }
</style>

<body>
    <h4>JJKING</h4>
    <div>炫神</div>
    <p>芜湖大司马</p>

</body>

文本装饰

<style>
    /* 三种对齐方式中间对齐 左对齐 右对齐  */
    /* 只将盒子里面的文本对齐 */
    a {
        text-decoration: none;
        /* 取消超链接的下划线 这个是最主要的用法*/

    }
    p {
        text-decoration: underline;
        /* 下划线这个用法其次 */
    }
    div {
        text-decoration: line-through;
        /* 删除线*/
    }

    h4 {
        text-decoration: overline;
        /* 上划线 */
    }
</style>

<body>
    <h4>JJKING</h4>
    <div>炫神</div>
    <p>芜湖大司马</p>
    <a href="#">这是一个超链接</a>

</body>

字体缩进

<style>
    p {
        text-indent: 20px;
        /* 可以取负值 */
    }

    div {
        text-indent: 2em;
        /* 1个em相对于一个字体大小 这里2em的意思就是缩进两个字体大小也就是两个字
        这样比较符合汉语书写规范 */
    }
</style>

<style>
    p {
        text-indent: 20px;
        /* 可以取负值 */
    }

    div {
        text-indent: 2em;
        /* 1个em相对于一个字体大小 这里2em的意思就是缩进两个字体大小也就是两个字
        这样比较符合汉语书写规范 */
    }
</style>


    </p>


</body>

行间距

在这里插入图片描述

<style>
    p {
        line-height: 16px;
    }
</style>

<body>
    <p>芜湖</p>

</body>

注意别忘记加px

复合样式

 div {

        /* font: font-style font-weight font-size font-famliy;
        这个属性不能颠倒必须是这个 不要的属性可以省略
        但是font-size 和font-family不能省略 */
        font: normal 400 40px Microsoft yahei;

    }

font:font-style font-weight font-size/line-height font-family

内部样式表和行内样式表

<!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>
<style>
    div {
        color: royalblue;
    }

    /* 写在同一个HTml的style标签里的叫做内部样式表 */
</style>

<body>
    <div>阿帕奇直升机</div>
    <p style="color:salmon">七月的风八月的雨</p>
    <!-- 行内样式表写在标签里面的 简单样式可以使用 -->
</body>

</html>

外部样式表

外部样式表使用分两步
第一步建立一个后缀为.css的文件
在这里插入图片描述
然后在html中使用 link rel=“stylesheet” href="css文件路径"标签引入文件

<!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="外部样式表.css">
</head>
<!-- 在html中使用 <link rel="stylesheet" href="css文件路径">标签引入文件 -->

<body>
    <div>你相信光吗</div>
</body>

</html>

悠然少年心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS text文本属性颜色对齐文本装饰文本文本缩进行间距复合样式

color属性<style> .wuhu { color: cadetblue; /* 预定义颜色做DEMO的时候用的比较多 */ } .qifei { color: #ff0000; /* 十六进制比较常用*/ } .nantong { /* color: rgb(red, green, blue);里面填写红绿蓝的值 */ /* 把鼠标移上去可以.
复制链接

扫一扫