CSS基础+基本选择器和复合选择器(如果想知道CSS的基础+基本选择器和复合选择器知识点,那么只看这一篇就足够了!)

        前言:在我们学习完了html之后,我们就要开始学习三大件中的第二件—CSS,CSS 可以控制多重网页的样式和布局,也就是将我们写好的html代码加上一层华丽的衣裳,使网页变得更加精美。


✨✨✨这里是秋刀鱼不做梦的BLOG

✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客

那么废话不多说,先让我们看一下这篇文章讲解的内容:

目录

1.CSS的编写位置

        (1)行内样式

        (2)内部样式

        (3)外部样式

补充:

2.CSS语法规范

3.CSS选择器的介绍

        (1)CSS基本选择器

        【1】通配选择器

        【2】元素选择器

        【3】类选择器

        【4】ID选择器

        (2)CSS复合选择器

        【1】交集选择器

        【2】并集选择器

        【3】后代选择器

        【3】子代选择器

        【4】兄弟选择器

        【5】属性选择器


1.CSS的编写位置

        在html中,我们可以将CSS的代码写在三个位置,分别是:行内、内部和外部。

        (1)行内样式

行内样式就是将CSS代码写在标签的 style 属性中:

例如:

<h1 style="color:red;font-size:60px;">我要开始学习CSS</h1>

我们在style属性中编写想要添加样式的代码,这就是行内样式的方法编写CSS代码。

注意:

1. style 属性的值不能随便写,写要符合 CSS 语法规范,是 名:值; 的形式。
2. 行内样式表,只能控制当前标签的样式,对其他标签无效。

存在的问题:

书写繁琐、样式不能复用、并且没有体现出:结构与样式分离 的思想,不推荐大量使用,只
有对当前元素添加简单样式时,才偶尔使用

       

        (2)内部样式

内部样式就是将CSS代码写在html 页面内部,将所有的 CSS 代码提取出来,单独放在 <style> 标签中(style在head标签中)。

例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 {
            color: red;
            font-size: 60px;
        }
    </style>
</head>
<body>
    <h1>我要开始学习CSS</h1>
</body>
</html>

我们将所以的CSS代码都放在了style中,使html代码和css代码有了很好的分离。

注意:

1. <style> 标签理论上可以放在 HTML 文档的任何地方,但一般都放在<head> 标签
中。
2. 此种写法:样式可以复用、代码结构清晰。

存在的问题:

1. 并没有实现:结构与样式完全分离。
2. 多个HTML 页面无法复用样式。

        

        (3)外部样式

外部样式就是将CSS代码单独写在的.css 文件中,随后在 HTML 文件中引入使用。

例如:

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.4.12.css">
</head>
<body>
    <h1>我要开始学习CSS</h1>
</body>
</html>

css代码:

h1 {
    color: red;
    font-size: 60px;
}

我们将css的代码单独写在了.css的文件中,这样使html代码和css代码彻底分离。

注意:

1. <link> 标签要写在<head> 标签中。
2. <link> 标签属性说明:

        href :引入的文档来自于哪里。
        rel :( relation :关系)说明引入的文档与当前文档之间的关系。
3. 外部样式的优势:样式可以复用、结构清晰、可触发浏览器的缓存机制,提高访问速
度 ,实现了结构与样式的完全分离。
4.
实际开发中,几乎都使用外部样式,这是最推荐的使用方式!

补充:

        在上面的三种书写方式中其优先级规则为:行内样式 > 内部样式 = 外部样式 ,如果重复书写一样的属性后面的会覆盖前面的样式。

这样我们就了解了css代码的编写位置,并且知道了外部样式是最推荐编写的!

2.CSS语法规范

        CSS 语法规范由两部分构成:

选择器:找到要添加样式的元素。
声明块:设置具体的样式(声明块是由一个或多个声明组成的),声明的格式为: 属性名: 属性值;

用一张图来表示为:

而CSS 语法规范的两部分构成也是我们重点要学习的重点。

这样我们也就知道了CSS的构成和学习CSS要学习什么。

3.CSS选择器的介绍

        首先我们先来学习CSS中的选择器。

        (1)CSS基本选择器

CSS基本选择器有四个,它们分别是:通配选择器、元素选择器、类选择器、id 选择器。

        

        【1】通配选择器

作用:可以选中所有的 HTML 元素。

语法:

* {
属性名: 属性值;
}

举例:

/* 选中所有元素 */
* {
color: orange;
font-size: 40px;
}

        【2】元素选择器

作用:为页面中 某种元素 统一设置样式。

语法:

标签名 {
属性名: 属性值;
}

举例:

/* 选中所有p元素 */
p {
color: blue;
font-size: 60px;
}

        【3】类选择器

作用:根据元素的class 值,来选中某些元素。

语法:

.类名 {
属性名: 属性值;
}

举例:

/* 选中所有class值为answer的元素 */
.answer {
color: blue;
}

注意:

 1. 元素的class 属性值不带. ,但CSS 的类选择器要带. 。
2. class 值,是我们自定义的,按照标准:不要使用纯数字、不要使用中文、尽量使用
英文与数字的组合,若由多个单词组成,使用- 做连接,例如: left-menu ,且命名
要有意义,做到 “见名知意”。
3. 一个元素不能写多个class 属性,错误示例:
 <h1 class="speak" class="big">你好啊</h1>

4. 一个元素的class 属性,能写多个值,要用空格隔开,例如:<h1 class="speak big">你好啊</h1>

        【4】ID选择器

作用:根据元素的id 属性值,来精准的选中某个元素。

语法:

#id值 {
属性名: 属性值;
}

举例:

/* 选中id值为earthy的那个元素 */
#earthy {
color: red;
font-size: 60px;
}

注意:

1. id 属性值:尽量由字母、数字、下划线( _ )、短杠( - )组成,最好以字母开头、不要包含空
格、区分大小写。
2. 一个元素只能拥有一个id 属性,多个元素的id 属性值不能相同。
3. 一个元素可以同时拥有id 和class 属性。

以上就是所有的基本选择器的介绍了!

        (2)CSS复合选择器

让我们先看一下CSS中的复合选择器有哪些:

CSS中的复合选择器有:交集选择器、并集选择器、后代选择器、子代选择器、兄弟选择器、属性选择器。

        【1】交集选择器

作用:选中同时符合多个条件的元素。

语法:

选择器1选择器2选择器3...选择器n {

}

举例:

/* 选中:类名包含rich和beauty的元素 */
.rich.beauty {
color: green;
}

交集选择器就是将基本选择器进行组合,使选择的标签更加精准明确。

注意:

1. 有标签名,标签名必须写在前面。
2. id 选择器、通配选择器,理论上可以作为交集的条件,但实际应用中几乎不用 —— 因为没有意义。
3. 交集选择器中不可能出现两个元素选择器,因为一个元素,不可能即是p 元素又是span 元
素。

        【2】并集选择器

作用:选中多个选择器对应的元素

语法:

选择器1, 选择器2, 选择器3, ... 选择器n {

}

举例:

/* 选中id为peiqi,或类名为rich,或类名为beauty的元素 */
#peiqi,
.rich,
.beauty {
font-size: 40px;
background-color: skyblue;
width: 200px;
}

并集选择器使选择的范围更加的宽泛,使添加声明更加的灵活。

注意:

1. 并集选择器,我们一般竖着写,这样可以使代码更加清晰。
2. 任何形式的选择器,都可以作为并集选择器的一部分 。

        【3】后代选择器

在学习后代选择器之前,让我们先了解一下html元素之间的关系,而html元素之间的关系大致分为:①父元素、②子元素、③祖先元素、④后代元素、⑤兄弟元素。

1. 父元素:直接包裹某个元素的元素,就是该元素的父元素。

2. 子元素:被父元素直接包含的元素。

3. 祖先元素:父亲的父亲......,一直往外找,都是祖先。

4. 后代元素:儿子的儿子......,一直往里找,都是后代。

5. 兄弟元素:具有相同父元素的元素,互为兄弟元素。

那么知道了html元素之间的关系之后,我们来学习后代选择器:

作用:选中指定元素中,符合要求的后代元素。

语法:

选择器1 选择器2 选择器3 ...... 选择器n {

} 

举例:

/* 选中类名为subject元素中的所有li */
.subject li {
color: blue;
}
/* 选中类名为subject元素中的所有类名为front-end的li */
.subject li.front-end {
color: blue;
}

从上面的代码中我们可以看到,我们使用空格来表示其后代,当然也可以使用空格来表示其后代的后代。

注意:

1. 后代选择器,最终选择的是后代,不选中祖先。
2. 儿子、孙子、重孙子,都算是后代。
3. 结构一定要符合之前讲的HTML 嵌套要求,例如:不能p 中写h1 ~ h6 。

        【3】子代选择器

作用:选中指定元素中,符合要求的子元素。

语法:

选择器1 > 选择器2 > 选择器3 > ...... 选择器n {

}

举例:

/* div中的子代a元素 */
div>a {
color: red;
}
/* 类名为persons的元素中的子代a元素 */
.persons>a{
color: red;
}

注意:

1. 子代选择器,最终选择的是子代,不是父级。
2. 子、孙子、重孙子、重重孙子 ...... 统称后代!,但是子就是指其第一代儿子。

        【4】兄弟选择器

相邻兄弟选择器:

        作用:选中指定元素后,符合条件的相邻兄弟元素。

语法:

选择器1+选择器2 {

}

举例:

/* 选中div后相邻的兄弟p元素 */
div+p {
color:red;
}

通用兄弟选择器:

        作用:选中指定元素后,符合条件的所有兄弟元素

语法:

选择器1~选择器2 {

}

举例:

/* 选中div后的所有的兄弟p元素 */
div~p {
color:red;
}

注意:

两种兄弟选择器,选择的是下面的兄弟。

        【5】属性选择器

作用:选中属性值符合一定要求的元素

语法:

1. [属性名] 选中具有某个属性的元素。
2. [属性名="值"] 选中包含某个属性,且属性值等于指定值的元素。
3. [属性名^="值"] 选中包含某个属性,且属性值以指定的值开头的元素。
4. [属性名$="值"] 选中包含某个属性,且属性值以指定的值结尾的元素。
5. [属性名*=“值”] 选择包含某个属性,属性值包含指定值的元素。

举例:

/* 选中具有title属性的元素 */
div[title]{color:red;}

/* 选中title属性值为xiaoyu的元素 */
div[title="xiaoyu"]{color:red;}

/* 选中title属性值以x开头的元素 */
div[title^="x"]{color:red;}

/* 选中title属性值以u结尾的元素 */
div[title$="u"]{color:red;}

/* 选中title属性值包含g的元素 */
div[title*="a"]{color:red;}

这样我们就把所有的复合选择器学习完了!


以上就是这篇文章的全部内容了~~~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/540378.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

uni-app如何生成骨架屏

为什么需要骨架屏&#xff1a;为了缓解用户打开程序时等待接口的焦虑情绪 1.打开微信开发者工具&#xff0c;找到模拟器中的页面信息&#xff0c;选择生成骨架屏 2.将生成的wxml代码复制到vscode&#xff0c;在index的components中新建一个vue文件&#xff0c;只需保留请求接口…

RPA实战演练UiBot6.0新食堂一楼问卷星(类似于之前的网页表单提交)

要使用RPA&#xff08;Robotic Process Automation&#xff0c;机器人流程自动化&#xff09;帮助新食堂进行调查问卷&#xff0c;我们可以结合UiBot 6.0来实施具体的计划。以下是一个大致的实战演练计划&#xff1a; 一、目标与需求分析 明确调查目标&#xff1a;了解新食堂…

CentOS7里ifcfg-eth0文件不存在解决方案/Centos7修改网络IP解决方案

Centos7网络IP地址手动设置 1、centos7没有ifcfg-eth0&#xff0c;我的centos7也没有其他博客说的什么ifcfg-ens33、ifcfg-ens32&#xff0c;然后我打开了我这里的ifcfg-eno***&#xff0c;结果发现就是centos6里的ifcfg-eth0里的网络配置。2、vim ifcfg-eno***&#xff08;按t…

34. UE5 RPG实现鼠标点击移动

在前面&#xff0c;我们实现过使用键盘按键wasd去实现控制角色的移动&#xff0c;现在&#xff0c;我们实现了InputAction按键触发&#xff0c;后面&#xff0c;实现一下通过鼠标点击地面实现角色移动。 我们将实现两种效果的切换&#xff0c;如果你点击地面快速松开&#xff0…

突破编程_前端_SVG(circle 圆形)

1 circle 元素的基本属性和用法 SVG 的 <circle> 元素用于在SVG文档中绘制圆形。它具有几个基本属性&#xff0c;允许定义圆形的大小、位置、填充颜色和边框样式。以下是 <circle> 元素的基本属性及其详细解释&#xff1a; 1.1 cx 和 cy 描述&#xff1a;这两个…

Docker容器嵌入式开发:Docker Ubuntu18.04配置mysql数据库

在 Ubuntu 18.04 操作系统中安装 MySQL 数据库的过程。下面是安装过程的详细描述&#xff1a; 首先&#xff0c;使用以下命令安装 MySQL 服务器&#xff1a; sudo apt install mysql-server系统会提示是否继续安装&#xff0c;按下 Y 键确认。 安装过程中&#xff0c;系统会…

模板进阶 | 非类型模板参数 | 类模板的特化 | 模板的分离编译 | 模板的优缺点

非类型模板参数 我们可以认为非类型模板参数就是一个常量&#xff0c;在我们的类里面我们是不能对它进行改造 为什么会有这样的场景&#xff0c;其次就是C语言那里我们一般使用什么。 场景1 #include<iostream> using namespace std;#define N 10 template<class T…

uniapp开发小程序手写板、签名、签字

可以使用这个插件进行操作 手写板-签名签字-lime-signature - DCloud 插件市场 但是目前这个插件没有vue3 setup Composition API的写法。所以对于此文档提供的可以直接使用,需要使用Composition API方式实现的,可以继续看。 因为Composition API方式,更加的简单、灵活,…

2024 CleanMyMac X 优化储存苹果电脑空间 的好帮手

在数字时代&#xff0c;我们的Mac设备承载着越来越多的重要信息和日常任务。然而&#xff0c;随着时间的推移&#xff0c;这些设备可能会变得缓慢、混乱&#xff0c;甚至充满不必要的文件。这就是CleanMyMac X发挥作用的地方。 CleanMyMac X是一款功能强大的Mac优化工具&#…

基于java+springboot+vue实现的药品管理系统(文末源码+Lw)23-297

摘 要 传统信息的管理大部分依赖于管理人员的手工登记与管理&#xff0c;然而&#xff0c;随着近些年信息技术的迅猛发展&#xff0c;让许多比较老套的信息管理模式进行了更新迭代&#xff0c;药品信息因为其管理内容繁杂&#xff0c;管理数量繁多导致手工进行处理不能满足广…

动态规划原理及其在优化问题中的应用解析

动态规划原理及其在优化问题中的应用解析 一、最优子结构二、重叠子问题三、何时使用动态规划法四、伪代码示例五、C代码示例七、详细说明动态规划原理7.1、最优子结构7.2 重叠子问题7.3 动态规划的实现 八、结论 动态规划是一种解决优化问题的方法&#xff0c;它通过将原问题分…

Triton Server Python 后端优化

接上文 不使用 Docker 构建 Triton 服务器并在 Google Colab 平台上部署 HuggingFace 模型 MultiGPU && Multi Instance Config 追加 instance_group [{count: 4kind: KIND_GPUgpus: [ 0, 1 ]} ]Python Backend Triton 会根据配置信息启动四个实例&#xff0c;…

win10系统中exe文件打不开

问题描述 昨天下载了某个驱动安装程序之后&#xff0c;点击.exe文件没有反应。 解决方法 1. 开启兼容模式运行 右键点击属性 点击【兼容性】&#xff0c;并且【以兼容模式运行程序】 2. 给exe文件换个文件夹再次尝试 我使用第一个方法没有用&#xff0c;之后尝试了把文…

Eureka-搭建Eureka步骤

简介&#xff1a; Eureka是Netflix开发的服务发现框架&#xff0c;本身是一个基于REST的服务&#xff0c;主要用于定位运行在AWS域中的中间层服务&#xff0c;以达到负载均衡和中间层服务故障转移的目的。SpringCloud将它集成在其子项目spring-cloud-netflix中&#xff0c;以实…

转让北京100万旅行社带国内旅行社许可证条件和要求

旅行社的主要分类为国际旅行社和国内旅行社两类。国际旅行社拥有更为广泛的经营范围&#xff0c;不仅涵盖国内旅游业务&#xff0c;还包括出境旅游业务以及入境旅游业务&#xff1b;相比之下&#xff0c;国内旅行社则专注于国内旅游市场以及入境旅游业务。当前情况下&#xff0…

Pandas部分应掌握的重要知识点

目录 Pandas部分应掌握的重要知识点一、DataFrame数据框的创建1、直接基于二维数据创建&#xff08;同时使用index和columns参数&#xff09;2、基于excel文件中的数据来创建 二、查看数据框中的数据和联机帮助信息1、查看特殊行的数据2、查看联机帮助的两种常见方法&#xff0…

MDK平台 - Code, RO-data , RW-data, ZI-data详解

文章目录 1 . 前言2 . Code, RO-data , RW-data, ZI-data解析3 . RAM上电复位4 . 细节扩展5 . 总结 【全文大纲】 : https://blog.csdn.net/Engineer_LU/article/details/135149485 1 . 前言 MDK编译后&#xff0c;会列出Code, RO-data , RW-data, ZI-data&#xff0c;以下解析…

2024年会计、审计、财务与经济管理国际会议(ICAAFEM2024)

2024年会计、审计、财务与经济管理国际会议&#xff08;ICAAFEM2024&#xff09; 会议简介 2024年国际会计、审计、财务和经济管理会议&#xff08;ICAAFEM2024&#xff09;将在云南省昆明市举行。会议旨在为从事“会计、审计、财务、经济管理”研究的专家学者提供一个平台&am…

java快速幂算法

快速幂算法 参考视频(参考五角七边up大佬&#xff09; 幂运算的介绍 幂运算是指将一个数自身乘以自身多次的运算&#xff0c;其表达式为 a n a^n an&#xff0c;其中 a a a 是底数&#xff0c; n n n 是指数。 快速幂解释 快速幂算法是一种用于快速计算幂运算的算法&…

easyui combobox下拉框组件输入检索全模糊查询

前引&#xff1a; easyui下拉组件&#xff08;combobox&#xff09;&#xff0c;输入检索下拉内容&#xff0c;是默认的右模糊匹配&#xff0c;而且不支持选择。因业务要求需要做成全模糊查询&#xff0c;目前网上搜索有两种方案&#xff1a; 1.修改easyui源码&#xff0c;这个…