css的概念以及初体验
概念：
CSS（cascading style sheet）也就是层叠样式表；它是一种网页设计的新技术，现在已经被大多数浏览器所支持，层位网页设计必不可少的工具之一。
优点：
使得网页代码更少，网页下载速度更快
实现了内容和样式的分离，使得网站维护更加便捷
使得网站和浏览器兼容更好
css的编写方式
- css的语法结构
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
在css的三个组成部分中，对象是很重要的，他指定了对那些网页元素进行设置，因此他有一个专门的名称---选择器
- 行内样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="color: red;font-size: 30px">这是css的初体验</div> </body> </html>
- 内部样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div{ font-size: 29px; color: green; } </style> </head> <body> <div>css的初体验2</div> </body> </html>
- 各种选择器
- id选择器：ID选择器的id一定要唯一，千万别重复
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> /*标签选择器*/ div{ font-size: 29px; color: green; } /*id选择器*/ #two{ font-size: 50px; color:red; } span{ color: yellow; } .three{ /*类选择器*/ color: deeppink; } .four span{ /*包含选择器*/ color: aquamarine; font-size: large; } div,span,h2{ /*分组选择器*/ color: #3300cc; } *{ /*通用选择器*/ background-color: green; color: #000; } </style> </head> <body> <div>css的初体验2</div> <div id="two">css的初体验2</div> <div class="three">css的初体验2</div> <div class="three">css的初体验3</div> <span>spawn标签</span> ` <div class="four"> <span>这是css里的spawn标签</span> </div> <h2>h2元素</h2> <input type="text"> </body> </html>
- 选择器的优先级：行内选择器>id选择器>类选择器>标签选择器>通用选择器
测试代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #show1{color:yellow} .show{color:pink} h1{color: red} *{color:green} </style> </head> <body> <h1 id="show1" class="show" >这是选择器优先级设置</h1> </body> </html>
- 外部样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="a.css"> <style type="text/css"> </style> </head> <body> <div>css的初体验2</div> <div id="two">css的初体验3</div> <div class="three">css的初体验3</div> <div class="three">css的初体验3</div> <span>spawn标签</span> ` <div class="four"> <span>这是css里的spawn标签</span> </div> <h2>h2元素</h2> <input type="text"> </body> </html>
css样式文件如下：
#show1{color:yellow}
.show{color:pink}
h1{color: red}css的基本属性
- 文字、段落、背景属性