p是特殊标签,可以忽略结尾标签!
Css的4种引入方式:
1. 行内样式 (style标签,写在行内)
2. 行间样式 (style属性)
3.外部引入样式 <link rel=" stylesheet" href=" css形式的网页 ">
1. 行内样式 :<!DOCTYPE html>
<html lang="en">
<head>
<meta chaset="UFT-8">
<title>网页的标题</title>
<style>
p{
color="red" }
</style>
</head>
<body>
<p>行内样式</p>
</body>
</html>
2. 行间样式 :<!DOCTYPE html>
<html>
<head>
<meta charset="UFT-8">
<title>网页的标题</title>
<style type="text/css">
</style>
</head>
<body>
<p style=“colo:red”>行间样式</p>
</body>
</html>
3. 外部引入样式 :<!DOCTYPE html>
<html>
<head>
<meta charset="UFT-8">
<title>网页的标题 </title>
<link rel="stylesheet" href="新创一个以css结尾的文件">
<style type="text/css">
</style>
</head>
<body></body>
</html>
选择器:
1.标签选择器 2. class选择器 3.id选择器
4.交集选择器(两者是并且的关系,选择器之间不能有空格) 5.后代选择器(用来选择元素的后代,外层元素在外,内层元素与外层元素之间用空格隔开)
6.子代选择器(仅仅只选择外层元素的儿子,用大于号表示)
范例: <!DOCTYPE html>
<html>
<head>
<meta charset="UFT-8">
<title>网页的标题 </title>
<style type="text/css">
p{
color=“purple” } (标签选择器)
p a{
color=“green” }(p标签下面的a标签都是绿色)
#aa.aaa{
color="yellow" }【 交集选择器 】
【 p #aa{
color="red" }(id权重大,所以取红)
p .aaa{
color=“blue” }(class选择器权重小,所以不取蓝)】(后代选择器)
p>#aa{
color="pink" }(子代选择器)
</style>
</head>
<body>
<p>
虎子
<a id=“aa” class=“aaa”>还可以<a>哈哈哈</a></a>
</p>
</body>
</html>
id选择器(权重:100)>class选择器(权重:10)>标签选择器(权重:1)
权重可以叠加。 important (无限大)