1、什么是CSS
Cascading Style Sheets 层叠级联样式表
2、快速入门-未分离式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的第一个css程序</title> <!-- 规范:style标签嵌套在head标签中,每个声明以分号结尾 语法: 选择器{ 声明1; 声明2; 声明3; } --> <style> h1{ color: #5241ff; } </style> </head> <body> <h1>这是一个标题</h1> </body> </html>
3、快速入门-分离式
直接通过link标签引入到html页面中,这样子可以css专注于css,html专注于html,建议使用这种。
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的第一个css程序</title> <link rel="stylesheet" href="css/style.css"> <body> <h1>这是一个标题</h1> </body> </html>
style.css
h1{ color: #5241ff; }
4、CSS的3中导入方式
-
内部样式
-
外部样式(导入式和链接式)
-
行内样式
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 内部样式--> <style> h1{ color: red; } </style> <!-- 外部样式--> <link rel="stylesheet" href="css/style.css"> </head> <!--优先级: 就近原则--> <body> <!--行内样式:在标签元素中添加style属性后编写样式即可--> <h1 style="color: #5241ff">这是标题</h1> </body> </html>
index2.html 这里的导入式我的Google显示空,但是我查了语法是这样子没什么问题,找不到问题所在,推荐使用link标签。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--导入式--> <style> @import url(css/style.css); </style> </head> <body> <h1>落霞与孤鹜齐飞,秋水共长天一色。</h1> </body> </html>
style,css
/*外部样式*/ h1{ color: azure; }
5、选择器
作用:选择页面上的某一个或者某一类元素。
5.1、基本选择器
5.1.1、标签选择器 : 选择一类标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签选择器</title> <style> /*标签选择器:选择页面上所有这个标签的元素*/ h1{ color: #ffe76e; background: beige; border-radius: 24px; } p{ font-size: 100px; } </style> </head> <body> <h1>滕王阁序</h1> <h1>落霞与孤鹜齐飞,秋水共长天一色。</h1> <p>没事儿吧,你没事儿吧。</p> </body> </html>
5.1.2、类选择器 class : 选择所有的class属性一致的标签,可跨标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>类选择器</title> <style> /*类选择器: 语法:.class_name{} 优点:可以多个标签归类使用同一class,可复用 */ .w{ color: wheat; } .h{ color: hotpink; } .b{ color: blue; } </style> </head> <body> <h1 class="w">标题1</h1> <h1 class="h">标题2</h1> <h1 class="b">标题3</h1> <p class="b">段落</p> </body> </html>
5.1.3、id 选择器 : 全局唯一
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>id选择器</title> </head> <Style> /*id选择器:id必须保证全局唯一 语法:#id_name{} 优先级:id选择器 > 类选择器 > 标签选择器 */ #w{ color: blue; } </Style> <body> <h1 id="w">标题一</h1> </body> </html>
5.2、高级选择器
5.2.1、层次选择器
-
后代选择器 : 在某个元素后面
-
子选择器 : 只有一代,子一代
-
相邻兄弟选择器 : 同辈
-
通用选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层次选择器</title> <style> /* 后代选择器*/ body p{ background: blue; } /* 子选择器 */ body>p{ background: yellow; } /* 相邻兄弟选择器 : 相邻同级对下不对上*/ .active + p{ background: red; } /* 通用兄弟选择器 : 当前选中元素向下的所有兄弟元素 */ .active~p{ background: black; } </style> </head> <body> <p>p1</p> <p class="active">p2</p> <p>p3</p> <ul> <li> <p>p4</p> </li> <li> <p>p5</p> </li> <li> <p>p6</p> </li> </ul> </body> </html>
5.2.2、结构伪类选择器(伪类 == 条件)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>结构伪类选择器</title> <!-- 禁止使用类选择器和id选择器 --> <style> /*选中ul标签中的第一个子元素*/ ul li:first-child{ background: red; } /*选中ul标签中的最后一个子元素*/ ul li:last-child{ background: blue; } /* 选中p1 : 定位到父元素,选择当前的第一个元素 p:nth-child(1) : 选择当前p元素的父元素body,选中父元素的第一个,并且是当前元素才生效 按顺序选择 */ p:nth-child(2){ background: #f0ff30; } /* 选择父元素下的p元素的第二个 按类型选择 */ p:nth-of-type(1){ background: yellow; } a:hover{ background: black; } </style> </head> <body> <a href="https://www.baidu.com">点我跳转百度</a> <br> <h>h</h> <p>p1</p> <p>p2</p> <p>p3</p> <ul> <li>li1</li> <li>li2</li> <li>li3</li> </ul> </body> </html>
5.2.3、属性选择器(常用)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性选择器</title> <style> .demo a{ /*后代选择器*/ float: left; /* 设置元素向左浮动,使其左侧与其容器的内容区域左侧对齐 */ display: block; /* 将元素显示为块级元素,使其占据一行,并允许设置宽度、高度以及其他盒模型属性 */ height: 50px; width: 100px; border-radius: 10px; /* 设置元素的边框圆角半径为 10 像素,使边框呈现圆角效果 */ background: yellow; text-align: center; /* 设置元素内文本的水平居中对齐 */ color: black; text-decoration: none; /* 移除链接的下划线效果 */ margin-right: 5px; /* 设置元素右侧的外边距为 5 像素,用于与其他元素之间的间距 */ font: bold 20px/50px Arial; /* 设置元素内文本的字体为 Arial,字体粗细为粗体,字体大小为 20 像素,行高为 50 像素 */ } /* = 绝对等于 *= 包含这个元素 ^= 以……开头 $= 以……结尾 */ /* 选中存在id属性的元素 a[ 属性名 ]{} */ a[id]{ background: black; } /* 选中id = first 的元素 a[属性名 = 属性值(可写正则表达式)]{}*/ a[id = first]{ background: green; } /* 选中class中有links的元素 */ a[class *= links]{ background: green; } /* 选中href中以https开头的元素 */ a[href ^= https]{ background: green; } /* 选中href中以doc结尾的元素 */ a[href $= doc]{ background: blue; } </style> </head> <body> <p class="demo"> <a href="https://www.baidu.com" class="links item first" id="first">百度</a> <a href="https://www.csdn.net" class="links item active" target="_blank" title="Null">CSDN</a> <a href="images/123.html" class="links item">123.html</a> <a href="images/123.png" class="links item">123.png</a> <a href="images/123.jpg" class="links item">123.jpg</a> <a href="abc" class="links item">abc</a> <a href="/abc.pdf" class="links item">/abc.pdf</a> <a href="/abc.doc" class="links item">/abc.doc</a> <a href="abc.doc" class="links item">abc.doc</a> <a href="abcd.doc" class="links item last">abcd.doc</a> </p> </body> </html>
6、美化网页元素
6.1、span标签 : 重点要突出的字,使用span标签套起来
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>span标签学习</title> <style> #tips{ font-size: 66px; } </style> </head> <body> 恭喜你做了一个很正确且有趣的决定:<span id="tips">学习前端-CSS3</span> </body> </html>
6.2、字体样式 font
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字体样式学习</title> <!-- font-family:字体 font-size:字体大小 font-weight:字体粗细 color:字体颜色 --> <style> body{ font-family: "Arial Black" , 楷体; color: green; } h1{ font-size: 66px; } .p1{ font-weight: bold; } /* font : 斜体 粗细 大小 字体 */ .p3{ font: oblique bolder 12px "楷体"; } </style> </head> <body> <h1>滕王阁序</h1> <h6>王勃</h6> <p class="p1"> 豫章故郡,洪都新府。星分翼轸,地接衡庐。襟三江而带五湖,控蛮荆而引瓯越。物华天宝,龙光射牛斗之墟;人杰地灵,徐孺下陈蕃之榻。雄州雾列,俊采星驰。台隍枕夷夏之交,宾主尽东南之美。都督阎公之雅望,棨戟遥临;宇文新州之懿范,襜帷暂驻。十旬休假,胜友如云;千里逢迎,高朋满座。腾蛟起凤,孟学士之词宗;紫电青霜,王将军之武库。家君作宰,路出名区;童子何知,躬逢胜饯。 </p> <p> 时维九月,序属三秋。潦水尽而寒潭清,烟光凝而暮山紫。俨骖騑于上路,访风景于崇阿;临帝子之长洲,得天人之旧馆。层峦耸翠,上出重霄;飞阁流丹,下临无地。鹤汀凫渚,穷岛屿之萦回;桂殿兰宫,即冈峦之体势。 </p> <p class="p3"> 披绣闼,俯雕甍,山原旷其盈视,川泽纡其骇瞩。闾阎扑地,钟鸣鼎食之家;舸舰弥津,青雀黄龙之舳。云销雨霁,彩彻区明。落霞与孤鹜齐飞,秋水共长天一色。渔舟唱晚,响穷彭蠡之滨;雁阵惊寒,声断衡阳之浦。 </p> <p> JavaSE HTML CSS JavaScript JavaWeb JavaEE Vue SpringBoot </p> </body> </html>
6.3、文本样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本样式</title> <!-- 颜色color :单词 RGB :0~F RGBA中的A透明度: 0~1 text-align : 排版 针对左右 text-indent: 2em; 首行缩进两个字符,一个em代表一个字符 行高 = 块高 : 上下居中 text-decoration : underline 下划线 line-through 中划线 overline 上划线 vertical-align: middle 垂直居中 --> <style> h1{ color: rgba(0,255,255,0.5); text-align: center; } p{ text-indent: 2em; } .p1{ text-decoration: underline; } .p2{ text-decoration: line-through; } .p3{ height: 30px; /* 块高 */ line-height: 30px; /* 行高 */ text-decoration: overline; } img,span{ vertical-align: middle; } </style> </head> <body> <h1>滕王阁序</h1> <p class="p1"> 豫章故郡,洪都新府。星分翼轸,地接衡庐。襟三江而带五湖,控蛮荆而引瓯越。物华天宝,龙光射牛斗之墟;人杰地灵,徐孺下陈蕃之榻。雄州雾列,俊采星驰。台隍枕夷夏之交,宾主尽东南之美。都督阎公之雅望,棨戟遥临;宇文新州之懿范,襜帷暂驻。十旬休假,胜友如云;千里逢迎,高朋满座。腾蛟起凤,孟学士之词宗;紫电青霜,王将军之武库。家君作宰,路出名区;童子何知,躬逢胜饯。 </p> <p class="p2"> 时维九月,序属三秋。潦水尽而寒潭清,烟光凝而暮山紫。俨骖騑于上路,访风景于崇阿;临帝子之长洲,得天人之旧馆。层峦耸翠,上出重霄;飞阁流丹,下临无地。鹤汀凫渚,穷岛屿之萦回;桂殿兰宫,即冈峦之体势。 </p> <p class="p3"> 披绣闼,俯雕甍,山原旷其盈视,川泽纡其骇瞩。闾阎扑地,钟鸣鼎食之家;舸舰弥津,青雀黄龙之舳。云销雨霁,彩彻区明。落霞与孤鹜齐飞,秋水共长天一色。渔舟唱晚,响穷彭蠡之滨;雁阵惊寒,声断衡阳之浦。 </p> <p> <img src="images/background.jpg" alt=""> <span>落霞与孤鹜齐飞,秋水共长天一色。</span> </p> </body> </html>
6.4、超链接伪类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>超链接伪类学习</title> <style> /* 默认的颜色 */ a{ text-decoration: none; color: black; } /* 鼠标悬停时的颜色 状态 */ a:hover{ color: blue; font-size: 20px; } /* 鼠标按住不松时的颜色 */ a:active{ color: green; } /* text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径*/ #price{ text-shadow: yellow 5px 5px 5px; } </style> </head> <body> <p> <img src="images/mcgx.png" alt=""> </p> <p> <a href="#">码出高效:Java开发手册</a> </p> <p> <a href="#">作者:孤尽老师</a> </p> <p id="price"> <a href="#">¥99</a> </p> </body> </html>
6.5、列表
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表样式</title> <link rel="stylesheet" href="css/style.css" type="text/css"> </head> <body> <div id="nav"> <h2 class="T">全部商品分类</h2> <ul> <li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a></li> <li><a href="#">家用电器</a> <a href="#">手机</a> <a href="#">数码</a></li> <li><a href="#">电脑</a> <a href="#">办公</a></li> <li><a href="#">家具</a> <a href="#">家装</a> <a href="#">厨具</a></li> <li><a href="#">服饰鞋帽</a> <a href="#">个性化妆</a></li> <li><a href="#">礼品箱包</a> <a href="#">钟表</a> <a href="#">珠宝</a></li> <li><a href="#">食品饮料</a> <a href="#">保健食品</a></li> <li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">票务</a></li> </ul> </div> </body> </html>
style.css
#nav{ width: 260px; background: whitesmoke; } .T{ font-size: 18px; font-weight: bold; text-indent: 1em; line-height: 30px; background: red; } /* list-style: none 去掉原点 circle 空心圆 decimal 数字 square 正方形 */ ul li{ height: 30px; list-style: none; text-indent: 1em; } a{ color: black; text-decoration: none; font-size: 14px; } a:hover{ color: blue; text-decoration: underline; }
6.6、背景
6.6.1、背景颜色
合并式
/* 颜色 图片 图片坐标 平铺方式 */ background: red url("../images/down.png") 270px 10px no-repeat;
散开式
background-image: url("../images/right.png"); background-repeat: no-repeat; background-position: 200px 2px;
6.6.2、背景图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景</title> <style> /* 默认全部平铺 repeat */ div{ width: 1000px; height: 800px; border: 1px solid red; /* border边框 : 边框粗细 实线 颜色 */ background-image: url("images/background.jpg"); } .first{ background-repeat: repeat-x; /* 水平平铺 */ } .second{ background-repeat: repeat-y; /* 垂直平铺 */ } .third{ background-repeat: no-repeat; /* 不平铺 */ } </style> </head> <body> <div class="first"></div> <div class="second"></div> <div class="third"></div> </body> </html>
6.6.3、渐变色
<style> body{ /* 也可以这么写 background-color: #FFFFFF; background-image: linear-gradient(115deg, #FFFFFF 0%, #6284FF 50%, #FFF000 100%); */ background: linear-gradient(115deg, #FFFFFF 0%, #6284FF 50%, #FFF000 100%); } </style>
7、盒子模型
7.1、什么是盒子模型?
-
margin : 外边距
-
padding : 内边距
-
border : 边框
7.2、边框border
-
边框的粗细
-
边框的样式
-
边框的颜色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style> <!-- 网页原生属性都默认有内外边距 --> h1,ul,li,a,body{ margin: 0; padding: 0; } h2{ font-size: 16px; background-color: green; margin: 0; line-height: 30px; } #app{ width: 300px; border: 1px solid black; /* 边框 : 粗细 实线 颜色 */ } form{ background-color: green; } div:nth-of-type(1) input{ border: 1px solid blue; } div:nth-of-type(2) input{ border: 1px dashed yellow; /* dashed : 边框虚线 */ } </style> </head> <body> <div id="app"> <h2>用户登录</h2> <form action="https://www.baidu.com"> <div style="text-align: left; line-height: 30px"> <span>账号:</span> <input type="text" name="username" /> </div> <div style="text-align: left; line-height: 30px"> <span>密码:</span> <input type="password" name="password" /> </div> <div style="text-align: center; line-height: 60px"> <input type="submit" name="Login" value="登录" /> <input type="button" name="forget" value="忘记密码" /> </div> </form> </div> </body> </html>
7.3、内外边距 margin padding
盒子的计算方式:即当前这个元素到底有多大面积
S = margin + border + padding + 内容宽度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>外边距</title> <style> #app{ width: 300px; border: 1px solid black; /* 边框 : 粗细 实线 颜色 */ margin: 0 auto; } /* margin和padding遵循顺时针旋转 margin : 0 上下和左右都为0 margin : 0 1px 上下边距为0,左右边距为1px margin: 0 1px 2px 3px 上 右 下 左边 */ h2{ font-size: 16px; background-color: green; margin: 0; line-height: 30px; color: white; margin: 0 1px 2px 3px; } form{ background-color: green; } input{ border: 1px solid black; } div:nth-of-type(1){ padding: 5px; } </style> </head> <body> <div id="app"> <h2>用户登录</h2> <form action="https://www.baidu.com"> <div> <span>账号:</span> <input type="text" name="username" /> </div> <div> <span>密码:</span> <input type="password" name="password" /> </div> <div> <input type="submit" name="Login" value="登录" /> <input type="button" name="forget" value="忘记密码" /> </div> </form> </div> </body> </html>
7.4、圆角边框
1.边框圆角.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>边框圆角</title> <style> /* border-radius: 50px 40px 30px 20px 左上 右上 右下 左下 依然遵循顺时针 圆圈 : 圆角 = 半径 */ div{ width: 100px; height: 100px; border: 10px solid black; border-radius: 50px 40px 30px 20px; } </style> </head> <body> <div></div> </body> </html>
2.圆形(可以利用网页作图)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圆形</title> <style> div{ width: 50px; height: 50px; margin: 30px; background-color: blue; border-radius: 50px 0 0 0; } img{ border-radius: 500px; } </style> </head>images <body> <div></div> <img src="images/background.jpg" alt=""> </body> </html>
7.5、阴影
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>阴影</title> <style> img{ border-radius: 50px; box-shadow: 10px 10px 100px yellow; } </style> </head> <body> <!-- margin: 0 auto : 居中 要求 : 只有块元素中才可以,body标签中无边界 --> <div style="height: 377px; width: 477px; margin: 0 auto;"> <img src="images/background.jpg" alt=""> </div> </body> </html>
8、浮动
8.1、display(是一种实现行内元素排列的方式,但多数情况都是用float)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>display</title> <style> /* display: block : 块元素 inline : 行内元素 inline-block : 是块元素但可以内联,在一行 none : 消失 */ div{ width: 100px; height: 100px; border: 1px solid black; display: inline; } span{ width: 100px; height: 100px; border: 1px solid black; display: block; } </style> </head> <body> <div>div块元素</div> <span>span行内元素</span> </body> </html>
8.2、float(左右浮动)
float : left float : right
8.3、父级边框塌陷的问题
8.3.1、clear
/* clear : right : 右侧不允许有浮动元素 left : 左侧不允许有浮动元素 both : 两侧不允许有浮动元素 none : 可以浮动 */
8.3.2、解决方案
1、增加父级元素的宽高
#father{ border: 1px #000 solid; height: 800px; }
2、增加一个空的div标签且清除浮动
<div class="clear"></div> .clear{ clear: both; margin: 0; padding: 0; }
3、增加overflow(hidden:隐藏;scroll/auto:溢出有滚动条)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>overflow</title> <style> #content{ width: 200px; height: 200px; overflow: scroll; } </style> </head> <body> <div id="content"> <img src="images/little.png" alt=""> <p> 落霞与孤鹜齐飞,秋水共长天一色。 </p> </div> </body> </html>
4、为父类添加一个伪类
#father:after{ content: ''; display: block; clear: both; }
9、定位
9.1、相对定位(position: relative 相对原来位置进行指定偏移,原位置会被保留)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ padding: 20px; } div{ margin: 0; padding: 0; font-size: 12px; line-height: 25px; } #father{ border: 1px solid black; padding: 0; } .first{ background-color: red; border: 1px dashed red; position: relative; /* 相对定位 :上下左右 */ top: -20px; left: 20px; } .second{ background-color: orange; border: 1px dashed orange; } .third{ background-color: yellow; border: 1px dashed yellow; position: relative; bottom: -50px; right: 50px; } </style> </head> <body> <div id="father"> <div class="first">第一个盒子</div> <div class="second">第二个盒子</div> <div class="third">第三个盒子</div> </div> </body> </html>
9.2、绝对定位(position: absolute :相对父级或者浏览器进行指定偏移,原位置不会被保留)
-
在没有父级元素的前提下,相对于浏览器定位
-
假设父级元素存在定位,通常会相对于父级元素进行偏移定位
-
在父级元素范围内移动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ margin: 0; padding: 0; font-size: 12px; line-height: 25px; } #father{ border: 1px solid black; padding: 0; position: relative; } .first{ background-color: red; border: 1px dashed red; } .second{ background-color: orange; border: 1px dashed orange; position: absolute; top: 20px; left: 50px; } .third{ background-color: yellow; border: 1px dashed yellow; } </style> </head> <body> <div id="father"> <div class="first">第一个盒子</div> <div class="second">第二个盒子</div> <div class="third">第三个盒子</div> </div> </body> </html>
9.3、固定定位 fixed
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>固定定位</title> <style> body{ height: 1000px; } div:nth-of-type(1){ width: 100px; height: 100px; background-color: green; position: absolute; /* 绝对定位 : 相对于浏览器 */ right: 0; bottom: 0; } div:nth-of-type(2){ width: 50px; height: 50px; background-color: yellow; position: fixed; /* 固定定位 : fixed */ right: 0; bottom: 0; } </style> </head> <body> <div>div1</div> <div>div2</div> </body> </html>
9.4、z-index 图层
index .html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="app"> <ul> <li><img src="images/little.png" alt=""></li> <li class="tipText">小小的</li> <li class="tipImage"></li> <li>时间:6060-01-01</li> <li>地点:光之国</li> </ul> </div> </body> </html>
style.css
ul,li{ margin: 0; padding: 0; list-style: none; } #app{ margin: 0; padding: 0; width: 640px; height: 800px; font-size: 12px; line-height: 25px; overflow: hidden; border: 1px solid black; } #app ul{ position: relative; } .tipText, .tipImage{ position: absolute; width: 640px; height: 25px; top: 615px; } .tipText{ color: white; z-index: 999; /* 图层从0~无穷大,0在最下面 */ text-align: center; } .tipImage{ background: black; opacity: 0.5; /* 背景透明度 范围:0~1 */ filter: alpha(opacity = 50); /* 等同于opacity: 0.5; 但是仅限于IE8及更早之前的浏览器 */ }