admin管理员组文章数量:1794759
CSS3(笔记）
CSS简介
Cascading Style Sheet层叠样式表 CSS：表现（美化网页） 字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动
外部样式两种方法
链接式html
<!--外部样式--> <link rel="stylesheet" href="css/style.css" /> 导入式@import是CSS2.1特有的！
<!--导入式--> <style> @import url("css/style.css"); </style> 选择器作用：选择页面上的某一个或者者某一类元素
基本选择器 1、标签选择器选择一类标签 标签{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> h1{ color: orange; background: blue; border-radius: 10px; } </style> </head> <body> <h1>标签选择器</h1> </body> </html> 1234567891011121314151617 2、类选择器 class选择所有class一致的标签，跨标签，格式：.类名{},可以复用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*类选择器的格式 .class的名称{} 好处：可以多个标签归类，是同一个class，可以复用 */ .demo1{ color: blue; } .demo2{ color: red; } .demo3{ color: aqua; } </style> </head> <body> <h1 class = "demo1">类选择器：demo1</h1> <h1 class="demo2">类选择器：demo2</h1> <h1 class="demo3">类选择器：demo3</h1> </body> </html> 123456789101112131415161718192021222324252627 3、id 选择器：全局唯一，格式：#id名{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*id选择器：id必须保证全局唯一 #id名称{} 不遵循就近原则，优先级是固定的 id选择器 > 类选择器 > 标签选择器 */ #demo1{ color: aqua; } .demo2{ color: red; } #demo2{ color: orange; } h1{ color: blue; } </style> </head> <body> <h1 id="demo1">id选择器：demo1</h1> <h1 class="demo2" id = "demo2">id选择器：demo2</h1> <h1 class="demo2">id选择器：demo3</h1> <h1>id选择器：demo4</h1> <h1>id选择器：demo5</h1> </body> </html>优先级：id > class > 标签
层次选择器 1.后代选择器 （空格）在某个元素的后面
/*后代选择器*/ <style> body p{ background:red; } </style> 2.子选择器 (>)一代
/*子选择器*/ <style> body>p{ background:orange; } </style> 3.相邻的兄弟选择器(+)同辈
/*相邻兄弟选择器：只有一个，相邻（向下）*/ <style> .active+p{ background: red } </style> <body> <p class="active">p1<p> <p>p2</p> </body> 4.通用选择器(~) <style> /*通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/ .active~p{ background:red; } </style> <body> <p class="active">p1<p> <p>p2</p> </body> 结构伪类选择器伪类
<style> /*ul的第一个子元素*/ ul li:first-child{ background: aqua; } /*ul的最后一个子元素*/ ul li:last-child{ background: blue; } /*选中p1：定位到父元素，选择当前的第一个元素 选择当前p元素 的父级元素，选中父级元素的第一个，并且是当前元素才生效！ */ p:nth-child(1){/*不分类型*/ background: orange; } /*选中父元素下的，第2个p元素*//*此类型*/ p:nth-of-type(2){ background: red; } </style> 属性选择器（常用）id + class结合
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .demo a{ display: block; height: 50px; width: 50px; float:left; border-radius: 10px; background: blue; text-align: center; color: beige; text-decoration: none; margin-right: 5px; font: bold 20px/50px Arial; } /*属性名，属性名=属性值（正则） =表示绝对等于 *=表示包含 ^=表示以...开头 $=表示以...结尾 存在id属性的元素 a[]{} */ /* a[id]{ background: red; }*/ /*id=first的元素*/ /* a[id=first]{ background: aqua; }*/ /*class中有links元素*/ /* a[class = "links item2 first2"]{ background: orange; }*/ /*a[class*="links"]{ background: black ; }*/ /*选中href中以http开头的元素*/ a[href^="http"]{ background: orange; } </style> </head> <body> <p class="demo"> <a href="www.baidu" class="links item first" id="first">1</a> <a href="/adad/faf" class="links item2 first2" >2</a> <a href="qwe123" class="links item3 first3" >3</a> <a href="eweqe" class="links item4 first4" >4</a> <a href="rrrrr" class="links item5 first5" >5</a> <a href="ttt" class="links item6 first6" >6</a> <a href="yyy" class="links item7 first7" >7</a> </p> </body> </html> span标签重点要突出的字，使用span标签套起来
<style> #title1{ font-size: 50px; } </style> <body> 学习语言<span id="title1">JAVA</span> </body> 字体样式font-family：字体 font-size：字体大小 font-weight：字体粗细
font-weight:bolder;/*也可以填px，但不能超过900,相当于bloder*/ /*常用写法：*/ font:oblique bloder 12px "楷体" 文本样式图片、文字水平对齐
img,span{vertical-align:middle}[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z0vUNcL5-1608875405695)(C:\\Users\\王东梁\\AppData\\Roaming\\Typora\\typora-user-images\\image-20201225003006064.png)]
超链接伪类 <style> a{/*超链接有默认的颜色*/ text-decoration:none; color:#000000; } a:hover{/*鼠标悬浮的状态*/ color:orange; } a:active{/*鼠标按住未释放的状态*/ color:green } a:visited{/*点击之后的状态*/ color:red } </style> 阴影 /* 第一个参数：表示水平偏移 第二个参数：表示垂直偏移 第三个参数：表示模糊半径 第四个参数：表示颜色 */ text-shadow:5px 5px 5px 颜色[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gFnix5Xu-1608875405699)(C:\\Users\\王东梁\\AppData\\Roaming\\Typora\\typora-user-images\\image-20201225095229521.png)]
列表ul li /*list-style{ none:去掉原点 circle：空心圆 decimal：数字 square：正方形 }*/ ul li{ height:30px; list-style:none; text-indent:1em; } a{ text-decoration:none; font-size:14px; color:#000; } a:hover{ color:orange; text-decoration:underline } /*放在div中，作为导航栏*/ <div id="nav"></div> #nav{ width:300px; } 背景3.综合使用
background:red url("图片相对路径") 270px 10px no-repeat background-position：/*定位：背景位置*/ 渐变网址：www.grablent 径向渐变、圆形渐变
盒子模型border：粗细 样式 颜色
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-llfEVadD-1608875405700)(C:\\Users\\王东梁\\AppData\\Roaming\\Typora\\typora-user-images\\image-20201225103546532.png)]
外边距----妙用：居中margin-left/right/top/bottom–>表示四边，可分别设置，也可以同时设置如下
margin:0 0 0 0/*分别表示上、右、下、左；从上开始顺时针*/ /*例1：居中*/ margin:0 auto /*auto表示左右自动*/ /*例2：*/ margin:4px/*表示上、右、下、左都为4px*/ /*例3*/ margin:10px 20px 30px/*表示上为10px，左右为20px，下为30px*/盒子的计算方式： margin+border+padding+内容的大小
总结： body总有一个默认的外边距 margin:0 常见操作：初始化
margin:0; padding:0; text-decoration:none; 居中的终极方法[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bdJ0Y6Kk-1608875405703)(C:\\Users\\王东梁\\AppData\\Roaming\\Typora\\typora-user-images\\image-20201225110537377.png)]
圆角边框----border-radiusborder-radius有四个参数（顺时针），左上开始 圆圈：圆角=半径
盒子阴影 box-shadow: 10px 10px 1px black;源码之家网站：www.mycodes
光年后台管理系统： lyear.itshubao/index.html#
vue-element-admin:panjiachen.github.io/vue-element-admin-site/zh/
element:element.eleme/#/zh-CN/component/installation
飞冰:ice.work
门户网站模板之家：ice.work
浮动 标准文档流块级元素：独占一行 h1~h6 、p、div、 列表… 行内元素：不独占一行 span、a、img、strong
注： 行内元素可以包含在块级元素中，反之则不可以。
display（重要）这也是一种实现行内元素排列的方式，但是我们很多情况用float
QQ会员页面导航练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>QQ会员</title> <link rel="stylesheet" href="css/style.css" /> </head> <body> <div class="wrap"> <!--头部--> <header class="nav-header"> <div class="head-contain"> <a href="" class="top-logo"><img src="img/logo.png" width="145" height="90" /></a> <nav class="top-nav"> <ul> <li><a href="">功能特权</a> </li> <li><a href="">游戏特权</a> </li> <li><a href="">生活特权</a> </li> <li><a href="">会员特权</a> </li> <li><a href="">成长体系</a> </li> <li><a href="">年费专区</a> </li> <li><a href="">超级会员</a> </li> </ul> </nav> <div class="top-right"> <a href="">登录</a> <a href="">开通超级会员</a> </div> </div> </header> </div> </body> </html> 123456789101112131415161718192021222324252627282930313233 *{ padding:0; margin: 0; } a{ text-decoration: none; } .nav-header{ height: 90px; width: 100%; background: rgba(0,0,0,.6); } .head-contain{ width: 1180px; height: 90px; margin: 0 auto; text-align: center; } .top-logo,.top-nav,.top-nav li,.top-right{ height: 90px; display: inline-block; vertical-align: top; } .top-nav{ margin: 0 48px; } .top-nav li{ line-height: 90px; width: 90px; } .top-nav li a{ display: block; text-align: center; font-size: 16px; color: #fff; } .top-nav li a:hover{ color: blue; } .top-right a{ display: inline-block; font-size: 16px; text-align: center; margin-top: 25px; border-radius: 35px; } .top-right a:first-of-type{ width: 93px; height: 38px; line-height: 38px; color: #fad65c; border: 1px #fad65c solid; } .top-right a:first-of-type:hover{ color: #986b0d; background: #fad65c; } .top-right a:last-of-type{ width: 140px; height: 40px; font-weight: 700; line-height: 40px; background: #fad65c; color: #986b0d; } .top-right a:last-of-type:hover{ background: #fddc6c; } float：left/right左右浮动clear：both
overflow及父级边框塌陷问题clear： right：右侧不允许有浮动元素 left：左侧不允许有浮动元素 both：两侧不允许有浮动元素 none：
解决塌陷问题方案： 方案一增加父级元素的高度；
方案二增加一个空的div标签，清除浮动
<div class = "clear"></div> <style> .clear{ clear:both; margin:0; padding:0; } </style>[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HuGA4JNe-1608875405705)(C:\\Users\\王东梁\\AppData\\Roaming\\Typora\\typora-user-images\\image-20201225123439932.png)]
方案三在父级元素中增加一个overflow：hidden
overflow:hidden/*隐藏*/ overflow：scoll/*滚动*/layui:www.layui/admin/
方案四(重要)父类添加一个伪类:after
#father:after{ content:''; display:block; clear:both; }小结：
相对定位：positon：relstive； 相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中，原来的位置会被保留
top:-20px; left:20px; bottom:-10px; right:20px<!--距离右边多少--> 绝对定位-absolute定位：基于xxx定位，上下左右~ 1、没有父级元素定位的前提下，相对于浏览器定位 2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移 3、在父级元素范围内移动 总结：相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ margin: 10px; padding: 5px; font-size: 12px; line-height: 25px; } #father{ border: 1px solid #666; padding: 0; position: relative; } #first{ background-color: #a13d30; border: 1px dashed #b27530; } #second{ background-color: green; border: 1px dashed #0ece4f; position: absolute; right:30px; top:30px } #third{ background-color: red; border: 1px dashed #ff1b87; } </style> </head> <body> <div id = "father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div> </div> </body> </html> 固定定位-fixed <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ height: 1000px; } div:nth-of-type(1){/*绝对定位：没有相对的父级元素，所以相对于浏览器*/ width: 100px; height: 100px; background:red; position: absolute; right: 0; bottom: 0; } div:nth-of-type(2){ width: 50px; height: 50px; background: yellow; position: fixed; right: 0; bottom: 0; } </style> </head> <body> <div>div1</div> <div>div2</div> </body> </html> z-index层级图层~ z-index：默认是0，最高无限~999
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="content"> <ul> <li><img src="images/bg.jpg" alt=""></li> <li class="tipText">学习微服务，找狂神</li> <li class="tipBg"></li> <li>时间：2099-01=01</li> <li>地点：月球一号基地</li> </ul> </div> </body> </html> #content{ width: 380px; padding: 0px; margin: 0px; overflow: hidden; font-size: 12px; line-height: 25px; border: 1px solid yellow; } ul,li{ padding: 0px; margin: 0px; list-style: none; } /*父级元素相对定位*/ #content ul{ position: relative; } .tipText,.tipBg{ position: absolute; width: 380px; height: 25px; top:216px } .tipText{ color: white; z-index: 999; } .tipBg{ background: orange; opacity: 0.5;/*背景透明度*/ filter: alpha(opacity=50); } 动画及视野拓展菜鸟教程:www.runoob
总结[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IGvckSf0-1608875405707)(C:\\Users\\王东梁\\AppData\\Roaming\\Typora\\typora-user-images\\image-20201225134804298.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RmRi8zok-1608875405707)(C:\\Users\\王东梁\\AppData\\Roaming\\Typora\\typora-user-images\\image-20201225134837125.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jRdYijjX-1608875405708)(C:\\Users\\王东梁\\AppData\\Roaming\\Typora\\typora-user-images\\image-20201225134917099.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-reE3wqBZ-1608875405709)(C:\\Users\\王东梁\\AppData\\Roaming\\Typora\\typora-user-images\\image-20201225134945388.png)]
本文标签： 笔记
版权声明：本文标题：CSS3(笔记） 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686783523a102350.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论