pythonav.com
首页
知识库
免费视频
项目实战
每天20道面试题
登录
注册
CSS（Cascading Style Sheets）称为层叠样式表，用于对页面进行美化。在学习Html页面时，大家都会发现我们的页面丑的一批，从今天开发就让我们的页面好看起来，例如： <img src="/media/uploads/2019/front/image-20191025124358977.png" alt="image-20191025124358977" style="zoom: 25%;" /> ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS学习</title> <link href="https://cdn.bootcss.com/font-awesome/5.10.2/css/all.min.css" rel="stylesheet"> </head> <body style="margin: 0;font-size: 14px;"> <div style="height: 48px;background-color: #499ef3;"> <a style="float:left;height: 48px;display: inline-block; line-height: 48px;padding: 0 10px;color: white;font-weight: 200;">Python资源网</a> <ul style="display: inline-block;float: left;padding: 0;margin: 0;line-height: 48px;"> <li style="list-style: none;float: left;padding: 0 10px;color: white;font-weight: 100;"> <i class="fa fa-home" aria-hidden="true"></i> 首页 </li> <li style="list-style: none;float: left;padding: 0 10px;color: white;font-weight: 100;"> <i class="fa fa-wikipedia-w" aria-hidden="true"></i> 知识库 </li> <li style="list-style: none;float: left;padding: 0 10px;color: white;font-weight: 100;"> <i class="fa fa-book" aria-hidden="true"></i> 内部资料 </li> </ul> </div> <div style="width: 900px;margin: 0 auto;text-align: center;"> <img src="https://images.cnblogs.com/cnblogs_com/wupeiqi/662608/o_big_girl.png" alt=""> </div> </body> </html> ``` ### 2.1 应用方式 css的样式有很多种，当如果想要把css样式应用到特定标签上有三种方式： - 标签属性上编写，适用范围：指定一个标签。【不推荐，多标签无法复用样式】 ```html <div style="color:green;">Alex</div> ``` - head标签中定义，适用范围：当前页面的所有标签。【推荐，多个标签可复用样式】 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS学习</title> <style> /*给所有的div设置样式*/ div { color: green; } </style> </head> <body> <div>Alex</div> <div>mjj</div> </body> </html> ``` - 在css文件中定义，适用范围：所有引入css文件的页面。【推荐，多页面、多个标签均可复用样式】 - 创建css文件，如：common.css ```css div { color: green; } ``` - 创建html文件，如：index.html ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS学习</title> <link rel="stylesheet" href="common.css"> </head> <body> <div>Alex</div> <div>老男孩</div> </body> </html> ``` 以后在企业中写应用css样式时，写单页面时会把样式写在head头部；写多页面时，会把样式写入css文件，然后再在要应用的html页面引入css即可。 ### 2.2 选择器 学习选择器的目的就是选中html页面中指定标签，便于以后给他应用样式. #### 2.2.1 标签选择器 在body中找到所有指定标签，例如：找到所有a标签，让他们绿了。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS学习</title> <style> a { color: green; } </style> </head> <body> <div>周杰伦</div> <a href="https://www.oldboyedu.com">Alex</a> <p>Alex</p> <ul> <li> <a href="#">朗朗</a> </li> </ul> </body> </html> ``` #### 2.2.2 id 选择器 在body中找一个id匹配的标签。（HTML中ID属性应唯一，相当于人的身份证号码），例如：找到id等于i1的标签，让他绿了。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS学习</title> <style> /*找到所有a标签，并应用内部数据*/ #i1 { color: green; } </style> </head> <body> <div>老男孩</div> <div> <span id="i1">李杰</span> </div> <p>武沛齐</p> </body> </html> ``` #### 2.2.3 class 选择器 在body中找到所有class属性值匹配的标签。例如：找到所有class等于head的标签，让他绿了。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS学习</title> <style> .head { color: green; } </style> </head> <body> <div class="head">老男孩</div> <div> <a href="http://www.sb.com">李杰</a> </div> <p class="head">武沛齐</p> </body> </html> ``` #### 2.2.4 属性选择器 在body中找到所以class属性值匹配的标签。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS学习</title> <style> /* 找到class=head并且name=oldboy的标签 */ .head[name="oldboy"] { color: green; } </style> </head> <body> <div class="head" xx="oldboy" >老男孩</div> <div> <a href="http://www.sb.com">李杰</a> </div> <p class="head" xx="wupeiqi" >武沛齐</p> </body> </html> ``` 注意：属性和值都比较灵活，可以随意定制。 #### 2.2.5 后代选择器 在body标签中根据父子关系找到指定标签。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS学习</title> <style> .head ul .hat { color: green; } </style> </head> <body> <a href="#">老男孩</a> <div class="head"> <a class="hat">北京</a> <ul> <li>沙河</li> <li> <a class="hat">沙河高晓松Alex</a> </li> <li> <a>沙河大烧饼Alex</a> </li> </ul> </div> <div class="head"> <a href="#">武沛齐</a> </div> </body> </html> ``` #### 2.2.6 选择器分组 对选择器进行分组，无需重复编写。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS学习</title> <style> /* 不推荐写法 */ /* h1 { color: green; } .head h2{ color: green; } h3{ color: green; } h4{ color: green; } */ h1, .head h2, h3, h4 { color: green; } </style> </head> <body> <h1>李杰</h1> <h2>Alex</h2> <h3>沙河高晓松</h3> <h4>沙河小王子</h4> </body> </html> ``` ### 2.3 CSS样式 此部分将介绍前端开发中常用的一些css样式，通过以下示例来一步步完成美乐乐商城的项目。 #### 2.3.1 height 高度 & width 宽度 在html中如果想要给标签设置高度和宽度的话，需要使用height和width属性，并且在设置时有两种单位： - 像素，根据像素设置。 - 百分比，根据百分比设置。 *因网页高度无限制，所以默认高度无法设置百分比，如果非要设置，则需要父级标签设置固定高度，子标签便可使用百分比设置高度。* 注意：行内标签无法设置高度和宽度，如果想要设置必须转换为块级标签才能应用。 <img src="/media/uploads/2019/front/image-20191025180205596.png" alt="image-20191025180205596" style="zoom: 25%;" /> ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS学习</title> <style> .c1{ height: 60px; background-color: #2b669a; } .c2{ height: 60px; width: 200px; background-color: #2aabd2; } .c3{ height: 60px; width: 40%; background-color: gold; } .c4{ height: 60px; width: 60%; background-color: deeppink; } </style> </head> <body> <div class='c1'>标签1</div> <div class='c2'>标签2</div> <div class='c3'>标签3</div> <div class='c4'>标签4</div> </body> </html> ``` #### 2.3.2 display 显示 display属性有3个常用的值，用于修改属性的展示状态： - `display:block`，变为块级标签。 - `display:inline;`，变为行内标签。 - `display:inline-block`，变为行块内标签（行内和块级特性结合）。 - `display:none`，把标签隐藏。（设置display:none隐藏标签，移除之后显示标签） <img src="/media/uploads/2019/front/image-20191025183948873.png" alt="image-20191025183948873" style="zoom:20%;" /> ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS学习</title> </head> <body> <h1>div标签</h1> <div style="background-color: #2aabd2;display: inline;height: 60px;">我是div</div> <div style="background-color: #2aabd2;height: 60px;">我是div</div> <h1>span标签</h1> <span style="background-color:gold;height: 60px;">我是span</span> <span style="background-color:gold;display: block;height: 60px;">我是span</span> <!--总结，HTML标签中 div和span标签可以通过display属性完全互换，其实记住一个div就行了。--> <h1>特殊的display:inline-block</h1> <div style="display: inline-block;background-color: pink;height: 80px;">我是</div> <div style="display: inline-block;background-color: goldenrod;height: 80px;">武沛齐</div> </body> </html> ``` #### 2.3.3 float 浮动 float浮动用于实现N个标签并排存放（主要针对块级标签，行内标签默认就可以并排存放）。 页面布局时，一般都会使用div标签及float属性来实现，float设置时一般有两个值： - `float:left`，标签并排向左浮动。 - `float:right`，标签并排向右浮动。 <img src="/media/uploads/2019/front/image-20191025202630899.png" alt="image-20191025202630899" style="zoom: 20%;" /> ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS学习</title> </head> <body> <h1>向左浮动</h1> <div> <div style="float:left;width: 100px;background-color: green;">天堂</div> <div style="float: left;width: 100px;background-color: red;">地狱</div> </div> </body> </html> ``` <span style="color:red;">特别注意：</span>布局中如何使用了float浮动，就会出现脱离文档流的现象，如下图父标签没有被撑起来： <img src="/media/uploads/2019/front/image-20191025203427358.png" alt="image-20191025203427358" style="zoom:20%;" /> 为了防止脱离文档流现象，所以**以后只要出现浮动就记得要清楚浮动**，即： <img src="/media/uploads/2019/front/image-20191025203947752.png" alt="image-20191025203947752" style="zoom:20%;" /> ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS学习</title> </head> <body> <h1>正确示例</h1> <h2>向左浮动</h2> <div style="background-color: pink;"> <div style="float:left;color: green;">天堂</div> <div style="float: left;color: red;">地狱</div> <!-- 清除浮动，与使用了float属性的标签放在同一级 --> <div style="clear:both;"></div> </div> <h2>向右浮动</h2> <div> <div style="float:right;width: 100px;background-color: green;">天堂</div> <div style="float: right;width: 100px;background-color: red;">地狱</div> <div style="clear: both;"></div> </div> <h2>一个向左一个向右</h2> <div> <div style="float:left;width: 100px;background-color: green;">天堂</div> <div style="float: right;width: 100px;background-color: red;">地狱</div> <div style="clear: both;"></div> </div> </body> </html> ``` #### 2.3.4 font 字体 & 颜色 在前端开发过程中会经常调整 字体格式、字体大小、字体颜色。 - 字体格式 - 字体大小 - 字体加粗 - 字体颜色 <img src="/media/uploads/2019/front/image-20191025205916212.png" alt="image-20191025205916212" style="zoom:20%;" /> ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS学习</title> <style> .c1{ font-family: "Times New Roman",Georgia,Serif; } .c2{ font-family: Arial,Verdana,Sans-serif; } </style> </head> <body> <h1>字体格式</h1> <div class="c1">一白日依山尽，黄河入海流。</div> <div class="c2">欲穷千里目，更上一层楼。</div> <h1>字体大小</h1> <div style="font-size: 13px;">从此寻花问柳，闭口不谈一生厮守。</div> <div style="font-size: 16px;">从此红灯绿酒，再也不想牵谁的手。</div> <div style="font-size: 18px;">从此人海漂流，闭口不谈爱到白头。</div> <h1>字体加粗</h1> <div style="font-weight: 100;">我愿化身石桥 只为看一眼你的内裤。</div> <div style="font-weight: 300">中年男人哪有容易的事？</div> <div style="font-weight: 400">中年男人容易胖、容易老、容易头发变稀少。</div> <h1>字体颜色</h1> <div style="color: red;">远上寒山石径斜，白云生处有人家。</div> <div style="color:#f0ad4e">停车坐爱枫林晚，霜叶红于二月花。。</div> </body> </html> ``` #### 2.3.4 文字对齐方式 页面上如果想要设置文字对齐方式，可以分为以下情况： - 水平方向：左、中、右 - 垂直方向：上、中、下 <img src="/media/uploads/2019/front/image-20191025205916212.png" alt="image-20191025205916212" style="zoom:20%;" /> ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS学习</title> <style> .demo1{ width: 400px; } .demo2{ width: 400px; height: 100px; } </style> </head> <body> <h1>水平方向</h1> <div class="demo1" style="background-color: pink;text-align: left;">Alex媳妇满身大汗</div> <div class="demo1" style="background-color: darkseagreen;text-align: center;">王老汉</div> <div class="demo1" style="background-color: goldenrod; text-align: right;">武老汉</div> <h1>垂直方向</h1> <div class="demo2" style="background-color: pink;">Alex媳妇满身大汗</div> <div class="demo2" style="background-color: darkseagreen;line-height: 100px;">王老汉（推荐）</div> <div class="demo2" style="background-color: goldenrod;position: relative; "> <span style="position: absolute;bottom: 0;">武老汉，这个知识点下一节细讲</span> </div> </body> </html> ``` #### 2.3.6 padding 内边距 padding内边距作用是 为被应用的标签创建一部分内部间距。边距可以设置上、下、左、右方向。 ```css /* 单独设置上下左右内边距 */ padding-left:8px; padding-right:2px; padding-top:4px; padding-bottom:18px; /* padding:上 右 下 左; */ padding:10px 0 2px; 4px; /* padding:上下 右左; */ padding:7px 5px; /* padding:上下右左; */ padding:8px; ``` <img src="/media/uploads/2019/front/image-20191025215857309.png" alt="image-20191025215857309" style="zoom:20%;" /> ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS学习</title> </head> <body> <h1>无内边距</h1> <div style="height: 200px;border: 1px solid #dddddd"> <div style="background-color: darkseagreen;">听妈妈的话</div> <div> 小朋友你是否有很多问号，为什么别人在那看漫画，我却在学画画对着钢琴说话。 </div> </div> <h1>内边距示例1</h1> <div style="height: 200px;border: 1px solid #dddddd"> <div style="background-color: gold;padding: 10px;">听爸爸的话</div> <div style="padding: 10px;"> 小朋友你是否有很多问号，为什么别人在那看漫画，我却在学画画对着钢琴说话。 </div> </div> <h1>内边距示例2</h1> <div style="height: 200px;border: 1px solid #dddddd;padding: 10px;"> <div style="background-color: gold;">听爸爸的话</div> <div> 小朋友你是否有很多问号，为什么别人在那看漫画，我却在学画画对着钢琴说话。 </div> </div> </body> </html> ``` #### 2.3.7 margin 外边距 外边距用于相邻的标签之间增加距离用。边距可以设置上、下、左、右方向。 ```css /* 单独设置上下左右内边距 */ margin-left:8px; margin-right:2px; margin-top:4px; margin-bottom:18px; /* margin:上 右 下 左; */ margin:10px 0 2px; 4px; /* margin:上下 右左; */ margin:7px 5px; /* margin:上下右左; */ margin:8px; ``` <img src="/media/uploads/2019/front/image-20191025221355161.png" alt="image-20191025221355161" style="zoom:20%;" /> ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS学习</title> </head> <body> <div style="height: 200px;background-color: gold;"></div> <div style="height: 200px;background-color: pink;margin-top: 20px;"></div> </body> </html> ``` <span style="color:red;">特别注意：</span>关于外边距还有两个特殊的知识点需要学习。 - body标签默认有一个 8px的外边距，所以你会发现默认的页面都有一个“白边”。 <img src="/media/uploads/2019/front/image-20191025222420589.png" alt="image-20191025222420589" style="zoom:20%;" /> - 自动居中布局，你应该见过很多网站的内容都在中间放置，两边是空白。 ```css /* 只要指定宽度并设置margin为 0 auto 就可以实现div 自动居中布局*/ width:900px; margin:0 auto; ``` <img src="/media/uploads/2019/front/image-20191025223312552.png" alt="image-20191025223312552" style="zoom:20%;" /> #### 2.3.8 课堂练习：小米顶部导航 实现小米商城中顶部黑色导航条的功能（不需要写购物车图标）。 <img src="/media/uploads/2019/front/image-20191026130808810.png" alt="image-20191026130808810" style="zoom:33%;" /> ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小米商城</title> <link rel="shortcut icon" href="img/favicon.ico"> <style> body { margin: 0; font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif; } .container { width: 1190px; margin: 0 auto; } .left { float: left; } .right { float: right; } .header { height: 40px; line-height: 40px; background-color: #333; color: #b0b0b0; font-size: 12px; } .header .menus a, .header .account a, .header .car a { text-decoration: none; display: inline-block; padding: 0 5px; } .header .car a { display: inline-block; height: 40px; padding: 0 15px; margin-left: 20px; background-color: #424242; } </style> </head> <body> <div class="header"> <div class="container"> <div class="menus left"> <a>小米商城</a> <a>MIUI</a> <a>IoT</a> <a>云服务</a> </div> <div class="car right"><a>购物车（0）</a></div> <div class="account right"> <a>登录</a> <a>注册</a> <a>消息通知</a> </div> <div style="clear: both;"></div> </div> </div> </body> </html> ``` ### 2.4 今日作业 实现小米商城以下部分功能。 注意：前端页面效果可以通过很多种方式，没有标准答案，大家可以参考小米官网源码，也可以根据自己想法去实现。 <img src="/media/uploads/2019/front/image-20191026165930384.png" alt="image-20191026165930384" style="zoom: 33%;" />
用户评论
登录
或
注册
后才能发表评论
目录
学前必备
第一章 HTML
第二章 CSS（一）
第三章 CSS（二）
第四章 JavaScript
第五章 jQuery
第六章 BootStrap
回复