一：基础选择器
* （统配选择器）：HTML，body，body下用于显示的标签 div （标签选择器）：该标签名对应的所有该标签 . (class选择器)（eg: .div => class="div"）：类名为div的所有标签 # （id 选择器）（eg：#div => id="div"）：id 名为div的唯一标签
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基础选择器</title> <style> /*在实际开发中, 尽量少用或不用标签名来作为选择器*/ /*标签名作为选择器一般在该标签为最内层(语义|功能)标签*/ div { width: 100px; height: 100px; background-color: red; } </style> <link rel="stylesheet" href="css/1.css"> <!--总结: 内联和外联, 相同属性采用下者覆盖上者, 不同属性叠加--> <style> /*在css语法中如何来表示class名 => .就代表class*/ .div1 { background-color: cyan; } .div2 { background-color: brown; } /*问题:css中用什么标识id => #*/ #did1 { background-color: tan; } </style> <style> * { background-color: yellow; } /*html和body颜色被改变了, 但所有的div颜色并没有改变 原因: 不同的名字(选择器)具有优先级*/ </style> </head> <body> <div>1</div> <div style="background-color: pink">2</div> <!--总结: 行间式属于逻辑最下方, 相同的属性一定会覆盖内联和外联--> <div class="div1">3</div> <!--问题: 不使用行间式单独操作(可读性差), 那又如何来单独改变其颜色 => 起别名--> <div class="div2"></div> <!--总结: 用class起名, 分类别, 可以重名 => 用什么方式唯一标识一个标签--> <div id="did1"></div> <!--给该标签设置唯一标识符 id--> <!--了解: 统配选择器 => css符合 => * --> <!--控制着: html body 及 body下所有用来显示的标签--> </body> </html>
二：选择器优先级
理解：控制范围越精确，优先级越高，所设置的样式就会覆盖优先级低的相同属性样式 结论： 优先级顺序：统配<标签<class<id<行间式<!important
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选择器优先级</title> <style> #div { background-color: yellow; } .div { background-color: yellowgreen; } div { background-color: green!important; } * { width: 100px; height: 100px; background-color: darkgreen; } /*!important 优先级要强于行间式, 在属性值与;之间设定*/ </style> </head> <body> <div class="div" id="div" style="background-color: red"></div> <!--总结: 行间式优先级要高于内连外连所有选择器的优先级, 但是不能高于!important--> </body> </html>
三：长度和颜色
长度单位：px mm cm em rem vm vh in “”“ 颜色设置方式： 1.颜色单词 2.#000000~#FFFFFF（#abc == #AABBCC）如果是AABBCC的话可以缩写成ABC 3.rgb（0~255,0~255,0~255） | rgba（0~255,0~255,0~255,0~255,0~1）最后的a(0~1)表示的是透明度，rgb表示的是颜色 ”“”
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>长度与颜色</title> <style> .div { /*px mm cm em rem vw vh in*/ width: 10in; height: 100px; background-color: rgba(255, 0, 0, 0.5); } </style> </head> <body> <div class="div"></div> </body> </html>
四：显示方式display
display：
what：控制标签在页面中的显示方式的属性
why：通过设置该属性的不同属性值，使其在页面中的显示方式达到设定的效果，且对于CSS的样式支持程度也不一样
display： inline ; 1.同行显示 2.只支持部分CSS样式（不支持宽高） 3.宽高由文本内容撑开 display：block ; 1.异行显示 2.支持所有CSS样式 3.设置了宽高就采用设置的值，宽高也就有默认的特性 display：inline-block; 1.同行显示 2.支持所有的CSS样式 3.设置了宽高就采用设置的值 总结：标签的显示方式就是用display属性控制
1.带有inline的就会同行显示，带有block的就会支持所有CSS样式
2.带有inline的都是与内容相关的标签，带有block的主要用来搭建架构的
嵌套关系：
页面架构就是由标签一层层嵌套关系形成的
嵌套关系有一定的规则：
1.inline-block类型不建议嵌套任意标签，所以系统的inline-block都设计成了单标签
2.inline类型只嵌套inline类型的标签
3.block类型可以嵌套任意类型标签（注：hn和p只建议嵌套inline类型标签）
结论：
1.inline嵌套block和inline-block，不起任何作用，所以只能嵌套inline
2.inline-block可以嵌套其他类型标签，但一定要结合vertical-align属性操作，左右还有一空格间距
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>display</title> <style> span { width: 200px; height: 50px; background-color: yellow; } p { width: 200px; height: 50px; background-color: red; } img { width: 200px; /*height: 50px;*/ } </style> </head> <body> <span>123<i>456</i><b>789</b></span> <span>123<i>456</i><b>789</b></span> <p>123<i>456</i><b>789</b></p> <p>123<i>456</i><b>789</b></p> <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=538916491,4234853604&fm=200&gp=0.jpg" alt=""> <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=538916491,4234853604&fm=200&gp=0.jpg" alt=""> <hr> <!-- 通过display属性值进行划分 --> <style> Grace { color: blueviolet; width: 200px; height: 50px; background-color: red; } .o1 { display: inline; } .o2 { display: block; } .o3 { display: inline-block; } </style> <Grace class="o1">123</Grace> <Grace class="o1">123</Grace> <hr> <Grace class="o2">123</Grace> <Grace class="o2">123</Grace> <hr> <Grace class="o3">123</Grace> <Grace class="o3">123</Grace> <hr> <style> .div { width: 100px; height: 100px; background-color: orange; display: inline-block; } /*标签的显示方式就是用display属性控制*/ </style> <div class="div">000</div> <div class="div">111</div> </body> </html>
五：盒模型
盒模型由四部分组成：margin + border + padding + content 1.margin：外边距，控制盒子的位置（布局），通过左和上控制自身位置，通过右和下影响兄弟盒子的位置（划区域） 2.border：边框，样式/宽度/颜色（solid表示实线，dashed表示虚线，dotted表示点状线） 3.padding：内边距，从显示角度控制文本的显示区域 4.content：内容区域，由宽 X 高组成 注意： 1.margin，padding：起始为上，顺时针依次赋值，不足边时去对边 2.要做到文本内移，设置padding，如果又想显示区域不变，相应减少content
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>盒模型</title> <style> body { margin: 0; } /*margin | border | padding | content(width x height)*/ .box { width: 200px; height: 200px; background-color: orange; /*padding: 10px 10px 10px 10px;*/ /*padding: 20px 30px;*/ /*起始为上, 顺时针依次赋值, 不足边取对边*/ /*border-style: solid;*/ /*border- 10px;*/ /*border-color: red;*/ /*transparent透明色*/ border: blue dashed 20px; /*margin: 100px 50px;*/ /*起始为上, 顺时针依次赋值, 不足边取对边*/ } .box { padding: 10px 0 0 10px; width: 190px; height: 190px; /*margin-left: -80px;*/ /*margin-top: -80px;*/ margin-bottom: 100px; } </style> </head> <body> <div class="box">123</div> <div>456</div> </body> </html>
六：盒模型布局
1.上下两个盒子的margin-bottom和margin-top功能相同，同时出现，取大值 2.第一个有显示区域的子级会和父级联动（margin-top重叠），取大值 解决方案： 1.父级设置border-top 2.父级设置padding-top
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>盒模型布局</title> <style> div { width: 78px; height: 33px; background-color: orange; border: 1px solid black; } /*前提: 盒子显示区域 80 x 35*/ .d1 {} .d2 { margin-left: 80px; margin-top: -35px; /*margin-bottom: 35px;*/ } .d3 { margin-left: calc(80px * 2); margin-top: -35px; } .d4 { margin-left: calc(80px * 3); margin-top: -35px; } .d5 { margin-left: calc(80px * 4); margin-top: -35px; } .d6 { margin-left: calc(80px * 5); margin-top: -35px; } .d7 { margin-left: calc(80px * 6); margin-top: -35px; } </style> </head> <body> <!--.d${$}*7--> <div class="d1">1</div> <div class="d2">2</div> <div class="d3">3</div> <div class="d4">4</div> <div class="d5">5</div> <div class="d6">6</div> <div class="d7">7</div> <hr> <!--需求: b1 与 b2 上下间接50px--> <style> .b1 { margin-bottom: 50px; } .b2 { margin-top: 50px; } /*总结: 上下两个盒子的margin-bottom和margin-top功能相同, 同时出现, 取大值*/ </style> <div class="b1"></div> <div class="b2"></div> <!--了解: 左右正常叠加--> <style> .s1 { margin-right: 10px; } .s2 { margin-left: 10px; } </style> <span class="s1">1</span><span class="s2">2</span> <hr> <style> .sup { width: 200px; height: 200px; background-color: orange; /*margin-top: 40px;*/ /*border-top: 1px solid black;*/ padding-top: 10px; } .sub1 { /*border: 1px solid red;*/ width: 50px; height: 50px; background-color: red; margin-top: 50px; } .sub2 { width: 50px; height: 50px; background-color: pink; margin-top: 50px; } /*总结: 第一个有显示区域的子级会和父级联动(margin-top重叠), 取大值*/ /*解决方案: 1.父级设置border-top | 2.父级设置padding-top*/ </style> <section class="sup"> <section class="sub1"></section> <section class="sub2"></section> </section> </body> </html>