CSS笔记：1.网页添加样式_网页中哪里加样式-CSDN博客

本文链接：https://blog.csdn.net/luoyao_/article/details/129366058

本文介绍了如何为网页添加样式，包括在<head>中使用<style>元素定义内部样式，使用元素选择器、ID选择器和类选择器来定位元素。还提到了内联样式和外部样式表的使用，外部样式表能提升代码可维护性和页面加载速度。

摘要由CSDN通过智能技术生成

为网页添加样式

在< head >< /head >中,添加< style >元素，在< style >中进行样式书写。

    <style>
        h1{
            color:red;
            background-color: lightblue;
            text-align: center;
        }
    </style>

术语解释：
css规则=选择器+声明块

选择器

选择器（即{}）：选中元素。
写法：

元素选择器：（元素{}）选中所有元素。

    h1{

    }

ID选择器：选中对应ID值的元素

  #test{

  }

  在body中：
  
  <p id="test">
        ID选择器
  </p>

类选择器
.类名{}

    .hp{
        color: blueviolet;
        text-align: center;
        background-color: antiquewhite;
    }
    在body中：
     <h1 class="hp">
        类选择器
    </h1>

应用多个类选择器:选择器中键加空格

<p class="hp big">Sunt consequuntur eligendi similique molestiae.</p>

声明块

出现在大括号中。
声明块中包含很多声明（属性），每一个声明表达了某方面的样式。

书写

1.内部样式表

书写在style元素中。

2.内联样式表，元素样式表

直接书写在元素的style属性中。

    <p style="color: antiquewhite; font-size: 3em; text-align: right;">内联样式表</p>

3.外部样式表

将样式书写到独立的css文件中。
在html文件中进行路径说明

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

原因：
(1). 外部样式可以解决多页面样式重复的问题。
(2). 有利于浏览器缓存，从而提高页面响应速度。
(3).有利于代码分离（HTML、CSS），更容易阅读和维护。