css选择器

最新推荐文章于 2024-08-27 15:59:14 发布

Rlyya

最新推荐文章于 2024-08-27 15:59:14 发布

阅读量477

点赞数 8

文章标签： css 前端

本文链接：https://blog.csdn.net/Rlyya/article/details/136395052

版权

css简介

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

css 表现外在显示的样子

js 行为

css

1.层叠样式表

2.网页实际上是一个多层的结构，通过css可以分别为网页的每一层来设置样式，而最终我们能看到的只有最上边的一层

3.设置网页中元素的样式

css学习：

css书写位置：3种

css选择器：30种左右

css样式：字体，文本，盒子模型，浮动，定位，背景····

css语法

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

快捷键：ctrl+/

CSS的语法：

选择器声明块

选择器：选中需要设置样式的部分

声明块：具体样式，是一组组名值对结构

外部样式

/* 头部样式 */
h2 {
    color: orange;
    background-color: pink;
}

css书写位置

<!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>
  <!-- 需求：给p标签和div标签内容设置一些css样式 -->
  <style>
    h1 {
      color: red;
      background-color: green;
      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body></body>
</html>

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

书写位置：

在开始标签或者自结束标签内，写一个style属性，将css样式写在style属性值里

可以写多组样式，样式与样式之间要用；隔开

缺点：

1、html结构和css表现耦合了，导致代码宽度变大，不方便查看

2、不易修改

3、权重很高，后期很难通过js或者其他框架去修改

不推荐使用！！

第二种方式：内部样式表

书写位置：

在head标签内，写一个style子标签，通过选择器选中对应的内容，

在{}内书写css样式，可以写多组样式，样式与样式之间；隔开

缺点：

1、css样式还是写在html文件内，如果css样式过多，会导致html文件很长，不方便查看html结构

2、不方便复用

如果css代码较少，且不会被复用，可以使用内部样式表

第三种方式：外部样式表

书写位置：

在html文件外新建一个.css文件，在css文件内，通过选择器选中对应的内容

在{}内书写样式，然后通过link标签，将css文件和html文件联系在一起

如果css代码较多，代码可能被复用，推荐外部样式写法

<link rel="stylesheet" href="./03.外部样式.css" />

css样式

color 设置字体的颜色，red,green,blue,black,pink·····

background-color 设置背景色 red,green,blue,black,pink·····

font-size 设置字体的大小默认是16px

width 设置元素的宽度单位：px

height 设置元素的高度单位：px

css样式的语法：样式名：样式值；

color:red;

css常用选择器

1、标签选择器：

语法：标签名{}

作用：选中对应标签包裹的内容

注意：常用的标签就那么多，如果用标签选择器，很可能会选中其他不需要设置样式的内容

 h1 {

        color: red;

      }

2、id选择器

作用：选中对应id属性值的内容

语法：#id属性值{}

注意：

id属性值：不能以数字开头，最好不要是汉字

id属性值不能复用


      #p1 {

        color: green;

      }

3、class选择器

作用：跟id选择器很像，选中对应class属性值的内容

语法：.class属性值{}

注意：也是我们用的最多的选择器


      .p2 {
      color: rgb(141, 120, 81);
    }

    .p3 {
      background-color: blueviolet;
    }

4、通配选择器

语法：*{}

作用：选中所有的标签

 * {
      font-size: 34px;
    }

css复合选择器

复合选择器：

交集选择器

作用：选中同时满足选择器1选择器2选择器3····对应的内容

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

注意：如果选择器中有标签选择器，那么标签选择器必须放在首位

并集选择器（群组选择器）

作用：同时选中选择器1，选择器2·····对应的内容

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

css关系选择器

元素之间的关系：

父子关系

直接包含和被包含的关系

父元素：直接包含子元素

子元素：直接被父元素包含

祖先后代关系

直接或间接包含和被包含的关系（包括父子关系在内）

祖先元素：直接或间接包含后代元素

后代元素：直接或间接被祖先元素包含的

兄弟关系

拥有共同的父元素

1、子元素选择器：

作用：通过指定的父元素找到指定的子元素

语法：父元素>子元素{}

 div>span {

      color: red;

    }

2、后代选择器

作用：通过指定的祖先元素找到指定的后代元素

语法：祖先元素后代元素{}


    #cs span {

      font-size: 30px;

    }

3、下一个兄弟选择器

作用：通过指定的兄找到指定的弟

语法：兄+弟{}

 .s1+span{

      background-color: green;

     }

4、所有兄弟选择器

作用：通过指定的兄找到下面所有的兄弟

语法：兄～弟{}


    .s1~span {

      background-color: pink;

    }

Rlyya

关注

8
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
css选择器

css简介、语法、外部样式、书写位置、常用选择器、复合选择器、关系选择器
复制链接

扫一扫