CSS3语法及选择器总结-一.CSS的引用

时间：2024-03-30 14:51:42

方式一:内部样式表(HTML中引用)

在HTML的title标签下方添加style双标签，style标签里面书写CSS

*style里面的注释为/ * … /

CSS的书写规则: 选择器{属性名：属性值；}

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的html学习实验草稿</title>

    <!-- CSS的引用 -->
    <style>    
        /* 选择器 */
        p{
            color: red;   
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p>CSS展示</p>
</body>
</html>

方式二.外部样式表(单独的CSS文件)

  • 将CSS代码写在单独的CSS文件中（.css）
  • 在HTML使用link标签（单标签）引入

引用语法：

    <link rel="stylesheet" href="./1.css">

代码示例

CSS文件

p{
    color: red;
    font-size: 50px;
}

HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的前端学习实验草稿</title>
    <link rel="stylesheet" href="./1.css">
</head>
<body>
    <p>CSS外部样式表引用方式示例</p>
</body>
</html>

方式三:行内样式（写在标签的style属性值里）

通常这种方式用来配合JavaScript使用

语法：

<div style="color:red;font-size:20px">
    展示div标签使用CSS样式
</div>

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的前端学习实验草稿</title>
    <link rel="stylesheet" href="./1.css">
</head>
<body>
    <p>CSS外部样式表引用方式示例</p>
    <div style="color:red;font-size:20px">
        展示div标签使用CSS样式
    </div>
</body>
</html>

相关文章