使用W3C标准制作网页还有一个非常重要的作用，那就是可以实现网页内容和样式的分离，其中HTML负责组织内容结构，CSS负责表现样式。
CSS全称层叠样式表，又称风格样式表
CSS规则由两部分组成：选择器和声明
HTML引入CSS样式的方法有三种： 行内样式注意：每条声明由一个属性和一个值组成，属性和值用冒号分开，每条语句以英文分号结尾。
<h1 style="color: red;">style属性的应用</h1> <p style="font-size: 14px; color: green;">直接在html标签中设置的样式</p>
内部样式使用<style>标签引入CSS样式，把<style>标签放进<head>标签中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内部样式表</title> <style type="text/css"> h2 { color: #003580; } #first { font-size: 14px; color: #000033; } .name1 { color: #F00; } .name2 { color: #1F87cc; } .name3 { color: #FAA53B; } .name4 { color: #0D7114; } .img { height: 160px; width: 100px } .imgs { height: 130px; width: 200px; } </style> </head> <body> <header> <h2>花千骨</h2> </header> <section> <p id="first">《花千骨》是由 <a href="#">慈文传媒集团</a>制作并发行，<span class="name1">林玉芬、高林豹、梁胜权联合执导，<br /> 霍建华、赵丽颖</span>领衔主演，<span class="name2">蒋欣、杨烁</span>特别出演，<span class="name3">张丹峰、李纯、马可、鲍天琦、安悦溪、<br /> 徐海乔</span>等主演的古装玄幻仙侠剧。 该剧改编自fresh果果同名小说，<br /> 讲述少女花千骨与长留上仙白子画之间关于责任、成长、取舍的纯爱虐恋[1] 。<br /> 该剧于2014年5月6日开机，9月15日杀青，8月12日发布中文及英文版的预告片[2] 。<br /> 该剧于2015年6月9日起每周二、周三晚10点在<span class="name4"> 湖南卫视</span>的钻石独播剧场播出。[3] 2015年7月5日起，<br /> 该剧播放时间已经改为每周日、周一晚10点。当天零点在爱奇艺同步更新。[4]<br /> </p> <p><img src="1.jpg" class="img" /></p> </section> <footer> <h2>主要演员</h2> <p><img src="2.jpg" class="imgs" /><img src="3.jpg" class="imgs" /></p> </footer> </body> </html> 外部样式表外部样式表是把css代码保存为一个单独的样式文件，扩展名为.css，在页面中引用外部样式表即可。
引用外部样式表有两种方式：链接外部样式表，导入外部样式表。
1. 链接外部样式表链接外部样式使用<link/>标签链接外部CSS文件
rel="stylesheet" 是指在页面中使用这个外部样式表
type="text/css" 是指文件的类型是样式表文本
href="index.css" 是指文件所在的位置
<!DOCTYPE html> <html> ?? ?<head> ?? ??? ?<meta charset="utf-8"> ?? ??? ?<title>链接外部样式表</title> ?? ??? ?<link href="index.css" rel="stylesheet"type="text/css"> ?? ?</head> ?? ?<body> ?? ??? ? ?? ?</body> </html>
2. 导入外部样式表导入外部样式就是在HTML网页中使用@import?导入样式表。语句必须放在<style>标签中，而<style>标签必须放在页面的<head>标签中
url ：指的是css文件所在的位置
<!DOCTYPE html> <html> ?? ?<head> ?? ??? ?<meta charset="utf-8"> ?? ??? ?<title>导入外部样式表</title> ?? ??? ?<style> ?? ??? ? ? ?@import url("css/index.css"); ?? ??? ?</style> ?? ?</head> ?? ?<body> ?? ??? ? ?? ?</body> </html>
链接外部样式和导入外部样式的区别：链接外部样式：客户端浏览网页时，先加载外部css文件，再进行编译显示
导入外部样式：客户端浏览网页时，先将html结构呈现出来，再去加载外部css文件
ps：当网速较慢的时候导入外部样式的方法会先显示没有css布局的html网页，这样会给用户很不好的感觉，推荐使用链接外部样式，? 这也是目前大多数网站采用链接外部样式表的主要原因。
三种引入样式的优先级：行内样式>内部样式>外部样式 ??依据就近原则 CSS的基本选择器有三种 标签选择器 <标签名><!DOCTYPE html> <html lang="en"> ?? ?<head> ?? ??? ?<meta charset="UTF-8"> ?? ??? ?<title>标签选择器</title> ?? ??? ?<style type="text/css"> ?? ??? ??? ?h2 { ?? ??? ??? ??? ?color: #003580; ?? ??? ??? ?} ? ? ? ? ? ? p{ ?? ??? ??? ??? ?color: red; ?? ??? ??? ?} ?? ??? ??? ?img{ ?? ??? ??? ??? ?width: 100px; ?? ??? ??? ??? ?height: 100px; ?? ??? ??? ?} ?? ??? ?</style> ?? ?</head> ?? ?<body> ?? ??? ?<h2>花千骨</h2> ?? ??? ?<p></p> ?? ??? ?<p><img src="1.jpg" class="" /></p> ?? ?</body> </html>
类选择器 .<!DOCTYPE html> <html lang="en"> ?? ?<head> ?? ??? ?<meta charset="UTF-8"> ?? ??? ?<title>类选择器</title> ?? ??? ?<style type="text/css"> ?? ??? ??? ?.h2 { ?? ??? ??? ??? ?color: #003580; ?? ??? ??? ?} ? ? ? ? ? ? .p{ ?? ??? ??? ??? ?color: red; ?? ??? ??? ?} ?? ??? ??? ?.img{ ?? ??? ??? ??? ?width: 100px; ?? ??? ??? ??? ?height: 100px; ?? ??? ??? ?} ?? ??? ?</style> ?? ?</head> ?? ?<body> ?? ??? ?<h2 class="h2">花千骨</h2> ?? ??? ?<p class="p"></p> ?? ??? ?<img src="1.jpg" class="img" /> ?? ?</body> </html>
ID选择器 #<!DOCTYPE html> <html lang="en"> ?? ?<head> ?? ??? ?<meta charset="UTF-8"> ?? ??? ?<title>类选择器</title> ?? ??? ?<style type="text/css"> ?? ??? ??? ?#h2 { ?? ??? ??? ??? ?color: #003580; ?? ??? ??? ?} ? ? ? ? ? ? #p{ ?? ??? ??? ??? ?color: red; ?? ??? ??? ?} ?? ??? ??? ?#img{ ?? ??? ??? ??? ?width: 100px; ?? ??? ??? ??? ?height: 100px; ?? ??? ??? ?} ?? ??? ?</style> ?? ?</head> ?? ?<body> ?? ??? ?<h2 id="h2">花千骨</h2> ?? ??? ?<p id="p"></p> ?? ??? ?<img src="1.jpg" id="img" /> ?? ?</body> </html>
三种选择器的优先级：ID选择器>类选择器>标签选择器 CSS的高级选择器有： （一）层次选择器 1.后代选择器的作用就是可以选择某元素的后代元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层次选择器的应用</title> <style type="text/css"> body p{ background-color: red; } </style> </head> <body> <p class="active">1</p> <p>2</p> <p>3</p> <ul> <li><p>4</p></li> <li><p>5</p></li> <li><p>6</p></li> </ul> </body> </html> p标签是body标签的后代，所以全部背景色为红色? 2. 子选择器只能选择某元素的子元素，把body 和 p 之间的间隔换成 >?body>p{ ?? ??? ??? ? ? background-color: red; ?? ??? ? ? }
ps：这时会发现只有前面3个p标签变了红色背景，是因为body标签下只有p标签和ul标签是它的子元素，li是ul的子元素，p4~p6 是li的子元素，（后代元素包括所有子元素，子元素不一定包括后代元素） ?3. 相邻兄弟选择器可以选择紧接在另一个元素后面的元素?.active+p{ ?? ??? ??? ? ? background-color: red; ?? ??? ? ? }
ps： 类名为active的相邻兄弟p元素，也就是类active后面的一个p元素被选中 ?4.通用兄弟选择器用于选择某元素后面的所有兄弟元素，一个或者多个?.active~p{ ?? ??? ??? ? ? background-color: red; ?? ??? ? ? }?
?
（二）结构伪类选择器 1. first-child? ul 的第一个子元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>结构伪类选择器的应用</title> <style type="text/css"> /* ul 的第一个子元素*/ ul li:first-child{ background-color: red; } </style> </head> <body> <p>1</p> <p>2</p> <p>3</p> <ul> <li>4</li> <li>5</li> <li>6</li> </ul> </body> </html>?
?2.last-child ul 的最后一个子元素ul li:last-child{ ?? ??? ??? ? ? background-color: red; ?? ??? ? ? }
?
?3.nth-child(1) 选择到父级里的第一个子元素p?p:nth-child(1){ ?? ??? ??? ? ? background-color: red; ?? ??? ? ? }
?
4.nth-of-type(2) 选择父元素里第2个类型为p的元素?p:nth-of-type(2){ ?? ??? ??? ? ? background-color: red; ?? ??? ? ? }
?
?
nth-child(n) 和 nth-of-type(n) 的区别： nth-child 在父级里从一个元素开始查找，不分类型 nth-of-type 在父级里面先看类型，再看位置 5. 选择父元素内具有指定类型的第一子个元素p:first-of-type{ ?? ??? ??? ? ? background-color: red; ?? ??? ? ? }
?
?6.?选择父元素内具有指定类型的最后一子个元素p:last-of-type{ ?? ??? ??? ? ? background-color: red; ?? ??? ? ? }
?
（三）属性选择器 ?1. a[id] 选择具有id属性的a元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性选择器的应用</title> <style type="text/css"> a{ float:left; display: block; height: 50px; width: 50px; border-radius: 10px; text-align: center; background-color: #AAC; color: blue; font:bold 20px/50px Arial; margin-right: 5px; text-decoration: none; margin: 5px; } a[id]{ background-color: yellow; } </style> </head> <body> <a href="http://·" id="first">1</a> <a class="links">2</a> <a href="index.html" id="index" target="_blank">3</a> <a class="links">4</a> <a class="links">5</a> </body> </html>?
?也可以同时设置多个属性?a[id] [target] { ?? ??? ? ? ?? ? ? background-color: coral; ?? ??? ? ? }
2. a[id=first] 选择具有id属性的a元素，并且属性值为firsta[id=first] { ?? ??? ??? ??? ?background-color: red; ?? ??? ??? ?}
?3. a[class*=links] 选择所有含有class属性的并且属性值中包含linksa[class*=links]{ ?? ??? ? ? ?? ? ? background-color: coral; ?? ??? ? ? }
? 4. a[href^=http] 选择含有href属性的并且属性值以http开头的所有a元素?a[href^=http] { ?? ??? ? ? ?? ? ? background-color: red; ?? ??? ? ? }
???5. a[href$=html] 选择含有href属性的并且属性值以http结尾的所有a元素a[href$=html] { ?? ??? ? ? ?? ? ? background-color: red; ?? ??? ? ? }
?
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签： #css3 #基本语法 #amplth1 #stylequotcolor #sty
