前端网页学习(html)
DAY46
今日内容:
css组合选择器
属性选择器
盒模型 盒模型布局
a标签、img、list标签
伪类选择器
css组合选择器
特性: 每个选择器位可以为任意基本选择器或选择器组合
群组选择器:可以控制多个
div, .s, section{ color: red; }子代选择器: 用>连接
body > div{ color:orange; }后代选择器: 空格连接 包含子代
body a{ text-decoration: none; }相邻选择器: 用 + 连接
span + section{ background-color: pink; }兄弟选择器: 用 ~ 连接
div~section{ background-color: brown; }交集选择器: 即是选择器1 又是 选择器2
i.s{ color: yellow; }多类选择器
.d1.d2.d3{ color: #000 }组合选择器优先级
同目录结构下:
子代与后代优先级相同 body >div 等同于 body div
相邻与与兄弟优先级相同 div + span 等同于 div ~ span
最终样式采用逻辑后的样式值
不同目录结构下
- 根据选择器权值进行比较
- 权值为标签权重之和
- 权重: *:1 div:10 class:100 id:1000 !important: 10000
- 权值比较时,关心的是值的大小,不关心位置与具体选择器名
- id永远比class大,class永远比标签大
- 控制的是同一目标,才具有可比性
属性选择器
属性选择器的权重等同于class选择器
有属性class的所有标签
[class]{ color: orange; }有属性class且值为d2的所有标签(值不影响权重)
[class="d2"]{ color: pink; }交集选择器
div且class=“d2”,增加了权重
div[class="d2"]{ color: blue; }属性开头匹配: ^=
属性结尾匹配: $=
属性模糊匹配: *=
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性选择器</title> <style> /*属性开头: ^= */ /*属性结尾: $= */ /*属性模糊匹配: *= */ [class ^= 'he']{ color: yellow; } [class $= 'ld']{ color: tan; } [class *='owo']{ color: cyan; } [class][dd]{ color:brown; } </style> </head> <body> <div class="d1">0000 <div class="d2">12345</div> <!-- dd为自定义属性 --> <div class="helloworld" dd>helloworld</div> </div> </body> </html>
盒模型 盒模型布局
盒模型
组成: margin + border + padding + content
content = width * height
- 四个成员均具有自身独立显示区域 不相互影响
- margin/padding外边距/内边距控制布局
- border控制边框
- content控制内容
padding与content共有背景颜色
content内容显示区域
/*值设置*/ .box{ /*控制四个方位*/ /*margin:20px; padding: 30px;*/ /*第一个值:上下 第二个值:左右*/ /*margin: 10px 20px; padding: 30px 40px;*/ /*上 左右 下*/ /*margin: 10px 20px 30px; padding: 30px 40px 50px;*/ /*上 左 右 下*/ margin: 10px 20px 30px 40px; padding: 30px 40px 50px 60px; /*总结*/ /*1.规定起始 2.顺时针 3.不足找对面*/ }边界圆角
/*单角设置*/ .box{ /*一个固定值: 横纵*/ /*border-top-left-radius: 100px; */ /*二个固定值: 横 纵*/ /*border-bottom-left-radius:100px 50px; */ /*百分比赋值*/ border-top-left-radius: 100%; } /*整体赋值*/ .box{ /*不分方位(横纵)*/ /*左上为第一个角,顺时针,不足找对角*/ /*border-radius: 30px 60px 120px;*/ /*区分横纵*/ /*1. /前控制横向,/后控制纵向*/ /*2. 横向又可以分为1,2,3,4个值,纵向依然*/ /*border-radius: 100px/50px;*/ /*左上横10 右上横100 右下横50 左下横100 / 纵向全为*/ border-radius: 10px 100px 50px /50px; }盒模型布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒模型布局</title> <style> /*做页面必备reset操作*/ html,body{ margin: 0; } .box, .wrap{ width: 200px; height: 200px; background-color: red; } .wrap{ background-color: orange; } /*影响自身布局*/ /* .box{ margin-top: 30px; margin-left: 100px; }*/ /*影响兄弟布局*/ /*margin-bottom影响上下兄弟,尽量别对margin-right进行设置*/ /*margin-right影响左右兄弟,尽量别对margin-bottom进行设置*/ .box{ margin-bottom: 30px; /*margin-right: 100px;*/ } /*display:显示方式*/ /*块:block*/ /*内联:inline*/ /*内联块:inline-block*/ .box, .wrap{ display: inline-block; /*vertical-align: top;*/ } /*盒模型布局坑,只出现在和margin-top相关的地方*/ /*兄弟坑*/ .s1, .s2{ width: 100px; height: 100px; background-color: pink; } /*重叠取大值*/ .s1{ margin-bottom: 20px; } .s2{ margin-top: 20px; } /*父子坑*/ .sup{ width: 200px; height: 200px; background-color: cyan; } .sub{ width: 100px; height: 100px; background-color: orange; } /*父子top重叠,取大值*/ .sup{ margin-top: 50px; } .sub{ margin-left: 50px; /*margin-top: 50px;*/ } /*解决盒模型经典布局坑*/ /*1.将父级固定*/ .sup{ /*border-top: 1px solid transparent;*/ /*保证显示区域不变 200*200*/ /*height: 199px;*/ } /*2.通过padding*/ .sup{ padding-top:50px; height: 150px; } </style> </head> <body> <div class="box"></div> <div class="wrap"></div> <!-- 坑 --> <section class="s1"></section> <section class="s2"></section> <div class="sup"> <div class="sub"></div> </div> </body> </html>
a标签、img、list标签
a标签: 超链接标签
基本使用:
<a href="https://www.baidu.com">前往百度</a>./或省略代表当前文件路径,可以访问与该文件路径下的所有文件及文件夹
<a href="./temp/temp.html">前往temp页面</a>属性
title: 鼠标悬浮的文本提示
target: _blank ,以空白标签位来打开目标页面
<a href="http://sina.com.cn" title="新浪网" target="_blank">前往新浪</a>其他应用场景: mailto | sms | tel
<a href="mailto:[email protected]">信息给zero</a>锚点
<a href="#tag">前往底部</a> br * 100 <!-- 设置一个锚点 --> <!-- .bottom做底部布局的区域 --> <div class="bottom"> <!-- <a name="tag">...</a> --> <i id="tag"></i> <div id="tag2"></div> ... </div>img标签
src可以连接本地及网络图片
alt资源加载失败时的文本提示
title图片的文本信息(鼠标悬浮时展示)
<img src="http://pic5.photophoto.cn/20071228/0034034901778224_b.jpg" alt="风景图片" title="雪山图片">list列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>a_img_list</title> </style> </head> <body> <!-- list列表 --> <!-- 有序列表 --> <style type="text/css"> ol, ul { margin: 0; padding: 0; list-style: none;; } </style> <ol> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ol> <!-- 无序列表 --> <ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul> </body> </html>
伪类选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style type="text/css"> a{ color: #333; text-decoration: none; } /* :link为一个整体,代表超链接初始状态 */ a:link{ color:orange; } /* :hover鼠标悬浮*/ a:hover{ color: green; /*鼠标样式*/ cursor: pointer; } /* :active活动状态中(被鼠标点击中)*/ a:active{ color: red; } /* :visited访问过的 */ a:visited{ color: cyan; } /*普通标签运用 :hover :active */ .box{ width: 200px; height: 200px; background-color: red; } .box:hover{ background-color: orange; cursor: pointer; } .box:active{ width: 300px; height: 300px; border-radius: 100px; background-color: yellowgreen; } .txt:before{ content: "我是前缀~~~"; } .txt:after{ content: ">>>我是后缀"; } /*伪类可以单独出现*/ /*:after{ content: "哈哈"; }*/ /*位置伪类*/ /*1.位置从1开始*/ /*2.*/ /*先匹配位置,在匹配类型: 找到所有结构下的第二个标签,如果刚好是div,那么匹配成功 -- */ div:nth-child(2){ color: orange; } /*先确定类型,在匹配位置*/ /*先将页面中所有的div找出,在匹配那些在自己结构层次下的第二个div*/ div:nth-of-type(2){ color: cyan; } /*取反伪类*/ :not([d]){ color: red; } </style> </head> <body> <!-- 1.a标签的四大伪类 --> <a href="./123.html">访问页面</a> <a href="http://www.baidu.com">访问百度</a> <div class="box">box</div> <!-- 2.内容伪类 --> <div class="txt">原来的文本</div> <!-- 3.位置伪类 --> <div class="wrap"> <span>span1</span> <div>div1</div> <div>div2</div> </div> <!-- 4.取反伪类 --> <span d>12345</span> <span dd>67890</span> </body> </html>
以上为本次学习内容