css添加方式/样式规则/选择器/层叠性

最新推荐文章于 2022-03-02 17:46:28 发布

ch206265

最新推荐文章于 2022-03-02 17:46:28 发布

阅读量958

点赞数 1

分类专栏： # CSS 文章标签： CSS层叠性 CSS选择器 CSS添加方式

本文链接：https://blog.csdn.net/ch206265/article/details/88044449

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、CSS 为HTML添加样式的四种方式

通过HTML创建文档结构，使用CSS规则为HTML添加样式。
CSS为HTML添加样式的三种方式分别为行内式、内嵌式和外链式。

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
	<title>HTML5 Template</title>
	<!--css的外链式-->
	<link href="CSS文件的路径" type="text/css" rel="stylesheet" />
	<!--css的内嵌式-->
	<style type="text/css">
    	选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}/*css的内嵌式*/
	</style>
</head>
<body>
	<!--css的行内式-->
	<标签名 style=" 属性1:属性值1; 属性2:属性值2;" > 内容 </标签名>
</body>
</html>

1.行内式

<标签名 style="属性1:属性值1; 属性2:属性值2;"> 内容 </标签名>

注意等号、冒号和分号的使用

2.内嵌式

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

将CSS代码集中写在head标签中，并且用style标签定义

3.外链式

<head>
      <link href="CSS文件的路径" type="text/css" rel="stylesheet" />
</head>

将html和CSS单独分为两个文件，在head标签中，用link标签将html文件和CSS文件建立连接
注： href，超文本引用（hypertext reference）

4.导入式

导入式样式表，和外链式一样，都是分别建立html文件夹和CSS文件夹，但是不是通过link标签连接CSS文件，而是通过@import url( )导入CSS文件；
此外，在CSS文件中也可以通过@import url( )将其他CSS文件内容导入到另一个CSS文件中。

二、CSS样式规则

css规则分为两部分，即选择符和声明，css选择符 + 声明 = css规则

声明又有两部分组成，即属性和属性值；
每个属性以英文分号";“结尾，属性名和属性值之间用英文冒号”:"隔开；
选择符(又称选择器)用于指定css样式作用的html对象，样式属性用花括号包裹。

三、选择器

css选择器又称选择符，它就是用于寻找实现css样式效果的特定html元素

常用的选择器分为四类，分别为标签选择器、类选择器，id选择器和属性选择器；

1. 标签选择器:`标签名{}`

2. 类选择器：`.类名{}`

多类名选择器：.类名.类名{}

<!--html-->
<p class="specialtext featured">This text.</p>

html的class属性可以有以空格隔开的多个属性值，也就是多个类名

/*css*/
.specialtext.featured {font-size:120%;}/*多类名选择器*/

一定要注意，多类名选择器中间没有空格，否则就变成上下文选择器了

标签带类选择器：标签名.类名{}

<!--html-->
<h1 class="specialtext">This is a heading.</h1>
<p>The first paragraph.</p>
<p class="specialtext"> The second paragraph.</p>

class属性：class属性是类属性，用于说明类别

/*css*/
p {font-family:helvetica, sans-serif; font-size:1.2em;}/*标签选择器*/
.specialtext {font-style:italic;}/*类选择器*/
p.specialtext {color:red;}/*标签带类选择器*/

类选择器在类名前面有一个英文句点，不空格直接跟类名
标签带类选择器实际上就是交集选择器，css样式只作用于带有指定类的标签

3. id选择器: `#id名{}`

id选择器的用法和类选择器大致相同

<!--html-->
<p id="specialtext">This is the special text.</p>

/*css*/
#specialtext {CSS 样式声明}/*或者如下：*/
p#specialtext {CSS 样式声明}

4.属性选择器

属性名选择器：标签名[属性名]{}
属性值选择器：标签名[属性名="属性值"]

<img src="images/yellow_flower.jpg" title="yellow flower" alt="yellow flower" />
<img src="images/red_flower.jpg" title="red flower" alt="red flower" />

img[title] {border:2px solid blue;}//属性名选择器
img[title="red flower"] {border:4px solid green;}//属性值选择器

5. 通配符选择器：`*{}`

通配符选择器用的比较少，常见下列三种形式：

* {color:green;}

这样设置将会使所有元素（的文本和边框）都变为绿色
注：color属性设置的是前景色，前景色即影响文本也影响边框，但人们只用它设定文本颜色

p * {color:red;}

这样设置会把p标签包含的所有元素都变为红色

section * a {font-size:1.3em;}

这样设置相当于用通配符代替了后代选择器中的父元素，构成了非子元素选择器，也就是说，section是爷爷辈的，a是孙子辈的，而设定的css样式font-size:1.3em只作用于孙子辈的a标签，section的子辈的a标签不受影响

id选择器和类选择器的区别

id属性可以用于页面导航，举个简单例子：

<!--html-->
<a href="#bio">Biography</a>
<h3 id="bio">Biography</h3>
<p>I was born when I was very young… </p>

当用户点击<a></a>标签创建的链接时，页面会移动到id名为bio的<h3></h3>标签

<!--html-->
<a href="#">Biography</a>
<h3 id="bio">Biography</h3>
<p>I was born when I was very young… </p>

href="#"，点击这样生成的链接之后会返回到页面顶部
此外， href="#"表示这是一个空链接，并且如果要写空连接，必须要使用#进行占位

具体可以参考之前的笔记：链接标签<a></a>、锚点定位

id名具有唯一性，但是class名可以重复

复合选择器

常用的复合选择器主要有：上下文/后代选择器（空格）、并集选择器（逗号）、交集（标签带类）选择器

1. 后代选择器/上下文选择器：空格

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<title>HTML5 Template</title>
<style>
	/* CSS 规则放在<style>标签中 */
</style>
</head>
<body>
	<!-- HTML 元素放在<body>标签中 -->
	<article>
		<h1>Contextual selectors are <em>very</em> selective</h1>
		<p>This example shows how to target a <em>specific</em> tag.</p>
	</article>
	<aside>
		<p>Contextual selectors are <em>very</em> useful!</p>
	</aside>
</body>
</html>

下图表示的是上述标记对应的DOM层次结构

下面给出不同的选择器，体会一下后代选择器的作用效果：

em {color:green;}//全部em包裹的字体变为绿色
p em {color:green;}//只有处于p标签中的em标签包裹的文字变为绿色
article em {color:green;}//article分支下的所有em标签包裹的文字变为绿色
article h1 em {color:green;} //article分支下的h1分支下的所有em标签包裹的文字变为绿色

一定要注意：后代选择器（上下文选择器），要用空格！！

2. 并集选择器：逗号

h1 {color:blue; font-weight:bold;}
h2 {color:blue; font-weight:bold;}
h3 {color:blue; font-weight:bold;}

若想减少重复代码的书写量，使h1,h2,h3标签中的字体都变为蓝色粗体，可以使用并集选择器，如下：

h1, h2, h3 {color:blue; font-weight:bold;}

千万要注意，并集选择器各个选择器之间要加逗号!!
3. 交集选择器(标签带类选择器)

4. 其他特殊的后代选择器

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<title>HTML5 Template</title>
<style>
	/* CSS 规则放在<style>标签中 */
	section > h2 {font-style:italic;}
</style>
</head>
<body>
	<!-- HTML 元素放在<body>标签中 -->
	<section>
		<h2>An H2 Heading</h2>
		<p>This is paragraph 1</p>
		<p>Paragraph 2 has <a href="#">a link</a> in it.</p>
		<a href="#">Link</a>
	</section>
</body>
</html>

子元素选择器：>

标签1 > 标签2 {font-style:italic;}
section > h2 {font-style:italic;}

子元素选择器要求标签1必须是标签2的父级标签，没有隔代，不能是其他祖先标签

紧邻同胞选择器: +

标签 1 + 标签 2{color:red;}
h2 + p {color:red;}

紧邻同胞选择器要求标签2必须是紧接着标签1的同胞标签，紧挨着的

一般同胞选择器: ~

标签 1 ~ 标签 2{color:red}
h2 ~ a {color:red;}

一般同胞选择器要求标签2是标签1后面的同胞标签，不一定紧邻

四、CSS的层叠性

css继承是从一个元素向其后代元素传递属性值所采用的机制。确定应当向一个元素应用哪些值时，浏览器不仅要考虑继承，还要考虑声明的特殊性，另外需要考虑声明本身的来源。这个过程就称为层叠。——《css权威指南》

对于声明的特殊性，我的理解也就是声明的权重，所以关于CSS的层叠性，需要从三个方面考虑，即，继承、来源和权重

继承性

子标签会继承父标签的某些样式，但是一般只会继承文字文本的一些属性

来源

CSS(cascading style sheet)层叠样式表
cascading /kæ'skeɪdɪŋ/层叠，css样式首先具有层叠性，当html元素某一css样式属性设置了多次，拥有多个属性值时，就需要层叠机制发挥作用了。给页面添加的样式大致有一下几种来源：

浏览器默认样式表
用户样式表
外链式样式表
内嵌式样式表
行内式样式表

浏览器会按照一定的顺序，从默认样式表开始到行内式样式表结束，依次对各个属性进行检查，取最后一次检查确认的属性值为最终的属性值。整个检查更新过程结束后，再将每个html标签以最终设定的样式显示出来。

权重

选择器类别	特指度	代码示例
继承或者通配符*的权重	0000	`* {color:red; }`
标签选择器的权重	0001	`p{color:red; }`
类、伪类选择器的权重	0010	`.demo{color:red; }`
id选择器的权重	0100	`#demo{color:red; }`
行内式样式表	1000	`<div class="demo" id="test" style="color:purple;">`
！important;权重	$\infty$	`div{color:green;!important }`

权重叠加的例子：

示例代码	特指度
p	001
p.largetext	011
p#largetext	101
body p#largetext	102
body p#largetext ul.mylist	113
body p#largetext ul.mylist li	114

层叠性总结：

规则一：如果样式表的来源相同

那么就直接比权重，id选择器 > 类选择器 > 标签选择器；
如果是复合选择器的话就比较叠加后的权重。

规则二：如果来源不同的样式都对同一个标签的同一个属性做出了设定

一般情况下(不同来源的样式声明权重相同时)，按照外链式 $\rightarrow$ 内联式 $\rightarrow$ 行内式，这样的顺序取最后一次检查确认的属性值为最终的属性值。整个检查更新过程结束后，再将每个html标签以最终设定的样式显示出来。简而言之就是后声明的胜过先声明的。
当然，如果样式声明来源不同，权重也不同，那么外链式 $\rightarrow$ 内联式 $\rightarrow$ 行内式这样的先后顺序关系也就不存在了。此时就按照权重来确定使用那一则CSS样式声明，此时有：id选择器特指度 > 类选择器 > 标签选择器；
除了，!inportant之外，行内式使用style设定的属性权重最大，其次就是各种选择器按照叠加后的权重确定优先级。

五、css字体样式属性

h1{font: font-style  font-weight  font-size/line-height  font-family;}

使用font属性对字体属性进行综合设置，需要注意的是，上面的花括号中的字体样式属性值的书写顺序不能变，各个属性的设置以空格隔开；
不需要的属性可以省略并取默认值，但是必须保留font-size和font-family这两个属性。

Reference:

CSS设计指南(第三版);
Flowchart · GitBook https://mermaidjs.github.io/flowchart.html
css优先级计算规则 - wangmeijian - 博客园 https://www.cnblogs.com/wangmeijian/p/4207433.html

ch206265

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css添加方式/样式规则/选择器/层叠性

CSS的最大贡献就是：让 HTML 从样式中解脱苦海，实现了 HTML 专注去做结构呈现。css样式格式 css字体样式属性h1{font: font-style font-weight font-size/line-height ...
复制链接

扫一扫