博客列表 >CSS规则引入html文档的方式及CSS常用选择器
CSS规则引入html文档的方式及CSS常用选择器
- 择善而从原创转载
- 2020年12月17日 17:28:11570浏览
CSS规则引入html文档的方式,CSS常用选择器
1. 实例演示css规则的三种引入到html文档中的方式
- 行内样式: 使用style属性,仅对于使用了这个属性的当前元素有效
<h3 style="color:red">行内样式,仅设置了本h3元素的颜色</h3>
- 内部样式: 使用 style 标签,仅对当前文档的元素有效
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内部样式</title>
<style>
h3 {
color: red;
}
</style>
</head>
<body>
<h3>内部样式,设置了本文档中h3元素的颜色</h3>
<h3>这个h3元素的颜色也同时被设置了</h3>
</body>
- 外部样式: 使用 link 标签,对所有引入这个css样式表的html文档有效
/* file:style.css */
h3 {
color:red;
}
<!-- 外部样式1.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外部样式1</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h3>外部样式,设置了本文档中h3元素的颜色</h3>
<h3>这个h3元素的颜色也同时被设置了</h3>
</body>
</html>
<!-- 外部样式2.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外部样式2</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h3>外部样式,同样也设置了这个文档中h3元素的颜色</h3>
<h3>同样,这个h3元素的颜色也被设置了</h3>
</body>
</html>
对于一个网站来说,许多页面元素的样式是相同的,将这些相同样式剥离出来,形成独立的CSS文档,可以实现模块化,便于后期调整修改。
2. 实例演示选择器
演示html
<!-- demo2.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器使用</title>
<link rel="stylesheet" href="css/css_demo2.css">
</head>
<body>
<ul id="idxz">
<li class="classxz">PHP</li>
<li class="classxz">JAVA</li>
<li class="classxz1">C#</li>
<li class="classxz">PYTHON</li>
</ul>
</body>
</html>
- 标签选择器
/*标签选择器 返回一组此标签*/
li{
border:1px soild red;
}
- class选择器
/*类选择器 一组 使用方式 .类名*/
.classxz{
color:red;
}
- id选择器
/*id 选择器 浏览器不保证唯一性由开发者自定义 使用方式 #id*/
#idxz{
background-color:blue;
}
- 上下文选择器
/* 后代选择器 所有层级*/
ul li{
color:blue;
}
/*子元素选择器 仅父子层级*/
body>ul>li{
background-color:red;
}
/*同级相邻选择器*/
.classxz1+li{
background-color:bule;
}
/*同级所有选择器*/
classxz~li{
color:yellow;
}
- 结构伪类选择器
/*伪类选择器*/
/* 匹配任意位置的元素:nth-of-type(an+b) */
/* an+b: an起点,b是偏移量, n = (0,1,2,3...) */
/* 匹配第3个li */
ul li:nth-of-type(0n+2) {
background-color: violet;
}
/* 0乘以任何数都等于0,通常直接写偏移量就可以 */
ul li:nth-of-type(2) {
background-color: violet;
}
/* 反向获取任意位置的元素: `nth-last-of-type(an+b)` */
/* 选择倒数2个 */
ul li:nth-last-of-type(-n+2) {
background-color: violet;
}
/* 选择所有索引为偶数的子元素, */
ul li:nth-of-type(2n) {
background-color: yellow ;
}
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。