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;}

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


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

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

修改网络ip地址全攻略,简单几步畅游互联网

在数字世界中&#xff0c;IP地址扮演着至关重要的角色。它就像是网络世界的门牌号码&#xff0c;使得每一台设备在互联网上都有一个独特的标识。有时&#xff0c;出于安全、隐私或网络管理的需求&#xff0c;我们可能需要修改设备的IP地址。虎观代理将详细介绍如何修改网络IP地…

VBA中如何对工作表进行排序

代码 在VBA中对工作表进行排序的最简单方法是直接使用Move方法来移动工作表。 Sub SortSheetsByNameDescending()Dim sheetsDim sheet As WorksheetDim i As Integer, j As IntegerDim sortedSheets() As Array 获取当前工作簿中的所有工作表Set sheets ThisWorkbook.Sheets…

开发日志2024-04-12

开发日志2024/04/12 1、分店月业绩和年业绩都需要添加为真实数据 **开发思路&#xff1a;**分店下所属的技师的业绩总和 代码实现&#xff1a; 前端 无 后端 //TODO 将技师多对应的积分累加到他所属的分店的月/年累计业绩销量中//TODO 查询技师所对应的分店地址String f…

如何正确使用数字化仪前端信号调理?(二)

在上期文章如何正确使用数字化仪前端信号调理&#xff1f;&#xff08;一&#xff09;中&#xff0c;我们为大家介绍了数字化仪前端电路所需的特性以及使用过程中需要的输入抗阻和输入耦合&#xff0c;本期文章将为您介绍数字化仪前端信号调理的使用过程中所需的输入电压范围&a…

裸机开发之汇编、寄存器

一、什么是汇编&#xff1f;为什么学汇编&#xff1f; 在之前写控制代码的时候就在想&#xff1a;底层是怎么控制的&#xff1f;后来经过学习知道之前所编写的代码都是应用层代码&#xff0c;顾名思义就是在系统写好的底层之上调用系统函数。原以为底层是指写系统写好的底层函数…

Python之旅(一)——常量、变量、动态类型

文章目录 Python背景知识Python用途Python的优缺点Python前景&#xff08;钱景&#xff09; 常量和表达式变量与类型变量的定义变量命名的规则变量的使用变量的类型整数 int浮点数 float字符串布尔其他(暂不介绍&#xff09; 动态类型 标黄部分是和C语言不同的部分Python背景知…

字节对编码 (BPE):提升语言处理的效率和有效性

原文地址&#xff1a;byte-pair-encoding-bpe-bridging-efficiency-and-effectiveness-in-language-processing 2024 年 4 月 12 日 介绍 在快速发展的自然语言处理 (NLP) 领域&#xff0c;对人类语言高效解析和理解的追求带来了重大创新。字节对编码&#xff08;BPE&#x…

在 Next.js App Router 中使用仅在服务端的代码

React Server Components 架构将组件分为客户端和服务端类型&#xff0c;并与 Next.js 的 App Router 集成。 使用 App Router 进行开发时&#xff0c;区分服务端代码和客户端代码对于应用程序的安全性、性能和可维护性至关重要。这篇博文将介绍在 Next.js 应用程序中定义服务…

安装ubuntu双系统步骤

1&#xff0c;给U盘分区做启动盘 先下载ubuntu20.04.4-desktop-amd64.iso的镜像&#xff0c;双击打开UltraISO工具&#xff0c;然后点打开 点击写入&#xff0c;选择是 等待制作镜像写入U盘完成 系统镜像做完后&#xff0c;把需要给ubuntu安装的软件也一起拷贝到U盘里面 2&am…

旧版本jquery升级新版本后如何处理兼容性问题

前言 最近项目在漏洞扫描过程中发现现在的jquery版本受多个跨站点脚本漏洞影响&#xff0c;需要升级jquery版本。 1、首先下载高版本的jquery&#xff0c;我这里升级的是3.6.0 2、对应的bootstrap版本也要升级&#xff0c;这里升级的是3.3.7 本来以为替换完这两个文件后&#…

C语言中的编译和链接

系列文章目录 文章目录 ​编辑 系列文章目录 文章目录 前言 一、 翻译环境和运行环境 二、 翻译环境 2.1 编译 2.1.1 预处理 2.1.2 编译 2.1.2.1 词法分析 : 2.1.2.2 语法分析 2.1.2.3 语义分析 2.1.3 汇编 2.2 链接 三、运行环境 前言 在我们平常的写代码时&#xff0c;我们很…

VRRP(虚拟路由冗余协议)详解

VRRP-------虚拟路由冗余协议 在一个网络中&#xff0c;要做为一个合格的网络首先就要具备几种冗余&#xff0c;增加网络的可靠性。 这几种冗余分别为&#xff1a;线路冗余&#xff0c;设备冗余&#xff0c;网关冗余&#xff0c;UPS冗余 VRRP该协议就是解决网关冗余的。在二层…