为网页添加样式

术语解释

h1{
    color: brown;
    background-color: lightblue;
    text-align: center;
}

css规则=选择器+声明块

选择器

选择器：选中元素h1

ID选择器：选中的是对应ID值的元素 #id名
元素选择器 h1
类选择器

<!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>Document</title>
    <style>
    .red{
        color: brown;
        font-size: 2em;
        background-color: lightblue;
        text-align: center;
    }
    .big{
        font-size: 3em;
        text-align: center;
    }
    </style>

</head>
<body>
    <h1 class="big red">
        现在太难紧挨阳朔
    </h1>
    <p class="red">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam unde tempora necessitatibus reprehenderit, eius aliquid enim, veniam accusamus ab, nobis numquam non ullam cumque consectetur distinctio voluptate saepe! Modi, minus!</p>
    <p>Molestias tenetur illo adipisci provident, hic at sequi assumenda odit, officia excepturi corporis accusamus culpa optio commodi laborum ipsa nemo cum voluptatem mollitia quasi. Quam dolore reiciendis adipisci architecto aut.</p>
    <p>Atque facere unde ipsam, a numquam vero temporibus quas quae non doloremque iusto ut fuga neque sapiente distinctio expedita itaque cumque officiis. Pariatur minima amet culpa vero architecto sapiente quos!</p>
    <p>Debitis, rem! Neque repudiandae molestias cupiditate quaerat voluptatem rem aliquid similique labore ducimus ex aut sapiente quo doloremque ut quidem deserunt, minima molestiae animi nam nihil error tempora? Hic, ullam?</p>
</body>
</html>

声明块

出现在{}内
声明块中包含很多声明（属性），每个声明表示一个样式规则

css代码书写位置

内部样式表
书写在style元素内（head）内，希望浏览器最先加载
内联样式表元素样式
外部样式表（推荐）
写到独立的css文件中

好处：
3.1 解决多页面样式重复的问题
（Ctrl+点击——>新页面打开）
3.2 有利于浏览器缓存，提高页面响应速度
3.3 有利于代码分离（HTML和CSS），容易阅读和维护

css文件：

.red-big-center{
    color: red;
    font-size: 5em;
    text-align: center;
}

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>Document</title>
    <link rel="stylesheet" href="./inde.css">
</head>
<body>
    <div class="red-big-center">
        Lorem ipsum dolor sit amet.
    </div>
</body>
</html>