CSS
CSS的四种引入方式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css的四种引入方式</title> <style> /*p{*/ /*background-color:black;*/ /*color: blue;*/ /*font-size:32px;*/ /*}*/ </style> </head> <body> <div style="background-color: green;color: red">1.行内式</div> <!--<p>2.嵌入式</p>--> <!--<p>2.嵌入式</p>--> <!--<p>2.嵌入式</p>--> <link rel="stylesheet" href="css_yinyong.css"> <!--声明引入文件的属性 ；引入文件的路径--> <p>3.链接式</p> <p>3.链接式</p> </body> </html> <!--1. 缺陷：只能对单个标签进行操作，不易维护--> <!--html与css代码写在一起，未对程序进行解耦--> <!--2. 缺陷：无法被其他html文件引用--> <!--3. 推荐使用--> <!--2与3对文件内所有已选标签进行操作（与引入方式无关，是设计问题）--> <!--4. 导入式：不推荐使用（与链接式比较相像）-->
CSS选择器：
四个基本选择器：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>四个基本选择器</title> <style> /* 1 标签选择器，选择全部标签*/ p{ background-color: green; } /* 2 id选择器（id是唯一的）*/ #i1{ background-color: red; } /* 3 class选择器（名字可以相同）*/ .c1{ background-color: aliceblue; } /* 4 通配选择器（选择所有标签，包括body（通篇变色））*/ *{ background-color: aqua; } </style> </head> <body> <p>标签选择器</p> <p>标签选择器</p> <p id="i1">id选择器</p> <p class="c1">class选择器</p> <p class="c1">class选择器</p> </body> </html>
层级（组合）选择器
<!--p标签不能嵌套块级标签--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层级选机器</title> <style> /* 1.1 E,F;多元素选择器 匹配所有的E标签与F标签*/ /* 1.2 选择class为d1的span标签*/ span.d1{ background-color: aquamarine; } /* 2 后代元素选择器（选择c1下的所有c3）*/ /*.c1 .c3{*/ /*background-color: green;*/ /*}*/ /* 3 子代元素选择器（只选择c1下的c3）*/ /*.c1 > .c3{*/ /*color: red;*/ /*}*/ /* 4 E + F；毗邻元素选择器*/ /*匹配所有紧随E标签之后的同级标签F（同一级别，只匹配一个）*/ /*div + p{*/ /*background-color: pink;*/ /*}*/ /* 5 E ~ F；普通兄弟选择器（向下选择）*/ /*.c1~.c4{*/ /*background-color: yellow;*/ /*}*/ </style> </head> <body> <p class="c4">p4</p> <div class="c1"> <div class="c2"> <p class="c3">p1</p> </div> <p class="c3">p2</p> </div> <p class="c4">p3</p> <p class="c4">p4</p> <span class="d1">d1</span> <span class="d2">d2</span> <!--扩展 --> <!--class可以拥有多个值，每个值通过‘空格’隔开 --> <!--<div class="c1 c3"></div> 这个div同时拥有c1与c3两种样式--> </body> </html>
属性选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性选择器</title> <style> /*选择所有属性为egon的标签*/ [egon]{ background-color: green; } /*选择span标签下 属性为span的标签*/ span[egon='span']{ background-color: yellow; } /*选择属性为alex='cccc'的标签*/ [alex='cccc']{ background-color: aqua; } /*匹配egon属性的值中包含e的标签*/ [egon*=e]{ background-color: blue; } /*匹配egon属性值中包含‘空格’和aa的标签*/ [egon~=aa]{ background-color: black; } </style> </head> <body> <!--自己定义属性，找标签--> <div egon="aaaa">aaaa</div> <span egon="eeee">eeee</span> <span egon="egon">egon</span> <span egon="span">span</span> <div egon="bbbb">bbbb</div> <div alex="cccc">cccc</div> <div alex="dddd">dddd</div> <div egon="a aaa">aaaa</div> <div egon="a aa a">aaaa</div> <div egon="aanana">aaaa</div> </body> </html>
伪类选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style> /*标签颜色为绿色*/ div{ color: green; } /*鼠标悬浮在标签上时，触发代码*/ div:hover{ color:red ; } .c1{ border: solid 1px black; } .c2,.c3{ height: 100px; width: 100px; } .c2{ background-color: aquamarine; } .c3{ background-color: pink; } /*鼠标选中父标签时，除子标签，全部变色（子标签未变色，与标签的优先级有关）*/ .c1:hover{ background-color: blueviolet; } /*鼠标选中父标签时，只有子标签c1变色*/ .c1:hover .c2{ background-color: blueviolet; } </style> </head> <body> <!--anchor 针对a标签的伪类选择器--> <a href="">hello world</a> <div>good evening</div> <div class="c1"> <div class="c2"></div> <div class="c3"></div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类选择器hover应用</title> <style> .c2{ background-color: blueviolet; height: 100px; width: 100px; } .c3{ height: 100px; width: 100px; background-color: blue; } .c1{ border: solid red 1px; } .c1:hover:before{ content: 'good morning'; color: red; } .c1:hover:after{ content: 'good evening'; } </style> </head> <body> <div class="c1"> <div class="c2"></div> <div class="c3"></div> </div> </body> </html> <!--作用：--> <!--布局时，需要做一些特殊布局，但不需要给客户显示，这时，写在hover中，--> <!--向代码维护人员表明：有特殊作用，但不给客户展示-->
选择器的优先级
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选择器的优先级</title> <style> div{ color: red;!important; } </style> </head> <body> <div></div> </body> </html> <!--优先级（权重）：--> <!--脱离规则之外 !import--> <!--内联选择器（style） 1000--> <!--id选择器 100--> <!--类，伪类，属性选择器 10--> <!--标签，类型，伪元素选择器 1--> <!--通用选择器*，子选择器>,相邻同胞选择器 0--> <!--当多个属性修改同一标签时，计算各属性的权重，权重最大（优先级高）的胜出--> <!--高于一切规则--> <!--.c4{--> <!--color:red;!important;--> <!--}-->
选择器的继承
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>继承</title> <style> .c1{ color: red; } </style> </head> <body> <div class="c1"> <div>d1</div> <div>d2</div> </div> </body> </html> <!--设置父标签文本的颜色格式，如果子标签未设置，会继承父标签--> <!--与字体相关的，可以被继承--> <!--作用：设置给body标签，如果没有特殊设置，文本将全部继承，不需要频繁设置-->
CSS属性操作：
文本属性操作：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本属性操作</title> <style> div{ color: red; /*color: rgb(0,255,0); !*红，绿，蓝（根据数值变换，进行调节）*!*/ /*color: #FF0000; 16进制数*/ background-color: aquamarine; /*text-align: center; !*文本居中*!*/ text-align: justify; /*使文本两端对齐*/ font-size: 25px; /*设置字体大小*/ /*font-family: "Agency FB"; !*设置字体类型*!*/ font-weight:900; /*调节字体粗细*/ font-style: oblique; /*设置字体为斜体*/ text-indent: 100px; /*首行缩进100px*/ } /*a{*/ /*text-decoration: none; !*去掉a标签的下划线*!*/ /*color: red; !*a标签自带颜色，但仍可以设置颜色*!*/ /*}*/ /*div a{*/ /*color: green; */ /*!*a标签变色*!*/ /*}*/ /*div{*/ /*color: green;*/ /*!*设置父标签颜色，继承父标签优先级最低，所以仍为默认颜色*!*/ /*}*/ .c1{ height: 200px; width: 200px; text-align: center; /*文本水平居中*/ line-height: 200px; /*文本在一行中默认居中，此项改变行间距，所以文本竖直居中*/ } </style> </head> <body> <div>hello worldhello worldhello worldhello worldwwwhello worldhe llo worldhvvfello wohello worldhello worldhello worldhello wor ldhello worldhello wohaaaaello worldhello worldhello worrrrldhello worldhello worldhello woh worldhelndfblo worldhello woaarldhe llo worldhello worlfevvdhello wohello worldhello worldhello wor hello worldhello world </div> <a href="">click</a> <div> <a href="">a标签</a> </div> <div class="c1">DIV</div> </body> </html>
背景属性操作：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景属性操作</title> <style> .c1{ border: 1px solid red; width: 100%; height: 500px; /*background-color: aqua;*/ /*background-image: url("maomi.jpg"); !*将背景设置为图片*!*/ /*background-repeat: repeat-x; !*设置背景图片的重复方式：横向重复*!*/ /*!*background-position: center; !*上下左右居中*!*!*/ /*background-position: 100px 200px; !*向右100，向下200（先左右，后上下）*!*/ /*!*这三项可以合在一起写*!*/ background: url("maomi.jpg") no-repeat center; /*三个属性有先后顺序，但浏览器可以全部识别，所以不需要顺序*/ } </style> </head> <body> <div class="c1"> hello world </div> </body> </html>
边框属性操作：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>边框属性操作</title> <style> div{ height: 200px; width: 400px; background-color: aquamarine; /*border-style: solid;*/ /*边框样式 */ /*border-width: 5px;*/ /*border-color: red;*/ border: solid 1px red; border-radius: 35%; /*调节圆度的百分比*/ border-top: ; border-bottom: ; border-left: ; border-right: ; /*上下左右*/ } </style> </head> <body> <div class="c1"></div> </body> </html>
列表属性操作：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表属性操作</title> <style> ul{ /*list-style: square; !*对排头进行渲染*!*/ list-style: none; /*此时li标签占整行，只在屏幕输出内容，只需要对ul标签进行设置，方便管理*/ padding: 0; /*开头没空格*/ } </style> </head> <body> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> </body> </html>
display属性操作：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>dispaly属性</title> <style> span{ background-color: aquamarine; height: 200px; width: 200px; display: block; /*将span标签声明为块级标签*/ } .c{ background-color: green; display: inline; /*将div标签声明为内联标签*/ } .c1{ height: 200px; width: 200px; background-color: yellow; visibility: hidden; /*将这个标签隐藏，但仍占用空间*/ display: none; /*将标签隐藏，不占用空间*/ } .c2{ height: 200px; width: 200px; background-color: red; } .c3{ height: 200px; width: 200px; background-color: green; display: inline-block; /*设置标签包含内联标签与块级的属性*/ margin-left: -3px; /*向左移三个像素*/ } </style> </head> <body> <span>span</span> <div class="c">div</div> <div class="c">div</div> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> <div class="c3"></div> <div class="c3"></div> </body> </html>
内外边距：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内外边距</title> <style> body{ margin: 0; /*去除body的外间距*/ } .c1{ width: 200px; height: 200px; background-color: aquamarine; /*margin: 200px; !*外边距*!*/ /*margin: 100px 200px; !*上下100，左右200*!*/ /*margin: 10px 20px 30px; !*上10，左右20，下30*!*/ /*margin: 10px 20px 30px 40px; !*顺时针排序，上右下左*!*/ /*margin-top: ; margin-left: ; margin-right: ; margin-bottom: ;*/ border: solid red 10px; padding: 50px; /*内边距*/ /*padding同上，也可以进行设置*/ } .c2{ background-color: yellow; height:50px; width: 50px; margin: ; border: solid 1px green; padding: ; } span{ background-color: yellow; margin: 10px; padding: 10px; } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> <span>asd</span> </body> </html> <!--不论内联标签还是块级标签都可以设置内外边距--> <!--上下外边距，以最大的为准（父级塌陷）--> <!--左右外边距，相加-->
外边距margin的居中应用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin的居中应用</title> <style> *{ margin: 0; } .header{ width: 100%; height: 45px; background-color: aquamarine; overflow: hidden; /*即使不含边框，内边距，内容；子标签也以自己为参照物*/ /*溢出：隐藏（当距离大于父标签行高时，隐藏）*/ /*overflow: auto;*/ /*overflow: scroll;*/ /*溢出时，出现滚动条*/ } .c1{ width: 80%; height: 45px; background-color: red; margin: 0 auto; /*上下0，左右居中*/ /*如果父标签不包含边框，内边距，内容；子标签会一直向外找，直至找到body*/ } </style> </head> <body> <div class="header"> <div class="c1">hello</div> </div> </body> </html>
float 浮动属性：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>float浮动</title> <style> *{ margin: 0; } .c1,.c2,.c3{ height: 100px; width: 100px; /*float: left; !*设置c1，c2，c3左浮动*!*/ } .c1{ background-color: red; float: left; /*c1浮起，c2与c3向上推进，c1覆盖c2*/ } .c2{ background-color: yellow; } .c3{ background-color: blue; } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> </body> </html> <!--如果元素B是浮动元素，他的上一个元素A是浮动元素，B会紧随A--> <!--如果A不是浮动元素，B的位置不会改变-->
position定位属性--fixed
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>position定位属性</title> <style> *{ margin: 0; } .c1{ width: 100%; height: 2000px; background-color: aqua; } .c2{ width: 100px; height: 50px; background-color: green; text-align: center; line-height: 50px; color: white; position: fixed; /*固定定位，相对于可视屏幕*/ right: 20px; bottom: 20px; } </style> </head> <body> <div class="c1"></div> <div class="c2">返回顶部</div> </body> </html>
position定位属性--relative,absolute
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; } .c1,.c2,.c3{ height: 100px; width: 100px; } .c1{ background-color: red; } .c2{ background-color: yellow; /*position: relative; !*相对定位（以自己为参照物）*!*/ /*left: 100px;*/ /*top: 100px;*/ position: absolute; /*绝对定位（以最近的，已定位的，祖先元素为参照物）*/ left: 100px; top:100px; } .c3{ background-color: blue; } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> </body> </html>
