今日内容：css全部
1.样式操作
宽和高
width属性可以为元素设置宽度
height属性可以为元素设置高度
块级标签才能设置宽度，行内标签的宽度由内容来决定。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>设置长宽</title> 6 <style> 7 div { 8 height: 50px; 9 width: 100px; 10 } 11 /*给行内标签设置长宽没有任何影响*/ 12 span { 13 height: 50px; 14 width: 100px; 15 } 16 </style> 17 </head> 18 <body> 19 <div>div</div> 20 <span>span</span> 21 </body> 22 </html>
2.字体属性
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 p { 8 font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif; 9 font-size: 24px;/*字体大小*/ 10 font-weight: lighter;/*更细*/ 11 font-weight: bold;/*粗体*/ 12 font-weight: bolder;/*更粗*/ 13 14 /*color: red;*/ 15 /*color: #4e4e4e;*/ 16 /*color: rgb(128,128,128);*/ 17 /*color: rgba(0,0,0,1.0); 最后一个参数只能调节颜色的透明度 不能调节文本*/ 18 } 19 </style> 20 </head> 21 <body> 22 <p>以把多个字体名称作为一个“回退”系统来保存。</p> 23 </body> 24 </html>
3.文字属性
1 文字对齐 2 3 text-align 属性规定元素中文本的水平对齐方式。 4 left:左对齐，默认值 5 right:右对齐 6 center:居中对齐 7 justify:俩端对齐 8 9 10 文字装饰 11 text-decoration 属性用来给文字添加特殊效果 12 13 none:默认，定义标准的文本 14 underline:定义文本下的一条线 15 overline:定义文本上的一条线 16 line-through:定义穿过文本下的一条线 17 inherit:继承父元素的text-decoration属性的值 18 19 <!DOCTYPE html> 20 <html lang="en"> 21 <head> 22 <meta charset="UTF-8"> 23 <title>Title</title> 24 <style> 25 p { 26 font-size: 16px;/*字体大小*/ 27 text-indent: 32px;/*首行空格，这个是空俩个字体*/ 28 /*text-align: center;*/ 29 /*text-align: left;*/ 30 /*text-align: right;*/ 31 /*text-align: justify;*/ 32 33 /*text-decoration: underline;*/ 34 /*text-decoration: overline;*/ 35 /*text-decoration: line-through;*/ 36 } 37 a { 38 text-decoration: none; 39 color: orange; 40 } 41 a:hover { 42 color: blue; 43 } 44 </style> 45 </head> 46 <body> 47 <p>属性规定元素中的文本的水平对齐方式。</p> 48 <s>属性规定元素中的文本的水平对齐方式。</s> 49 <a href="http://www.xiaohuar.com">属性规定元素中的文本的水平对齐方式。</a> 50 </body> 51 </html>
4.背景属性
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /*p {*/ 8 /* color: white;*/ 9 /* background-color: black;*/ 10 /*}*/ 11 div { 12 /*background-color: orange;*/ 13 height: 500px; 14 width: 500px; 15 background-image: url("111.png"); /*背景图片 默认是填充整个区域 如果大小不够 默认重复填充*/ 16 /*background-repeat: no-repeat;*/ /*背景图片不平铺*/ 17 /*background-repeat: repeat-x;*/ /*背景图片只在水平方向上平铺*/ 18 /*background-repeat: repeat-y;*/ /*背景图片只在垂直方向上平铺*/ 19 /*background-position: center center;*/ /*居中* / 20 background-position: 10px 30px; /*第一个参数调节的是左右 第二个参数调节的上下*/ 21 22 /*background: orange url("代码/111.png") no-repeat center center;*/ 23 } 24 </style> 25 </head> 26 <body> 27 <!--<p>背景图片平铺排满整个网页</p>--> 28 29 <div> 30 31 </div> 32 </body> 33 </html>
5.背景图片实例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .c1 { 8 height: 400px; 9 background-color: red; 10 } 11 .c2 { 12 height: 400px; 13 background-color: green; 14 } 15 .c3 { 16 height: 500px; 17 background: url("代码/111.png"); 18 background-attachment: fixed;/*把图片固定在哪里,不会动*/ 19 } 20 .c4 { 21 height: 400px; 22 background-color: yellow; 23 } 24 25 </style> 26 </head> 27 <body> 28 <div class="c1"></div> 29 <div class="c2"></div> 30 <div class="c3"></div> 31 <div class="c4"></div> 32 </body> 33 </html>
6.边框
1 none：无边框 2 dotted：点状虚线边框 3 dashed：矩形虚线边框 4 solid：实线边框 5 6 7 <!DOCTYPE html> 8 <html lang="en"> 9 <head> 10 <meta charset="UTF-8"> 11 <title>边框</title> 12 <style> 13 /*div {*/ 14 /* !*border-color: red;*!*/ 15 /* !*border-style: solid;*!*/ 16 /* !*border-width: 1px;*!*/ 17 /*通常用这种方法来写,有颜色,边框样式,边框宽度*/ 18 /* !*border: 3px solid black;*!*/ 19 /* !*border: solid 3px blue;*!*/ 20 /* border: dashed green 3px;*/ 21 /*}*/ 22 /*每一遍都用不同的边框样式*/ 23 p { 24 border-left: 3px solid red; 25 border-bottom: 5px dotted green; 26 border-top: 1px dashed orchid; 27 border-right: 10px solid dimgrey; 28 } 29 30 </style> 31 </head> 32 <body> 33 <div> 34 使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。 35 </div> 36 <p>使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上</p> 37 </body> 38 </html>
7.画圆
1 用这个属性能够实现圆角边框的效果 2 将border-radius设置为长或者高的一半即可得到一个圆形 3 4 <!DOCTYPE html> 5 <html lang="en"> 6 <head> 7 <meta charset="UTF-8"> 8 <title>Title</title> 9 <style> 10 div { 11 height: 400px; 12 width: 200px; 13 background: red; 14 border: 3px solid black;/*设置圆的边框*/ 15 border-radius: 50%; /*设置圆的时候要记住,高和框必须是一致的,不然就是椭圆的*/ 16 } 17 </style> 18 </head> 19 <body> 20 <div></div> 21 </body> 22 </html>
8.盒子模型
1 可以比喻成快递盒 2 俩个快递盒之间的距离（标签与标签之间的距离）称之为 外边距（margin） 3 纸盒的厚度（边框） 称之为边框（border） 4 内部的物品到盒子的距离（内部文本与边框的距离） 称之为 内边距（padding） 5 物品本身得到大小（文本大小） 称之为内容（content） 6 7 <!DOCTYPE html> 8 <html lang="en"> 9 <head> 10 <meta charset="UTF-8"> 11 <title>Title</title> 12 <style> 13 body { 14 /*margin-top: 0;*/ /*上*/ 15 /*margin-right: 0;*/ /*右*/ 16 /*margin-bottom: 0;*/ /*下*/ 17 /*margin-left: 0;*/ /*左*/ 18 /*margin: 0; !*上下左右全为0*!*/ 19 /*margin: 10px 20px; !* 上下10px 左右20px*!*/ 20 /*margin: 10px 20px 30px; !* 上 左右 下*!*/ 21 /*margin: 10px 20px 30px 40px; !* 上 右 下 左 顺时针*!*/ 22 margin: 0; 23 } 24 .c1 { 25 height: 400px; 26 width: 400px; 27 border: 3px solid black; 28 } 29 .c2 { 30 background-color: green; 31 height: 50px; 32 width: 50px; 33 border: 3px solid red; 34 /*margin: 0 auto;*/ /*常见居中*/ 35 } 36 p { 37 border: 3px solid red; 38 /*padding-top: 20px;*/ 39 /*!*padding-left: 10px;*!*/ 40 /*padding-bottom: 30px;*/ 41 /*padding-right: 50px;*/ 42 text-align: right; /*默认基准点是往左的，可以通过align改为往右*/ 43 44 padding: 10px; /* padding 同样支持1 2 3 4个参数 效果同margin*/ 45 } 46 </style> 47 </head> 48 <body> 49 <!--<div class="c1"></div>--> 50 <!--<div class="c2"></div>--> 51 <p>我们换个p</p> 52 <!--<p>我们换个p</p>--> 53 54 <div class="c1"> 55 <div class="c2"></div> 56 </div> 57 </body> 58 </html>
九.浮动
1 浮动的元素，是脱离正常文档流的，也就意味着没有独占一行一说，也不需要再独占原来的位置，如果元素浮动起来会造成父标签塌陷，等于说他飘在空中了，父标签没有内容来撑开，所以会塌陷 2 3 <!DOCTYPE html> 4 <html lang="en"> 5 <head> 6 <meta charset="UTF-8"> 7 <title>Title</title> 8 <style> 9 body { 10 margin: 0; /*把标签与标签之间的空白去除*/ 11 } 12 #d1 { 13 border: 3px solid black; /*设置边框*/ 14 } 15 .c1 { 16 height: 100px; 17 width: 100px; 18 background-color: red; 19 float: left; /*向左浮动*/ 20 } 21 .c2 { 22 height: 100px; 23 width: 100px; 24 background-color: black; 25 float: left; 26 } 27 /*去除浮动的公式，那个地方需要去除浮动，就让那个标签用类继承一下就可以了*/ 28 .clearfix:after { 29 content: ''; 30 display: block; 31 clear: both; /* 左右两边都不能有浮动的元素*/ 32 } 33 </style> 34 </head> 35 <body> 36 <div id="d1" class="clearfix"> 37 <div class="c1"></div> 38 <div class="c2"></div> 39 40 </div> 41 42 </body> 43 </html>
10.利用浮动实现左右布局
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 body { 8 margin: 0; 9 } 10 .blog-left { 11 float: left; /*左浮动*/ 12 width: 20%; 13 height: 1000px; 14 background-color: #4e4e4e; 15 } 16 .blog-right { 17 float: right; /*右浮动*/ 18 width: 80%; 19 height: 1000px; 20 background-color: #eeeeee; 21 } 22 </style> 23 </head> 24 <body> 25 <div class="blog-left"></div> 26 <div class="blog-right"> 27 <div>div</div> 28 <div>div</div> 29 <div>div</div> 30 <div>div</div> 31 <div>div</div> 32 </div> 33 </body> 34 </html>
11.溢出
1 overflow溢出属性 2 visible 默认值。内容不会被修剪，会呈现在元素框之外。 3 hidden 内容会被修剪，并且其余内容是不可见的。 4 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 5 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 6 inherit 规定应该从父元素继承 overflow 属性的值。 7 8 ps： 9 overflow（水平和垂直均设置） 10 overflow-x（设置水平方向） 11 overflow-y（设置垂直方向） 12 13 <!DOCTYPE html> 14 <html lang="en"> 15 <head> 16 <meta charset="UTF-8"> 17 <title>Title</title> 18 <style> 19 div { 20 height: 50px; 21 width: 50px; 22 border: 3px solid red; 23 overflow: hidden; 24 } 25 </style> 26 </head> 27 <body> 28 <div> 29 <p>默认值。内容不会被修剪，会呈现在元素框之外。会呈现在元素框之外。会呈现在元素框之外。会呈现在元素框之外。会呈现在元素框之外。</p> 30 </div> 31 </body> 32 </html>
12.圆形头像实例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>原型头像</title> 6 <style> 7 body { 8 margin: 0; 9 background-color: darkgray; 10 } 11 div { 12 height: 120px; 13 width: 120px; 14 border-radius: 50%; 15 border: 5px solid white; 16 overflow: hidden; 17 } 18 img { 19 /*max-width: 100%;*/ 20 width: 100%; 21 } 22 </style> 23 </head> 24 <body> 25 <div> 26 <img src="111.png" alt=""> 27 </div> 28 </body> 29 </html>
13.定位
1 定位： 2 所有的标签默认都是静态的，无法直接调节位置，你需要先将其设置成可定位态。 3 4 1.相对定位 5 相对于标签自身原来的位置 6 2.绝对定位 7 相对于已经定位过的父标签，但只给你一个父标签的长度，让你做定位 8 3.固定定位 9 相对于浏览器的窗口，固定在摸个位置 10 position:relative 相对定位 11 position:absolute 绝对定位 12 position:fixed 固定定位 13 14 15 <!DOCTYPE html> 16 <html lang="en"> 17 <head> 18 <meta charset="UTF-8"> 19 <title>Title</title> 20 <style> 21 body { 22 margin: 0; 23 } 24 /*.c1 {*/ 25 /* height: 50px;*/ 26 /* width: 50px;*/ 27 /* background-color: green;*/ 28 /* !*top: 100px;*!*/ 29 /* !*left: 100px;*!*/ 30 /* !*position: static; !*默认是静态的 不能动位置*!*!*/ 31 /* !*position: relative; !*相对定位*!*!*/ 32 /* !*position: relative;*!*/ 33 /*}*/ 34 35 /*.c2 {*/ 36 /* height: 200px;*/ 37 /* width: 200px;*/ 38 /* background-color: red;*/ 39 /* !*top: 50px;*!*/ 40 /* !*left: 50px;*!*/ 41 /* !*position: absolute; !*绝对定位*!*!*/ 42 /*}*/ 43 .c1 { 44 border: 3px solid red; 45 height: 100px; 46 width: 100px; 47 position: fixed;/*固定在那里*/ 48 right: 20px; 49 bottom: 50px; 50 } 51 </style> 52 </head> 53 <body> 54 <!--<div class="c1">--> 55 <!-- <div class="c2"></div>--> 56 <!--</div>--> 57 <div class="c1"> 58 回到顶部 59 </div> 60 <div style="height: 1000px;background-color: green"></div> 61 <div style="height: 1000px;background-color: black"></div> 62 <div style="height: 1000px;background-color: blue"></div> 63 64 </body> 65 </html>
14.验证是否脱离文档流
1 脱离文档流 2 1.浮动的元素都是脱离文档流的 3 2.绝对定位是脱离文档流的 4 3.固定定位也是脱离文档流的 5 6 不脱离文档流的 7 1.相对定位不脱离文档流 8 9 10 <!DOCTYPE html> 11 <html lang="en"> 12 <head> 13 <meta charset="UTF-8"> 14 <title>Title</title> 15 <style> 16 body { 17 margin: 0; 18 } 19 </style> 20 </head> 21 <body> 22 <!--<div style="background-color: red;height: 50px;width: 50px;position: relative;left: 50px;"></div>--> 23 <!--<div style="background-color: blue;height: 50px;width: 50px"></div>--> 24 25 26 <!--<div style="background-color: red;height: 50px;width: 50px;position: relative"></div>--> 27 <!--<div style="background-color: blue;height: 50px;width: 50px;position: absolute;left: 50px"></div>--> 28 <!--<div style="background-color: orchid;height: 50px;width: 50px"></div>--> 29 30 31 <div style="background-color: red;height: 50px;width: 50px;"></div> 32 <div style="background-color: blue;height: 50px;width: 50px;position: fixed;right: 20px;bottom: 50px;border: 5px solid red"></div> 33 <div style="background-color: orchid;height: 50px;width: 50px"></div> 34 </body> 35 </html>
15.模态框
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 body { 8 margin: 0; 9 } 10 11 .cover { 12 position: fixed; 13 top: 0; 14 left: 0; 15 right: 0; 16 bottom: 0; 17 background-color: rgba(128,128,128,0.45); 18 z-index: 999; 19 } 20 21 .modal { 22 height: 200px; 23 width: 400px; 24 background-color: white; 25 position: fixed; 26 left: 50%; 27 top: 50%; 28 z-index: 1000; 29 margin-top: -100px; 30 margin-left: -200px; 31 } 32 33 </style> 34 </head> 35 <body> 36 <div>我是最底层的</div> 37 <div class="cover"></div> 38 <div class="modal"> 39 <p><label for="d1">username:<input type="text" id="d1"></label></p> 40 <p><label for="d2">password:<input type="text" id="d2"></label></p> 41 <input type="submit"> 42 </div> 43 </body> 44 </html>
16.透明度比较
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .c1 { 8 background-color: rgba(128,128,128,0.9); 9 } 10 .c2 { 11 opacity: 0.5; 12 background-color: rgb(128,128,128); 13 } 14 </style> 15 </head> 16 <body> 17 <p class="c1">111</p> 18 <p class="c2">222</p> 19 </body> 20 </html>
17.去除ul标签丑陋的部分
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 ul { 8 list-style-type: none; 9 padding: 0; 10 } 11 </style> 12 </head> 13 <body> 14 <ul> 15 <li><a href="">哈哈1</a></li> 16 <li><a href="">哈哈2</a></li> 17 <li><a href="">哈哈3</a></li> 18 </ul> 19 </body> 20 </html>
18.display属性
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #d1 { 8 /*display: none; !*标签不显示 并且也不再占用位置*!*/ 9 /*visibility: hidden; !* 标签不显示 但是位置还在*!*/ 10 } 11 span { 12 display: inline-block; /* 既有块儿级标签能设置长宽的特点 又有行内标签 都在一行的特点*/ 13 /*height: 400px;*/ 14 /*width: 400px;*/ 15 background-color: red; 16 border: solid 3px black;/* black默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。*/ 17 } 18 .c1 { 19 height: 50px; 20 width: 50px; 21 background-color: red; 22 23 display: inline;/*按行内元素显示，此时再设置元素的width、height、 24 margin-top、margin-bottom和float属性都不会有什么影响。*/ 25 } 26 .c2 { 27 height: 50px; 28 width: 50px; 29 background-color: green; 30 display: inline; 31 } 32 </style> 33 </head> 34 <body> 35 <!--<p id="d1">123</p>--> 36 <!--<p>123</p>--> 37 <span>span1</span> 38 <span>span2</span> 39 <!--<div class="c1">div1</div>--> 40 <!--<div class="c2">div2</div>--> 41 </body> 42 </html>