前端基础（三）：CSS简介、CSS选择器

最新推荐文章于 2023-12-13 17:58:37 发布

凤求凰的博客

最新推荐文章于 2023-12-13 17:58:37 发布

阅读量583

点赞数 2

分类专栏： # 前端文章标签： css

本文链接：https://blog.csdn.net/weixin_44571270/article/details/106861225

版权

前端专栏收录该内容

31 篇文章 4 订阅

订阅专栏

下面是小凰凰的简介，看下吧！
💗人生态度：珍惜时间，渴望学习，热爱音乐，把握命运，享受生活
💗学习技能：网络 -> 云计算运维 -> python全栈( 当前正在学习中)
💗您的点赞、收藏、关注是对博主创作的最大鼓励，在此谢过！
有相关技能问题可以写在下方评论区，我们一起学习，一起进步。
后期会不断更新python全栈学习笔记，秉着质量博文为原则，写好每一篇博文。

文章目录

一、CSS简介

1、什么是CSS3，如何学习？

CSS3 就是 CSS（Cascading Style Sheet ）语言，也属于标记语言，数字3 是该语言的版本号；

CSS语言开发的文件后缀名是 .CSS，通过在HTML文件中引入该 CSS文件 来控制HTML代码的样式（CSS 也可直接写在HTML文件中）。

在这里插入图片描述

css的学习流程
    1. 先学如何查找标签
        css查找标签的方式你一定要学会
        因为后面所有的框架封装的查找语句都是基于css来的
        css选择器很简单很好学不要有压力!!!
    
    2. 之后再学如何添加样式

2、CSS的注释方法

/*单行注释*/
/*
多行注释1
多行注释2
多行注释3
*/

通常我们在写css样式的时候也会用注释来划定样式区域(因为HTML代码多所以对应的css代码也会很多)
/*这是博客园首页的css样式文件*/
/*顶部导航条样式*/
...
/*左侧菜单栏样式*/
...
/*右侧菜单栏样式*/
...

3、CSS语法结构

选择器 {
  属性1:值1;
  属性2:值2;
  属性3:值3;
  属性4:值4;
}

在这里插入图片描述

4、CSS的三种引入方式（书写方式）

1.style标签内部直接书写
    <style>
        h1  {
            color: burlywood;
        }
    </style>
2.link标签引入外部css文件(最正规的方式 解耦合)
      <link rel="stylesheet" href="mycss.css">

3.行内式(一般不用)
      <h1 style="color: green">老板好 要上课吗?</h1>

二、CSS选择器

1、基本选择器

/* 基本选择器 */
/* 
# id选择器

# 类选择器

# 元素/标签选择器

# 通用选择器 */

<style>
        /* id选择器*/ 
        /* 找到id是d1的标签 将文本颜色变成绿黄色 */
        #d1 {  
           color: greenyellow;
        }
        
        /* 类选择器 */
        /* 找到class值里面包含c1的标签 */
        .c1 {  
           color: red;
        }

        /* 元素(标签)选择器 */
        /* 找到所有的span标签 */
        span { 
           color: red;
        }

        /* 通用选择器 */
        /* 将html页面上所有的标签全部找到 */        
        *{  
           color: green;
        }

</style>

语法技巧—— p#d1.c1 （插件 emmet 的功能）
在这里插入图片描述

2、组合选择器

组合选择器分类：
# 后代选择器 （ 连接标识符： 空格 

# 儿子选择器 （ 连接标识符： > 

# 毗邻选择器 （ 连接标识符： + 

# 弟弟选择器 （ 连接标识符： ~

/* 在前端 我们将标签的嵌套用亲戚关系来表述层级 */

<div>
    <p>div p</p>
    
    <p>div p
        <span>div p span</span>
    </p>
    
    <span>span</span>
    <span>span</span>
</div>

  /* div里面的所有标签都是div的后代
  p是div的儿子
  p里面的span是p的儿子
  div是p的父亲
  ...
 */

/*后代选择器*/
div span {
   color: red;
}

/*儿子选择器*/
div>span {
   color: red;
}

/*毗邻选择器*/
/* !*同级别紧挨着的下面的第一个(即 只能匹配 直接兄弟关系的标签)*! */
div+span {  
   color: aqua;
}

/*弟弟选择器*/
/*同级别下面所有的span*/
div~span {  
    color: red;
}

3、属性选择器

/* 属性选择器 */
/* 
1 含有某个属性
2 含有某个属性并且有某个值
3 含有某个属性并且有某个值的某个标签

属性选择器是以[]作为标志的 */

/* 将所有含有属性名是username的标签背景色改为红色 */
[username] {
    background-color: red;
}

/* 找到所有属性名是username并且属性值是jason的标签 */
[username='jason'] {  
    background-color: orange;
}

/* 找到所有属性名是username并且属性值是jason的input标签 */
input[username='jason'] { 
    background-color: wheat;
}

4、选择器的分组与嵌套

注意：选择器的分组与嵌套，主要是基于组合选择器作为关系连接多个基本选择器！

（1）选择器的分组（又称群组选择器）

/* 分组 */
<style>
        /*逗号表示并列关系*/
        div,p,span {   /* 所有的div、p、span标签color全为红色 */
            color: yellow;
        }
        
        /* 多种选择器组合使用，表示并列关系使用逗号分隔 */
        #d1,.c1,span { /* id为d1的标签、class值为c1的标签、span标签color全为orange */
            color: orange;
        }
</style>

（2）选择器的嵌套

/* 嵌套 */
        #d1 .c1 span { /* id为d1的标签下的class值为c1的标签下的span标签颜色全为orange */
            color: orange;
        }
        
        #d1>.c1 { /* id为d1的标签下的儿子标签中的class值为c1的标签颜色全为orange */
            color: orange;
        }

5、交叉选择器

标签内：<p class="name">段落标签</p>
style内： p.name { color:red; } # class值为name的p标签颜色为红色
# 第一个必须是标签选择器，第二个必须是类选择器或者ID选择器，两个选择器之间不能有空格，是连续写的。

6、伪类选择器 ——针对鼠标状态的标签

主要需要记住hover，鼠标悬浮在其上，使其变色！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            background-color: black;
        }
        a:link {  /*访问之前的状态*/
            color: red;
        }
        a:hover {  /*需要记住*/
            color: aqua;  /*鼠标悬浮态*/
        }
        a:active {
            color: black;  /*鼠标点击不松开的状态  激活态*/
        }
        a:visited {
            color: darkgray;  /*访问之后的状态*/
        }


        p {
            color: darkgray;
            font-size: 48px;
        }
        p:hover {
            color: white;
        }
        
        input:focus {  /* input框获取焦点(鼠标点了input框) */
            background-color: red;
        }
    </style>
</head>
<body>
<a href="https://www.jd.com/">小轩在不在?</a>
<p>点我有你好看哦</p>
<input type="text">
</body>
</html>

6、伪元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    
        /* 为首字符设置样式 如首个文字为大写 */
        p:first-letter {
            font-size: 48px;
            color: orange;
        }
        
         /*在文本开头添加内容，用CSS添加的内容，无法选中复制的*/
        p:before { 
            content: '你说的对';
            color: blue;
        }
        
        /*追加内容在文本末尾，用CSS添加的内容，无法选中复制的*/
        p:after {
            content: '雨露均沾';
            color: orange;
        }
    </style>
</head>
<body>
    <p>生命如此多娇</p>
</body>
</html>

7、选择器优先级

（1）普通选择器的优先级

1. 选择器相同 书写顺序不同
就近原则:谁离标签更近就听谁的（同级的执行顺序是从上而下，因此以最后执行的样式为准）

2. 选择器不同 
行内 > id选择器 > 类选择器 > 标签选择器
精确度越高，越有效

# 解释：
💣 行内因为就在当前标签内设置style样式，因此优先级最高。
💣 id，每个标签的id都不一样，class的值却可以重复因此id比class优先级更高。
💣 标签选择器选择所有相应的标签选择最不精确，因此优先级最低！

（2）复杂组合选择器的优先级

1. 复杂选择器的种类并不会影响优先级
    -- 后代：div #ele  |  弟弟：div~#ele  |  交叉：div#ele  优先级一样
2. 复杂选择器本质是通过同类型(简单选择器)的个数来确定优先级
    -- 三层标签选择器后代：body div i  大于  两层标签选择器后代：div i
3. 简单选择器的优先级起关键性作用，也就是一个id选择器要大于无限个class选择器，一个class选择器要大于无限个标签选择器
    -- id选择器：#i 大于 n层class选择器：.box .i
    -- class选择器：.box 大于 n层标签选择器：body div

凤求凰的博客

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端基础（三）：CSS简介、CSS选择器

一、CSS简介1、什么是CSS3，如何学习？CSS3 就是 CSS（Cascading Style Sheet ）语言，也属于标记语言，数字3 是该语言的版本号；CSS语言开发的文件后缀名是 .CSS，通过在HTML文件中引入该 CSS文件来控制HTML代码的样式（CSS 也可直接写在HTML文件中）。css的学习流程 1. 先学如何查找标签 css查找标签的方式你一定要学会因为后面所有的框架封装的查找语句都是基于css来的 css选
复制链接

扫一扫