玩转CSS的前生今生与基础语法，选择器的使用

1.为什么需要CSS?

HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、<p>、<table> 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局(比如字体啥颜色，是否缩进等样式)由浏览器来完成，而不使用任何的格式化标签。由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和样式（如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。

为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。目前所有的主流浏览器均支持层叠样式表。为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁,也将文档的显示样式和结构内容实现了解耦，开发起来更加灵活。

样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。

2.什么是CSS

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素，比如字体颜色，大小，是否加粗，缩进等样式。
样式通常存储在样式表中，这样文档的样式实现了与内容解耦开发。
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一混合使用，一个样式表也可以渲染多个文档内容模块

3.CSS的使用

3.1 css基本语法

选择器是将样式和页面元素关联起来的名称(如标签名），属性是希望设置的样式属性每个属性有一个或多个值

选择器 { 属性:值; 属性:值; 属性:值;}

3.2CSS页面引入的方法

1、外联式：通过link标签，链接到外部样式表到页面中

<link rel="stylesheet" type="text/css" href="css/main.css">

一般HTML文档内容和渲染其的样式表分开文件存储，如下，在当前文件夹CSS下，新建一个main.css文件，在里面写上对div模块文档样式的渲染语法如下:

div{
	font-size:20px;
	color:red;
}

2、嵌入式：通过style标签，在网页上创建嵌入的样式表

这种用法一般可以在网站的首页中使用，将样式表直接嵌入到HTML,有利于性能的优化，这样用户在访问网页首页的时候可以快速进行加载，比如淘宝网首页就是如此使用。

<style type="text/css">
    div{ width:100px; height:100px; color:red }
    ......
</style>

3、内联式：通过标签的style属性，在标签上直接写样式

这种方式不需要选择器，直接通过属性的方式实现样式内嵌。

<div style="width:100px; height:100px; color:red ">......</div>

下面演示3种CSS页面引入方法的使用，这样CSS的使用，将文档的内容与样式解耦了，HTML只负责了文档的结构和内容，CSS负责文档内容的样式渲染。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	 <!-- 第一种插入样式的方式 外链式  -->
	<link rel="stylesheet" type="text/css" href="css/main.css">

	 <!-- 第二种插入样式的方式 内嵌式  -->
	<style type="text/css">		
		h1{ <!--这里选择器h1表示对所有h1标签进行渲染。-->
			font-size:20px;
			color:gold;
		}

	</style>

</head>
<body>

	<h1>页面标题</h1>
	<div>这是一个div标签</div>

	<!-- 第三种插入样式的方式 行内样式   -->
	<a href="http://www.baidu.com" style="font-size:20px;color:pink">百度一下</a>
</body>
</html>

3.3 常用的应用文本的css样式

color 设置文字的颜色，如： color:red;
css颜色值主要有三种表示方法：

1、颜色名表示，比如：red 红色，gold 金色

2、rgb表示，比如：rgb(255,0,0)表示红色

3、16进制数值表示，比如：#ff0000 表示红色，这种可以简写成 #f00
font-size 设置文字的大小，如：font-size:12px;默认大小是16px.
font-family 设置文字的字体，如：font-family:'微软雅黑';
font-style 设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic';设置文字倾斜
font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
line-height 设置文字的行高，设置行高相当于在每行文字的上下同时加间距，如：line-height:24px;

font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗字号/行高字体；如： font:normal 12px/36px '微软雅黑';
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24pxtext-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>常用文本样式</title>
	<style type="text/css">
		div{  <!--多所有div标签进行格式渲染-->
			
			color:green;

			/* font-size:20px;
			font-family:'Microsoft Yahei';	
			line-height:40px; */

			font:normal 20px/40px 'Microsoft Yahei';

			/* text-decoration:underline; */

			text-indent:40px;

		}
		em{   <!--对所有em标签进行格式渲染-->
			font-style:normal;
			color:gold;
		}
		span{   <!--对所有span标签进行格式渲染-->
			color:red;
			font-size:30px;
		}
		h1{   <!--对所有h1标签进行格式渲染-->
			font-weight:normal;
            color:#ffff00;
		}
		a{   <!--对所有a标签进行格式渲染-->
			text-decoration:none;
			text-align:center;
		}

		p{
			text-align:center;
		}

	</style>
</head>
<body>
	<h1>样式演示</h1>
    <h1>样式演示1</h1>
	<div>
		<span>HTML</span>是 <em>HyperText Mark-up Language</em> 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
	</div>

	<p>这是一个p标签1</p>
    <p>这是一个p标签2</p>

	<a href="http://www.baidu.com">百度网的链接</a>


</body>
</html>

3.4 css选择器的使用详解

上面使用我们大致知道了，CSS样式嵌入页面的3种方式，其中嵌入式使用的就是选择器进行样式嵌入。所谓的选择器就是一个我们指定的的需要渲染模块的名称，上面一般使用的选择器名称就是HTML标签名称，基于HTML的标签模块进行格式渲染，但是实际效果来说，范围还是太大，比如div选择器，会对所有的div模块进行统一格式样式，那就有点过了。

1、标签选择器

标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。
举例：

*{margin:0;padding:0}
div{color:red}   


<div>....</div>   <!-- 对应以上两条样式 -->
<div class="box">....</div>   <!-- 对应以上两条样式 -->

2、id选择器

通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。
举例：

#box{color:red} 

<div id="box">....</div>   <!-- 对应以上一条样式，其它元素不允许应用此样式 -->

3、类选择器

通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。
举例：

.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px} 

<div class="red">....</div>
<h1 class="red big mt10">....</h1>
<p class="red mt10">....</p>

下面就签选择器，id选择器和类选择器的综合使用案例如下：注意如果同一个内容通过标签选择器，id选择器，类选择器同时修饰，后者会覆盖前者的样式。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css选择器</title>
	<style type="text/css">
		*{  /* 表示渲染所有的标签格式*/
			font-size:30px;
		}
		div{
			color:red;
		}
		#div1{ 
			color:blue;
		}
		#div2{   /* #div1表示id选择器的id是div*/
			color:blue;
		}

		.green{  		/* 注意类选择器是通过.类名的形式表现的,嵌入是通过标签class属性的形式引入的 */
			color:pink;
		}
		.big{
			font-size:40px;
		}
	</style>
</head>
<body>
	<div>这是第1个div</div>
	<div id="div1" >这是第2个div</div>
	<div id="div2" class="green big">这是第3个div</div>
	<div class="green big">这是第4个div</div>
	<div>这是第5个div</div>
	<p class="green">这是一个p标签</p>
</body>
</html>

结果显示如下：

4、层级选择器

主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。
举例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		
		.box{
			font-size:20px;
			line-height:30px;
			text-indent:40px;
		}

		.box span{
			color:red;
			font-weight:bold;
		}

		.box em{
			font-style:normal;
			text-decoration:underline;
			font-weight:bold;
			color:pink;
		}

		.box .span02{
			color:blue;
		}

	</style>
</head>
<body>
	<div class="box">层级选择器主要应用在选择父元素下的<span>子元素</span>，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，<em>防止命名冲突</em>。
	层级选择器主要应用在选择父元素下的子元素，或者子元素下面的<span class="span02">子元素</span>，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。
	层级选择器主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。
	</div>


	<div class="box2">层级选择器主要应用在选择父元素下的<span>子元素</span>，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。
	层级选择器主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。
	层级选择器主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。
	</div>
</body>
</html>

5、组选择器

多个选择器，如果有同样的样式设置，可以使用组选择器。
举例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">


		.box01,.box02,.box03{ /*表示这三个类选择器的的文字大小都是40px*/
			font-size:40px;
			text-indent:40px;
		}

		.box01{		
			color:red;
		}

		.box02{
			color:pink;
		}

		.box03{
			color:gold;
		}

	</style>
</head>
<body>
	<div class="box01">这是第一个div</div>
	<div class="box02">这是第二个div</div>
	<div class="box03">这是第三个div</div>
</body>
</html>

6、伪类及伪元素选择器

常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容。注意通过before,after插入的内容无法选中。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.link{
			font-size:30px;
			text-decoration:none;
			color:green;
		}
		.link:hover{  /*鼠标悬停时字体变成金色*/
			color:gold;
			font-weight:bold;
			font-style:italic;
		}
		.box01,.box02{
			font-size:20px;
		}
		.box01:before{
			content:"· ";
			color:red;
		}
		.box02:after{
			content:" 。";
			color:red;
		}

	</style>
</head>
<body>
	<a href="http://www.baidu.com" class="link">百度一下</a>
	<div class="box01">这是第一个div</div>
	<div class="box02">这是第二个div</div>
</body>
</html>

统一声明：关于原创博客内容，可能会有部分内容参考自互联网，如有原创链接会声明引用；如找不到原创链接，在此声明如有侵权请联系删除哈。关于转载博客，如有原创链接会声明；如找不到原创链接，在此声明如有侵权请联系删除。

涤生手记博客专家

发布了248 篇原创文章 · 获赞 1600 · 访问量 267万+

他的留言板关注