CSS3 | 样式和优先级

程序员文章站 2022-06-22 17:03:07

css3一般介绍：CSS注释：/*CSS*/CSS长度单位：1.px（像素）2.em（倍数，一般用于文字）一、HTML嵌套CSS3样式：1.外部（推荐）例如HTML文件为index.html将样式放入另一文件中，index.css以上两个文件放入同一文件夹下2.内部3.内联（不推荐）二、CSS3优先级1.内联style2.id选择器3.class选择器4.标签

css3一般介绍：

CSS注释：/*CSS*/

CSS长度单位：

1.px（像素）

2.em（倍数，一般用于文字）

一、HTML嵌套CSS3样式：

1.外部（推荐）

例如HTML文件为index.html

将样式放入另一文件中，index.css

以上两个文件放入同一文件夹下

CSS3 | 样式和优先级

2.内部

CSS3 | 样式和优先级

3.内联（不推荐）

CSS3 | 样式和优先级

二、CSS3优先级

1.内联style

2.id选择器

3.class选择器

4.标签

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>index</title>
	<style>
		#imgid{
			background:#0ff;
			border-radius:256px;
		}

		.imgcls{
			background:#f0f;
			border-radius:256px;
		}

		img{
			background:#ccc;
			border-radius:256px;
		}

	</style>
</head>
<body>
	<img src="xs.png" id='imgid' class='imgcls' style="background:#ff0">	
</body>
</html>

以上代码中，优先级为：内联style>#imgid>.imgid>img

三、CSS3选择器

1.常用选择器

1）标签

...
<style >
        span{
            font-size:10em
        }
</style>
<span>linux</span>
...


*{} //给页面上所有的标签设置模式 
h1{} //给页面上所有的h1标签设置样式

2）id

...
<style>
        #imgid{
            font-size:10em
        }
</style>
<body>
    <img src="xs.png"  id='imgid' class='imgcls'  style="background:#ff0">
</body>
...

#h3{} //给id是h3的标签设置样式

3）类

...
<style>
        .imgid{
            font-size:10em
        }
</style>
<body>
    <img src="xs.png"  id='imgid' class='imgcls'  style="background:#ff0">
</body>
...

.hcls{} //给class是hcls的一类标签设置模式

4）关联

...
	<style>
		.div2 .imgcls{  /*表示div2里面的imglcs*/
			background:#ccc;
			border-radius:256px;
		}

	</style>
...
<body>
	<div class="div1">
		<img src="xs.png" id='imgid' class='imgcls'>	
	</div>
	<div class="div2">
		<img src="xs.png" id='imgid' class='imgcls'>	
	</div>
</body>
...

#div1 h1 
#div1 h1.ljhcls

5）组合

...
	<style>
		.div1 .imgcls,.div2 .imgcls{
			background:#ccc;
			border-radius:256px;
		}

	</style>
...
<body>
	<div class="div1">
		<img src="xs.png" class='imgcls'>	
	</div>

	<div class="div2">
		<img src="xs.png" class='imgcls'>	
	</div>

	<div class="div3">
		<img src="xs.png" class='imgcls'>	
	</div>
</body>
...

div,h1,p,span,button{}