CSS样式单与基本选择器的总结整理

最新推荐文章于 2022-05-30 22:59:09 发布

Sunny凝眸

最新推荐文章于 2022-05-30 22:59:09 发布

阅读量217

点赞数

文章标签： CSS样式单 CSS基本选择器

本文链接：https://blog.csdn.net/weixin_45360456/article/details/94649772

版权

CSS样式单与基本选择器

CSS样式单

1.使用外部CSS样式
CSS文件，如：

table{
	background-color:#003366;
	width:400px
}

td{
	background-color:#fff;
	font-family:"楷体_GB2312";
	font-size:20pt;
	text-shadow:-2px 4px 2px #333;
}

在html的head元素中引用此文件： <link…/>

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Ttpe" content="text/html; charset=utf-8" />
   <title>链接外部CSS样式单</title>
   <link href="outer.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<table>
		<tr>
			<td>疯狂Java讲义</td>
		</tr>
		<tr>
			<td>轻量级Java EE</td>
		</tr>
		<tr>
			<td>疯狂Ajax讲义</td>
		</tr>
	</table>
</body>
</html>

2.使用内部样式
内部样式是在html中head元素中添加，如：

<head>
   <meta http-equiv="Content-Ttpe" content="text/html; charset=utf-8" />
   <style type="text/css">
	   div{
			background-color:grey;
			font:italic normal bold 14pt normal 楷体_GB2312;
	   }
	   p{
			background-color:#444;
			color:#fff;
			font:normal samll-caps bold 20pt normal 宋体;
	   }
	</style>
</head>

3.使用行内样式
行内样式是在html中对body元素内的元素添加style属性，如：

<body>
	<div style="background-color:grey; font:italic normal bold 14pt normal 楷体_GB2312;">div内的文字</div>
	<p style="background-color:#444; color:#fff; font:normal samll-caps bold 20pt normal 宋体;">p内的文字</p>
</body>

优先级：行内样式>内部样式>外部样式

CSS基本选择器

1.元素选择器
元素选择器是最简单的选择器，语法格式如下：E {...}
具体如：

*{}
div{}
p{}
class{}

2.属性选择器
属性选择器其实就是根据元素中的属性及属性值进行匹配，如：

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Ttpe" content="text/html; charset=utf-8" />
   <title>属性选择器</title>
   <style type="text/css">
	   div{
			width:300px;
			height:30px;
			background-color:#eee;
			border:1px soild black;
			padding:10px;
	   }
	   div[id]{
			background-color:#aaa;
	   }
	   div[id*=xx]{
			background-color:#999;
	   }
	   div[id^=xx]{
			background-color:#555;
			color:#fff;
	   }
	   div[id=xx]{
			background-color:#111;
			color:#fff;
	   }
	</style>
</head>
<body>
	<div>没带任何属性的div元素</div>
	<div id="a">带id属性的div元素</div>
	<div id="zzxx">id属性值包含xx子字符串的div元素</div>
	<div id="xxuu">id属性值以xx开头的div元素</div>
	<div id="xx">id属性值为xx的div元素</div>
</body>
</html>

3.ID选择器
ID选择器就是对具有指定id属性值的元素起作用，写法是id前加#，如：

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Ttpe" content="text/html; charset=utf-8" />
   <title>ID选择器</title>
   <style type="text/css">
	   div{
			width:300px;
			height:30px;
			background-color:#eee;
			border:1px soild black;
			padding:10px;
	   }
	   #a{
			background-color:#aaa;
	   }
	   #xx{
			background-color:#111;
			color:#fff;
	   }
	</style>
</head>
<body>
	<div>没带任何属性的div元素</div>
	<div id="a">带id属性的div元素</div>
	<div id="xx">id属性值为xx的div元素</div>
</body>
</html>

4.class选择器
class选择器就是对具有指导class属性值的元素起作用，写法是id前加.,如：

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Ttpe" content="text/html; charset=utf-8" />
   <title>class选择器</title>
   <style type="text/css">
	   div{
			width:300px;
			height:30px;
			background-color:#eee;
			border:1px soild black;
			padding:10px;
	   }
	   .a{
			background-color:#aaa;
	   }
	   .xx{
			background-color:#111;
			color:#fff;
	   }
	</style>
</head>
<body>
	<div>没带任何属性的div元素</div>
	<div class="a">带id属性的div元素</div>
	<div class="xx">id属性值为xx的div元素</div>
</body>
</html>

5.包含选择器
包含选择器就是指定选择器必须处于某个选择器对应的元素内部，如：

	   div .a{
			width:300px;
			height:30px;
			background-color:#eee;
			border:1px soild black;
			padding:10px;
	   }

指的是class属性值为.a的且在div里面的元素。
6.子选择器
子选择器就是指定选择器必须处于某个选择器对应的元素的子元素，如：

	   div .a{
			width:300px;
			height:30px;
			background-color:#eee;
			border:1px soild black;
			padding:10px;
	   }

指的是class属性值为.a的且是div元素的子元素。
7.兄弟选择器
语法如下：Selector1~Selector2{…}。例:

<head>
   <style>
	   #cy ~ .lc{
	   ...
	   }
	</style>
</head>
<body>
	 <div>
	       <p>...</p>
	       <span id="cy">...</span>
	       <p class="lc"...</p>
	 </div>
</body>

是对class属性值为lc的p元素进行作用。
8.选择器组合
对几种选择器进行同一种修饰。如：

<head>
   <style>
	   div,p,span{
	   ...
	   }
	</style>
</head>

对于div，p，span都进行一样的作用。

Sunny凝眸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS样式单与基本选择器的总结整理

CSS样式单与基本选择器CSS样式单1.使用外部CSS样式CSS文件，如：table{ background-color:#003366; width:400px}td{ background-color:#fff; font-family:"楷体_GB2312"; font-size:20pt; text-shadow:-2px 4px 2px #333;}在ht...
复制链接

扫一扫