一. 储备知识
CSS语法
CSS规则主要由两个主要的部分构成:选择器和声明
selector{
declaration1;
declaration2;
declaration3;
...
}
注意:
- CSS代码只能写在文件中
- html页面如果要书写CSS代码,html提供了style标签,当html引擎解析到此标签的时候自动会将标签内的内容交给CSS引擎解析
- 由于style标签内的内容不在正文中显示,推荐写在head内
CSS样式的书写位置 :
- 在标签内可以直接使用(不推荐这种做法),每个标签都提供了style属性,可以在style属性直接书写要设置的样式
- 在head内使用style标签(推荐使用),在style标签内,通过选择器和声明来设置样式
- 在外部创建CSS文件,然后在要使用CSS样式文件的页面中通过link标签引入样式(推荐使用)
例子1:
在标签内可以直接使用(不推荐这种做法),每个标签都提供了style属性,可以在style属性直接书写要设置的样式
<a style="color:green">点击看我女神</a>
例子2:
在head内使用style标签(推荐使用),在style标签内,通过选择器和声明来设置样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
a{
background:yellow
}
</style>
</head>
<body>
<a style="color:green">点击看我女神</a>
</body>
</html>
例子3:
在外部创建CSS文件,然后在要使用CSS样式文件的页面中通过link标签引入样式(推荐使用)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<a style="color:green">点击看我女神</a>
<p style="color:green">点击看我女神</a>
</body>
</html>
CSS选择器
通过CSS的基本选择器选中想要设置样式的标签,选择器有多种表达方式
- 标签名选择器:根据指定的标签名选中所有的符合条件的标签。
语法:标签名 声明
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
a{
background-color:yellow;
}
</style>
</head>
<body>
<a style="color:green">点击看我女神</a>
</body>
</html>
2.id选择器:根据id属性值选中页面中唯一的一个标签(相同id值页面中只能使用一次),每个标签都有id属性
语法:#id属性值 声明
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#girl{
color:red;
}
#man{
color:yellow;
}
</style>
</head>
<body>
<p id="girl">点击看我女神</p>
<p id="man">点击看我男神</p>
</body>
</html>
3.类选择器:根据class属性值选中一组标签(只根据class值来选择)
语法:.class属性值 声明
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.sport{
color:red;
}
</style>
</head>
<body>
运动:<span name="basketball" class="sport">篮球</span>
<span name="football" class="sport">足球</span>
<span name="volleyball" class="sport">排球</span>
<span name="run" class="sport">跑步</span>
</body>
</html>
4.复合选择器:多个选择器一起使用
语法:selector1, selector2, selector3 … 声明
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
h3, #girl, .sport{
color:red;
}
</style>
</head>
<body>
<h3>这是标签选择器的效果</h3>
<br/>
<span id="girl" name="idSelector">这是id选择器的效果</span>
<br/>
运动:<span name="basketball" class="sport">篮球</span>
<span name="football" class="sport">足球</span>
<span name="volleyball" class="sport">排球</span>
<span name="run" class="sport">跑步</span>
<br/>
</body>
</html>
5.选中所有选择器:选择页面中所有的内容(非标签和标签的内容都选中)
语法:* 声明
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
*{
color:red;
}
</style>
</head>
<body>
<h3>这是标签选择器的效果</h3>
<br/>
<span id="girl" name="idSelector">这是id选择器的效果</span>
<br/>
运动:<span name="basketball" class="sport">篮球</span>
<span name="football" class="sport">足球</span>
<span name="volleyball" class="sport">排球</span>
<span name="run" class="sport">跑步</span>
<br/>
</body>
</html>