CSS基本概念
css语法结构
每个css由两部分组成：选择器和声明,声明又包括属性和属性值(json格式key:value)
选择器
有如下几种：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css爱之初体验</title> 6 <style type="text/css"> 7 #show2{color:gold;font-size: 40px} 8 .s1{color: red;font-size: 15px} 9 span{color: #0000cc;font-size: 20px} 10 .s2 span{ 11 color: #05B2D2;font-size: 40px; 12 } 13 p,h1,a{color: #0000cc;font-size: 5px} 14 #show1{color:gold;} 15 .show {color:pink;} 16 h1 {color:red;} 17 * {color:green;} <!--通用选择器--> 18 </style> 19 </head> 20 <body> 21 <!--行内样式--> 22 <div style="color: red;font-size: 35px">css第一部分</div> 23 <!--标签选择器--> 24 <span>css爱之初体验1</span> 25 <!--id选择器--> 26 <div id="show2">css爱之初体验2</div> 27 <!--类选择器--> 28 <div class="s1">css爱之初体验3</div> 29 <!--包含选择器--> 30 <div class="s2"> 31 <span>css爱之初体验4</span> 32 <a>css爱之初体验5</a> 33 </div> 34 <!--分组选择器--> 35 <p>css爱之初体验6</p> 36 <h1>css爱之初体验7</h1> 37 <a>css爱之初体验8</a> 38 <div>css爱之初体验9</div> 39 <!--行内样式>id选择器>类选择器>标签选择器>通用选择器--> 40 <h1 id="show1" class="show" style="color:gray;">这是选择器优先级测试</h1> 41 </body> 42 </html>
样式表
内部样式和行内样式，上文已写。
外部样式:
使用内容样式容易和html代码混淆，我们单独把样式内容单独写入一个文件，叫外部样式，使用link标签引入。如下：
<head> <meta charset="UTF-8"> <title>css爱之初体验</title> <link href="a.css" type="text/css" rel="stylesheet"> </head>
段落文本属性及边框
边框设置：宽度 样式 颜色
文本行高：line-height
水平对齐：text-align
1 <style> 2 div{ 3 width:400px; 4 height: 200px; 5 border:1px solid red; 6 /*border- 1px;/*边框粗细*/ 7 /*border-color: red; 8 border-style: solid; /*实线*/ 9 line-height: 200px; 10 text-align: right;/*靠右*/ 11 color: red; 12 font-size:25px; 13 } 14 </style> 15 <div>段落文本测试</div>
文字属性
字号：font-size:18px
文字颜色：color：red
背景属性
背景颜色：background-color
背景图像：background-image：url(图像路径)
背景重复:background-repeat:repeat-x 只平铺x轴
背景位置：background-position-x:200px 向右挪200px
1 <style type="text/css"> 2 div{ 3 background-color: red; 4 } 5 #myimg{ /*背景图像设置*/ 6 width: 150px; 7 height: 150px; 8 border: 1px solid red; 9 background-image: url("images/01.jpg"); 10 /*background-repeat: repeat;/*铺满整个页面*/ 11 /*background-repeat:repeat-x;/*在x轴平铺*/ 12 background-position-x:100px ; 13 background-position-y:50px ; 14 } 15 </style> 16 <div> 17 背景颜色测试 18 </div> 19 <div id="myimg"> 20 <!--img src="images/01.jpg" alt=""--> 21 你是我的下苹果 22 你是我的下苹果 23 你是我的下苹果 24 你是我的下苹果 25 你是我的下苹果 26 </div>
伪类选择器
:link 定义超链接默认样式
:visited 定义访问过的样式
:hover 定义鼠标经过的样式
:active 定义鼠标按下的样式
代码如下：
1 <style> 2 a:link{color: #2459a2} 3 a:visited{color:yellowgreen} 4 a:hover{color:green} 5 a:active{color:yellow} 6 </style> 7 </head> 8 <body> 9 <a href="http://www.baidu.com">百度</a> 10 </body>
margin外边距填充属性
边距属性
margin是对外元素的距离，用来控制元素本身的浮动位置
margin 四边距
margin-top 上边距
margin-bottom 下边距
margin-left 左边距
margin-right 右边距
代码如下：
1 <style> 2 body{ 3 margin:0; 4 } 5 #main{ 6 width: 400px; 7 height:300px; 8 border:1px solid red; 9 } 10 #content{ 11 width:200px; 12 height:150px; 13 border:1px solid blue; 14 /*margin-top: 10px;*/ 15 /*margin-left: 10px;*/ 16 margin:10px 10px; 17 } 18 </style> 19 </head> 20 <body> 21 <div id="main"> 22 <div id="content"> 23 24 </div> 25 </div> 26 </body>
提供一个，用于四边；
提供两个，第一个用于上下，第二个用于左右；
提供三个，第一个用于上，第二个用于左右，第三个用于下；
提供四个，将按上--右--下--左的顺序作用于四边
padding内边框填充属性
padding 四边填充
padding-top 上填充
padding-bottom 下填充
padding-left 左填充
padding-right 右填充
代码如下：
1 <style> 2 #main{ 3 width:300px; 4 height: 200px; 5 border:1px solid red; 6 padding: 100px 150px; 7 } 8 </style> 9 </head> 10 <body> 11 <div id="main"> 12 dsnandsadsamkdmskanfdjsanf 13 </div> 14 </body>
布局属性float
float:left 左浮
float:right 右浮
1 <style> 2 body{margin: 0} 3 .one{ 4 width: 200px; 5 height: 100px; 6 border: solid 1px red; 7 float: left; 8 margin: 0 10px; 9 } 10 </style> 11 </head> 12 <body> 13 <div class="one">one</div> 14 <div class="one">two</div> 15 <div class="one">three</div> 16 <div class="one">four</div> 17 </body>
头部制作：
1 <style type="text/css"> 2 body{margin: 0} 3 .pg-head{ 4 height: 30px; 5 background-color: #999; 6 } 7 .info_login{float: left} 8 .info_user{float: right} 9 .main{ 10 width: 780px; 11 margin: 0 auto; 12 line-height: 30px; 13 font-size: 12px; 14 } 15 </style> 16 </head> 17 <body> 18 <div class="pg-head"> 19 <div class="main"> 20 <div class="info_login">请登录</div> 21 <div class="info_user"> 22 <a href="#">我的淘宝</a> 23 <a href="#">我的支付宝</a> 24 </div> 25 </div> 26 27 </div> 28 </body>
display属性
block:将元素变成块级标签，可以设置高度和宽度
inline:将元素变成行内标签，不能设置高度和宽度
inlin-block:同时具有两种
注：块级标签始终占据一整行，可以设置高度和宽度，行内标签有多少占多少，不能设置高度和宽度
1 <body> 2 <span style=" 100px;height: 200px;border: 2px solid red;display: block;">display属性</span> 3 </body>
overflow属性
溢出处理属性
overflow-x 设置水平方向
overflow-y 设置垂直方向
overflow 水平垂直都设置(显示不完会自动出现下拉菜单)
1 <style> 2 #info{ 3 width:200px; 4 height:100px; 5 background-color: red; 6 overflow: auto; 7 } 8 </style> 9 </head> 10 <body> 11 <div id="info"> 12 dsnkadnksandksandjsnajdnksjandjsankdnsakdnksandkslandksankdnsakdnskandksankdsankdsankdnsakdnksandksa 13 dsnkadnksandksandjsnajdnksjandjsankdnsakdnksandkslandksankdnsakdnskandksankdsankdsankdnsakdnksandksa 14 dsnkadnksandksandjsnajdnksjandjsankdnsakdnksandkslandksankdnsakdnskandksankdsankdsankdnsakdnksandksa 15 dsnkadnksandksandjsnajdnksjandjsankdnsakdnksandkslandksankdnsakdnskandksankdsankdsankdnsakdnksandksa 16 dsnkadnksandksandjsnajdnksjandjsankdnsakdnksandkslandksankdnsakdnskandksankdsankdsankdnsakdnksandksa 17 dsnkadnksandksandjsnajdnksjandjsankdnsakdnksandkslandksankdnsakdnskandksankdsankdsankdnsakdnksandksa 18 dsnkadnksandksandjsnajdnksjandjsankdnsakdnksandkslandksankdnsakdnskandksankdsankdsankdnsakdnksandksa 19 dsnkadnksandksandjsnajdnksjandjsankdnsakdnksandkslandksankdnsakdnskandksankdsankdsankdnsakdnksandksa 20 dsnkadnksandksandjsnajdnksjandjsankdnsakdnksandkslandksankdnsakdnskandksankdsankdsankdnsakdnksandksa 21 dsnkadnksandksandjsnajdnksjandjsankdnsakdnksandkslandksankdnsakdnskandksankdsankdsankdnsakdnksandksa 22 dsnkadnksandksandjsnajdnksjandjsankdnsakdnksandkslandksankdnsakdnskandksankdsankdsankdnsakdnksandksa 23 dsnkadnksandksandjsnajdnksjandjsankdnsakdnksandkslandksankdnsakdnskandksankdsankdsankdnsakdnksandksa 24 dsnkadnksandksandjsnajdnksjandjsankdnsakdnksandkslandksankdnsakdnskandksankdsankdsankdnsakdnksandksa 25 dsnkadnksandksandjsnajdnksjandjsankdnsakdnksandkslandksankdnsakdnskandksankdsankdsankdnsakdnksandksa 26 dsnkadnksandksandjsnajdnksjandjsankdnsakdnksandkslandksankdnsakdnskandksankdsankdsankdnsakdnksandksa 27 28 </div> 29 </body>
布局属性position
fixed:将某个元素固定在页面某个位置(比如：返回顶部)
absolute:绝对定位
relative:相对定位
fixed:相对于浏览器的窗口来进行定位，固定到窗口的某个位置上，不随内容而滚动，如果不设置定位坐标，就在原来的位置，否则反之。
1 <style> 2 body{ 3 margin:0; 4 } 5 #content{ 6 height:3000px; 7 background-color: #999999; 8 margin-top: 40px; 9 } 10 #mytop{ 11 width:100px; 12 height:50px; 13 border:1px solid red; 14 position:fixed; 15 right:5px; 16 bottom: 5px; 17 background-color: #2459a2; 18 } 19 </style> 20 </head> 21 <body> 22 <div id="content"> 23 dbsjabdjsandna 24 </div> 25 <div id="mytop" onclick = "goTop()">返回顶部</div> 26 </body> 27 <script> 28 function goTop(){ 29 document.body.scrollTop = 0; 30 } 31 </script> 32 </html>
relative：是相对于自身的左上角为坐标点，占据空间
1 body{ 2 margin: 0; 3 } 4 .one{ 5 200px; 6 height:100px; 7 border:1px solid red; 8 } 9 10 .two{ 11 200px; 12 height:100px; 13 border:1px solid green; 14 position:relative; 15 top:30px; 16 left:10px; 17 } 18 .three{ 19 200px; 20 height:100px; 21 border:1px solid blue; 22 } 23 24 </style> 25 </head> 26 <body> 27 <div class="one"></div> 28 <div class="warp_two"> 29 <div class="two"></div> 30 </div> 31 32 <div class="three"></div>
absolute:相对于（父级元素的定位方式(relative)）来进行定位，找祖先元素是否有定位，如果没有定位，找到body,就相对于body来定位，如果找到祖先元素有定位，相对祖先元素来定位，不占空间
1 <style> 2 body{ 3 margin: 0; 4 } 5 .one{ 6 width:200px; 7 height:100px; 8 border:1px solid red; 9 } 10 .warp_two{ 11 width:300px; 12 height:150px; 13 border: 1px solid yellow; 14 position: relative; 15 } 16 .two{ 17 width:200px; 18 height:100px; 19 border:1px solid green; 20 position:absolute; 21 top:30px; 22 left:10px; 23 } 24 .three{ 25 width:200px; 26 height:100px; 27 border:1px solid blue; 28 } 29 </style> 30 </head> 31 <body> 32 <div class="one"></div> 33 <div class="warp_two"> 34 <div class="two"></div> 35 </div> 36 <div class="three"></div> 37 </body>
综合实验：
1 <style> 2 .one{ 3 width:400px; 4 height:100px; 5 border:1px solid red; 6 margin:0 auto; 7 position: relative; 8 } 9 #two{ 10 width:50px; 11 height:50px; 12 background-color: black; 13 position: absolute; 14 left:0; 15 bottom: 0; 16 } 17 #three{ 18 width:50px; 19 height:50px; 20 background-color: black; 21 position: absolute; 22 right:0; 23 bottom: 0; 24 } 25 #four{ 26 width:50px; 27 height:50px; 28 background-color: black; 29 position: absolute; 30 top:0; 31 right: 0; 32 } 33 </style> 34 </head> 35 <body> 36 <div class="one"> 37 <div id="two"></div> 38 </div> 39 <div class="one"> 40 <div id="three"></div> 41 </div> 42 <div class="one"> 43 <div id="four"></div> 44 </div> 45 46 </body>
案例练习：
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 } 10 body{ 11 background-color: #999999; 12 } 13 .pg-body{ 14 width:780px; 15 margin:0 auto; 16 border:1px solid orange; 17 background-color: white; 18 } 19 .item{ 20 float: left; 21 border:1px solid #dddddd; 22 margin:10px; 23 padding: 10px; 24 position: relative; 25 } 26 .hot{ 27 position: absolute; 28 right:0; 29 top:0; 30 } 31 p,span,u{ 32 font-size: 12px; 33 text-align: center; 34 } 35 span{ 36 color:red; 37 padding-left: 30px; 38 } 39 h2{ 40 color: orange; 41 border:1px solid orange; 42 height:48px; 43 line-height: 48px; 44 padding-left: 15px; 45 46 } 47 </style> 48 </head> 49 <body> 50 <div class="pg-body"> 51 <h2>限时抢购</h2> 52 53 <div class="item"> 54 <img src="images/01.jpg" alt=""> 55 <p>[特价款]雷朋板材光学镜架 <br> 56 年终盛典 满128减30元</p> 57 <span>¥476.00</span> <u>¥1360</u> 58 <div class="hot"> 59 <img src="images/xsq.png" alt=""> 60 </div> 61 </div> 62 63 <div class="item"> 64 <img src="images/01.jpg" alt=""> 65 <p>[特价款]雷朋板材光学镜架 <br> 66 年终盛典 满128减30元</p> 67 <span>¥476.00</span> <u>¥1360</u> 68 <div class="hot"> 69 <img src="images/xsq.png" alt=""> 70 </div> 71 </div> 72 <div class="item"> 73 <img src="images/01.jpg" alt=""> 74 <p>[特价款]雷朋板材光学镜架 <br> 75 年终盛典 满128减30元</p> 76 <span>¥476.00</span> <u>¥1360</u> 77 <div class="hot"> 78 <img src="images/xsq.png" alt=""> 79 </div> 80 </div> 81 <div class="item"> 82 <img src="images/01.jpg" alt=""> 83 <p>[特价款]雷朋板材光学镜架 <br> 84 年终盛典 满128减30元</p> 85 <span>¥476.00</span> <u>¥1360</u> 86 <div class="hot"> 87 <img src="images/xsq.png" alt=""> 88 </div> 89 </div> 90 <div class="item"> 91 <img src="images/01.jpg" alt=""> 92 <p>[特价款]雷朋板材光学镜架 <br> 93 年终盛典 满128减30元</p> 94 <span>¥476.00</span> <u>¥1360</u> 95 <div class="hot"> 96 <img src="images/xsq.png" alt=""> 97 </div> 98 </div> 99 <div class="item"> 100 <img src="images/01.jpg" alt=""> 101 <p>[特价款]雷朋板材光学镜架 <br> 102 年终盛典 满128减30元</p> 103 <span>¥476.00</span> <u>¥1360</u> 104 <div class="hot"> 105 <img src="images/xsq.png" alt=""> 106 </div> 107 </div> 108 <div class="item"> 109 <img src="images/01.jpg" alt=""> 110 <p>[特价款]雷朋板材光学镜架 <br> 111 年终盛典 满128减30元</p> 112 <span>¥476.00</span> <u>¥1360</u> 113 <div class="hot"> 114 <img src="images/xsq.png" alt=""> 115 </div> 116 </div> 117 <div class="item"> 118 <img src="images/01.jpg" alt=""> 119 <p>[特价款]雷朋板材光学镜架 <br> 120 年终盛典 满128减30元</p> 121 <span>¥476.00</span> <u>¥1360</u> 122 <div class="hot"> 123 <img src="images/xsq.png" alt=""> 124 </div> 125 </div> 126 <div style="clear: both;"></div> 127 </div> 128 </body> 129 </html>
布局属性z-index
设置对象的层叠顺序
特点：较大的number值的对象会覆盖在较小number值的对象之上。
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <style> 5 *{ 6 margin:0; 7 } 8 .one{ 9 height:2000px; 10 background-color: white; 11 } 12 .two{ 13 height:19000px; 14 background-color: #2459a2; 15 position: fixed; 16 top:0; 17 left:0; 18 right:0; 19 opacity: 0.3; 20 } 21 .three{ 22 width:400px; 23 height:300px; 24 background-color: white; 25 position: fixed; 26 top:100px; 27 left:400px; 28 right:400px; 29 z-index: 10; 30 } 31 </style> 32 </head> 33 <body> 34 <div class="one"> 35 dbnsjkabndjsanjdnsman 36 </div> 37 <div class="three"></div> 38 <div class="two"> 39 dsanmdsnadns,a 40 </div> 41 <!--<div></div>--> 42 43 </body>
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>Title</title> 5 <style> 6 *{ 7 margin:0; 8 /*padding: 0;*/ 9 } 10 .pg-head{ 11 height:38px; 12 background-color: #2459a2; 13 } 14 .main{ 15 width: 780px; 16 margin:0 auto; 17 line-height: 38px; 18 } 19 .menu{ 20 color: white; 21 font-size: 15px; 22 /*border:1px solid red;*/ 23 display: inline-block; 24 padding: 0 10px; 25 } 26 .main a:hover{ 27 background-color: red; 28 } 29 </style> 30 </head> 31 <body> 32 <div class="pg-head"> 33 <div class="main"> 34 <a class="menu">全部</a> 35 <a class="menu">42区</a> 36 <a class="menu">段子</a> 37 </div> 38 </div> 39 </body> 40 </html>