lesson02-css基础
视频1-回顾+作业讲解
回顾
17分钟：作业
0-作业讲解
ok
------------------------------------------------------
视频2-css选择器 //层叠样式表
html：骨架，网页结构
html+css：人 ，网页化妆师
常用样式-学习方法-ppt
1-css导入 //3种导入方式，优先就近原则
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 color:green; 9 } 10 p{ 11 color:green; 12 } 13 </style> 14 <link href="1.css" type="text/css" rel="stylesheet"> 15 </head> 16 <body> 17 <!--标签内设置--> 18 <p style="color:red;">css导入方式一</p> 19 <!--head里面的style标签内设置--> 20 <div>css导入方式二</div> 21 <!--外部css文件,要在head里面的link标签引入--> 22 <h3>css导入方式三</h3> 23 <!--就近原则--> 24 </body> 25 </html>
1.css代码
1 h3{ 2 color:blue; 3 } 4 p{ 5 color:blue; 6 }
2-选择器 //
基本选择器：p，class，id
后代选择器：/*操作的是该元素的子代,孙子,孙子的孙子....*/---------div.test p //操作所有p标签
子代选择器：仅作用在该元素的子代---------div.test>p //
兄弟选择器：目标元素其后的同级标签--------- #test3~p
<div id="test3">兄弟相邻选择器的目标div</div>
<p class="test">山雨欲来风满楼</p>
<p id="test1">近水楼台先得月</p>
相邻选择器：#test3+p
全选择器: *
分组选择器: span,strong
↓，下面代码；
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /*基本选择器*/ 8 /*标签选择器*/ 9 p{ 10 color:red; 11 } 12 /*class选择器*/ 13 .test{ 14 color:green; 15 } 16 /*id选择器:唯一*/ 17 #test1{ 18 color:blue; 19 } 20 21 /*后代选择器*/ 22 /*操作的是该元素的子代,孙子,孙子的孙子....*/ 23 div.test p{ 24 font-size:50px; 25 } 26 /*子代选择器*/ 27 /*仅作用在该元素的子代*/ 28 div.test>p{ 29 font-weight: bolder; 30 } 31 /*兄弟选择器*/ 32 /*目标元素其后的同级标签*/ 33 #test3~p{ 34 font-size:50px; 35 } 36 /*相邻选择器*/ 37 #test3+p{ 38 color:red; 39 } 40 /*全选择器*/ 41 *{ 42 margin:0; 43 padding:0; 44 } 45 /*分组选择器*/ 46 /*span{*/ 47 /*color:skyblue;*/ 48 /*}*/ 49 /*strong{*/ 50 /*color:skyblue;*/ 51 /*}*/ 52 span,strong{ 53 color:skyblue; 54 } 55 </style> 56 </head> 57 <body> 58 <span>我是谁</span> 59 <strong>我是我</strong> 60 <p>前面的参照物</p> 61 <div id="test3">兄弟相邻选择器的目标div</div> 62 <p class="test">山雨欲来风满楼</p> 63 <p id="test1">近水楼台先得月</p> 64 <div class="test">千山鸟飞绝 65 <p>1</p> 66 <div>2 67 <p>sun1</p> 68 <p>sun2</p> 69 </div> 70 <h3>3</h3> 71 </div> 72 <div id="test2">万径人踪灭</div> 73 </body> 74 </html>
3-伪类选择器 //鼠标滑过时改变状态
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 a:hover{ 8 color:red; 9 font-size:50px; 10 } 11 div{ 12 height:200px; 13 width:200px; 14 background: skyblue; 15 } 16 div:hover{ 17 background: blueviolet; 18 } 19 </style> 20 </head> 21 <body> 22 <a href="https://www.baidu.com" target="_blank">点击这里去百度</a> 23 <div>我就是我</div> 24 </body> 25 </html>
鼠标移动到百度会改变字体大小
鼠标移动到蓝色会改变颜色
---------------------------------------------------------------
视频3-样式操作
4-字体样式操作 //字体样式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 /*font-family:字体 9 默认微软雅黑Microsoft-Yahei,字体中有多个字体时，如果前面的字体没有，就用后面的字体 10 */ 11 font-family: 华文行楷,华文中宋; 12 /*font-size:字体大小（单位：px rem % em) 13 px 谷歌浏览器默认字体大小16px,最小是12px 14 rem 相当于html（根标签）的字体大小倍数（16px*n） 15 em 相对于父级字体尺寸倍数 16 % 相对于父容器中字体的%调整 17 */ 18 font-size:30px; 19 /*font-style:字体样式 20 normal 默认 文字正常 21 italic 斜体 22 oblique 斜体 23 */ 24 font-style: italic; 25 /*font-style: oblique;*/ 26 27 /*font-weight:字体粗细 28 normal 默认 29 lighter 较细 30 bold 加粗 31 bolder 很粗 32 给值：只能是100-900的整百数 33 400相当于正常粗细，700相当于bold 34 */ 35 font-weight: bold; 36 37 /*color 文字颜色 38 关键字 39 英文单词 eg：red green 40 16进制（0-9 a-f） 41 #5544aa #54a #abd456 42 #dddddd #ddd 43 rgb（0-255,0-255,0-255） 44 rgba（0-255,0-255,0-255，0-1） 45 a alpha（透明度） 46 0 完全透明 47 1 完全不透明 48 */ 49 /*color:red;*/ 50 /*color:#666666;*/ 51 /*color:rgb(255,125,25);*/ 52 color:rgba(255,125,25,1); 53 } 54 </style> 55 </head> 56 <body> 57 <div>我就是我</div> 58 </body> 59 </html>
5-文本样式操作 //段落
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /*text-align+line-height*/ 8 p{ 9 /*text-indent: 2em;!*首行缩进*!*/ 10 /*text-transform: uppercase;*//*大写*/ 11 /*text-transform: lowercase;*//*小写*/ 12 text-transform:capitalize;/*首字母大写*/ 13 } 14 div{ 15 width:200px; 16 border:1px solid red; 17 height:200px;/*上下居中*/ 18 line-height:200px;/*上下居中*/ 19 text-align: center;/*左右居中*/ 20 margin-bottom:20px; 21 } 22 a{ 23 /*none;去掉下划线/overline；上划线/underline;下划线/line-through；删除线 */ 24 text-decoration: none; 25 } 26 /*文本超出部分,用"..."显示*/ 27 p{ 28 height:100px; 29 width:100px; 30 border:1px solid deepskyblue; 31 /*white-space:换行方式 32 normal 正常换行 33 nowrap 不换行 34 */ 35 white-space: nowrap;/*不换行*/ 36 overflow: hidden;/*超出部分隐藏*/ 37 text-overflow: ellipsis;/*文本超出部分使用...*/ 38 } 39 </style> 40 </head> 41 <body> 42 <p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字feifei I LOVE YOU</p> 43 <div>我就是我</div> 44 <a href="javascript:void(0);">我是a,我不要下划线</a> 45 </body> 46 </html>
点击，【我是a，我不要下划线】可以改变字体颜色
6-背景样式操作 //图片背景
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /*css注释*/ 8 .box{ 9 width:800px; 10 height:400px; 11 border:1px solid red; 12 13 /*背景色*/ 14 /*background-color:skyblue;*/ 15 /*背景图片*/ 16 /*background-image: url("img/1.jpg");*/ 17 /*background-repeat: no-repeat;*/ 18 /*background-position: -360px -350px;*/ 19 /*background-size: contain;!*等比例缩放,一旦某一个方向碰到边就停止缩放,可能没有铺满整个背景*!*/ 20 /*background-size: cover;!*等比例缩放,铺满整个背景,遇到第二条边就停止缩放*!*/ 21 /*contain:可以看见整张图,但是不一定铺满整个背景 22 cover:铺满整个背景,但并比一定可以看见整张图*/ 23 /*background:color image repeat position/size*/ 24 background: url("img/1.jpg") no-repeat top/cover; 25 } 26 </style> 27 </head> 28 <body> 29 <div class="box"></div> 30 <!----> 31 </body> 32 </html>
---------------------------------------------------------------
视频4-总结和作业
1 css入门 2 1.css:美化 3 2.css引入方式三:就近原则 4 A.标签内通过style属性 5 B.head标签里的style标签 6 C.head标签里的link标签引入外部css文件 7 3.css选择器 8 A.基本选择器:标签选择器,权重值:1/class选择器,权重值:10/id选择器,权重值:100 9 B. 子选择器:> 10 后代选择器:空格 11 兄弟选择器:~,后面 12 相邻选择器:+,后面,紧挨着, 13 分组选择器:逗号 14 全选择器:* 15 伪类选择器: :hover 16 4.样式操作 17 A.字体操作:font- 18 B.文本操作:text- 19 文字上下居中:height+line-height两值相等 20 文字左右居中: text-align:center; 21 c.背景操作 22 background:color url("") repeat position/size;
作业--登陆页面
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin:0; 9 padding:0; 10 } 11 body{ 12 background: #e8dede; 13 } 14 a{ 15 text-decoration: none; 16 } 17 .top{ 18 height:60px; 19 width:100%; 20 background: black; 21 } 22 .middle{ 23 height:800px; 24 width:100%; 25 /*border:1px solid #e8dede;*/ 26 /*background: #e8dede;*/ 27 } 28 .middle .contain{ 29 height:600px; 30 width:480px; 31 background: white; 32 margin:40px auto; 33 } 34 .middle .contain .top-contain{ 35 height:50px; 36 width:440px; 37 /*background: blueviolet;*/ 38 margin-left:20px; 39 border-bottom: 1px solid lightgray; 40 line-height: 50px; 41 } 42 .middle .contain .top-contain h3{ 43 float:left; 44 font-weight: normal; 45 font-size:20px; 46 border-bottom: 3px solid blueviolet; 47 /*以下实现下边框在盒子内*/ 48 height:50px; 49 box-sizing: border-box; 50 } 51 .middle .contain .top-contain a{ 52 float:right; 53 font-size:20px; 54 color:skyblue; 55 } 56 .middle .contain .regist-contain{ 57 margin-left:20px; 58 } 59 .middle .contain .regist-contain input{ 60 height:50px; 61 width:440px; 62 margin-top:20px; 63 font-size:20px; 64 text-indent: 1em; 65 border-radius: 5px;/*小圆角*/ 66 border:1px solid gray; 67 } 68 .middle .contain .regist-contain .inp{ 69 width:300px; 70 } 71 .middle .contain .regist-contain a{ 72 border:1px solid #52a6f7; 73 display: inline-block;/*具有行内元素的特点,但可以设置宽高*/ 74 height:50px; 75 width:130px; 76 margin-left:10px; 77 line-height:50px; 78 border-radius: 5px; 79 text-align: center; 80 } 81 .middle .contain .regist-contain .btn{ 82 background: #52a6f7; 83 } 84 .bottom .bot1{ 85 height:120px; 86 width: 100%; 87 background: grey; 88 } 89 .bottom .bot2{ 90 height:60px; 91 width:100%; 92 background: black; 93 } 94 </style> 95 </head> 96 <body> 97 <div class="top"></div> 98 <div class="middle"> 99 <div class="contain"> 100 <div class="top-contain"> 101 <h3>请注册</h3> 102 <a href="javascript:void(0);">立即登录></a> 103 </div> 104 <div class="regist-contain"> 105 <form action="" method="post"> 106 <input type="text" placeholder="请输入手机号" name="phone"><br> 107 <input type="text" placeholder="请输入短信验证码" name="cookie" 108 class="inp"><a href="javascript:void(0);">发送验证码</a><br> 109 <input type="text" placeholder="请输入用户名" name="usr"><br> 110 <input type="password" placeholder="请输入密码" name="psw"><br> 111 <input type="password" placeholder="请再次输入密码" name="pswD"><br> 112 <input type="text" placeholder="请输入图形验证码" name="cookie" 113 class="inp"><a href="javascript:void(0);"><img>此处为图片</a><br> 114 <input type="submit" value="立即注册" class="btn"> 115 </form> 116 </div> 117 </div> 118 </div> 119 <div class="bottom"> 120 <div class="bot1"></div> 121 <div class="bot2"></div> 122 </div> 123 </body> 124 </html>
