CSS样式引入方式和选择器

最新推荐文章于 2024-04-19 06:07:46 发布

4o4-

最新推荐文章于 2024-04-19 06:07:46 发布

阅读量93

点赞数

分类专栏：个人总结前端文章标签： html

本文链接：https://blog.csdn.net/zhaxideilei/article/details/117608232

版权

个人总结同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

1.css

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

2.1引入方式

引入方式	使用方式	注
行内样式	<h3 style="color:#red" > 这是一个标签 </h2>
内嵌样式	<head> <style type="text/css"> h3{ color:#red; } </style> </head>
外链样式	<head> <link rel="stylesheet" type="text/css" href="css01.css"> </head>	外部样式表可以在任何文本编辑器中编写，并且必须以 .css 扩展名保存。
导入样式	导入样式是在 head 部分使用@import关键字导入.css文件r

2.2优先级

在一般情况下：行内>内嵌>外联>导入特殊情况就近原则：离修饰的标签就近则优先级越高

3.css元素选择器

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。

3.1基本选择器

名称	描述	代码
ID选择器	id 选择器使用 HTML 元素的 id 属性来选择特定元素。元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素	#first{color: yellow;}
类选择器	类选择器选择有特定 class 属性的 HTML 元素。	.name{color: green;}
标签选择器	直接将HTML标签作为选择器	p,h3,a{color: blue;}
通用选择器	通用选择器（*）选择页面上的所有的 HTML 元素。	*{color: red;}

注：id和类选择器不可用数组作为名称开头

3.2包含选择器

名称	特征
子代选择器	只能匹配某一元素的直接子元素	h1>strong{color:x;}
后代选择器	可以选择某元素的后代的元素，往往嵌套于另一指定元素内，并非仅仅是直接子元素	ul li{color:x;}
分组选择器	逗号选择器，使用逗号给多个标签设置样式	h1+p{color:x；} div~p{color:x；}

实例：

head>
	<meta charset="UTF-8">
	<title>css标签介绍</title>
	<style type="text/css">
	div>ul>li{
		color:yellow;
	}
	.user p{
		color:green;
	}
	</style>
</head>
<body>
<div class="user">
    <h2>诗 12</h2>
    <p>————Shakespeare</p>
    </div>
    <hr>
    <div>
	<ul>
		<li>When I do count the clock that tells the time,And see the brave day sunk in hideous night;</li>
		<li>When I behold the violet past prime,And sable curls all silver'd o'er with white:</li>
		<li>When lofty trees I see barren of leaves,
            Which erst from heat did canopy the herd,
            And summer's green, all girded up in sheaves,
            Born on the bier with white and bristly beard;</li>
		<li>Then of thy beauty do I question make,
            That thou among the wastes of time must go,
            Since sweets and beauties do themselves forsake,
            And die as fast as they see others grow;
            And nothing 'gainst Time's scythe can make defence
            Save breed, to brave him when he takes thee hence.</li>
	</ul>
</div>
</body>

效果展示：

3.3 属性选择器

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>属性选择器</title>
	<style type="text/css">
	/*某个标签里面的某个属性值*/
	.container[class]{
		color: red
		}
	div[title]{
		color: red		
		}
		input[type*="e"]{
			color: red
    	}
    input[type^="e"]{
			color: blue
    	}
    input[type$="rl"]{
			color: green
    	}
    .msg+p{
    	color: yellow
    	}
    [title="这是一个标题"]{
        color: purple
    	}
	</style>
</head>
<body>
	<div class="container">这是一个div</div>
	<div title="这是一个标题">这是第二个div</div>
	<input type="text" name="" id="" value="张三">
	<input type="email" name="" id="" value="王五">
	<input type="url" name="" id="" value="李四">
	<hr>
	<div class="msg">这是第三个div</div>
	<p id="msg2">这是一个段落</p>
</body>
</html>

结果展示：

3.4伪类选择器

a."伪类"既同一个标签，不同的状态，有不同的样式，伪类使用冒号表示。

b.基本伪类

:link -------- 链接点击之前 :visited ------- 链接被访问过后 :hover ------- ”悬停“ 鼠标放到标签上 :active ------ "激活" 鼠标点击标签但是不松手 :focus ------- 某个标签获得焦点时候的样式

c.代码举例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>伪类选择器</title>
	<style type="text/css">
    /* 让链接点击之前是红色*/
	   a:link{
	   	color: red
	   }
	   /*让链接点击完是橙色*/
	   a:visited{
	   	color: orange
	   }
	   /*让连接在鼠标悬停时时绿色*/
	   a:hover{
	   	color: green
	   }
	   /*让链接点击但是不松手时是蓝色*/
	   a:active{
	   	color: blue
	   }
	</style>

</head>
<body>
	<h1><a href="2.4.2_tiaozLJ.html">-点击-</a></h1>
</body>
</html>

需注意四种状态是固定的：:link------:visited-------:hover-----:active.