一、CSS语法
CSS 语法规则由两个主要的部分构成:选择器和一条或多条声明【具体样式设置】
选择器通常是您需要改变样式的 HTML 元素。每条声明是由一个属性和一个值组成。属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。
二、CSS选择器(常用)
1.元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS元素选择器</title>
<style>
h1{
font-size: 60px;
color: blueviolet;
}
</style>
</head>
<body>
<h1>元素选择器</h1>
<h1>选择html中所有此类型的元素</h1>
<h1>相同名称的元素会使用同一种样式</h1>
</body>
</html>
2.class选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS class选择器</title>
<style>
.name{
font-size: 60px;
color: blueviolet;
}
</style>
</head>
<body>
<h1>class选择器---根据元素的class属性选择html元素</h1>
<h1>相同class属性的元素会使用同一种样式</h1>
<p class="name">测试class选择器</p>
</body>
</html>
3.id选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS id选择器</title>
<style>
#name{
font-size: 60px;
color: blueviolet;
}
#name1{
font-size: 60px;
color: red;
}
</style>
</head>
<body>
<h1>id选择器---根据元素的id属性选择html元素</h1>
<h1>相同id属性的元素会使用同一种样式</h1>
<p id="name">测试id选择器</p>
<p id="name">测试id选择器--id属性相同</p>
<p id="name1">测试id选择器--id属性不相同</p>
</body>
</html>
4.包含选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS包含选择器</title>
<style>
div p{
font-size: 60px;
color: blueviolet;
}
</style>
</head>
<body>
<h1>包含选择器---选择父元素下的所有子元素</h1>
<h2>style中包含选择器格式为,父元素名称 子元素名称</h2>
<p>测试包含选择器----没有被包含</p>
<div>
<p>测试包含选择器--div中的子元素</p>
</div>
</body>
</html>
5.子元素选择器
只能选择到父元素的直接子元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS子元素选择器</title>
<style>
#div1>div>p{
font-size: 60px;
color: blueviolet;
}
</style>
</head>
<body>
<h1>子元素选择器--得到指定父元素直接子元素</h1>
<h2>元素选择器格式为,父元素名称>子元素名称</h2>
<p>测试包含选择器----没有被包含</p>
<div id="div1">
<p>测试子元素选择器1--最外层div中的子元素</p>
<div>
<p>测试子元素包含选择器2---最内层div中的子元素</p>
</div>
</div>
</body>
</html>
6.属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS属性选择器</title>
<style>
a[target]{
font-size: 60px;
color: blueviolet;
}
</style>
</head>
<body>
<h1>属性选择器--根据html元素的设置的属性名称得到需要设置样式的html元素</h1>
<h2>属性选择器格式为,元素名称[元素属性名称]</h2>
<p>测试属性选择器-</p>
<a href="https://www.baidu.com/" target="_self">测试属性选择器</a>
</body>
</html>