一、css为层叠样式表,是用来控制网页外观的一门技术。
二css的用法:
1、内联:在标签中以属性的形式表现,属性名style(不推荐使用,优先级最高)
2、内嵌:在head标签中以标签的形式表现,标签名style
3、外部引用:在head标签中以标签形式表现,标签名link用来引入一个css文件,项目中最常用。
三、选择器
1、标签选择器:通过标签名找标签(把指定的样式应用到某一个、组、类标签上)
2、id选择器:通过id属性值找标签,关键符号#id值{样式}
3、复合选择器:1、并列选择器:关键符号,用法:选择器1,选择器2{样式}
2、后代选择器:符号空格,用法:选择器1空格选择器2
3、属性选择器:选择器[属性=属性值]{样式}
4、筛选:用法:选择器class选择器
选择器的优先级:1、内联
2、id选择器
3、class选择器
4、标签选择器
5、通用选择器
例子:
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <link rel="stylesheet" href="作业31.css"> 7 </head> 8 <body class="body1"> 9 10 <div><p class="p1">登录博客园-代码改变世界</p></div> 11 <span class="sp1">登陆用户名</span><span class="sp2">(找回)</span> 12 <div class="div5"><input type="text"></div> 13 <span class="sp3">密码</span><span class="sp4">(重置)</span> 14 <div class="div4"> 15 <input type="text"> 16 </div> 17 <div class="inp1"> 18 <input type="checkbox">下次自动登录 19 </div> 20 21 <table class="div3"> 22 <tr> 23 <td> 24 <form action="作业4.html" method="post"><input type="submit" value="登录" name="登录" style="color: crimson"> 25 </form> 26 </td> 27 <td> 28 <form action="zuoye5.html" method="post"> 29 <input type="submit" value="注册" name="注册" style="color: crimson"> 30 </form> 31 </td> 32 </tr> 33 </table> 34 35 36 37 <div class="div1"><a href="#">立即注册</a></div> 38 <div class="div2"><a href="#">反馈问题</a></div> 39 40 41 </body> 42 </html>
1 /* CSS Document */ 2 .p1{color: crimson} 3 .sp1{font-size: 13px} 4 .sp4{color: blue;cursor: pointer;font-size: 13px} 5 .sp2{color: blue;cursor: pointer;font-size: 13px} 6 .sp3{font-size: 13px} 7 .inp1{font-size: 13px} 8 .div1 a{text-decoration: none;font-size: 13px;} 9 .div2 a{text-decoration: none;font-size: 13px;}