为网页添加样式术语解释选择器 id选择器id 类选择器 class style样式写入行内外联css样式

最新推荐文章于 2024-07-24 21:34:15 发布

六行代码

最新推荐文章于 2024-07-24 21:34:15 发布

阅读量978

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/m0_55751104/article/details/128733530

版权

文章介绍了为网页添加样式的方法，包括选择器的种类如ID选择器、元素选择器和类选择器，以及CSS样式表的三种类型：内部样式表、内联样式和外部样式表。外部样式表有助于代码复用和页面性能优化。并通过示例代码展示了各种选择器和样式的应用。

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

为网页添加样式

术语解释

CSS规则= 选择器+声明块

选择器

选择器:选中元素

ID选择器:选中的是对应id值的元素：选择范围太小了
写法：

<style>
  #class{
            color: yellowgreen;
        }
</style>       
  <p id="class">Lorem ipsum, dolor sit amet consectetur adi</p>

元素选择器：选择范围太广了

 h1{
            color: aqua;
            background-color: yellow;
            text-align: center;
        }
        <h1>
        准备设置样式
       </h1>

类选择器 (常用)
写法： . 类名{ } class=“类名”

     .red{
            color: red;         
        }
          /* 这里设置字体与字体大小 */
      .bac{
            font-size: 3em;
            text-align: center;
        }

调用的格式：

    <p class="red ">Doloribus accusantium aliquid officia </p>
    <!-- 一个标签里可以调用多个类名 -->
    <p class="red bac">Possimus excepturi eum eaque adipis </p>

声明块（属性）

每一个声明(属性)表达了某一方面的样式
出现在大括号中
声明块中包含很多声明(属性)。每一个声明(属性)表达了某一方面的样式。
例如：

 font-size: 3em;
 text-align: center;

Css代码书写位置

1. 内部样式表

style的书写位置不一定要放在head里，也可以放到body里
但放到head里的原因是因为希望浏览器优先加载css内容，不然网页加载时容易卡顿才恢复样式

2. 内联样式表（元素样式表）

直接书写在元素的style属性中
这种写法就不需要再写选择器

 <p style="color: violet;">Lorem ipsum dolor sit amet</p>

3. 外部样式表（常用）

将样式书写到独立的css文件中。|
使用link 进行css文件的调用

rel：表示的是链接的类型 stylesheet是指样式表
href: 文件相对路径

  <link rel="stylesheet" href="./1.样式设置.html">

外部样式好处：

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

代码总结

元素选择器

id选择器

类选择器

内联样式

<!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>
        h1{
            color: aqua;
        }
        #size{
            background-color: blue;
        }
        .red{          
            color: brown;
        }
        .box{
            font-size: 3em;
            font-weight: 100;
        }
        
    </style>
</head>
<body>
      <h1>这是元素选择器</h1>
      <p id="size">这是id选择器</p>
      <p class="red">这是一个类选择器</p>
      <p class="red box">这是两个类选择器</p>
      <p style="color: chartreuse;">这是内联样式</p>
</body>
</html>