css3.0样式和选择器_scss 3.0-优快云博客

本文链接：https://blog.youkuaiyun.com/huimoumou/article/details/94655334

本文深入讲解CSS样式的四种使用方法：外部样式、导入样式、内部样式及行内样式，探讨了它们各自的优缺点，并详细解释了CSS选择器的种类与应用，包括元素选择器、属性选择器、ID选择器、class选择器、包含选择器、子选择器、兄弟选择器和组合选择器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

											**样式单``**

CSS的样式单可以增加界面的显示效果。样式单有以下四种方法使用

外部样式
导入样式
内部样式
行内样式

一般用外部样式，好处：

CSS和HTML分离多个文件可以使用同一样式文件多文件引用同一个CSS文件，CSS只需要下载一次

1.外部样式
需要在html文件中加入以下代码引用 **link href='css文件路径' rel='stylesheet' type='text/css' /** 此种方法应用最多再加载html文件的同时加载css文件当标签较多时用此种方法管理较为方便

2.导入样式
此种方法使用有可能会出现异常，故不使用

3.内部样式
css代码在html中用 style嵌套使用。此种方法仅对单个页面有效，不会影响整个站点。但是当要修改整个页面时会出现大量的重复工作。而且当大量的css文件嵌入到html文件中时会导致文档过大影响性能。
在这里插入图片描述
4.行内样式
只对单个标签有效。可以精确控制各个标签的外观。

css选择器

1.元素选择器
在样式元素前加标签如

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

``可以使用*来代替所有标签。

2.属性选择器
有以下几种语法格式
E(…):指定该CSS样式对所有E元素起作用。
E[attr] {…):指定该CSS样式对具有attr属性的E元素起作用。
E[attr-value] (. ):指定该CSS样式对所有包含attr属性，且attr属性为value的元素起作用。
E[attr ~=value] (… ):指定该CSS样式对所有包含attr属性，且attr属性的值为以空格隔开的系列值，其中某个值为value的E元素起作用。
E[attr |=value]{…}:指定该CSS样式对所有包含attr属性，且attr属性的值为以连字符分隔的系列值，其中第一个值为value的Tag元素起作用。
E[tt^=" value"]{ … }:指定该CSS样式对所有包含attr属性,且attr属性的值为以value 开头的字符串的E元素起作用。
E[att$=“value”]{…}:指定该CSS样式对所有包含attr属性,且attr属性的值为以value 结尾的字符串的E元素起作用。
E[att*=“value”] { … }: 指定该CSS样式对所有包含attr属性，且attr属性的值为包含value的字符串的E元素起作用。
具体代码

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<style>
		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:#555;
		color:#fff;
		}
		div[id=xx]{
		background-color:#111;
		color:#fff;
		}
		</style>
	</head>
	<body>
	<div>132132</div>
	<div id='xxyy'>132132</div>
	<div id='a'>132132</div>
	<div id='zzxx'>132132</div>
	<div id='xx'>132132</div>
	</body>

3.ID选择器
只对指定id的属性起作用。语法格式如下

#idValue{.....}  // 即在对应的ID前加#

4.class选择器
只对指定class的属性起作用。语法格式如下

{E}.clssValue{.......}/* E是有效的html元素*/

5.包含选择器
包含选择器用于必须处于某个选择器对应的元素内部。语法格式如下

Selectorl1  Selectorl2{.......}

div{
width: 350px;
 height: 60px;
background-color:#ddd:
 marqin:Spx
 }
/*对处于div之内且class属性为a的元素起作用的CSS样式+/ div
div .a
{width: 200px; 
height: 35px;
border:2px dotted black; 
baekground-coLor:#888:
}
</style> </head> <body>
<div>没有任何属性的div元素</div>
<div><section><divclass-"a">处于div之内且class属性为a的元素</div></section></div> <p class="a">没有处于div之内、但class属性为a的元素</p>

6.子选择器
用于选择某个选择器对应的元素格式如下