前端之HTML、CSS（四）
CSS
CSS三大特性
层叠性：多种样式的叠加，一个属性通过两个选择器设置在同一个元素上，后一个样式会把前一个样式层叠（覆盖）。层叠性的两种情况：第一种样式冲突时，后样式覆盖前样式；第二种样式不冲突时，前后样式互补共同作用同一元素。（冲突：样式属性一样）
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>层叠性-测试title> 6 <style type="text/css"> 7 p { 8 color: red; 9 font-size: 20px; 10 } 11 p { 12 color: blue; 13 } 14 style> 15 head> 16 <body> 17 <p>层叠性p> 18 body> 19 html>
继承性：HTML“晚辈”标签会继承“长辈”标签的某些样式属性。
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>继承性-测试title> 6 <style type="text/css"> 7 div { 8 color: red; 9 } 10 style> 11 head> 12 <body> 13 <div> 14 <p>继<span>承span>性p> 15 <p><a href="#">继承性a>p> 16 div> 17 body> 18 html>
注意：不是所有属性都可以继承，一般以text-、font-、line-开头的属性以及color属性可以继承，某些标签也同样不会继承属性。
优先级：CSS三种写入方式：行内样式，内部样式表、外部样式表的优先级关系：行内样式>内部样式表>外部样式表，即一个HTML文档中同时存在三种CSS样式写入，首选行内样式表加载。CSS选择器的三种基本类型：ID选择器、类选择器、标签选择器的优先级关系：ID选择器>类选择器>标签选择器，即三种选择器为同一元素标签设置同一种样式属性，首选ID选择器设置的样式属性。设定ID选择器权值为100，类选择器（伪类选择器）权值为10，标签选择器权值为1，复合选择器中使用的基本选择器组合之间使用加法获取总的权值，权值越高，样式属性选择越优先。如.nav p { }权值为10 + 1 = 11。此外，通配符选择器* { }和继承权值为0，权值相同按照层叠性加载，
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>优先级-测试title> 6 <style type="text/css"> 7 #pid { 8 color: blue; /*ID选择器权值为100*/ 9 } 10 .priority { 11 color: green; /*类选择器权值为10*/ 12 } 13 p { 14 color: red; /*标签选择器权值为1*/ 15 } 16 style> 17 head> 18 <body> 19 <p class="priority", id="pid">优先级p> 20 body> 21 html>
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>优先级-测试title> 6 <style type="text/css"> 7 .complement p { 8 color: green; /*权值为10 + 1 = 11*/ 9 } 10 div p { 11 color: red; /*权值为1 + 1 = 2*/ 12 } 13 style> 14 head> 15 <body> 16 <div class="complement"> 17 <p>复合选择器权值测试p> 18 div> 19 body> 20 html>
注意：可以在样式属性的属性值后追加！important为某一类型选择器增加权值，增加值为+∞，即追加！impotant的选择器一定优先加载。
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>优先级-测试title> 6 <style type="text/css"> 7 #pid { 8 color: blue; /*ID选择器权值为100*/ 9 } 10 .priority { 11 color: green; /*类选择器权值为10*/ 12 } 13 p { 14 color: red!important; /*标签选择器权值为1*/ 15 } 16 style> 17 head> 18 <body> 19 <p class="priority", id="pid">优先级p> 20 body> 21 html>
注意：继承权值为0
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>优先级-测试title> 6 <style type="text/css"> 7 .complement { 8 color: green; /*权值为10*/ 9 } 10 p { 11 color: red; /*权值为1*/ 12 } 13 style> 14 head> 15 <body> 16 <div class="complement"> 17 18 <p>复合选择器权值测试p> 19 div> 20 body> 21 html>
权重练习测试
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="关键词1,关键词2,关键词3" />
<meta name="description" content="对网站的描述" />
<title>第1题title>
<style type="text/css">
#father #son{
color:blue;
}
#father p.c2{
color:black;
}
div.c1 p.c2{
color:red;
}
#father{
color:green !important; /* 继承的权重为0 */
}
style>
head>
<body>
<div id="father" class="c1">
<p id="son" class="c2">
试问这行字体是什么颜色的？
p>
div>
body>
html>
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="关键词1,关键词2,关键词3" />
<meta name="description" content="对网站的描述" />
<title>第2题title>
<style type="text/css">
#father{
color:red;/* 继承的权重为0 */
}
p{
color:blue;
}
style>
head>
<body>
<div id="father">
<p>试问这行字体是什么颜色的？p>
div>
body>
html>
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="关键词1,关键词2,关键词3" />
<meta name="description" content="对网站的描述" />
<title>第3题title>
<style type="text/css">
div p{
color:red;
}
#father{
color:red;
}
p.c2{
color:blue;
}
style>
head>
<body>
<div id="father" class="c1">
<p class="c2">
试问这行字体是什么颜色的？
p>
div>
body>
html>
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="关键词1,关键词2,关键词3" />
<meta name="description" content="对网站的描述" />
<title>第4题title>
<style type="text/css">
div div{
color:blue;
}
div{
color:red;
}
style>
head>
<body>
<div>
<div>
<div>
试问这行字体是什么颜色的？
div>
div>
div>
body>
html>
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>第5题title>
<style type="text/css">
div div div div div div div div div div div div{
color:red;
}
.me{
color:blue;
}
style>
head>
<body>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div class="me">试问这行文字是什么颜色的div>
div>
div>
div>
div>
div>
div>
div>
div>
div>
div>
div>
body>
html>
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>第6题title>
<style type="text/css">
.c1 .c2 div{
color: blue;
}
div #box3{
color:green;
}
#box1 div{
color:yellow;
}
style>
head>
<body>
<div id="box1" class="c1">
<div id="box2" class="c2">
<div id="box3" class="c3">
文字
div>
div>
div>
body>
html>