CSS
是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css
样式，选择器
ID选择器 #c1{ } <div id='c1'>xxx</div> 类选择器 .c1{ } <div class='c1'>xxx</div> 标签选择器 筛选全部div标签内容，并将其替换为该样式 div{ } <div>xxx</div> 后代选择器 <head> <style> 定义一个格式 .aa > a{ color:pink; } 这样会优先搜索aa标签，其次替换带有aa标签的内容样式 </style> </head> <body> <div class="aa"> <a>xxx</a> </div> </body>
将样式放在css文件内，用时引用文件
.c1{ color: blue; }
<head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="/static/q.css"> </head> <body> <span class="c1"> 原神启动！！！ </span> </body>
多样式同时引用
<head> <meta charset="UTF-8"> <title>Title</title> <style> .cs1{ color: blueviolet !important; 在cs1的color后加！important可以防止呗cs2的color替换 border: black; } .cs2{ color: black; 同时使用多个样式时，若两个样式具有同样的标签，会使用下面的cs2，与class中的顺序无关 font-size: 100px; } </style> </head> <body> <div> <h1 class="cs2 cs1"> 登陆失败 </h1> </div> </body>
.c2{ height: 200px; width: 50%; } .c3{ height: 50%; width: 50%; }
<div class="c2">父级标签 <div class="c3">子级标签 原神启动！ </div> <div class="c3"> 崩铁启动！ </div> </div> 父级高度不可用%，子级可用
既具备块级标签，有具备行内标签特点
<style> .qq{ display: inline-block; height: 100px; width: 100px; color: blueviolet; border: 1px solid red; } </style> <span class="qq"> 乐 </span> <span class="qq"> 乐 </span> <div style="display: inline（或者inline_block）">xxx</div> <span style="display: block（或者inline_block）">xxx</span>
字体
<style> .csgo{ color: #4169E1; /*RGB色标颜色*/ font-size: 60px; /*字体大小*/ font-weight: 400; /*字体粗细*/ font-family: Microsoft YaHei UI; /*字体格式*/ } </style> <span class="csgo"> 原神启动!!! </span> 文字对齐 <style> .ysqd{ height: 200px; width: 20%; border: 1px solid #4169E1; text-align: center; /* 水平方向居中 */ line-height: 100px; /* 按100px的高度，竖直方向居中，且只能有单行数据 */ } </style> eg: <style> body{ margin: 0; } .header{ background-color: black; } .header .lift{ float: left; color: whitesmoke; height: 30px; line-height: 30px; margin-left: 30px; } .header .right{ float: right; color: whitesmoke; height: 30px; line-height: 30px; margin-right: 30px; } </style> </head> <body> <div class="header"> <div class="lift"> 左 </div> <div class="right"> 右 </div> <div style="clear: both"></div> </div> </body>
浮动
.majiang{ float: right; width: 33%; height: 200px; border: 1px solid seagreen; } <span>左</span> <span style="float: right" class="ysqd">右</span> <div class="majiang"> <!--div被浮动后，将会具有span的特性--> 麻将 </div> <!--大量div，可能会脱离文档流--> <div style="background-color: aqua" > <div class="majiang" style="background-color: brown">1</div> <div class="majiang">1</div> <div class="majiang">1</div> <div class="majiang">1</div> <div class="majiang">1</div> <div class="majiang" style="background-color: crimson">1</div> *** <div style="clear: both"></div><!--去除浮动，固定位置，撑起父级标签背景，但子级标签背景仍会覆盖父级标签--> </div> <div> hello </div>
内边距
<div style="padding: 30px 10px 20px 15px"> 上右下左，顺时针顺序 </div> <div style="padding-top: 20px; padding-left: 20px; padding-right: 20px; padding-bottom: 20px"> 上边距，左边距，右边距，下边距 </div>
外边距
<div style="margin-top: 20px; margin-left: 20px; margin-right: 20px; margin-bottom: 20px;"> </div>
边距应用
.a1{ width: 1226px; margin: 0 auto; } <div class="header"> <div class="a1"> <div class="lift"> </div> <div class="right"> 右 </div> <div style="clear: both"></div> </div> </div> <!--顶部栏文字居中显示-->
居中
文本居中
<div style="width: 200px;text-align: center"> 123321<!--文本在区域中居中--> </div>
区域居中
<div style="background-color: #4169E1; height: 900px; width: 1000px; margin:auto"></div>
