CSS引入方式与文本属性

最新推荐文章于 2024-05-13 02:38:25 发布

溯琳

最新推荐文章于 2024-05-13 02:38:25 发布

阅读量86

点赞数 2

分类专栏： web 文章标签： html css

本文链接：https://blog.csdn.net/m0_56787796/article/details/115555108

版权

web 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

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>
    <style>
        div {
            color: red;
        }
        /* style 可以放到任何地方 但一般放在head标签中 */
    </style>
</head>
<body>
    <div>溯琳真帅</div>
</body>
</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>
</head>
<body>
    <div>溯琳真帅</div>
    <div style="color: red; font-size: 30px;">溯琳真帅</div>
    <!-- 注意行内样式的格式 -->
    <div>溯琳真帅</div>
</body>
</html>

外部样式表

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">
    <!-- 第二种方式
        <style>
         @import url(style.css);
         </style> 
        -->
</head>
<body>
    <div>溯琳真帅</div>
    <div id="div1">溯琳真帅</div>
    <div>溯琳真帅</div>
</body>
</html>

css

#div1 {
    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>
         h1 { /*居中对齐*/
            text-align: center;
        }
        h2 { /*左对齐*/
            text-align: left;
        }
        h3 { /*右对齐*/
            text-align: right;
        }
    </style>
</head>
<body>
    <h1>溯琳真帅</h1>
    <h2>溯琳真帅</h2>
    <h3>溯琳真帅</h3>
</body>
</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>
    <style>
        p {
            /* 文本第一行缩进多少距离 */
            /* text-indent: 20px; */
            /* em一个文字大小 */
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <p>中国专业IT社区CSDN (Chinese Software Developer Network) 创立于1999年，致力于为中国软件开发者提供知识传播、在线学习、职业发展等全生命周期服务。</p>
    <p>旗下拥有：专业的中文IT技术社区： CSDN.NET；移动端开发者专属APP： CSDN APP、CSDN学院APP；新媒体矩阵微信公众号：CSDN资讯、程序人生、GitChat、CSDN学院、
        AI科技大本营、区块链大本营、CSDN云计算、GitChat精品课、人工智能头条、CSDN企业招聘；IT技术培训学习平台： CSDN学院；技术知识移动社区： GitChat；IT人力资源服务：科锐福克斯；
        高校IT技术学习成长平台：高校俱乐部。</p>
</body>
</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>
    <style>
        div {
            color: red;
        }
    </style>
</head>
<body>
    <div>溯琳真帅</div>
        <!-- 
            色值有：预定义的色值，如red,greed,blue......
            十六进制的 #FF0000，#F6666,......
            RGB代码    rgb(255，255,255)或rgb(100%,0%,100%)
            开发中常用十六进制
         -->
</body>
</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>
    <style>
        .p1 {
            line-height: 50px;
        }
    </style>
</head>
<body>
    <p>溯琳真帅</p>
    <p class="p1">溯琳真帅</p>
    <p>溯琳真帅</p>
    <p>溯琳真帅</p>
    <p>溯琳真帅</p>
</body>
</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>
    <style>
        /* 下划线 */
        #div1 {
            text-decoration: underline;
        }
        /* 删除线 */
        #div2 {
            text-decoration: line-through;
        }
        /* 上划线 */
        #div3 {
            text-decoration: overline;
        }
        /* 取消a标签的默认下划线 */
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div id="div1">溯琳真帅</div>
    <div id="div2">溯琳真帅</div>
    <div id="div3">溯琳真帅</div>
    <a href="#">溯琳真帅</a>
</body>
</html>

装饰文本

溯琳

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS引入方式与文本属性

CSS引入方式与文本属性引入方式内部样式表行内样式表外部样式表文本属性文本对齐文本缩进文本颜色行间距装饰文本引入方式内部样式表<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conten
复制链接

扫一扫