1. CSS三大特性
1.1 层叠性
1.2 继承性
可以直接在CSS样式中给div赋值然后p继承div的值
1.3 行高的继承
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>行高的继承</title> <style> body { color: black; /* font: 12px/24px 'Microsoft YaHei'; */ font: 12px/1.5 'Microsoft YaHei'; } div { /* 子元素继承了父元素 body 的行高 1.5 */ /* 这个1.5 就是当前元素文字大小 font-size 的1.5倍 所以当前div 的行高就是21像素 */ font-size: 14px; } p { /* 1.5 * 16 = 24 当前的行高 */ font-size: 16px; } </style> </head> <body> <div>吉林大学王小懒</div> <p>吉林大学王小懒</p> </body> </html>
1.4 优先级
注意：元素选择器：div、p等等。行内样式是直接在标签内进行书写。important一旦使用为最高级别，使用如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS优先级</title> <style> .test { color: red; } div { color: pink!important; } #demo { color: green; } </style> </head> <body> <div class="test" id="demo" style="color: purple">你笑起来真好看</div> </body> </html>
1.5 权重叠加
注意：复合选择器存在叠加但是不会进位，继承的权重为0
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS权重练习</title> <style> /* .nav li 权重是 11 */ .nav li { color: red; } /* 需求把第一个小li 颜色改为 粉色加粗 ? */ /* .pink 权重是 10 .nav .pink 20 */ .nav .pink { color: pink; font-weight: 700; } </style> </head> <body> <ul class="nav"> <li class="pink">人生四大悲</li> <li>家里没宽带</li> <li>网速不够快</li> <li>手机没流量</li> <li>学校没wifi</li> </ul> </body> </html>
2. 盒子模型
网页布局过程
2.1 盒子模型的组成
注意：在内容部分，文字和边框的距离通过内边距padding来实现
2.2 边框的学习
border-style的值如下：
注意：边框的符合写法，可以写在一行
border:5px solid red;
注意：可以单独设置上下边框，通过border-top和border-bottom
合并相邻的边框（因为会存在两个单元格合并加粗的情况）
border-collapse: collapse;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>今日小说排行榜</title> <style> table { width: 500px; height: 249px; } th { height: 35px; } table, td, th { border: 1px solid pink; /* 合并相邻的边框 */ border-collapse: collapse; font-size: 14px; text-align: center; } </style> </head> <body> <table align="center" cellspacing="0"> <thead> <tr> <th>排名</th> <th>关键词</th> <th>趋势</th> <th>进入搜索</th> <th>最近七日</th> <th>相关链接</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>鬼吹灯</td> <td><img src="down.jpg"></td> <td>456</td> <td>123</td> <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td> </tr> <tr> <td>1</td> <td>鬼吹灯</td> <td><img src="down.jpg"></td> <td>456</td> <td>123</td> <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td> </tr> <tr> <td>3</td> <td>西游记</td> <td><img src="up.jpg"></td> <td>456</td> <td>123</td> <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td> </tr> <tr> <td>1</td> <td>鬼吹灯</td> <td><img src="down.jpg"></td> <td>456</td> <td>123</td> <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td> </tr> <tr> <td>1</td> <td>鬼吹灯</td> <td><img src="down.jpg"></td> <td>456</td> <td>123</td> <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td> </tr> <tr> <td>1</td> <td>鬼吹灯</td> <td><img src="down.jpg"></td> <td>456</td> <td>123</td> <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td> </tr> </tbody> </table> </body> </html>
