概念：
CSS（cascading style sheet，层叠样式表)是一种制作网页的新技术，现在已经为大多数浏览器所支持，成为网页设计必不可少的工具之一
css语法结构
每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束
在css的三个组成部分中，“对象”是很重要的，它指定了对哪些网页元素进行设置，因此，它有一个专门的名称——选择器（selector）
css样式表
1.行内样式
它是所有样式方法中最为直接的一种，它直接对HTML的标签使用style属性，然后将css代码直接写在其中
<div style="color:red;font-size: 20px;">css的初体验</div>
2.内部样式
内部样式就是将css写在<head>与</head>之间，并且用<style>和</style>标签进行声明。
类
div{ color:red; font-size: 20px; } <div>css的初体验2</div>
各种选择器
标签选择器
div{ color:red; font-size: 20px; } <div>css的初体验2</div>
id选择器
#two{ color: yellow; } <div id="two">css的初体验2</div> id不要重复 只能唯一
类选择器
.three{ color:blue; } <div class="three">css的初体验2</div> <span class="three">span标签</span>
包含选择器
.four span{ color:green; } <div class="four"> <span>css测试dsad</span> </div>
分组选择器
div,span,h2{
color:orange;
}
通用选择器
*{
color:gray;
}
伪类选择器
:link 定义超链接默认样式
:visited 定义访问过的样式
:hover 定义鼠标经过的样式
:active 定义鼠标按下的样式
a:link { color:#ff0000; } /*默认样式，超链接文字为红色*/
a:visited { color:#00ff00; } /*访问过后，超链接文字为绿色*/
a:hover { color:#0000ff; } /*鼠标经过，超链接文字为蓝色*/
a:active { color:#ffff00; } /*鼠标按下时，超链接文字为黄色*/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a:link{ /*color:red;*/ } a:visited{ color:red; } a:hover{ color:green; } a:active{ color:yellow; } </style> </head> <body> <a href="http://www.baidu.com">百度</a> </body> </html>
选择器优先级
行内样式>id选择器>类选择器>标签选择器>通用选择器
3.外部样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="a.css"> </head> <body> <div class="show">csssssssss</div> <h1>cscs</h1> <span>span</span> </body> </html>
样式全部写在a.css文件中
css的基本属性
-文字段落
边框设置：border
宽度，样式，颜色 (border: 1px solid red;)
文字属性
字号:font-size
颜色:color
文本行高：line-height
语法： line-height：行高值(像素)
水平对齐： text-align
left：左对齐；
right：右对齐
center：居中对齐
段落文本属性设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 980px; height: 48px; border: 1px solid red; line-height: 48px; /*text-align: right;*/ color:#503131; font-size: 12px; } </style> </head> <body> <div> 段落文本测试 </div> </body> </html>
背景属性
背景颜色：background-color
关键字：red pink orange
背景图像：background-image
使用background-image属性可以设置元素的背景图像。
语法：background-image：url（图像地址）
背景重复：background-repeat
语法：background-repeat：取值
Repeat(默认) 背景图像平铺排满整个网页
repeat-x 背景图像只在水平方向上平铺；
repeat-y 背景图像只在垂直方向上平铺。
no-repeat 背景图像不平铺
背景位置：background-position
background-position-x:200px ;
background-position-y:100px;
background-position
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #myimg{ width:18px; height: 18px; background-image: url("02.png"); background-position-y: 130px; } </style> </head> <body> <div id="myimg"> </div> </body> </html>
一次性加载，然后去抠，节省带宽
margin外边距
边距属性
margin是对外元素的距离，用来控制元素本身的浮动位置
四边距margin
上边距margin-top
下边距margin-bottom
左边距margin-left
右边距margin-right
margin 10px 20px 30px 40px;
提供一个，用于的四边；
提供两个，第一个用于上－下，第二个用于左－右；
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
提供四个参数值，将按上－右－下－左的顺序作用于四边；
居中显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin:0; } #main{ width: 400px; height:300px; border:1px solid red; } #content{ width:200px; height:150px; border:1px solid blue; /*margin-top: 10px;*/ /*margin-left: 10px;*/ margin:10px 10px; } </style> </head> <body> <div id="main"> <div id="content"> </div> </div> </body> </html>
padding内边距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #main{ width:300px; height: 200px; border:1px solid red; padding-top: 100px; } </style> </head> <body> <div id="main"> dsnandsadsamkdmskanfdjsanf </div> </body> </html>
布局属性float
float:none; 默认值
float:left; 左浮
float:right;右浮
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .one{ width:200px; height: 100px; border:1px solid red; float: left; margin:0 10px; } </style> </head> <body> <div class="one">one</div> <div class="one">one</div> <div class="one">one</div> <div class="one">one</div> </body> </html>
有若干个div，它们都向左浮动，则它们会像流水一样，依次排开
制作banner头部，主要就是利用了float
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin:0; } .pg-head{ height:20px; background-color: #999; } .info_login{ /*border:1px solid red;*/ float: left; } .info_user{ /*border:1px solid blue;*/ float: right; } .main{ width:780px; margin:0 auto; line-height: 20px; font-size: 12px; } </style> </head> <body> <div class="pg-head"> <div class="main"> <div class="info_login">请登录</div> <div class="info_user"> <a href="#">我的淘宝</a> <a href="#">我的支付宝</a> </div> </div> </div> </body> </html>
Display属性
Display：
block：将元素变成块级标签，可以设置高度和宽度
Inline：将元素变成行内标签，不能设置高度和宽度
Inline-block：同时具有两种
none：标签消失
<span style="background-color: gray;height:70px;20px;">行内标签</span>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <span style=" 100px;height: 100px;border: 1px solid red;display: inline-block;">display属性</span> </body> </html>
布局属性overflow
溢出处理属性overflow分类
Overflow (水平和垂直均设置)
Overflow-x (设置水平方向)
Overflow-y (设置垂直方向)
布局属性position
定位属性position:
fixed : 将某个元素固定在页面的某个位置
absolute : 绝对定位
relative：相对定位
position-fixed
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin:0; } #pg-header{ background-color: #2459a2; height:38px; position: fixed; top:0; left:0; right:0; } #content{ height:3000px; background-color: #999999; margin-top: 40px; } #mytop{ width:100px; height:50px; border:1px solid red; position:fixed; right:5px; bottom: 5px; background-color: #2459a2; } </style> </head> <body> <div id="pg-header"> hndsjahndksa </div> <div id="content"> dbsjabdjsandna </div> <div id="mytop" onclick = "goTop()">返回顶部</div> </body> <script> function goTop(){ document.body.scrollTop = 0; } </script> </html>
position-relative-absolute
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .one{ width:400px; height:100px; border:1px solid red; margin:0 auto; position: relative; } #two{ width:50px; height:50px; background-color: black; position: absolute; left:0; bottom: 0; } #three{ width:50px; height:50px; background-color: black; position: absolute; right:0; bottom: 0; } #four{ width:50px; height:50px; background-color: black; position: absolute; top:0; right: 0; } </style> </head> <body> <div class="one"> <div id="two"></div> </div> <div class="one"> <div id="three"></div> </div> <div class="one"> <div id="four"></div> </div> </body> </html>
网站页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; } body{ background-color: #999999; } .pg-body{ width:780px; margin:0 auto; border:1px solid orange; background-color: white; } .item{ float: left; border:1px solid #dddddd; margin:10px; padding: 10px; position: relative; } .hot{ position: absolute; right:0; top:0; } p,span,u{ font-size: 12px; text-align: center; } span{ color:red; padding-left: 30px; } h2{ color: orange; border:1px solid orange; height:48px; line-height: 48px; padding-left: 15px; } </style> </head> <body> <div class="pg-body"> <h2>限时抢购</h2> <div class="item"> <img src="images/01.jpg" alt=""> <p>[特价款]雷朋板材光学镜架 <br> 年终盛典 满128减30元</p> <span>¥476.00</span> <u>¥1360</u> <div class="hot"> <img src="images/xsq.png" alt=""> </div> </div> <div class="item"> <img src="images/01.jpg" alt=""> <p>[特价款]雷朋板材光学镜架 <br> 年终盛典 满128减30元</p> <span>¥476.00</span> <u>¥1360</u> <div class="hot"> <img src="images/xsq.png" alt=""> </div> </div> <div class="item"> <img src="images/01.jpg" alt=""> <p>[特价款]雷朋板材光学镜架 <br> 年终盛典 满128减30元</p> <span>¥476.00</span> <u>¥1360</u> <div class="hot"> <img src="images/xsq.png" alt=""> </div> </div> <div class="item"> <img src="images/01.jpg" alt=""> <p>[特价款]雷朋板材光学镜架 <br> 年终盛典 满128减30元</p> <span>¥476.00</span> <u>¥1360</u> <div class="hot"> <img src="images/xsq.png" alt=""> </div> </div> <div class="item"> <img src="images/01.jpg" alt=""> <p>[特价款]雷朋板材光学镜架 <br> 年终盛典 满128减30元</p> <span>¥476.00</span> <u>¥1360</u> <div class="hot"> <img src="images/xsq.png" alt=""> </div> </div> <div class="item"> <img src="images/01.jpg" alt=""> <p>[特价款]雷朋板材光学镜架 <br> 年终盛典 满128减30元</p> <span>¥476.00</span> <u>¥1360</u> <div class="hot"> <img src="images/xsq.png" alt=""> </div> </div> <div class="item"> <img src="images/01.jpg" alt=""> <p>[特价款]雷朋板材光学镜架 <br> 年终盛典 满128减30元</p> <span>¥476.00</span> <u>¥1360</u> <div class="hot"> <img src="images/xsq.png" alt=""> </div> </div> <div class="item"> <img src="images/01.jpg" alt=""> <p>[特价款]雷朋板材光学镜架 <br> 年终盛典 满128减30元</p> <span>¥476.00</span> <u>¥1360</u> <div class="hot"> <img src="images/xsq.png" alt=""> </div> </div> <div style="clear: both;"></div> </div> </body> </html>
布局属性z-index
定位属性z-index:
Z-index：设置对象的层叠顺序
特点：
较大 number 值的对象会覆盖在较小 number 值的对象之上
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; } .one{ height:2000px; background-color: white; } .two{ height:2050px; background-color: #2459a2; position: fixed; top:0; left:0; right:0; opacity: 0.3; } .three{ width:400px; height:300px; background-color: white; position: fixed; top:100px; left:400px; right:400px; z-index: 10; } </style> </head> <body> <div class="one"> dbnsjkabndjsanjdnsman </div> <div class="three"></div> <div class="two"> dsanmdsnadns,a </div> <!--<div></div>--> </body> </html>
后台管理布局
overflow：auto
dispaly：none隐藏
z-index
border-radius头像
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } .pg_head{ height: 48px; background-color: #2459a2; } .pg_body .pg_menu{ width: 10%; background-color: #7abd54; position: absolute; top: 48px; left: 0; bottom: 0; } .pg_body .pg_content{ width: 90%; position: absolute; top: 48px; right: 0; bottom: 0; overflow: auto; z-index: 9; background-color: #999999; } .left{ float: left; } .right{ float: right; } .logo{ width: 10%; text-align: center; line-height: 48px; background-color: #503131; color: white; } .pg_head .userinfo{ border:1px solid red; margin-top: 4px; width:140px; } .pg_head .userinfo img{ border-radius: 50%; margin-top: 5px; } .pg_head .userinfo .infolist{ display: none; } .pg_head .userinfo:hover .infolist{ display: block; color: red; } .pg_head .userinfo .infolist{ background-color: green; position: absolute; top: 43px; right: 36px; z-index: 10; } .pg_head .userinfo .infolist a{ display: block; color: white; width: 140px; } </style> </head> <body> <div class="pg_head"> <div class="logo left"> <span>欢迎光临</span> </div> <div class="userinfo right "style="position: relative"> <a href=""><img src="01.jpg" alt="" width="40" height="40"></a> <div class="infolist"> <a>我的信息</a> <a>登录</a> </div> </div> </div> <div class="pg_body"> <div class="pg_menu"> 这是菜单 </div> <div class="pg_content"> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> <p>这是内容</p> </div> </div> </body> </html>