前端的三个部分分别是html、CSS、javascript，这篇文章和大家分享一下CSS相关的内容。
一、CSS的使用方法
CSS使用方法有四种，分别是内嵌样式、内部样式、外部样式、使用import引入样式文件。
1、内嵌样式—将CSS规则写在html标记中，CSS规则作为html标记style属性的属性值。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内嵌样式</title>
</head>
<body>
<input type="button" style="color: blue;height: 30px" value="按钮">
<br/>
<input type="button" value="按钮">
</body>
</html>
看一下页面效果：
2、内部样式—定义某一个标记的样式，内部样式一般在<head>标记中使用<style>标记进行定义
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内部样式</title>
<style>
.b {
color: red;
height: 30px;
}
</style>
</head>
<body>
<input class="b" type="button" value="按钮">
<br/>
<input type="button" value="按钮">
</body>
</html>
看一下页面效果：
3、外部样式—将样式表以单独的.css文件存放，通过<link>标记引用样式文件，<link>标记一般放在<head>区域内
新建文件b.css，将样式写在该文件里
在html中进行引用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部样式</title>
<link rel="stylesheet" type="text/css" href="../static/css/b.css">
</head>
<body>
<input class="b" type="button" value="按钮">
<br/>
<input type="button" value="按钮">
</body>
</html>
看一下页面效果：
4、使用import引入样式文件—@import只能放在<style>标记内使用，而且必须放在其它CSS样式之前
新建文件b.css，将样式写在该文件里：
在html中进行引用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>import引入样式文件</title>
<style>
@import "../static/css/b.css";
</style>
</head>
<body>
<input class="b" type="button" value="按钮">
<br/>
<input type="button" value="按钮">
</body>
</html>
看一下页面效果：
浏览器会按照不同的方式来确定样式的优先级：
（1）按照样式来源不同，内嵌样式>内部样式>外部样式>浏览器默认样式
（2）按照选择器不同，id选择器>class选择器>元素选择器
二、CSS选择器
1、元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style>
input{
color: blueviolet;
height: 30px;
}
</style>
</head>
<body>
<input type="button" value="按钮">
<br/>
<button>按钮</button>
</body>
</html>
2、类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
.sname{
color: blueviolet;
height: 30px;
}
</style>
</head>
<body>
<input class="sname" type="button" value="按钮">
<br/>
<input type="button" value="按钮">
</body>
</html>
3、ID选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<style>
#sname{
color: blueviolet;
height: 30px;
}
</style>
</head>
<body>
<input id="sname" type="button" value="按钮">
<br/>
<input type="button" value="按钮">
</body>
</html>
4、包含选择器
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>包含选择器</title>
<style>
h2 p span{
color: red;
}
</style>
</head>
<body>
<h2>
h标签
<p>
h标签里的p标签
<span>h标签里的p标签里的span标签</span>
</p>
</h2>
</body>
</html>
看一下页面效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>包含选择器</title>
<style>
h2 span{
color: red;
}
</style>
</head>
<body>
<h2>
<span>h2标签里的span标签</span>
</h2>
<span>span标签</span>
</body>
</html>
看一下页面效果:
5、组合选择器—对不同的标记进行相同样式属性的设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组合选择器</title>
<style>
h2,span{
color: red;
}
</style>
</head>
<body>
<h2>h2标签</h2>
<h3>h3标签</h3>
<span>span标签</span>
</body>
</html>
看一下页面效果:
6、父子选择器—用大于号作为选择器分隔符，样式只能作用在子选择器上
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父子选择器</title>
<style>
h2>span{
color: blue;
}
</style>
</head>
<body>
<h2>h2标签 <span>h2标签中的span标签</span></h2>
<h2>h2标签<p>h2标签中的p标签 <span>h2标签中的 p标签中的 span标签</span></p></h2>
</body>
</html>
看一下页面效果:
7、相邻选择器—用加号作为选择器的分隔符-样式作用在紧接某一个元素后的元素，并且二者有相同的父元素
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相邻选择器</title>
<style>
h2+span{
color: blue;
}
</style>
</head>
<body>
<h2>h2标签1</h2>
<h2>h2标签2</h2>
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>
看一下页面效果：
8、属性选择器—对带有指定属性的元素进行样式设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
input[type]{
color: red;
}
</style>
</head>
<body>
<input type="button" value="按钮">
<input placeholder="输入框">
</body>
</html>
看一下页面效果：
9、通用选择器—由*表示，匹配所有可用元素
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通用选择器</title>
<style>
*{
color: red;
}
</style>
</head>
<body>
<input type="button" value="按钮">
<h2>h2标签</h2>
<span>span标签</span>
</body>
</html>
看一下页面效果：