1.什么是css
css（cascading style sheets）层叠样式表
2.css能做什么
css可以把圆角，图片边框，文字阴影和盒阴影，过渡、动画等。用几行代码就能展现出来。
可以将站点上所有的网页风格首饰用一个css 目的：将表现与结构分离
3.css语法结构
css语法结构由选择符、属性和值构成
<style type="text/css"> body { background-color:#cccccc;} ↓ ↓ ↓ 选择符 属性 值 </style>
4.css引方式用有三种
1.行内引用 直接写在html标签中。
<body style="background-color:#ccccc;"> <h1 style="font-size:12px; color:#ff0000;">咪咪咪咪啦啦</h1>
2.业内引用 由<style></style>标签定位在<head></head>之中
<head> <style type="text/css"> body { background-color:#cccccc; } </style> </head>
3.外部样式表
style.css : body { background-color:#cccccc; } index.html : <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head>
优先级就近原则 行内引用 >页内引用>页外引用
5.css选择符
1.通配符 *
* {
color:blue;
margin:0;
padding:0;
}
2.元素符
页面中已有的标签名的选择符。
body{} h2{} p{} 等
3.群主选择 下面就是4个组成样式一样
h1,h2, h3, p {
font-size:12px;
font-family:arial;
}
4.关系选择符
|
代码如下：
!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div>a{ background-color:#E61061; } span{ background-color:#67B374; } div+p{ background-color:#0000FF; } p{ background-color:#808080; } </style> </head> <body style="back"> <div> <a>背景色是#E61061</a> <span> <a>背景色是#67B374</a> </span> </div> <p>背景色是#0000FF</p> <p>背景色是#808080</p> <p>背景色是#808080</p> </body> </html>