CSS样式表精讲-优快云博客

本文链接：https://blog.youkuaiyun.com/MrTumnus/article/details/114848977

文章目录

1.什么是CSS
2.CSS基本语法
3.CSS选择器

1.什么是CSS

CSS是Cascading Style Sheets（级联样式表）。

CSS是一种样式表语言，用于为HTML文档控制外观，定义布局。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。

可将页面的内容与表现形式分离，页面内容存放在HTML文档中，而用于定义表现形式的CSS在一个.css文件中或HTML文档的某一部分。

级联: 关联两个事物之间的关系指的是网页内容和修饰网页内容的css语法；

理念是将网页和样式分离这样重复的样式只需要定义一次即可。
样式表:修饰网页内容的语法的集合

作用:修饰网页内容的外观文本背景列表定位。

CSS与HTML关系
HTML ：网页内容；

CSS ：网页的样式,外观。

2.CSS基本语法

三种样式表:

在这里插入图片描述

行内样式表

又有人称内联样式、行间样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：

<标签名 style=“属性1:属性值1; 属性2:属性值2; 属性3:属性值3;”> 内容 </标签名>
即直接在body 内容区的字段标签内进行设置属性。
例如：

<p style="color:aqua;font-size:100px;font-family:隶书;">
  段落内容
</p>

在这里插入图片描述

内部样式表

将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			p{color:red;font-size:50px;font-family:"隶书"}
		</style>
		<!--内部表-->
	</head>
	<body>
		<p>标签</p>
	</body>
</html>

在这里插入图片描述

外部样式表

外部样式表是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中。
即在新建一个".CSS"文件，将需要设置的属性写在里面，然后引用到需要使用的文件中。

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="外部.css"  rel="stylesheet" type="text/css"/>
	</head>
	<body>
		<p>标签</p>
	</body>
</html>

在这里插入图片描述
运行：

在这里插入图片描述

3.CSS选择器

要使用CSS对HTML页面中的标签实现一对一，一对多的控制，这就需要用到CSS选择器。

标签选择器

通过标签选择器可以选择页面中的所有指定标签.

{}对于某类的标签设置属性

例如：p{ color: lightpink;}

类选择器

通过标签的class属性值选中一组标签,即在内容区部分进行特定的归类,让后再进行属性设置;
例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
        .p1{color: aqua;}
		.p2{color: blue;}
		</style>
	</head>
	<body>
		<p class="p1">一二三</p>
		<p class="p2">伍六七</p>
		<p class="p2">传奇</p>
		
		<h2>二级标题</h2>
	</body>
</html>

运行：

在这里插入图片描述

id选择器

通过标签的id属性值选中唯一的一个标签；

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		#p0{color: #00FFFF;}
		</style>
	</head>
	<body>
		<p >传奇</p>
		<p id="p0">123</p>
	</body>
</html>

运行：

在这里插入图片描述

组合使用选择器

通过选择器分组可以同时选中多个选择器对应的标签。

语法：选择器1,选择器2,选择器N{} 。
例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		.p1,.p2,#p0,h2{font-size: 5px;color: #FF1493;}
		</style>
	</head>
	<body>
		<p class="p1">伍六七</p>
		<p class="p2">传奇</p>
		<p id="p0">123</p>
		<h2>二级标题</h2>
	</body>
</html>

运行：

在这里插入图片描述

通配选择器

可以用来选中页面中的所有的标签

语法：*{ }
例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		*{font-size: 10px;color: blueviolet ;}
		</style>
	</head>
	<body>
		<p class="p1">伍六七</p>
		<p class="p2">传奇</p>
		<p id="p0">123</p>
		<h2>二级标题</h2>
	</body>
</html>

运行：

在这里插入图片描述

优先级顺序: id;类选择器;标签选择器;*选择器;

高优先级选择器不会覆盖掉低优先级中特有的属性

后代选择器

选中指定标签的指定后代标签

语法：祖先标签后代标签{}
例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.p1 li{color: #00FFFF;}
			.p2 li{color: #FFFF00;}
		</style>
	</head>
	<body>
		<ul class="p1">
			<li>A</li>
			<li>B</li>
		</ul>
		<ul class="p2">
			<li>C</li>
			<li>D</li>
		</ul>
	</body>
</html>

运行：

在这里插入图片描述

子代选择器

子标签选择器: 由父级指定子级的属性即:父级>指定子集{}

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p >b{color: lawngreen;}
		</style>
	</head>
	<body>
		<ul class="p1">
			<li>A</li>
			<li>B</li>
		</ul>
		<ul class="p2">
			<li>C</li>
			<li>D</li>
		</ul>
		<p>
			<b>P的子</b>
			<i>
				<b>b的子</b>
			</i>
		</p>
	</body>
</html>

运行：

在这里插入图片描述

相邻标签选择器

对指定的相邻的标签进行设置属性；
选择器 + 相邻{}
例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p+b{color: blueviolet;}
		</style>
	</head>
	<body>
		<p >
			<b>P的子</b>
			<i>
				<b>b的子</b>
			</i>
		</p>
		<b>p的相邻标签</b>
		<b>p的兄弟</b>
		<b>p的兄弟</b>
		<b>p的兄弟</b>
		
	</body>
</html>

运行：

在这里插入图片描述

兄弟选择器

兄弟选择器:选中指定标签的兄弟标签

语法：选择器 ~ 兄弟{}
例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p~b{color: darkorange;}
		</style>
	</head>
	<body>
		<p >
			<b>P的子</b>
			<s>
				<b>b的子</b>
			</s>
		</p>
		<s>p的相邻标签</s>
		<b>p的兄弟</b>
		<b>p的兄弟</b>
		<b>p的兄弟</b>
		
	</body>
</html>