前端开发 第二节CSS
CSS总结笔记：
3.CSS样式
css，专门用来“美化”标签。
- 基础CSS，写简单页面&看懂&改。
- 模块、调整和修改
3.1CSS应用方法
1.在标签上
- 高度和宽度样式： <img src="xxx" style="height:100px;" /> - 颜色样式： <div style="color:red;">中国联通</div>
2.在head标签中写style标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户登录</title> <style> .c1{ color:red; } </style> </head> <body> <h1 class='c1'>用户登录</h1> <form method="post" action="/login"> <div> 用户名：<input type="text" name="username"> </div> <div> 密码：<input type="password" name="password"> </div> <input type="submit"> </form> </body> </html>
3.写到文件中
.c1{ height:100px; } .c2{ color:red; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户登录</title> <link rel="stylesheet" href="common.css" /> </head> <body> </body> </html>
案例：Flask中的应用（登录注册）
CSS文件：
.xx{ color: green; }
login.html文件（在HTML头内写CSS）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户登录</title> <style> .c1{ color: red; } .c2{ height: 50px; } </style> </head> <body> <h1 class="c1">用户登录</h1> <form method="post" action="/login"> <div class="c2"> 用户名：<input type="text" name="username"> </div> <div class="c2"> 密码：<input type="password" name="password"> </div> <input type="submit"> </form> </body> </html>
register.html文件（在外部引入CSS文件）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户注册</title> <link rel="stylesheet" href="/static/commons.css"> </head> <body> <h1 class="xx">用户注册</h1> <div> 用户名：<input type="text"> </div> <div> 密码：<input type="password"> </div> <div> 性别：<input type="radio">男 <input type="radio">女 </div> <div> 爱好： <input type="checkbox">篮球 <input type="checkbox">足球 <input type="checkbox">乒乓球 </div> <div> 擅长的领域： <select multiple> <option>Python</option> <option>C++</option> <option>Java</option> </select> </div> <div> 备注：<textarea></textarea> </div> <div> <input type="button" value="button按钮"> <input type="submit" value="button按钮"> </div> </body> </html>
3.2CSS选择器
- ID选择器（id）
#c2{ color: gold; } <div id="c2">美国</div>
- 类选择器（class）
.c1{ color: red; } <div class="c1">中国</div>
li{ color: pink; } <ul> <li>北京</li> <li>上海</li> <li>深圳</li> </ul>
- 属性选择器
input[type='text']{ border: 1px solid red; } .v1[xx="456"]{ color: gold; }
<div class="v1" xx="123">a</div> <div class="v1" xx="456">b</div> <div class="v1" xx="999">c</div>
- 后代选择器
无穷代：
.yy li{ color: pink; }
<div class="yy"> <ul> <li>美国</li> <li>日本</li> <li>韩国</li> </ul> </div>
一代：
.yy > a{ color: blue; }
<div class="yy"> <a>百度</a> <div> <a>谷歌</a> </div> <ul> <li>美国</li> <li>日本</li> <li>韩国</li> </ul> </div>
关于选择器：
使用频率多：类选择器、标签选择器、后代选择器 使用频率少：属性选择器、ID选择器
关于多个样式覆盖问题：
若样式重复，style最后一个样式为最终样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ color: red; border: 1px solid red; } .c2{ font-size: 28px; color: green; } </style> </head> <body> <div class="c1 c2">中国联通</div> </body> </html>
若不想覆盖（加入! important）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ color: red !important; border: 1px solid red; } .c2{ font-size: 28px; color: green; } </style> </head> <body> <div class="c1 c2">中国联通</div> </body> </html>
3.4样式
1.高度和宽度
.c1{ height: 300px; width: 500px; }
注意：宽度，支持百分比。
2.块级和行内标签
- 块级
- 行内
- css样式（既有块级又有行内标签特点）：标签 ->
display:inline-block
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ display: inline-block; height: 100px; width: 300px; border: 1px solid red; } </style> </head> <body> <span class="c1">中国移动</span> <span class="c1">中国联通</span> <span class="c1">中国电信</span> </body> </html>
块级和行内标签的转换：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="display: inline-block">中国</div> <span style="display:block;">联通</span> </body> </html>
高频率：块级+块级&行内。
3.字体和颜色
- color：颜色
- font-size：大小
- font-weight：加粗
- font-family：字体格式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ color: red; font-size: 18px; font-weight: 500; font-family: Microsoft YaHei UI; } </style> </head> <body> <div class="c1">中国联通</div> <div>中国移动</div> </body> </html>
4.文字对齐方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ height: 59px; width: 300px; border: 1px solid red; text-align: center; /* 水平方向居中 */ line-height: 59px; /* 垂直方向居中*/ } </style> </head> <body> <div class="c1">刘备</div> </body> </html>
5.浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <span>左边</span> <span style="float: right">右边</span> </div> </body> </html>
div默认块级标签，若浮动起来自己有多宽占多宽。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .item{ float: left; width: 200px; height: 170px; border: 1px solid red; } </style> </head> <body> <div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> </body> </html>
如果标签浮动起来，就会脱离文档流。
解决：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .item{ float: left; width: 200px; height: 170px; border: 1px solid red; } </style> </head> <body> <div style="background-color: dodgerblue"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div style="clear: both"></div> </div> </body> </html>
6.内边距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .outer{ border: 1px solid red; height: 200px; width: 200px; padding-top: 20px; padding-left: 20px; padding-right: 20px; } </style> </head> <body> <div class="outer"> <div style="background-color: gold">刘备</div> <div> 汉景帝第十九代玄孙 </div> </div> </body> </html>
7.外边距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height: 200px;background-color: dodgerblue"></div> <div style="background-color: red;height: 100px;margin-top: 10px;"></div> </body> </html>
案例：小米商城（导航条）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } .header{ height: 38px; color: #b0b0b0; background: #333; } .container{ width: 1226px; margin: 0 auto; } .header .menu{ float: left; color: white; height: 38px; } .header .account{ float: right; color: white; height: 38px; line-height: 38px; } .header a{ color: #b0b0b0; line-height: 40px; display: inline-block; font-size: 12px; margin-right: 10px; } </style> </head> <body> <div class="header"> <div class="container"> <div class="menu"> <a>小米商城</a> <a>MIUI</a> <a>云服务</a> <a>有品</a> <a>开放平台</a> </div> <div class="account"> <a>登录</a> <a>注册</a> <a>消息通知</a> </div> <div style="clear: both"></div> </div> </div> </body> </html>
总结
- body标签，默认有一个边距，造成页面四边都有白色间隙，如何去除？
body{ margin: 0; }
- 内容居中
文本居中，文本会在这个区域中居中。
<div style="width: 200px; text-align: center">刘备</div>
区域居中，自己要有宽度 + margin-left:auto;margin-right:auto
.container{ width: 980px; margin: 0 auto; } <div class="container">xxx</div>
- 父级没有高度或者宽度，被本级支撑起来。
- 若存在浮动，一定记得加入
CSS总结笔记+案例（下）：https://developer.aliyun.com/article/1427896
