CSS简介，书写位置，语法及CSS不同的选择器

最新推荐文章于 2024-09-20 02:44:07 发布

原创最新推荐文章于 2024-09-20 02:44:07 发布 · 305 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html

本文介绍了CSS的基础知识，包括CSS的作用、书写位置和语法。详细讲解了元素选择器、ID选择器、类选择器等常用选择器，以及复合选择器、关系选择器、属性选择器和伪类选择器的使用。内容涵盖内联样式、内部样式表和外部样式表的优缺点，并阐述了CSS在网页设计中的重要性。

网页分成三个部分

结构 20个左右标签，先用一段时间

表现外在显示的样子

行为

css -层叠样式表

-网页实际上是一个多层的结构，通过css可以分别为网页的每一层来设置样式

而最终我们能看到的只有最上边的一层

-设置网页中元素的样式

二.CSS书写位置

第一种方式：内联样式/行内样式

写在开始标签里，写一个style属性，在style属性值里面写样式

样式分为样式名:样式值; 名值对的结构

可以写多组样式，以;隔开即可

缺点：

1、结构和样式耦合

2、不容易修改不推荐使用

第二种方式：内部样式表

在head标签中，写一个style标签，在style里先选中对应的元素，然后设置样式

可以多组样式，以;隔开即可,最后一个样式，可以不写;，但我们一般都写

缺点：

不方便复用

第三种方式：外部样式表

在html文件外新建一个css文件，在css文件内书写样式，然后通过link标签

引入css文件

三.CSS语法

1、 CSS的注释，作用和HTML注释类似，只不过它必须编写在style标签中，或者是css文件中

2、 CSS的语法：

选择器声明块

选择器：选中你想设置样式的内容/标签/元素，写{}

声明块：

一组一组的名值对结构

四.CSS常用选择器

1、元素选择器

作用：选中对应的标签

语法：标签名{}

例如：h1{},h3{},p{}

2、id选择器

作用：选中对应的id属性值的内容,id属性值不能复用

语法：#id属性值{}

3、class选择器

作用：选中对应的class属性值的内容，可以复用属性值

语法：.class属性值{}

<!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>选择器</title>
    <style>
      /* 需求一：h1标题变红色 */
      h1{
        color: red;
      }
      /* 1、元素选择器
         作用：选中对应的标签
         语法：标签名{}
         例如：h1{},h3{},p{}
      */
      /* 需求二：将第一句诗变绿色 */
      #p1{
        color: green;
      }
      /* 2、id选择器  
        作用：选中对应的id属性值的内容,id属性值不能复用
        语法：#id属性值{}
      */
      /* 需求三：将第二句诗、第三句诗都变棕色 */
      .p2{
        color: orange;
      }
      /* 3、class选择器
       作用：选中对应的class属性值的内容，可以复用属性值
       语法：.class属性值{}
       */
      /* 需求四：给所有的标签字体变为24px */
      *{
        font-size: 34px;
      }
      /* 4、通配选择器
         语法：*{}
      */
    </style>
  </head>
  <body>
    <div>
      <h1>登高</h1>
      <h3>杜甫</h3>
      <p id="p1">风急天高猿啸哀，渚清沙白鸟飞回。</p>
      <p class="p2">无边落木萧萧下，不尽长江滚滚来。</p>
      <p class="p2">万里悲秋常作客，百年多病独登台。</p>
      <p>艰难苦恨繁霜鬓，潦倒新停浊酒杯。</p>
    </div>
  </body>
</html>

五.CSS复合选择器

1、交集选择器

作用：选中符合多个选择器条件的内容

语法：选择器1选择器2选择器3···{}

例如：div.red{},#div2.red{}

注意：如果选择器中有元素选择器，必须把元素选择器放在前面

2、并集选择器

作用：同时选中符合多个选择器对应的内容

语法：选择器1,选择器2,选择器3····{}

例如：.red,#p2,h1{}

六.关系选择器

1、子元素选择器