CSS3详解
一、CSS3
1-1、基本概念
- 层叠样式表(Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言
- CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
- CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力
1-2、发展历程
- CSS1.0：网页基本样式
- CSS2.0：DIV（块）+ CSS，提出HTML与CSS结构分离的思想，网页变得简单，利于SEO
- CSS2.1：浮动，定位
- CSS3.0：圆角，阴影，动画…浏览器兼容性
1-3、快速入门
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--规范， <style> 可以编写css代码，每一个声明，最好使用分好结尾 语法： 选择器{ 声明1; 声明2; 声明3; } --> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>我是标题</h1> </body> </html> 讯享网
1-4、导入方式
讯享网<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--内部样式表--> <style> h1{
color: green; } </style> <!--外部样式--> <link rel="stylesheet" href="css/style.css"> </head> <body> <!--优先级：行内样式>内部样式>外部样式，但遵循就近原则--> <!--行内样式：在标签元素中，编写一个style属性，编写样式即可--> <h1 style="color: red">hello!</h1> </body> </html>
拓展：外部样式两种写法
- 链接式（html）：
<!--外部样式--> <link rel="stylesheet" href="css/style.css"> - 导入式（CSS2.1）：
讯享网 <!--导入式--> <style> @import url("css/style.css"); </style>
- 区别：
- link是XHTML标签，除了加载CSS外，还可以定义RSS等事务。@import属于CSS范畴，只能加载CSS。
- link引用CSS在页面加载时同时加载，@import需要完全加载后加载。同时link是XHTML标签，没有兼容性，@import是在CSS2.1中提出的，低版浏览器不支持。link支持使用Javascript控制DOM来改变样式；@import不支持。
二、选择器
作用：选择页面上的某一个元素或者某一类元素
2-1、基本选择器
优先级：id>class>标签
- 标签选择器：选择一类标签（标签{}）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*标签选择器，会选择到页面上所有这个标签的元素*/ h1{
color: #030e0c; background: cornflowerblue; border-radius: 24px; } p{
font-size: 80px; } </style> </head> <body> <h1>天水姜伯约</h1> <h1>天水姜伯约</h1> <p>你好</p> </body> </html> - 类选择器 class：选择所有属性一致的标签，可跨标签（.类名{}）
讯享网<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*类选择器的格式 .class的名称 优点：可以多个标签归类，是同一个class，可以复用 */ .boyue{
color: cornflowerblue; } .jiang{
color: red; } </style> </head> <body> <h1 class="boyue">姜维</h1> <h1 class="jiang">姜伯约</h1> <h1 class="boyue">你好</h1> <p class="jiang">早上好</p> </body> </html>
- Id选择器：全局唯一（#id{}）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*id选择器：id必须保证全局唯一 #id名称{} 不遵循就近原则，固定的 优先级：id选择器> class选择器> 标签选择器 */ #by{
color: aqua; } .style01{
color: red; } </style> </head> <body> <h1 id="by">天</h1> <h1 class="style01">水</h1> <h1 class="style01">姜</h1> <h1>伯</h1> <h1>约</h1> </body> </html> 2-2、层次选择器
- 后代选择器：在某个元素的后面（祖爷爷 爷爷 爸爸 你）
讯享网/*后代选择器*/ body p{
background: red; }
- 子选择器：一代，儿子
/*子选择器*/ body>p{
background: aqua; } - 相邻兄弟选择器
讯享网/*相邻兄弟选择器，只有一个相邻（向下选择）*/ .active + p{
background: darkblue; }
- 通用选择器
/*通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/ .active~p{
background: aquamarine; } 2-3、结构伪类选择器
讯享网<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--避免使用，class，id选择器--> <style> /*ul的第一个元素*/ ul li:first-child{
background: aquamarine; } /*ul的最后一个元素*/ ul li:last-child{
background: red; } /*选中 p1：定位到父元素，选择当前的第一个元素 选择当前p元素的父元素，选中父元素的第一个，并且是当前元素才生效 */ p:nth-child(1){
background: cornflowerblue; } /*选中父元素下的p元素的第二个*/ p:nth-of-type(2){
background: yellow; }
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
2-4、属性选择器（常用）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .demo a{
float: left; display: block; height: 50px; width: 50px; border-radius: 10px; background: blue; text-align: center; color: gainsboro; text-decoration: none; margin-right: 5px; font: bold 20px/50px Arial; } /*属性名， 属性名 = 属性值（正则） = 绝对等于 *= 包含这个元素 ^= 以这个开头 $= 以这个结尾 */ /*存在id属性的元素 a[]{}*/ /*a[id]{ background: yellow; }*/ /*id=first元素*/ /*a[id=first]{ background: green; }*/ /*class 中有link的元素*/ /*a[class *= "link"]{ background: red; }*/ /*选中href中以http开头的元素*/ /*a[href^=http]{ background: green; }*/ a[href$=pdf]{
background: red; } </style> </head> <body> <p class="demo"> <a href="http://www.baidu.com" class="link item first" id="first">1</a> <a href="" class="link item active" target="_blank" title="test">2</a> <a href="images/1.html" class="link item">3</a> <a href="images/1.png" class="link item">4</a> <a href="images/1.jpg" class="link item">5</a> <a href="abc" class="link item">6</a> <a href="/a.pdf" class="link item">7</a> <a href="/abc.pdf" class="link item">8</a> <a href="abc.doc" class="link item">9</a> <a href="abcd.doc" class="link item last">10</a> </p> </body> </html> 
三、美化网页元素
3-1、美化网页原因
- 有效传递页面信息
- 页面漂亮可吸引用户
- 凸显页面主体
- 提高用户体验
span标签：重点要突出的文字，使用span套起来
讯享网<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #title01{
font-size: 50px; } </style> </head> <body> 天水<span id="title01">姜伯约</span>
</body>
</html>
3-2、字体样式
<!-- font-family：字体 font-size：字体大小 font-weight：字体粗细 color：字体颜色 --> <style> body{
font: oblique bolder 16px "华文行楷"; /*font-family: 华文行楷;*/ color: crimson; } h1{
font-size: 50px; text-align: center; } .p1{
font-weight: bold; } </style> 3-3、文本样式
- 颜色：color，rgb，rgba
- 文本对齐方式：text-align = center
- 首行缩进：text-indent：2em；
- 行高：line-height（单行文字上下居中：line-height = height）
- 装饰：text-decoration
- 文本图片水平对齐：vertical-align：middle；
讯享网<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 颜色： 单词 RGB 0~F RGBA A：0~1a text-align: 排版，居中 text-indent: 2em; 段落首行缩进 line-height:行高，和块的高度一致，就可以上下居中 --> <style> h1{
color: rgba(0,255,255,0.8); text-align: center; } .p1{
text-indent: 2em; } .p4{
background: aqua; height: 100px; line-height: 20px; } /*下划线*/ .l1{
text-decoration: underline; } /*中划线*/ .l2{
text-decoration: line-through; } /*上划线*/ .l3{
text-decoration: overline; } </style> </head> <body> <p class="l1">12</p> <p class="l2">34</p> <p class="l3">56</p> <h1>《滕王阁序》</h1> <p class="p1">豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。 </p> <p>时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。层峦耸翠，上出重霄；飞阁流丹，下临无地。鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。 </p> <p>披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。闾阎扑地，钟鸣鼎食之家；舸舰弥津，青雀黄龙之舳。云销雨霁，彩彻区明。落霞与孤鹜齐飞，秋水共长天一色。渔舟唱晚，响穷彭蠡之滨；雁阵惊寒，声断衡阳之浦。 </p> <p class="p4">遥襟甫畅，逸兴遄飞。爽籁发而清风生，纤歌凝而白云遏。睢园绿竹，气凌彭泽之樽；邺水朱华，光照临川之笔。四美具，二难并。穷睇眄于中天，极娱游于暇日。天高地迥，觉宇宙之无穷；兴尽悲来，识盈虚之有数。望长安于日下，目吴会于云间。地势极而南溟深，天柱高而北辰远。关山难越，谁悲失路之人？萍水相逢，尽是他乡之客。怀帝阍而不见，奉宣室以何年？ </p> </body> </html>
3-4、阴影
/*text-shadow：阴影颜色，水平偏移，垂直偏移，阴影半径*/ #man{
text-shadow: aqua 10px 10px 2px; } 3-5、超链接伪类
正常情况下：a，a:hover
讯享网a{
text-decoration: none; color: #030e0c; } /*鼠标悬浮的颜色（只需要记住）*/ a:hover{
color: orange; font-size: 50px; } /*鼠标按住未释放的状态*/ a:active{
color: red; }
3-6、列表
/*ul li*/ /* list-style: none 去掉原点 circle 空心圆 decimal：数字 square：正方形 */ ul{
background: darkgrey ; } ul li{
height: 30px; list-style: none; text-indent: 1em; } 3-7、背景
- 背景颜色
- 背景图片
讯享网<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{
width: 1000px; height: 700px; border: 1px solid red; /*默认是全部平铺*/ background-image: url("images/1.png"); } .div1{
background-repeat: repeat-x; } .div2{
background-repeat: repeat-y; } .div3{
background-repeat: no-repeat; } </style> </head> <body> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div>
</body>
</html>
3-8、渐变
background-color: #D9AFD9; background-image: linear-gradient(340deg, #D9AFD9 0%, #97D9E1 100%); 四、盒子模型
4-1、概念
- margin：外边距
- padding：内边距
- border：边框
4-2、边框
- 边框的粗细
- 边框的样式
- 边框的颜色
讯享网/*border：粗细，样式，颜色*/ #box{
width:300px; border: 1px solid red; }
4-3、内外边距
<!--外边距的妙用：居中元素--> <style> #box{
width:300px; border: 1px solid red; margin: 0 auto; } h2{
font-size: 16px; background-color: aquamarine; line-height: 30px; /* margin四个参数时，为 上右下左 */ margin: 0 1px 2px 3px; } form{
background: aquamarine; } input{
border: 1px solid black; } </style> 盒子的计算方式：margin + border + padding + 内容宽度
4-4、圆角边框
讯享网<!-- 左上 右上 右下 左下， 顺时针方向 --> <!-- 圆圈：圆角 = 半径 --> <style> div{
width: 100px; height: 100px; border: 10px solid red; border-radius: 20px; } </style>
4-5、阴影
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- margin: 0 auto;居中 要求：块元素，块元素有固定的高度 --> <style> img{
margin: 0 auto; border-radius: 50px; box-shadow: 10px 10px 100px blue; } </style> </head> <body> <div style="width: 500px; display: block; text-align: center"> <img src="images/1.png" alt="">
</div>
</body>
</html>
五、浮动
5-1、标准文档流
块级元素：独占一行
讯享网h1~h6 p div 列表...
行内元素：不独占一行
span a img strong... 行内元素可以被包含在块级元素中，反之则不行
5-2、display
display是一种实现行内元素的排列方式，但多数情况用float
讯享网<!-- block 块元素 inline 行内元素 inline-block 是块元素，但是可以内联，在一行 none --> <style> div{
width:100px; height: 100px; border: 1px solid red; display: inline-block; } span{
width:100px; height: 100px; border: 1px solid red; display: inline-block; } </style>
5-3、float
#father{ border:1px #000 solid } .layer01{ border:1px #F00 dashed; display: inline-block; float: left; } .layer02{ border:1px #F00 dashed; display: inline-block; float: left; } .layer03{ border:1px #F00 dashed; display: inline-block; float: right; } 5-4、父级边框塌陷问题
clear
讯享网/* clear:left; 左侧不允许有浮动元素 clear:right; 右侧不允许有浮动元素 clear:both; 两侧不允许有浮动元素 */
解决方案：
- 增加父级元素的高度
#father{ border:1px #000 solid; height: 500px; } - 增加一个空的div标签，清除浮动
讯享网<div class="clear"></div> .clear{ clear: both; }
- overflow
在父级元素中增加一个 overflow：hidden - 父类添加一个伪类：after
讯享网#father:after{
content: ''; display: block; clear: both; }
小结：
- 浮动元素后面增加空div，简单，但代码中尽量避免空div
- 设置父元素高度，简单，但元素设置了固定的高度，就会被限制
- overflow，简单，下拉的一些场景避免使用
- 父类添加一个伪类：after（推荐使用），写法稍微复杂，但没有副作用
5-5、对比
- display：方向不可以控制
- float：浮动起来会脱离标准文档流，要解决父级边框塌陷问题
六、定位
6-1、相对定位
6-1-1、基本操作
相对定位：position：relative
相对于原来的位置，进行指定的偏移，相对定位仍处在标准文档流中，原来的位置会被保留
top、left、bottom、right 讯享网<!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 red; } #first{
border: 1px dashed orange; background-color: #FFFFFF; background-image: linear-gradient(339deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%); position: relative;/*相对定位：上下左右*/ top: -20px; left: 50px; } #second{
border: 1px dashed green; background-color: #D9AFD9; background-image: linear-gradient(298deg, #D9AFD9 0%, #97D9E1 100%); } #third{
border: 1px dashed cornflowerblue; background-color: #FFE53B; background-image: linear-gradient(270deg, #FFE53B 0%, #FF2525 74%); position: relative; bottom: 10px; } </style> </head> <body> <div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div> </div> </body> </html>
6-1-2、方块定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box{
border: 1px solid red; width: 300px; height: 300px; padding: 10px; } .first{
border: 1px solid orange; position: relative; } .second{
border: 1px solid orange; position: relative; left: 202px; bottom: 102px; } .third{
border: 1px solid orange; position: relative; bottom: 2px; } .forth{
border: 1px solid orange; position: relative; left: 202px; bottom: 104px; } .fifth{
border: 1px solid orange; position: relative; left: 101px; bottom: 306px; } a{
width: 100px; height: 100px; text-decoration: none; line-height: 100px; text-align: center; background-color: #D9AFD9; background-image: linear-gradient(298deg, #D9AFD9 0%, #97D9E1 100%); display: block; } a:hover{
background-color: #FFE53B; background-image: linear-gradient(270deg, #FFE53B 0%, #FF2525 74%); } </style> </head> <body> <div id="box"> <a href="#" class="first">链接一</a> <a href="#" class="second">链接二</a> <a href="#" class="third">链接三</a> <a href="#" class="forth">链接四</a> <a href="#" class="fifth">链接五</a> </div> </body> </html> 
6-2、绝对定位
定位：基于xxx定位，上下左右。
- 没有父级元素的前提下，相对于浏览器定位
- 假设父级元素存在定位，通常会相对父级元素进行偏移
- 在父级元素范围内移动
- 相对于父级或浏览器的位置，进行指定的偏移，绝对定位不在标准文档流中，原来的位置不会被保留
讯享网<!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 red; position: relative; } #first{
border: 1px dashed orange; background-color: #FFFFFF; background-image: linear-gradient(339deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%); } #second{
border: 1px dashed green; background-color: #D9AFD9; background-image: linear-gradient(298deg, #D9AFD9 0%, #97D9E1 100%); position: absolute; right: 30px; } #third{
border: 1px dashed cornflowerblue; background-color: #FFE53B; background-image: linear-gradient(270deg, #FFE53B 0%, #FF2525 74%); } </style> </head> <body> <div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div> </div> </body> </html>
6-3、固定定位 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-color: red; position: absolute; right: 0; bottom: 0; } div:nth-of-type(2){
/*fixed 固定定位*/ width: 50px; height: 50px; background: darkolivegreen; position: fixed; right: 0; bottom: 0; } </style> </head> <body> <div>first</div> <div>second</div> </body> </html> 6-4、z-index
图层
默认是0，最高无限
讯享网<!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/1.png" alt=""></li> <li class="tipText">天水姜伯约</li> <li class="tipBg"></li> <li>时间：2023-04-10</li> <li>地点：武汉</li> </ul> </div> </body> </html>
透明度：opacity:0.5
#content{
width: 500px; padding: 0px; margin: 0px; overflow: hidden; font-size: 12px; line-height: 25px; border: 1px solid red; } ul,li{
padding: 0px; margin: 0px; list-style: none; } /*父级元素相对定位*/ #content ul{
position: relative; } .tipText, .tipBg{
position: absolute; width: 250px; height: 25px; top: 125px; } .tipText{
color:white; z-index: 999 ; } .tipBg{
background: black; /*opacity: 0.5;*//*背景透明度*/ } 讯享网 right: 0; bottom: 0; } </style> first
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/12643.html