级联样式单与css选择器（上）

最新推荐文章于 2024-08-09 17:43:58 发布

枫林晚。

最新推荐文章于 2024-08-09 17:43:58 发布

阅读量866

点赞数 2

分类专栏： CSS3.0 文章标签： CSS样式单 CSS选择器

本文链接：https://blog.csdn.net/qq_40315045/article/details/94665525

版权

CSS3.0 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

级联样式单与css选择器

1.样式单概述

样式单(Style Sheet)是种专门描述结构文档表现方式的文档，它既可以描述这些文档如何在屏幕上显示，也可以描述它们的打印效果，甚至声音效果。样式单一般不包含在结构化文档的内部，而以独立的文档方式存在。与HTML描述数据显示方式的传统方法相比，样式单有许多突出的优点：

表达效果丰富
文档体积小
便于信息检索
可读性好

1.1CSS概述

级联样式单是一系列格式规则，这些规则用于控制网页内容的外观:从精确的布局定位到特定的字体和样式，CSS样式都可以一样表现出色，甚至对于一些网页特效，也可借助于CSS实现。CSS样式单除了可用于控制HTML文档的显示外，也可用于控制XML文档的显示格式。
值得注意的是：CSS样式单可以将数据逻辑和现实逻辑分离开来，从而提高文件的可读性。
除此之外，CSS还提供了其它显示方式，例如声音（虽然这种情况很少见，但如果浏览者有这种需求也是可以实现的）。CSS主要提供如下两个功能：

通过CSS样式单可以同时控制整个站点所有页面的风格，如果整个站点所有的页面效
果都需要改变，则可直接通过CSS样式单控制，避免逐个修改每个页面文件。
对页面的字体、颜色控制更加细腻，让页面内容更富表现力，CSS的表现效果远远超
出传统HTML页面的color、bgcolor等属性的表现力。

2.CSS样式单的基本使用

CSS样式单可以控制HTML文档的显示，但是在控制文档显示之前，首先需要在需要显示的HTML文档中导入CSS样式单。向HTML中导入样式单有如下4种方式：

链接外部样式文件
导入外部样式单
使用内部样式定义
使用行内样式

2.1引入外部样式单（最常用）

引入外部样式单这种方式彻底将HTML文档和CSS样式文档分离，这样分离开的好处是：一次编写样式，可以到处引用。而且也大大减少了修改样式的时间。引入外部样式文件应在<head…/>元素中增加如下<link…/>子元素，如下

<!--引入outer.css样式单文件-->
<link href="out.css" rel="stylesheet" type="text/css" />

应用举例：
在HTML代码中：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>连接外部CSS样式单</title>
		<!--引入外部样式单-->
		<link href="outer.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<table>
			<tr>
				<td>引入外部样式单</td>
			</tr>
			<tr>
				<td>引入外部样式单</td>
			</tr>
			<tr>
				<td>引入外部样式单</td>
			</tr>
		</table>
	</body>
</html>

在CSS（outer.css）代码中：

/*设置整个表格的背景颜色*/
table{
	background-color:blue;
	width:400px
}
/*设置单元格的背景颜色、字体等*/
td{
	background-color:white;
	font-family:"楷体_GB2313";
	font-size:20pt;
	text-shadow: -8px 6px 2px green
}

2.2导入外部样式单（最少应用）

导入外部样式单操作由于与浏览器的兼容问题会导致导入样式单是出现“闪屏”的现象，所以不建议大家使用此操作。导入外部样式单功能和连接外部样式单功能差不多，只是在语法上存在区别，导入外部样式单需要在<style…/>元素中使用@import来执行导入。
代码示例如下：

<style type="text/css">
	@import"outer.css"
	@import url("mycss.css")
</style>

使用@import的完整语法如下：

@import url(样式单地址) sMedia;

值得注意的是：上面语法中url可以省略，而且目前大部分浏览器都不支持sMedia设置。

2.3使用内部样式定义（常用）

使用内部样式需要在HTML头文档中插入CSS样式单，这种方法，每份CSS样式单只能用于一个HTML文档。
内部样式单需要放在<style…/>元素中使用。而<style…/>元素放在<head…/>元素中，作为它的子元素。
内部CSS样式定义的语法格式如下：

<style type="text/css">
	样式单文件定义
</style>

HTML文档示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>内部CSS样式单</title>
		<style>
			table{
			background-color:blue;
			width:400px
			}
			td{
				background-color:white;
				font-family:"楷体_GB2313";
				font-size:20pt;
				text-shadow: -8px 6px 2px green
		    }
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td>内部CSS样式单</td>
			</tr>
			<tr>
				<td>内部CSS样式单</td>
			</tr>
			<tr>
				<td>内部CSS样式单</td>
			</tr>
		</table>
	</body>
</html>

2.4使用行内样式（常用）

行内CSS样式只对单个标签有效，它甚至不会影响整个文件。行内样式定义可以精确控制某个HTML元素的外观表现。
行内CSS样式的语法格式如下：

style=“property1:value1;property2:value2;property3:value3;.........;”

例如为<table…/>元素设置背景颜色：

<table style="background-color:blue"></table>

2.5CSS样式单优先级

行内样式>内部样式>外部样式

3.CSS选择器

3.1元素选择器

元素选择器是最简单的选择器，其语法格式如下：

E{...} /*其中E代表有效的HTNL元素名*/

E可以是任意有效的HTML元素名，可以用"“来代表元素名，”"可以匹配HTML文档中的任意元素。
代码示例如下：

<!--使用内部样式定义-->
<style type="text/css">
	*{
		border:1px black solid;
		padding:4px
	}
</style>

注意：该CSS样式会对页面中所有1的HTML元素起作用。

3.2属性选择器

从广义的角度来看，元素选择器其实是属性选择器的个例。属性选择器有如下几种语法格式：

E{…}:指定CSS样式对所有E元素起作用。
E[attr]{…}: 指定该CSS样式对具有attr属性的E元素起作用。
E[attr=value] {…}:指定该CSS样式对所有包含attr属性，且attr属性为value的E元素起作用。
E[attr ~=value]{ … }:指定该CSS样式对所有包含attr属性，且attr属性的值为以空格隔开的系类值，其中某个值为value的E元素起作用。
E[attr l=value]{…}: 指定该CSS样式对所有包含 attr属性，且attr属性的值为以连字符分隔的系列值，其中第一个值为value的Tag元素起作用。
E[attr^f"value"]{… }:指定该CSS样式对所有包含attr属性，且attr属性的值为以value开头的字符串的E元素起作用。
E[attr$="value "]{… }:指定该CSS样式对所有包含attr 属性，且att属性的值为以value结尾的字符串的E元素起作用。
E[attr*='value"] { … }:指定该CSS样式对所有包含attr属性，且attr属性的值为包令value的字符串的E元素起作用。
代码示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>属性选择器</title>
		<style type="text/css">
			div{
				width:300px;
				height:30px;
				background-color:#eee;
				border:1px solid black;
				padding:10px;
			}
			div[id]{
			background-color:#aaa;
			}
			div[id*xx]{
				background-color:#999;
			}
			div[id^=xx]{
				background-color:blue;
				color:red;
			}
			div[id=xx]{
				background-color:yellow;
				color:#fff;
			}
		</style>
	</head>
	<body>
		<div>属性选择器</div>
		<div id="a">属性选择器</div>
		<div id="zzxx">属性选择器</div>
		<div id="xxyy">属性选择器</div>
		<div id="xx">属性选择器</div>
	</body>
</html>

3.3ID选择器

ID选择器指定CSS样式将会对具有指定id属性值的HTML元素起作用。ID选择器的语法格式如下：

#idValue {...}

上面的语法指定该CSS样式对id为IDValue的HTML元素起作用。

3.4class选择器

class选择器指定CSS样式对具有指定class属性的元素起作用。class选择器的语法格式如下：

[E].classValue{.....}    /*其中E是有效的HTML元素*/

指定该CSS定义class属性值为classValue的E元素起作用。
注意：此处的E可以省略，如果省略E，则指定该CSS对所有的class属性为classValue的元素都起作用。

3.5包含选择器

包含选择器用于指定目标选择器必须处于某个选择器对应的元素内部。其语法格式如下:

selectorl Selector2 {...} /*其中Selector1、selector2都是有效的选择器*/

3.6子选择器

子选择器用于指定目标选择器必须是某个选择器对应的元素的子元素。子选择器的语法格式如下:

selectorl>selector2 {...} /*其中Selectorl、Selector2都是有效的选择器*/

3.7CSS新增的兄弟选择器

兄弟选择器是CSS3.0新增的一个选择器。兄弟选择器的语法如下:

Selectorl ~ Selector2 {...} /*其中Selectorl、Selector2 都是有效的选择器*/

兄弟选择器匹配与Selectorl对应的元素后面、能匹配Selector2的兄弟节点。

3.8选择器组合

如果需要让一份 CSS样式对多个选择器起作用，那就可以利用选择器组合来实现了。选择器组合的语法格式如下:

Selector1, Selector2, Selector3,...{ ... } /*其中Selector1、Selector2、 Selector3都是有效的选择器* /

对于组合选择器而言，{}中定义的CSS样式将会对前面列出的所有选择器匹配的元素起作用。