HTML 学习记录3.2 CSS基础语法选择器创建形式

最新推荐文章于 2023-02-05 15:35:46 发布

卷儿~

最新推荐文章于 2023-02-05 15:35:46 发布

阅读量274

点赞数 2

分类专栏： JavaWeb 文章标签： html css html5

本文链接：https://blog.csdn.net/wayne_lee_lwc/article/details/104998721

版权

JavaWeb 专栏收录该内容

20 篇文章 5 订阅

订阅专栏

这是HTML学习总结的第三篇第二节，前两篇及上一节请戳下面：
HTML 学习总结1入门基本概念、格式文字标签图片标签链接标签表格标签注释
 HTML 学习总结2 框架表单
 HTML 学习总结3.1 开发工具的使用 div标签

CSS基础

说完了上面的前置知识，我们迎来了今天的主角CSS。相信很多小伙伴和我一样，在刚开始接触到这个名词的时候简直不知所云，那么，学习CSS就先从了解它是个什么东西开始。
接着，我们需要了解CSS的创建形式及选择器。
最后，需要介绍它的基础语法

什么是CSS

首先，什么是CSS？它和HTML有什么关系？
为了解释这个问题，我们的先了解CSS的名称。询问度娘后得知：

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）
或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，
还可以配合各种脚本语言动态地对网页各元素进行格式化。

从上面的描述中我们可以知道，CSS是一种样式，它是用来修饰HTML文件的。我们知道，虽然在前两节中，我们使用了诸如 font 标签来对字体进行修饰。但修饰的样式和灵活性毕竟是有限的。而CSS作为一种专门修饰HTML文件的存在，它可以为原始文本进行更多样更精细的样式设计。
说白了，css是一种外在修饰，HTML中的内容才是本体。这个关系，就像是主播和滤镜的关系，他们一同创造了你所看见的美丽画面，却是两个层面上的东西。
再放一张w3cschool上的概述：
在这里插入图片描述

CSS浏览器支持

说完了CSS是什么，不难发现CSS作为一种修饰，最终需要浏览器进行渲染实现。但并非所有的浏览器都支持这样的渲染，我在书上找到了这张图片：在这里插入图片描述
emm，虽然不能完全看懂，但是看的出来大家黑IE是有道理的。

CSS基础语法

初学CSS，需要对CSS的基础语法有基本的了解。CSS的基础语法如下：

选择器 {样式1,样式2.....}

而其中每个样式的写法如下;

属性:值

可以看到，CSS的基础语法是通过选择器选择作用对象并对其进行修饰。
需要同HTML区别开来的是样式的书写，连接属性和值使用冒号，而非等号，同时值也不需要使用双引号进行包裹。

CSS样式创建的位置

好了，我们回到正题。CSS作为一种样式修饰，那么它就应该像我们语言中的形容词一般有其固定存在的位置。换句话说，在对HTML文件的修饰时，指定样式的CSS语句应该有其创建并插入的规则。这些位置主要有三处，分别对应着三种样式的CSS的写法：即外联式，内联式，内嵌式。（笔者注意到，中文名称的命名十分混乱，不同地方的命名并不统一。因此不必纠结名称上的不同而更应该去理解三种不同的创建方法。或者，去记录其英文命名）

外联式

第一种外联式，或者叫外链式。这种形式的CSS样式没有写在HTML文档中，而是单独封装成为一个 .css 文件，在HTML文件中，可以通过 link 标签来连接这个样式。这个过程有些类似于编写程序时引用头文件或者引用包的操作。
它很好的实现了样式和内容的相分离。
HTML文件连接外部样式时，需要在 head 标签下写入 link 标签，同时指明连接内容的分类和路径。例如：

<head>
<link rel="stylesheet" type="text/css" href="aStyle.css" />
</head>

内联式

第二种是内联式，很多地方把它叫做内嵌，或叫做内部样式表，不过我们说过不纠结命名问题。这种写法想要表现的是，将CSS样式直接写在HTML的 head 标签下，对全文起修饰作用。
对全文起修饰作用，指的是这段CSS的作用域是全文，并非不能只对单个标签或是区域起修饰作用。要想实现这点，我们需要选择器的知识，这点等下会说到。
具体的，编写样式，需要使用 style 标签，并在其中使用type属性指明修饰种类为CSS，这也是一个双标签，写法如下：

<head>
<style type="text/css">
	...
</style>
</head>

内嵌式

最后一个是内嵌式，有些地方把这个又叫做内联式。这种样式的书写方式就如其名，是嵌在标签中作为属性出现的。
使用的，是 style 属性，将样式写在标签中。例如我在之前的网页的第二个div上加入颜色和尺寸修饰;

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>

</style>
</head>
<body>
	<div>
		这是一个div区域
	</div>
	<div style="background-color:#00ff00;width:100px;height:100px">
		这是另一个div区域
	</div>
</body>
</html>

得到如下样式：
在这里插入图片描述
这里需要说明一下CSS对于颜色的表示。不同于HTML中粗糙的使用英文单词来作为颜色的值，CSS则使用RGB的形式表示一个颜色（RGB表示光学三原色红绿蓝），使用一个六位十六进制数来描述一个颜色，其中，每两位是一个颜色。
由于每个颜色占十六进制两位，所以具体的每个颜色有256种值，这三原色的256256256种组合，就是一个调色板。

CSS的选择器

在说CSS的创建形式时，我们提到了在修饰时要对特定的对象进行修饰而非全文进行修饰，这样的操作虽然可以通过标签中使用style的属性来实现，但是在内联式或外链式的构建形式中便不再适用。因此，我们需要设计的样式对特定的对象起作用，这就涉及到了选择器的使用。
选择器有很多种类型，主要原理就是根据对象的特殊属性例如标签、类、ID等进行选择，下面就来介绍三种选择器

标签选择器

标签选择器，是通过标签来确定样式应用的对象的。也就是说，他可以为同一个标签设置样式，它的写法如下：

标签名{样式1;样式2...}

例如，我可以将刚刚程序中对div2的样式应用到所有div上：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
	div {background-color:#00ff00;width:100px;height:100px}
</style>
</head>
<body>
	<div>
		这是一个div区域
	</div>
	<div>
		这是另一个div区域
	</div>
</body>
</html>

结果如下：
在这里插入图片描述

类选择器

我们当然不希望只能对所有标签都进行修饰，还希望可以修饰特定的一类标签。这时候，类选择器的用处就显现出来了。
首先需要说明一点，类是HTML中的一种机制，用于把标签进行分类。其设计的初衷就是为了方便设置样式。
设置一个类的语法如下：

<标签名 class="类名">

相同类名的标签会被分配到一个类中。那么在进行修饰的时候，我们就可以以类名为选择对象，选择相同类的标签进行修饰，具体的语法如下：

.类名 {样式1;样式2...}

需要注意的是，在书写类名的时候，一定不要了加上前面的点，这是区分标签选择器的重要标志。
例如，对于上面的程序，加入一个表格，并将表格和div2设置为同一类，并对其进行修饰：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
	.class1 {background-color:#00ff00}
</style>
</head>
<body>
	<div>
		这是一个div区域
	</div>
	<div class="class1">
		这是另一个div区域
	</div>
	<table class="class1" border="2">
		<tr>
			<td>
				这是一个表格
			</td>
		</tr>
	</table>
</body>
</html>

结果如下：
在这里插入图片描述

ID选择器

除了可以选择类进行修饰，CSS还可以根据标签的ID对特定的标签进行选择修饰，选择ID的语法如下：

#ID {样式1,样式2....}

id号同类相似也是标签用来表示身份的一种属性。但与类不同的是，ID的编码是唯一的，不同的标签之间不能共用同一个ID号。下面我们就用ID选择器来修饰上一份代码中被遗忘的div1区域：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
	.class1 {background-color:#00ff00}
	#div1 {background-color:#ff00ff;width:100px;height:100px}
</style>
</head>
<body>
	<div id="div1">
		这是一个div区域
	</div>
	<div class="class1">
		这是另一个div区域
	</div>
	<table class="class1" border="2">
		<tr>
			<td>
				这是一个表格
			</td>
		</tr>
	</table>
</body>
</html>

结果如下：
在这里插入图片描述红色跟蓝色混合形成了品红，emm。。不错 ~~（除了简陋）~~

好啦，本文的内容就分享到这里，有关CSS的基础内容的关键部分也介绍了不少，但是有关CSS中具体的样式，本文几乎没有涉及，这方面会在以后的文章中有所体现，总之，真心希望同大家一起进步，也感谢您的观看。

卷儿~

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML 学习记录3.2 CSS基础语法选择器创建形式

这是HTML学习总结的第三篇第二节，前两篇及上一节请戳下面：HTML 学习总结1入门基本概念、格式文字标签图片标签链接标签表格标签注释HTML 学习总结2 框架表单CSS基础说完了上面的前置知识，我们迎来了今天的主角CSS。相信很多小伙伴和我一样，在刚开始接触到这个名词的时候简直不知所云，那么，学习CSS就先从了解它是个什么东西开始。接着，我们需要了解CSS的创建形式及选择...
复制链接

扫一扫