文章目录
前言
css样式将对布局、字体、颜色、背景和其它文图效果实现更加精确的控制。只通过修改一个文件就改变页数不计的网页的外观和格式。 在所有浏览器和平台之间的兼容性。更少的编码、更少的页数和更快的下载速度。
一、CSS是什么?
CSS是层叠样式表,也称CSS样式表,是一种标记语言。其基本语法结构是这样的:
选择器{属性:属性值}
二、CSS基本选择器
1.类选择器
类选择器的作用是差异化选择不同标签,可单独使用,也可与其他选择器组合使用,使用类选择器需要在HTML元素上定义类名。
2.id选择器
id选择器与类选择器相似,也是需要在HTML标签元素上定义标签名字,id选择器可以指定特定样式以"#"定义。值得注意的是,只能调用一次。
3.标签选择器
标签选择器是指用HTML标签名作为选择器,按标签名分类,为页面某一类标签指定同意的CSS样式,标签选择器能快速为页面同一标签设计样式,但不能差异化样式。
4.通配符选择器
以*定义,表示选取页面所有元素(标签),通常用作清除网页边距。
代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 使用通配符选择器清除内外边距 */
* {
margin: 0;
padding: 0;
}
p {
color: aqua;
}
#aidi {
color: red;
}
.lei {
color: blue;
}
</style>
</head>
<body>
<p>我是标签选择器</p>
<p class="lei">我是类选择器</p>
<p id="aidi">我是id选择器</p>
</body>
</html>
三、CSS复合选择器
1.后代选择器
又称包含选择器,写法是把外层标签写在前面,内层标签写在里面,空格分隔。
元素1是父级,元素2是子级,最终选择的是元素为2。
元素2是儿子,也可以是孙子等,只要是元素1的后代。
元素为1和元素2可以是任意选择器。
举例来说,如果只想对div中的h1改变颜色,可以这样设置:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div h1 {
color: blue;
}
</style>
</head>
<body>
<div>
<h1>我是第一行</h1>
</div>
<h1>我是第二行</h1>
</body>
</html>
2.子选择器
只能选择作为某元素最近一级子元素
语法:元素1 > 元素2
元素1和元素2之间用大于号>分开元素1是父级,元素2是子级,最终选择的是元素2
元素2必须是亲儿子
以下代码是通过子选择器选择“我是第二行”更改颜色为蓝色:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.b>h1 {
color: blue;
}
</style>
</head>
<body>
<div class="a">
<h1>我是第一行</h1>
</div>
<div class="b">
<h1>我是第二行</h1>
</div>
</body>
</html>
3.并集选择器
可以选择多组标签,同时为他们定义相同的样式。通过英文逗号,连接而成
4.链接伪类选择器
选择不同状态的链接,
a {
color: black;
text-decoration: none;
}
a:hover {
color: palevioletred;
}
5.focus伪类选择器
获取光标的表单 ,焦点就是光标,一般情况下是<input>类表单元素才能获取,因此这个选择器也主要针对于表单元素来使用
input:focus {
background-color: blueviolet;
}
总结