之前两次笔记我们简单的介绍了一下HTML，接下来我们学习一下css，就是我们之前所说，结构、表现、行为中的表现。我们发现之前做的html好像不是很美观吧。。。那什么是表现呢，简单来说，我们的图片大小、字体大小、背景颜色等所有外在的东西，全都叫做表现，由我们的css负责。

CSS简介

层叠样式表(Cascading Style Sheets)

首先说下什么是样式，比如我们要设置网页字体的大小，网页的背景等等，这些东西都叫做样式，而样式表就是多个样式总汇成的表。css可以用来为网页创建样式表，通过样式表可以对网页进行修饰。
所谓层叠，可以将网页看成一层一层的结构，层次高的会覆盖层次低的。
而css就可以为网页的各个层次设置样式。

CSS样式编写

1、内联样式

接下来我们说下如何编写我们的CSS样式。

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS</title>
	</head>

	<body>
			<p style="color: red;font-size: 40px;">锄禾日当午，汗滴禾下土。</p>
			<p>谁知盘中餐，粒粒皆辛苦。</p>
	</body>
</html>=

内敛样式（可以将css样式编写到元素的style属性当中）：< p style=“color: red;font-size: 40px;” > 锄禾日当午，汗滴禾下土。< /p >这样编写在p标签内部就是内敛样式，简单说来内联样式就是将我们的样式直接编写到我们的style属性当中，这种样式我们称之为内联样式，内联样式只对当前元素内容起作用。内敛样式不方便我们重复使用。

但是此时我们的css和html都写在一起了，这其中的color: red;font-size: 40px;就是css，我们说一个优秀的页面要求我们的结构、表现、行为分离！！！但是现在很明显不满足要求。所以内敛样式属于结构与表现的耦合，不方便后期维护，不推荐使用！！

那说了这么多，不让我们用，我们到底要怎么写我们的CSS呢？让我们看看。

2、内部样式

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS</title>
		<style type="text/css">
				p{
					color: red;
					font-size: 40px;
				}
		</style>
	</head>
	<body>
			<p>锄禾日当午，汗滴禾下土。</p>
			<p>谁知盘中餐，粒粒皆辛苦。</p>
	</body>
</html>

内部样式表：也可以将CSS编写到head中的style标签中。将我们的样式表编写到我们的style标签中，通过我们的CSS选择器(上面代码中p{}就是选择我们的p标签)选中指定元素，然后可以同时为这些元素一起设置样式，可以时样式进一步的复用。将我们的样式表编写到style标签中，也可以使结构和表现进一步分离，这也是我们推荐的使用方式。

我们推荐使用的内部样式能在这一个页面中使用，但是如果我们想在其他页面使用应该怎么办呢？来看看第三种样式吧！！！

3、外部样式

除了以上两种方式，还可以将我们的CSS写到外面去。可以在文件夹中新建一个css文件，将我们之前内部样式表style中的内容放进去。然后我们只需要将style.css文件进入到我们的页面中。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SJ1YVbuq-1587297716968)(/Users/mac/Desktop/MarkDown /CSS（一）图片/3新建css文件.png)]

那怎么引入呢？通过link标签！！！

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS</title>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
			<p>锄禾日当午，汗滴禾下土。</p>
			<p>谁知盘中餐，粒粒皆辛苦。</p>

			<p>锄禾日当午，汗滴禾下土。</p>
			<p>谁知盘中餐，粒粒皆辛苦。</p>
	</body>
</html>

link标签中的rel、type都是固定的照抄就完事，href写一个相对路径就可以了。这样就能将我们上面的style.css文件引入到我们的网页了。让我们来看一下效果。

没问题！！！将我们的css统一编写到外部样式表中，完全将我们的结构和表现分离。分离方式更彻底，可以是我们的样式表在不同页面中使用，最大限制的使我们的样式可以复用。而且不仅仅这样，将样式写在外部样式表中，通过link引入，可以利用浏览器的缓存，加快访问速度提高用户体验！！！

解释一下，为什么可以达到这样的效果。假设我们目前有三个网站 A B C 这三个网站都引入了同一个css文件，那么第一次访问A网站的时候可能会慢一点，但我们打开B网站的时候，它的css文件已经在我们访问A文件的时候缓存好了，所以我们打开B网站、C网站的速度都会有所提高。就是这样提高了我们的用户体验！！！

所以，在开发中，我们最推荐使用的就是外部样式表！！！

CSS语法

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS</title>
		<style type="text/css">

			/*
				css的注释，作用和我们的html注释类似，只不过必须编写在style标签中，或者css文件中。
				选择器：通过选择器可以选择页面中指定的元素，并且将声明块中的样式应用到选择器对应的元素中。
      
				声明块：声明块紧跟在选择器后面，并且用{}括起来，声明块中其实就是一组一组的名值对结构。
				例如:"color:red;"一组一组的名值对我们称之为声明。在一个声明块中可以写多个声明，多个声明之间使					用;来隔开,声明的样式名和样式值之间使用:来连接。
			*/
			p{
				color: red;
				font-size: 40px;
			}
		</style>
	</head>
	<body>
			<p>今天天气真不错，PM2.5也就500！</p>
	</body>
</html>

首先我们发现，style标签中要使用我们css的语法。比如上面的注释/* … */已经和html的不一样了。

而我们css语法主要就是选择器和声明块。

选择器

通过选择器可以选择页面中指定的元素，并且将声明块中的样式应用到选择器对应的元素中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用选择器</title>
	</head>
	<style type="text/css">
		p{
			color: red;
		}
		h1{
			color: blue;
		}
    #p1{
			font-size: 40px;
		}
    .p2{
      color: purple;
    }
    .hello{
      font-size: 50px;
    }
	</style>
	<body>
		<h1>悯农</h1>
    
		<p id="p1">锄禾日当午</p>
		<p class="p2 hello">锄禾日当午</p>
		<p class="p2">锄禾日当午</p>
		
		<p>锄禾日当午</p>
	</body>
</html>

常用的选择器

元素选择器
- 作用：通过元素选择器，可以选择页面中所有指定元素。
- 语法：标签名{} 。
id选择器
- 使用方法：通过元素的id属性值选中唯一的一个元素。
- 语法：#id属性值{}。
类选择器
- 先介绍一个属性class。我们可以为元素设置class属性，class属性和id属性类似，只不过class属性可以重复，拥有相同的class属性值的元素，我们说他们是一组元素。相对与id，class的功能更强一些。可以同时为一个元素设置多个class属性，多个值之间使用空格隔开。
- 作用：通过元素的class 属性值选中一组元素
- 语法：.class属性值{}。

选择器分组（并集选择器）

假设还是上面那段代码，**现在我们要为id为p1的元素，class为p2的元素，还有h1，同时设置背景颜色为黄色。**我们要怎么做呢？？？

#p1{
		background-color: yellow;
}
.p2{
		background-color: yellow;
}
h1{
		background-color: yellow;
}

这样么？？？确实能达到效果，但不得不说有点缺心眼Σ(oﾟдﾟoﾉ)…

那就需要我们的选择器分组。

作用：通过选择器分组可以同时选中多个选择器对应的元素。
语法：选择器1,选择器2,选择器3。

#p1,.p2,h1{

}

这样就能简介的完成我们的代码了。

通配选择器
- 作用:他可以选中页面中所有的元素。
- 语法：*{}。
复合选择器（交集选择器）
- 作用:可以选中同时满足多个选择器中的元素(同时满足所有选择器)。
- 语法：选择器1选择器2选择器3{}。

p#p1{
		background-color: red;
}

注意上面小框中的代码，尽量不要这么使用。

对于id选择器来说，不建议使用复合选择器。一般是类选择器才用。

后代元素选择器

有后代就有祖先，有儿子就有父亲。

那么我们先来看一下这些元素之间的关系。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			div span{
				color: greenyellow;
			}
		</style>
	</head>
	<body>
		<div id="">
			<span>我是div标签中的span</span>
			<p><span>我是p标签中的span</span></p>
		</div>
		<span>我是body中的span元素</span>
	</body>
</html>

元素之间的关系
- 父元素:直接包含子元素的元素
- 子元素:直接被父元素包含的元素
- 祖先元素:直接或间接包含后代元素的元素（父元素也是祖先元素）
- 后代元素:直接或间接被祖先元素包含的元素（子元素也是后代元素）
- 兄弟元素:有相同父元素的元素。
再说我们的==后代选择器==，当我们需要为div中的span（祖先与后代关系）设置颜色为绿色时，我们应该使用后代选择器。
- 作用:选中指定元素的指定后代元素。
- 语法：祖先元素后代元素{}。

子元素选择器
- 作用:选中指定父元素的指定子元素。
- 语法：父元素>子元素{}。
注意我们的子元素选择器不兼容IE6.

另外一些：

:first-child:可以选中第一个子元素。

:last-child:可以选中最后一个子元素。

:nth-child（x）:可以选中第x（任意）个子元素。该选择器后面可以指定一个参数，指定选中第几个元素。even表示偶数位置的子元素，odd表示奇数位置的子元素。

:first-of-type、:last-of-type、:nth-of-type:与上面的非常类似，前面三种是在所有子元素中排列，而后面三种是在当前类型的子元素中排列。（child是大排行、type是小排行）
伪类选择器

给链接定义样式:
有4个伪类可以让你根据访问者与该链接的交互方式，将连接设置成4中不同的状态。

1、正常链接: a:link 。

2、访问过的链接：*a:vidited(只能定义字体颜色)。（浏览器是通过历史记录来判断是否访问过！！！由于涉及了用户隐私问题，visited只能设置字体颜色）

3、鼠标划过的链接：*a:hover。

4、正在点击的连接：*a:active。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/*为没访问过的连接设置为黄绿色。*/
			a:link{
				color: yellowgreen;
			}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com">访问过的链接</a>
		<br />
		<a chref="http://www.baidu123456.com">未访问过的链接</a>
	</body>
</html>

作用:伪类专门用来表示元素的一种特殊的状态。比如访问过的超链接、比如普通的超链接、比如获取焦点的文本框。当我们需要为特殊状态元素设置样式时，就可以使用伪类。
语法：a:link{}、a:vidited{}、a:hover{}、a:active{}…
需要注意的是：我们的hover、active不仅可以在a标签中使用,也可以为其他元素设置（IE6中不支持对超链接以外的设置hover、active）。

...
p:hover{
				background-color: yellow;
			}
...
<p>我是一个p标签</p>
...

其他：
- 获取焦点：-:focus。
- 指定元素前：-:before。
- 指定元素后：-:after。
- 选中的元素：-::selection。(这个伪类在火狐中需要采用另一种方式编写-::moz-selection)

伪元素选择器
- 作用:使用伪元素来表示元素中的一些特殊的位置。
- 语法：-:first-letter、-:first-line、-:before、-:after。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 为p中的第一个字符设置特殊的样式 */
			p:first-letter {
				color: red;
				font-size: 20px;
			}
			/*为p中的第一行设置背景颜色为黄色*/
			p:first-line {
				background-color: yellow;
			}
			/*
			 * before表示元素最前面的部分
			 * 	一般before都需要结合一个属性content一起使用。
			 * 	通过content可以向before或after添加一些内容。
			 */
			p:before{
				color: blue;
				content: "我会在最前面";
			}
			
			p:after{
				color: orange;
				content: "我会在最后面";
			}
		</style>
	</head>

	<body>
		<p>
			我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签
		</p>
	</body>

</html>

属性选择器：

说属性选择器前我们先说一个title属性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性选择器</title>
	</head>
	<body>
		<p title="我是title中的文字">我是一个段落</p>
	</body>
</html>

当我们把鼠标移至文字上的时候会出现title标签中的属性值就会显示（作为提示文字）。

属性选择器：
- 作用：可以根据元素中的属性或属性值来选取指定元素。
- 语法：
  1. 选取含有指定属性的元素:[属性名]{}。
  2. 选取含有特殊指定属性及属性值的元素：[属性名=“属性值”]{}。
  3. 选取属性值以指定内容开头的元素：[属性名^=“属性开头值”]。
  4. 选取属性值以指定内容结尾的元素:[属性名$=“属性结尾值”]。
  5. 选取属性值包含指定内容的元素：[属性名*=“包含属性值”]。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性选择器</title>
		<style type="text/css">
			[title="hello"]{
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<p title="我是title中的文字">我是一个段落</p>
		<p>我是一个段落</p>
		<p>我是一个段落</p>
		<p title="hello">我是一个段落</p>
	</body>
</html>

兄弟元素选择器

...
<span>我是一个span</span>
<p>我是一个p</p>
...

当我们想要为span后的一个p元素设置一个背景颜色为黄色时要怎么写呢？？？span是p他哥，他俩就是兄弟，要用兄弟元素选择器。

span+p{
		background-color: yellow;
}

选中后一个兄弟元素：
- 作用:可以选择一个元素后紧挨着的指定的兄弟。
- 语法：前一个+后一个{}。
选中后面所有元素：
- 作用：选中后面的所有指定兄弟。
- 语法：前面一个~后面所有{}。

否定伪类选择器

...
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p class="hello">我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
...

当我们需要将所有p元素设置黄色背景，除了class为hello的时，需要使用否定伪类。

p:not(.hello){
		background-color: yellow;
}

否定伪类：
- 作用:可以从已选中的元素中剔除某些元素。
- 语法：:not(选择器)。

声明块

声明块紧跟在选择器后面，并且用{}括起来，声明块中其实就是一组一组的名值对结构。
例如:“color:red”
一组一组的名值对我们称之为声明。在一个声明块中可以写多个声明，多个声明之间使用;来隔开,声明的样式名和样式值之间使用:来连接。样式名1:样式值1; 样式名2:样式值2; …

块和内联元素(html)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>块元素和内联元素</title>
	</head>
	<body>
		<div style="background-color: red; width:200px;">
			我是一个div
		</div>	
		<div style="background-color: yellow; width:200px">
			我是一个div
		</div>
    <hr />
		<span id="">
			我是一个span
		</span>
		<span id="">
			我是一个span
		</span>
	</body>
</html>

说一下我们的块元素和内联元素。

首先说一下块元素。
- 所谓块元素就是会独占一行的元素，无论他的内容有多少，他都会独占一行
- p,h1,h2,h3…等等都是块元素。div也是一个块元素。div标签没有任何语义，就是一个纯粹的块元素，并且不会为它里面的元素设置任何的默认样式。
- div元素主要用来对页面进行布局。
- 块元素相当霸道，所谓卧榻之侧其容他人酣睡！！！
作用：主要用来做页面中的布局。

再来说一下内联元素。
- 所谓内联元素，指的是只占自身大小的元素，不会占一行。
- 常见的内联元素：a、img、iframe、span。
- span没有任何语义，span标签专门用来选中文字，然后为文字来设置样式。
作用：内联元素主要用来选中文本设置样式。

需要注意的是：

一般来说，只会使用块元素去包含一个内联元素，而不会使用一个内联元素去包含一个块元素

<div>
	<span>块中包含内联</span>
</div>

<span>
	<div>内联中包含块</div>
</span>

a元素可以包含任意元素。但是除了它本身。
p元素不可以包含任何其他的块元素。

其实严格来说h5已经解除了块元素和内联元素，它用了一个复杂的内容模型来解析，但目前我们没有必要去记忆啦。。。

之前的笔记

好了就说这次就说这么多，之前的HTML的笔记也在这里了：
HTML（一）
HTML（二）

阿牛大牛中

发布了3 篇原创文章 · 获赞 4 · 访问量 146

私信关注

CSS选择器到底有哪些？CSS笔记（一）

文章目录

CSS简介

CSS样式编写

1、内联样式

2、内部样式

3、外部样式

CSS语法

选择器

常用的选择器

元素选择器

id选择器

类选择器

选择器分组（并集选择器）

通配选择器

复合选择器（交集选择器）

后代元素选择器

子元素选择器

伪类选择器

伪元素选择器

属性选择器：

兄弟元素选择器

否定伪类选择器

声明块

块和内联元素(html)

之前的笔记

猜你喜欢