HTML之文本样式、伪类选择器、高级选择器等
补充：block
默认宽高：
1.没有设置宽，宽自适应父级的宽（子级的border+padding+width=父级的width）
2.没有设置高，高由内容撑开
设置了宽高一定采用设置的宽高
显示宽高：border+padding+content
自身布局：margin-top | margin-left
兄弟布局：margin-bottom | margin-right
父级水平居中：margin：0 auto;
与inline相关的盒子：vertical-aline
一：字体设置
text-aline：center;水平居中的方式 color：red;字体颜色 font:900 30px/120px "STSong"；字重 大小/行高 字族 了解： em(自身->父->HTML) rem(HTML) text-indent：2em 字划线 underline | line-through | overline text-decoration：overline;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文本操作</title> <style> .p1 { width: 500px; height: 200px; background-color: orange; } .p1 { /*颜色 大小 字重 字族 行高 水平居中方式*/ color: red; font-size: 50px; /*100~900| normal | lighter | bold*/ font-weight: bold; /*字族可以设置备用字体*/ font-family: "STSong", "微软雅黑"; /*将行高值以盒子高度一致*/ line-height: 200px; /*left | center | right*/ /*text-align: center;*/ } .p1 { /*简写*/ /*text-align: center;*/ color: red; font: normal 30px/200px "STSong", "微软雅黑"; } .p1 { font-size: 50px; /*em就是一个字的大小*/ text-indent: 2em; /*underline | line-through | overline*/ text-decoration: overline; } html { /*rem: r => root 只和html字体大小关联*/ font-size: 50px; } body { font-size: 20px; } .sup { /*最小字体只能到达12px*/ font-size: 12px; } .sub { /*inherit: 继承*/ font-size: inherit; } </style> </head> <body> <p class="p1"> 一二三四五 </p> <div class="sup"> <div class="sub">呵呵</div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>字体案例</title> <style> /* 清除系统默认样式 => reset操作 */ /*h2, p, h3 {*/ /*margin: 0;*/ /*}*/ .box { width: 800px; border-bottom: 1px solid #999; margin: 0 auto; text-align: center; padding: 20px 0; } </style> </head> <body> <div class="box"> <h2>领先的 Web 技术教程 - 全部免费</h2> <p>在 w3school，你可以找到你所需要的所有的网站建设教程。</p> <p>从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP 和 ASP.NET。</p> <h3>从左侧的菜单选择你需要的教程！</h3> </div> </body> </html>
二：reset操作
what/why:大多系统预定义标签，由默认样式，不满足实际开发需求，反倒影响布局，通常在开发前，将需要用到的预定义标签的默认样式清除，高操作就称之为reset操作 body,h1,h6,p{ margin:0;} ul{ margin:0px; padding:0; list-style:none; } a{ text-decoration:none; color:black; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>reset</title> <style> body, h1, h6, p { margin: 0; } ul { margin: 0px; padding: 0; list-style: none; } a { text-decoration: none; color: black; } </style> </head> <body> <ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul> <a href="https://www.baidu.com">前往百度</a> </body> </html>
三：高级选择器
1.群组 div,a,p{} 2.后代 body div{} 3.兄弟 .div1~.div2{} 4.位置 li:nth-child(2n){} 5.多类 .d.dd{}
高级选择器的优先级：
优先级和个数（权重）相关
基础选择器优先级占主导：id 无限大于 class 无线大于 标签
选择器优先级相同时，和顺序有关
高级选择器类型不会影响优先级
伪类选择器相当于class
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>高级选择器</title> <style> /*1.群组选择器: 同时控制多个 选择器之间用逗号隔开 每一个选择器位均可以替换为任意基础选择器或高级选择器 */ .div1, .p1 { color: red; } /*2.后代子代选择器 通过关系层次控制一个目标选择器 >代表父子关系 | 空格代表后代关系 */ .sup1 > .sub { color: orange; } /*sub是body的后代,但不是子代*/ body .sub { color: pink; } /*3.兄弟选择器 通过关系层次控制一个目标选择器 */ /* + 相邻 */ .b2 + .b3 { color: blueviolet; } /* ~ 兄弟 */ .b1 ~ .b3 { color: brown; } /*4.伪类选择器 - 位置*/ ul:nth-child(10) > li:nth-child(2n) { color: green; } </style> </head> <body> <div class="div1">123</div> <p class="p1">456</p> <div>3333</div> <div class="sup1"> <div class="sub">sub</div> </div> <div class="sup2"> <div class="sub">sub</div> </div> <div class="b3">b3 333</div> <div class="b1">001</div> <div class="b2">002</div> <div class="b3">b3 003</div> <ul> <h3>标题</h3> <li>列表项</li> <li>列表项</li> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul> <ul> <h3>标题</h3> <li>列表项</li> <li>列表项</li> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul> <div> <p>0001</p> <p>0002</p> <p>0003</p> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>高级选择器优先级</title> <style> /* 优先级和个数(权重)相关 基础选择器优先级占主导: id 无限大于 class 无限大于 标签 选择器优先级相同时, 和顺序有关 高级选择器类型不会影响优先级 伪类选择器相当于class */ .div { font-size: 100px; color: red; } div > .div { color: orange; } div ~ div ~ .div { color: brown; } div .div { color: pink; } .div:nth-child(3) { color: yellowgreen; } .sup .div { color: darkgreen; } </style> <style> /*多类名*/ .div.div1 { color: black; } /* div.div#dd.div1 */ </style> </head> <body> <div> <div class="sup"> <div> <div> <div></div> <div></div> <div class="div div1" id="dd">123</div> </div> </div> </div> </div> </body> </html>
四：边界圆角
左上角为第一个角，顺时针赋值，不足找对角 border-radius：30px 60px; border-radius：150px;最大也就是150，是个圆 border-radius:50%;圆 横向第一个角50px,第二个角10px，不足找对角 纵向均是150px border-radius:50px 10px/150px;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>边界圆角</title> <style> div { width: 300px; height: 300px; background-color: red; } div { /*左上为第一个角, 顺时针赋值, 不足找对角*/ /*border-radius: 30px 60px;*/ /*border-radius: 150px;*/ /*border-radius: 50%;*/ /*横向第一个角50px, 第二个角10px, 不足找对角*/ /*纵向均是150px*/ border-radius: 50px 10px / 150px; } </style> </head> <body> <div></div> </body> </html>
五：a的四大伪类
:link 链接初始状态
:hover 鼠标悬浮状态
:visited 链接访问后的状态
:active 鼠标按下时的状态
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>a的四大伪类</title> <style> /*链接初始状态 | 鼠标悬浮状态 | 链接访问后的状态 | 鼠标按下时的状态*/ /*a:link {*/ /*color: black;*/ /*}*/ /*a:hover {*/ /*cursor: pointer;*/ /*}*/ /*a:visited {*/ /*color: yellow;*/ /*}*/ /*a:active {*/ /*color: green;*/ /*}*/ /*鼠标悬浮状态 | 鼠标按下时的状态*/ div { width: 200px; height: 200px; background-color: pink; } div:hover { background-color: yellowgreen; cursor: pointer; } div:active { background-color: red; } </style> <style> body { margin: 0; user-select: none; } ul { margin: 0; padding: 0; list-style: none; } a { color: black; text-decoration: none; } h3 { margin: 0; } .ul1 { /*border: 1px solid black;*/ padding: 20px 0 15px 10px; width: 180px; } .ul1 h3 { font-size: 16px; } .ul1 li { text-indent: 10px; font-size: 14px; } .ul1 li:hover { background-color: #666; } .ul1 li:hover > a { color: white; } </style> </head> <body> <a href="https://www.baidu.com">标签a</a> <div></div> <ul class="ul1"> <h3>HTML 教程</h3> <li><a href="">HTML</a></li> <li><a href="">HTML5</a></li> <li><a href="">XHTML</a></li> <li><a href="">CSS</a></li> <li><a href="">CSS3</a></li> <li><a href="">TCP/IP</a></li> </ul> <ul class="ul1"> <h3>HTML 教程</h3> <li><a href="">HTML</a></li> <li><a href="">HTML5</a></li> <li><a href="">XHTML</a></li> <li><a href="">CSS</a></li> <li><a href="">CSS3</a></li> <li><a href="">TCP/IP</a></li> </ul> </body> </html>
六：背景图片之精灵图
div{ background：url("img/bg.png") no-repeat 10px 20px; 图片地址 不平铺 x轴偏移 y轴偏移 } 精灵图操作本质：控制背景图片的位置 background-position-x background-position-y div:hover{ background-position-y：20px; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>背景图片</title> <style> .div { width: 500px; height: 500px; border: 1px solid black; } .div { background-image: url("img/001.png"); /*平铺: repeat-x | repeat-y | repeat | no-repeat*/ background-repeat: no-repeat; /*背景图片位置*/ /*水平: left|center|right 垂直:top|center|bottom*/ background-position: -200px 50px; } .div:hover { transition: 2s; background-position-x: center; } </style> </head> <body> <div class="div"></div> </body> </html>
