创建CSS样式表的三种方式

最新推荐文章于 2022-10-25 16:08:26 发布

HERO-WRH

最新推荐文章于 2022-10-25 16:08:26 发布

阅读量3.8k

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_38216661/article/details/81878453

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

创建CSS样式表的三种方式

外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择
创建一个以.css为扩展名的外部样式表，在里面写CSS语句
使用link标签引入到html页面中
base.css文件

*{
    padding: 0;
    margin: 0;
}
a{
    text-decoration: none;
}
ul ol li{
    list-style-type: none;
}

html文件注意引用语句

<link rel="stylesheet" type="text/css" href="css/base.css"/>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>外部样式表测试</title>
        <link rel="stylesheet" type="text/css" href="css/base.css"/>
    </head>
    <body>
        <a href="#">我这个链接没有下划线了</a>
        <ol>
            <li>列表没有前面的标点了</li>
            <li>列表没有前面的标点了</li>
            <li>列表没有前面的标点了</li>
            <li>列表没有前面的标点了</li>
        </ol>
    </body>
</html>

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表
在html的head中用style标签定义内部样式表

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                color: red;
            }
        </style>
    </head>
    <body>
        <p>我变红了</p>
        <a href="#">我也变红了</a>
    </body>
</html>

内联样式

当你要针对某一元素进行定制时，应该使用内联样式

<p style="color: red; font-size: 20px;">我又大又红</p>

样式表的与优先级

内联样式 > 内部样式表 > 外部样式表

HERO-WRH

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
创建CSS样式表的三种方式

创建CSS样式表的三种方式外部样式表当样式需要应用于很多页面时，外部样式表将是理想的选择创建一个以.css为扩展名的外部样式表，在里面写CSS语句使用link标签引入到html页面中base.css文件*{ padding: 0; margin: 0;}a{ text-decoration: none;}ul ol li{ li...
复制链接

扫一扫