利用div+css对网站首页进行优化及各类常用选择器

本文链接：https://blog.youkuaiyun.com/woaixuexihhh/article/details/83862002

在前一天的博客中，网站首页是通过表格嵌套的，但是存在一些问题。
表格布局缺陷：

嵌套层级太多了，一旦出现嵌套顺序错乱，整个页面达不到预期的效果。
一旦改动一小块整个布局都要发生改变。
引出div+css布局

div 标签和 span 标签

div 默认占用一行 span 不占用一行

css的概述

层叠样式表
主要作用：美化我们的html页面。
元素选择器：
语法：
元素的名称{
属性：属性的值；
属性：属性的值；
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			span{
				color:blue
			}
		</style>
	</head>
	<body>
		<span>今天我不想打代码了</span>
		<span>今天我不想打代码了</span>
		<span>今天我不想打代码了</span>
		<span>今天我不想打代码了</span>
		<span>今天我不想打代码了</span>
	</body>
</html>

在这里插入图片描述
ID选择器：
语法：
#id的名称{
属性：属性的值；
属性：属性的值；
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div1{
				color: red;
			}
		</style>
	</head>
	<body>
		<!--将北京改成红色-->
		<div id="div1">beijing</div>
		<div>wuhan</div>
		<div>shanghai</div>
	</body>
</html>

在这里插入图片描述
注意 id在整个页面中必须是唯一的。
类选择器：
.名称{
属性：属性的值；
属性：属性的值；
}

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.shucai{
				color: yellow;
			}
			.shuiguo{
				color: blue;
			}
		</style>
	</head>
	<body>
		<!--将水果类改成黄色，蔬菜类改成蓝色-->
		<div class="shuiguo">香蕉</div>
		<div class="shucai">辣椒</div>
		<div class="shucai">茄子</div>
		<div class="shuiguo">苹果</div>
	</body>
</html>

属性选择器：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--修改包含title属性的a标签-->
		<style>
			/*a[title='aaa']{
				color: red;
			}*/
			a[href][title]{
				color: yellow;
			}
		</style>
	</head>
	<body>
		<a href="#" title="aaa">张三</a>
		<a href="#" >李四</a>
	</body>
</html>

以上是包含title属性和同时包含href 和title 两个属性，还有一些其他的方法。

后代选择器：爷爷选择器孙子选择器
子元素选择器：父选择器 > 子选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*请将H1下面的所有 em 元素 的内容颜色改成 红色*/
			/*中间以空格隔开的是后代选择器*/
			h1 > em{
				color: red;
			}
		</style>
	</head>
	<body>
		<h1>
			This is a 
			<em>儿子</em>
			<strong>
				<em>孙子</em>
			</strong>
		 heading
		</h1>
	</body>
</html>

上面中，有大于号的为后代选择器，选择所有的孙子后代。
若将大于号换成空格则为子代选择器，只选择父亲下面的一代。
伪类选择器：

a:link {color: red}		/* 未访问的链接 */
			a:visited {color: #00FF00}	/* 已访问的链接 */
			a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
			a:active {color: #0000FF}	/* 选定的链接 */

css作用： 美化页面、提高代码的复用性
外部样式：通过link 引入一个外部的css文件
内部样式：直接在style标签内编写css文件
行内样式：直接在标签中t添加一个style属性编写css样式
外部样式

.shucai{
	color: yellow;
}
.shuiguo{
	color: blue;
}

		<link rel="stylesheet" href="style1.css" />

内部样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.shucai{
				color: yellow;
			}
			.shuiguo{
				color: blue;
			}
		</style>
	</head>
	<body>
		<!--将水果类改成黄色，蔬菜类改成蓝色-->
		<div class="shuiguo">香蕉</div>
		<div class="shucai">辣椒</div>
		<div class="shucai">茄子</div>
		<div class="shuiguo">苹果</div>
	</body>
</html>

行内样式

		<div class="shucai" style="color: red;">茄子</div>

小技巧：
通过调节行高使得字体上下居中，如下：

line-height: 60px;

结果如图：
在这里插入图片描述

css优先级

行内样式 > ID选择器 > 类选择器 > 元素选择器
当指定多个类时候，会按照就近原则，即显示与标签比较近的类

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*元素选择器*/
			div{
				color: red;
			}
			/*类选择器*/
			.chifan{
				color: deeppink;
			}
			
			/*ID选择器*/
			#div1{
				color: greenyellow;
			}
			
			/*
			 按照选择器搜索精确度来编写:
			 	行内样式 > ID选择器 > 类选择器  > 元素选择器
			 */
			
			
			
			.first{
				color: green;
			}
			
			
			.second{
				color: blue;
			}
			
			/*就近原则*/
		</style>
	</head>
	<body>
		<!--<div class="chifan" id="div1" style="color: goldenrod;">扩展完,就可以去吃饭啦!</div>-->
		
		<div class="second first ">讲完这个真的可以去吃饭啦!</div>
	</body>
</html>

在这里插入图片描述
这边显示的是second的颜色，是蓝色而不是绿色。