CSS样式图文详解：css样式表和选择器_html/css

Home

Web Front-end

HTML Tutorial

CSS样式图文详解：css样式表和选择器_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:35 AM

主要内容

CSS概述

CSS和HTML结合的三种方式：行内样式表、内嵌样式表、外部样式表

CSS四种基本选择器：标签选择器、类选择器、ID选择器、通用选择器

CSS三种扩展选择器：组合选择器、后代选择器、伪类选择器

CSS样式优先级

CSS 概述

CSS：Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。

接下来我们要讲一下为什么要使用CSS。

HTML的缺陷：

不能够适应多种设备
要求浏览器必须智能化足够庞大
数据和显示没有分开
功能不够强大

CSS 优点：

使数据和显示分开
降低网络流量
使整个网站视觉效果一致
使开发效率提高了（耦合性降低，一个人负责写html，一个人负责写css）

比如说，有一个样式需要在一百个页面上显示，如果是html来实现，那要写一百遍，现在有了css，只要写一遍。现在，html只提供数据和一些控件，完全交给css提供各种各样的样式。

CSS语法

语法格式：

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

解释：
选择器代表页面上的某类元素，选择器后一定是大括号。
属性名后必须用冒号隔开，属性值后用分号（最后一个属性可以不用分号）。
属性名和冒号之间最好不要有空格（经验）。
如果一个属性有多个值的话，那么多个值用空格隔开

举例：

p{color: red;}

完整版代码举例：

<style type="text/css">	p{		font-weight: bold;		font-style: italic;		color: red;	}</style> <body>	<p>洗白白</p>	<p>你懂得</p>	<p>我不会就这样轻易的狗带</p> </body>

效果：

css代码的注释：

格式：

<style type="text/css">	/*		具体的注释	*/	p{		font-weight: bold;		font-style: italic;		color: red;	}</style>

注意：只有/* */这种注释，没有//这种注释。而且注释要写在

接下来，我们要开始真正地讲css的知识咯。

CSS和HTML结合的方式

CSS和HTML结合的方式，其实就是问你css的代码放在哪里比较合适。CSS代码理论上的位置是任意的，但通常写在。只要是

CSS和HTML的结合方式有3种：

行内样式：采用style属性。范围只针对此标签适用

内嵌样式表：采用

引入外部样式表css文件的方式。这种方式又分为两种：
1、采用标签。例如：
2、采用import，必须写在

两种引入样式方式的区别：外部样式表中不能写标签,但是可以写import语句。

下面来详细的讲一讲这三种方式。

1、CSS和HTML结合方式一：行内样式

采用style属性。范围只针对此标签适用。

该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。

举例：

<p style="color:white;background-color:red">我不会就这样轻易的狗带</p>

效果：

2、CSS和HTML结合方式二：内嵌样式表

在head标签中加入

该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活。

举例：

<style type="text/css">    p{        font-weight: bold;        font-style: italic;        color: red;    }</style> <body>	<p>洗白白</p>	<p style="color:blue">你懂得</p> </body>

3、CSS和HTML结合方式三：引入外部样式表css文件

引入样式表文件的方式又分为两种：

（1）采用标签。例如：

（2）采用import，必须写在

两种引入样式方式的区别：外部样式表中不能写标签，但是可以写import语句。

具体操作如下：
我们先在html页面的同级目录下新建一个a.css文件，那说明这里面的代码全是css代码，此时就没有必要再写

p{	border: 1px solid red;	font-size: 40px;}

上方的css代码中，注意像素要带上px这个单位，不然不生效。
然后我们在html文件中通过标签引入这个css文件就行了。效果如下：

这里再讲一个补充的知识：link标签的rel属性
标签的rel属性：
其属性值有以下两种：

stylesheet：定义的样式表

alternate stylesheet：候选的样式表

看字面意思可能比较难理解，我们来举个例子，一下子就明白了。
举例：
现在定义我们来定义3种样式表：
a.css：定义一个实线的黑色边框

div{	width: 200px;	height: 200px;	border: 3px solid black;}

ba.css：蓝色的虚线边框

div{	width: 200px;	height: 200px;	border: 3px dotted blue;}

c.css：来个背景图片

div{	width: 200px;	height: 200px;	border: 3px solid red;	background-image: url("1.jpg");}

然后我们在html文件中引用三个样式表：

  <link rel = "stylesheet" type = "text/css" href = "a.css"></link>  <link rel = "alternate stylesheet" type = "text/css" href = "b.css" title="第二种样式"></link>  <link rel = "alternate stylesheet" type = "text/css" href = "c.css" title="第三种样式"></link>

上面引入的三个样式表中，后面两个样式表作为备选。注意备选的样式表中，title属性不要忘记写，不然显示不出来效果的。现在来看一下效果：（在IE中打开网页）

CSS的四种基本选择器

CSS选择器：就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。

CSS的选择器分为两大类：基本选择题和扩展选择器。

基本选择器：

标签选择器：针对一类标签

类选择器：针对你想要的所有标签使用

ID选择器：针对特定的一个标签使用

通用选择器：针对所有的标签都适用

下面来分别讲一讲。

1、标签选择器：选择器的名字代表html页面上的标签

可以匹配针对一类标签。

举例：

p{	font-size:14px;}

上方选择器的意思是说：所有的

标签里的内容都将显示14号字体。
效果：

2、类选择器：规定用圆点.来定义

优点：灵活。

举例：

.one{	width:800px;}

效果：

3、ID选择器：规定用#来定义

针对特定的一个标签来使用，只能使用一次。ID选择器以”#”来定义。
举例：

#mytitle{	border:3px dashed green;}

效果：

上面这三种选择器的区别：

标签选择器针对的是页面上的一类标签。

类选择器可以供多种标签使用。

ID选择器是值供特定的标签(一个)，ID是此标签在此页面上的唯一标识。

4、通用选择器：用*定义，将匹配任何标签

通用选择器，将匹配任何标签。不建议使用，IE有些版本不支持，大网站增加客户端负担。
举例：

*{	margin-left:0px;	margin-top:0px;}

效果：

CSS的三种扩展选择器

扩展选择器：

组合选择器：采用逗号隔开

关联选择器(后代选择器)：采用空格隔开

伪类选择器

下面详细讲一下这三种扩展选择器。

1、组合选择器：定义的时候用逗号隔开

三种基本选择器都可以放进来。

举例：

p,h1,.one,#mytitle{	color:red;}

效果：

2、关联选择器（后代选择器）: 定义的时候用空格隔开

对于E F这种格式，表示限定所有属于E元素后代的F元素有这个样式。
看定义可能有点难理解，我们来看例子吧。

举例：

h3 b i{	color:red ; }

上方代码的意思是说：定义了

标签中的标签中的标签的样式。
注：h3和b和i标签不一定是连续紧挨着的，只要保持一个后代的关联即可。

效果：

或者还有下面这种写法：

上面的这种写法，

标签和标签并不是紧挨着的，但他们保持着一种后代关系。

还有下面这种写法：（含类选择器、id选择器都是可以的）

3、伪类选择器

对于标签，其对应几种不同的状态：

link：超链接点击之前

visited：超链接点击之后

focus：是某个标签获得焦点的时候（比如某个输入框获得焦点）

hover：鼠标放到某个标签上的时候

active：点击某个标签没有松鼠标时

CSS允许对于元素的不同状态，定义不同的样式信息。伪类选择器又分为两种：

静态伪类：只能用于超链接

动态伪类：针对所有标签都适用

下面来分别讲一下这两种伪类选择器。

（1）静态伪类：
用于以下两个状态：

link：超链接点击之前

visited：超链接点击之后

注意：上面这两个状态只能使用于超链接。

举例：

  <style type="text/css">  /*	伪类选择器：静态伪类  */   /*	让超链接点击之前是红色   */	a:link{		color:red; 	}	/*	让超链接点击之后是绿色    */	a:visited{		color:green; 	}  </style>

效果：

上图中，超链接点击之前是红色，点击之后是绿色。

问：既然a{}定义了超链的属性，和a:link{}都定义了超链点击之前的属性，那这两个有啥区别呢？
答：
a{}和a:link{}的区别：

a{}定义的样式针对所有的超链接(包括括锚点)

a:link{}定义的样式针对所有写了href属性的超链接(不包括锚点)

（2）动态伪类 :

用于以下几种状态：

focus：是某个标签获得焦点的时候（比如某个输入框获得焦点）

hover：鼠标放到某个标签上的时候

active：点击某个标签没有松鼠标时

注意：上面这三种状态针适用于所有的标签。

举例：

  <style type="text/css">  /*	伪类选择器：动态伪类  */   /*	让文本框获取焦点时：	边框：#FF6F3D这种橙色	文字：绿色	背景色：#6a6a6a这种灰色   */	input:focus{		border:3px solid #FF6F3D;		color:white;		background-color:#6a6a6a;	}	/*	鼠标放在标签上时显示蓝色    */	label:hover{		color:blue; 	}	/*	点击标签鼠标没有松开时显示红色    */	label:active{		color:red; 	}  </style>

效果：

利用这个hover属性，我们同样对表格做一个样式的设置：
表格举例：

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus&reg;">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>Document</title>  <style type="text/css">	/*整个表格的样式*/  	table{		width: 300px;		height: 200px;		border: 1px solid blue;		/*border-collapse属性：对表格的线进行折叠*/		border-collapse: collapse;  	}	/*鼠标悬停时，让当前行显示#868686这种灰色*/  	table tr:hover{  		background: #868686;  	}	/*每个单元格的样式*/  	table td{  		border:1px solid red;  	}  </style> </head> <body>  <table>  <tr>	<td></td>	<td></td>	<td></td>	<td></td>  </tr>  <tr>	<td></td>	<td></td>	<td></td>	<td></td>  </tr>  <tr>	<td></td>	<td></td>	<td></td>	<td></td>  </tr>  </table> </body></html>

效果：

CSS样式表的冲突解决

1、对于相同的选择器，其样式表排序：行级 > 内嵌 > 外部（就近原则）
2、对于相同方式的样式表，其选择器排序：ID选择器 > 类选择器 > 标签选择器
3、外部样式表的ID选择器 > 内嵌样式表的标签选择器

总结：就近原则。ID选择器优先级最大。

举例：如果都是内嵌样式表，优先级的顺序如下：（ID 选择器 > 类选择器 > 标签选择器）

另外还有两个冲突的情况：
1、对同一个标签，如果用到了了多个相同的内嵌样式表，它的优先级：定义的样式表中，谁最近，就用谁。
2、对于同一个标签，如果引用了多个相同的外部样式表，它的优先级：html文件中，引用样式表的位置越近，就用谁。

例如：

注：本文将持续更新。

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?Mar 04, 2025 pm 12:32 PM

The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

How to efficiently add stroke effects to PNG images on web pages?Mar 04, 2025 pm 02:39 PM

This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

What is the purpose of the <datalist> element?Mar 21, 2025 pm 12:33 PM

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

How do I use HTML5 form validation attributes to validate user input?Mar 17, 2025 pm 12:27 PM

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

What are the best practices for cross-browser compatibility in HTML5?Mar 17, 2025 pm 12:20 PM

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

What is the purpose of the <progress> element?Mar 21, 2025 pm 12:34 PM

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

What is the purpose of the <meter> element?Mar 21, 2025 pm 12:35 PM

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

How do I use the HTML5 <time> element to represent dates and times semantically?Mar 12, 2025 pm 04:05 PM

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

See all articles