CSS样式表详解-CSDN博客

1.什么是CSS？

Cascading Style Sheet 层叠样式表
表现层（美化网页）

CSS发展史

CSS1.0: 只能网页进行简单的修饰，代码比较乱。
CSS2.0：div（块）+CSS，提出了HTML与CSS结构分离的思想，网页变得简单。
CSS2.1: 浮动，定位
CSS3.0：圆角，边框，阴影，动画

CSS优势

内容和表现分离
网页和结构表现统一，可以实现服用
样式丰富
利用SEO，容易被搜索引擎收录。

2.CSS基本语法

（1）格式

选择器 {
   声明1；
   声明2；
}

（2）使用样式

行内样式

<h1 style="color: red;">行内样式</h1>

内部样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--推荐写在head中 -->
		<style type="text/css">
			h1{
				color: red;
			}
		</style>
	</head>
	<body>
		<h1>内部样式</h1>
	</body>
</html>

外部样式（推荐使用）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 引入外部css文件 -->
		<link rel="stylesheet" type="text/css" href="css/练习.css"/>
	</head>
	<body>
		<h1>内部样式</h1>
	</body>
</html>

h1{
	color: #FF0000;
}

这三种方式遵循就近原则。

3.选择器

选择器的作用：选择页面上的某一元素或者某一类元素。

（1）基本选择器

标签选择器

选择一类标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			h1 {
				/* 标签选择器：会选择这个页面上所有这个标签的元素 */
				color: #FF0000;
			}
		</style>
	</head>
	<body>
		<h1>Java</h1>
		<h1>Paython</h1>
	</body>
</html>

类选择器class

选择所有class属性一致的标签，可以跨标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 类选择器格式：.class的名称 可以复用 实现归类 */
			.class1 {
				color: red;
			}
			.class2 {
				color: green;
			}
		</style>
	</head>
	<body>
		<h1 class="class1">Java</h1>
		<h1 class="class2">Paython</h1>
		<p class="class2">C++</p>
	</body>
</html>

id选择器

全局唯一

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* id选择器：#id名称 必须全局唯一 */
			#id1{
				color: saddlebrown;
			}
			#id2{
				font-family: "楷体";
			}
		</style>
	</head>
	<body>
		<h1 id="id1">Java</h1>
		<h1 id="id2">张三</h1>
	</body>
</html>

优先级：id选择器>类选择器>标签选择器，不遵循就近原则。

（2）层次选择器

后代选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 后代选择器 设置body后面所有的p标签*/
			body p{
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<p>p1</p>
		<p>p2</p>
		<ul>
			<li>
				<p>p4</p>
			</li>
			<li>
				<p>p5</p>
			</li>
		</ul>
	</body>
</html>

子选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 子选择器  设置body后面的第一代*/
			body>p{
				color: red;
			}
		</style>
	</head>
	<body>
		<p>p1</p>
		<p>p2</p>
		<ul>
			<li>
				<p>p4</p>
			</li>
			<li>
				<p>p5</p>
			</li>
		</ul>
	</body>
</html>

通用兄弟选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 通用兄弟选择器  当前元素向下的所有兄弟元素(不包括当前元素)*/
			.name~p{
				color: aqua;
			}
		</style>
	</head>
	<body>
		<p class="name">p1</p>
		<p>p2</p>
		<p>p3</p>
		<ul>
			<li>
				<p>p4</p>
			</li>
			<li>
				<p>p5</p>
			</li>
		</ul>
	</body>
</html>

（3）结构伪类选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* ul的第一个子元素 */
			ul li:first-child{
				color: red;
			}
			/* ul的最后一子元素 */
			ul li:last-child{
				color: black;
			}
			/* 选中p1元素 */
			p:nth-child(2){/* 定位到父级元素 选中父级元素的第几个 */
				color: blue;
			}
			/* 选中父元素下面的p元素的第二个 */
			p:nth-of-type(2){
				color: yellow;
			}
		</style>
	</head>
	<body>
		<h1>p0</h1>
		<p>p1</p>
		<p>p2</p>
		<p>p3</p>
		<ul>
			<li>li1</li>
			<li>li2</li>
			<li>li3</li>
		</ul>
	</body>
</html>

（4）属性选择器（常用）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				width: 20px;
				height: 20px;
				background: #00FFFF;
			}
			/* id等于id1的元素 */
			p[id=id1]{
				background: black;
			}
			/* class类名中包含links的所有元素 */
			p[class*=links]{
				background: yellow;
			}
		</style>
	</head>
	<body>
		<li class="demo">
			<p class="links" id="id1">1</p>
			<p class="links demo">2</p>
			<p class="links demo w">3</p>
			<p class="link"></p>
		</li>
	</body>
</html>

*注意：=是全部匹配 =是部分匹配