阅读 30

CSS样式的三种引入方式

css引入方式

1 css引入方式一_行内

  • 行内样式:

    • 在HTML标签中添加属性 style="属性:属性值"
    • 作用域最小,作用当前标签; 行内样式的优先级最高
<body>
    <h3 style="color: red;">h3标签</h3>
    <h3>哈哈</h3>
</body>
复制代码

2 css引入方式二_内部

  • 内部样式:

    • 在HTML页面里面写CSS代码, 一般写在中, 使用标签 style, 属性: type="text/css"
    • 作用是当前整个页面有效
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            h3{color: chocolate;}
        </style>
    </head>
    <body>
        <h3>h3标签</h3>
        <h3>哈哈</h3>
    </body>
</html>
复制代码

3 css引入方式三_外部

  • 外部样式:

    • CSS样式定义在另一个文件中,后缀名.css (文本文件)

    • 在HTML页面中,引入样式表, 使用link标签 写在head中

      • 属性: href="css文件路径" | type="text/css" | rel="引入的文件和当前页面是什么关系"
    • 作用范围最大,哪个页面引入,哪个有效

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link href="css/1.css"  type="text/css" rel="stylesheet"/>
    </head>
    <body>
        <h3>h3标签</h3>
        <h3>哈哈</h3>
    </body>
</html>
复制代码

css/1.css

h3{
    color: blue;
}
复制代码
文章分类
前端
文章标签