前端开发HTML+CSS之基础篇（二）

最新推荐文章于 2022-11-16 12:32:10 发布

我要糖

最新推荐文章于 2022-11-16 12:32:10 发布

阅读量300

点赞数 3

分类专栏： HTML+CSS 文章标签： HTML CSS 前端开发选择器冲突与优先级

本文链接：https://blog.csdn.net/qq_44790423/article/details/98507569

版权

HTML+CSS 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

在对HTML的一些基本用法有了一定的了解之后以及为了进一步对我们的网页进行优化，我们需要掌握CSS的基本语法以及选择器和样式冲突的解决方法

在进行正式的CSS编写之前，我们有两种方法将CSS模块的内容与我们的HTML文件进行联系

法一：
直接在我们的HTML文件中进行CSS模块内容的编写，这样会导致HTML文件内容过大，修改比较麻烦，但是会涉及到优先级的问题
法二：
将CSS文件与HTML文件分开，即利用编辑器新建一个文件，其后缀名为.css，同时在我们的HTML文件中
其代码为

<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="master.css">
</head>

其中的link标签中href=“对应的文件名.css”，但需要注意的是我们需要将HTML文件与CSS文件放在同一个目录下，才可以实现之间的联系

一、CSS基本语法

CSS是用来对于样式的控制

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

例子如下

div{
	color: blue;
	border: 1px solid red;
}

二、基本选择器

元素选择器

元素选择器{
	属性1:属性值1;
	属性2:属性值2;
	...
}

如上例子

ID选择器

ID名称在一个HTML页面中必须唯一，一个ID设置一个元素的样式设置前必须加#

# ID选择器{
	属性1:属性值1;
	属性2:属性值2;
	...
}

类选择器

为元素的class 属性，一个类名可重复出现几次
名称第一个字符不能使用数字，类选择器前的"."是类选择器的标识，命名要区分大小，应用时要区分大小写

.类选择器{
	属性1:属性值1;
	属性2:属性值2;
	...
}

同时还有多类选择器，即设置最里层类的属性

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

伪类选择器

逻辑上存在，但文档中不存在，用于给元素的某种特定状态添加样式
典型应用为超链接时未访问，访问过后，悬停，活动四种链接状态

选择器: 伪类{
	属性1:属性值1;
	属性2:属性值2;
	...
}

伪类类型	描述
:active	将样式添加到被激活的元素
:hover	鼠标悬停在元素上方，向元素添加样式
:link	将样式添加到未被访问过的链接
:visited	将样式添加到已被访问过的链接
:focus	将样式添加到被选中的元素

伪元素选择器

选择器为任意类型的选择器，伪元素实际也不存在

选择器: 伪元素{
	属性1:属性值1;
	属性2:属性值2;
	...
}

伪元素类型	描述
:first-letter	向文本的第一个字符添加特殊样式
:first-line	向文本首行添加特殊样式
:before	在选择器选择的元素之前添加内容，并可设置添加内容的样式
:after	在选择器选择的元素之后添加内容，并可设置添加内容的样式

通用选择器

又叫通配符选择器，使用通配符“*”表示

*{
	属性1:属性值1;
	属性2:属性值2;
	...
	}

二、复合选择器

常见的复合选择器有：交集选择器，并集选择器，后代选择器，子元素选择器，属性选择器

交集选择器

由两个选择器直接构成，第一个必须为元素选择器，第二个必须为类选择器或者ID选择器

元素选择器 .类选择器 | # ID选择器{
	属性1:属性值1;
	属性2:属性值2;
	...
	}

由于交集选择器会增加代码量，会影响能且不利于后期维护，除了不得已要使用，一般不推荐

并集选择器

所设置的样式对并集选择器中的各个选择器都有效
把不同选择器的相同样式抽取出来，放在一个地方做一次性定义

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

后代选择器

左边的选择器可以包含两个或多个使用空格隔开的选择器，位于后面的选择器选择元素属于前面选择器选择元素的子集
e.g.
div p 表示p作为div的后代
需注意，后代选择器所选择的后代元素包含任意嵌套层次的后代

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

子元素选择器

选择作为选择器1指定元素的所有选择器2指定的子元素
e.g.
div > span 表示选择了div元素内所有的子元素span

选择器1 > 选择器2{
	属性1:属性值1;
	属性2:属性值2;
	...
	}

相邻兄弟选择器

选择器在选择器1指定元素后出现的选择器2指定的元素，且这两个元素拥有共同的父元素
e.g.
div + span 表示选择紧接在div元素后出现的span元素，其中div 和span 拥有共同的父元素

选择器1 + 选择器2{
	属性1:属性值1;
	属性2:属性值2;
	...
	}

属性选择器

在开头我们讨论过如何嵌入CSS，而严格来说将CSS应用到HTML主要由三种方式，分为行内式，内嵌式，连接式

行内式
其有个优点：可以实现单独设置某个标签的样式
但是其样式代码不可复用

<标签名 style=" 属性名1: 属性值1； 属性名2: 属性值2；..." ...>

内嵌式
所有的CSS样式代码全放在style标签对中，
type = text/css用来定义文件的类型表文本文件

<style type="text/css">
选择器{
	属性1:属性值1;
	属性2:属性值2;
	...
	}
	</style>

连接式
即开头提过的link使用方法

三、CSS的冲突与解决

让网页响应某种行为，产生交互效果，使页面鲜活

优先级

不同样式类型优先级规定为：
行内式样式 > 内嵌式样式 | 链接外部样式

最近原则
越靠近格式化的元素的父类样式，优先级越高
同一属性的样式定义，后面定义的样式会覆盖前面定义的样式

在进行一定基础的CSS学习之后我们可以知道其具有的优点

一、将格式与结构分离

CSS和HTML分别负责格式和结构，分开可利于格式重用和网页的修改维护

二、精确控制页面布局

CSS扩展了HTML的内容，能够对网页布局，字体，颜色，背景等图文效果更加精确控制

三、可制作体积更小，下载更快的网页

将CSS样式信息制作为一个样式文件后，可以在不同网页重用，可以减少各种标签

四、可实现许多网页同时更新

将多个站点的多个网页同时指向同一个CSS文件，从而一旦更新这个CSS文件，可实现多个网页同时更新

在进行了上述的学习，我们可以知道CSS的强大用法，实现色彩，格式的新颖
(由于CSDN的编辑其实也是一种网页设计的制作，故我们在进行标签对的描述的时候若使用官方且正式的<>来描述会导致页面显示不正确，故在上述在对标签描述中只列出括号内的，而不包含<>)

该系列博客参考了聂常红刘伟著的前端HTML+CSS修炼之道
第二篇HTML+CSS学习笔记到此结束 cheers! ?

我要糖

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端开发HTML+CSS之基础篇（二）

在对HTML的一些基本用法有了一定的了解之后以及为了进一步对我们的网页进行优化，我们需要掌握CSS的基本语法以及选择器和样式冲突的解决方法在进行正式的CSS编写之前，我们有两种方法将CSS模块的内容与我们的HTML文件进行联系法一：直接在我们的HTML文件中进行CSS模块内容的编写，这样会导致HTML文件内容过大，修改比较麻烦，但是会涉及到优先级的问题法二：将CSS文件与HT...
复制链接

扫一扫