CSS 美化网页控件的代码 (层叠样式表)
1)编写CSS几种方式:
1.1标签的style属性实现标签装饰(装饰功能不能重复使用:极少用到)
<div style="background-color:red;height:48px;">1</div>
1.2(标准名称:id选择器)
<!--head标签下的style标签下的装饰功能使用:(id选择器),
那么body标签下的标签通过id匹配进行装饰
(装饰功能可重复被调用但不规范:极少用到)-->
<head>
<style>
#i1{
background-color: #2459a2;
height: 48px;
}
</style>
</head>
<body>
<div id="i1">2</div>
</body>
</html>
1.3(标准名称:class选择器)
<!-- head标签下的style标签下的装饰功能使用:(class选择器),
那么body标签下的标签通过class关键字匹配进行装饰
(装饰功能可重复调用,且规范,常用)-->
<head>
<style>
.c1{
background-color: #2459a2;
height: 48px;
}
</style>
</head>
<body>
<div class="c1">3</div>
</body>
</html>
1.4 (标准名称:标签选择器)
<!-- head标签下的style标签下的装饰功能使用:(标签选择器),
那么body标签下的标签匹配的功能标签名将被动装饰-->
<head>
<style>
div{
background-color: #2459a2;
height: 48px;
}
</style>
</head>
<body>
<div>4</div>
</body>
</html>
1.5(标准名称:层级(关联)选择器,使用空格区分)
<!--5 head标签下的style标签下的装饰功能使用:(层级(关联)选择器),
那么body标签下的标签下的标签匹配的层级功能标签名将被动装饰(可以拥有N层)-->
<head>
<style>
span div{
background-color: #2459a2;
height: 48px;
}
.c2{
background-color: #2459a2;
height: 48px;
}
.c2 div{
background-color: #2459a2;
height: 48px;
}
</style>
</head>
<body>
<span class="c2">
<div>5</div>
<span>
</body>
1.6(标准名称:组合选择器,使用逗号区分)
<!--6 head标签下在style标签下的装饰功能使用:(组合选择器),
body标签下的标签通过id匹配进行装饰(该装饰功能可以拥有N个id)
body标签下的标签通过class关键字匹配进行装饰(该装饰功能可以拥有N个class关键字)-->
<head>
<style>
#i1,#i2 {
background-color: #2459a2;
height: 48px;
}
.c3,.i3 {
background-color: #2459a2;
height: 48px;
}
</style>
</head>
<body>
<div id="i1">6</div>
<div id="i2">7</div>
<div class="c3">6</div>
<div class="i3">7</div>
</body>
1.7(标准名称:属性选择器)
<!--7 head标签下在style标签下的装饰功能使用:(属性选择器),
body标签下的标签自身的属性被匹配到后,被动进行装饰-->
<head>
<style>
input[type="test"] { width:200px; height:30px; }
input[type="password"] { width:60px; height:20px; }
input[value="burgess"] { width:400px; height:30px; }
.c1[type="password"] { width:60px; height:30px; }
</style>
</head>
<body>
<input class="c1" type="test" value="burgess" >
<input class="c1" type="password" >
</body>
1.8 style标签下的注释格式:/*注释说明*/
1.9 style优先级:标签上style优先,通过选择器,就近原则
1.10 style装饰功能可以写在单独的css文件上,然后通过在head标签下添加link标签引用该文件装饰功能
<head>
<link rel="stylesheet" href="css/commons.css" />
</head>
<body>
<div class="c5 c6" style="color:pink">asdf</div>
</body>
2)标签常用属性
2.1 height:48px 高度
2.2 border:边框(属性:宽,样式,颜色)
2.3 width:%80 宽度(写法:像素:百分比)
2.4 font-size:16px 字体大小
2.5 text-align:center 居中
2.6 line-height:48px 字符串放在像素大小的中间
2.7 font-weight:bold 字体加粗
3)float:让标签狼起来,块级标签页可以堆叠
1 如:div标签是块级白板标签 所以一个块级标签不管字符串多少就占据一行
如果想在一行里面使用2个块级标签以上的话:
必须使用float内部属性:这样就可以让块级标签变成行内标签了
folat:left让块级标签变成行内标签,往左靠
folat:right让块级标签变成行内标签,往右靠
(注:需大于2个并且紧挨着标签,同时使用folat)
超过100%宽度就另起一行-->
格式 :
<body>
<div style="width: 20%;background-color: red;">1</div>
<div style="width: 20%;background-color: black;">2</div>
<br>
<div style="width: 20%;background-color: red;float: left">1</div>
<div style="width: 30%;background-color: black;float: left">2</div>
<br>
<div style="width: 20%;background-color: orange;float: left">1</div>
<div style="width: 30%;background-color: olive;float:right ">2</div>
<br>
<div style="width: 20%;background-color: red;float: left">1</div>
<div style="width: 50%;background-color: yellow;float: left">1</div>
<div style="width: 30%;background-color: black;float:right ">2</div>
</body>
2 如果子标签使用foalt,那么该子标签的父级标签有边框,
就需要在子标签最后增加多一个: <div style="clear:both"></div>>
(撑开父标签高度)
格式:
<div style="width:300px;border:1px solid red;">
<div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
<div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
<div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
<div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
<div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
<div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
<div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
<div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
<div style="clear:both"></div>>
<!--
上级(父级)div标签的border边框会被子级标签float弄消失,
所以需要在子级标签尾部增加多一个标签:
<div style="clear:both"></div>>
这样父级div标签的border边框才会出现(撑开父标签高度)
-->
</div>
4)display:块级标签和行内(内联)标签转换转换
1. display:inline 块级转行内
2. display:block 行内转块级
3. display:inline-block; 具备块级和行内标签的属性:使行内标签具备可设置性如:(高度,宽度,padding margin)
4. display=none 让标签消失(学习了js,你可以弄个按钮,点下就显示,在点下就消失。如有一些网站有灯的,点下就亮,在点下就不亮) ********
5. 块级标签:设置高度,宽度,padding margin
6. 行内标签:无法设置高度,宽度,padding margin
5)margin、padding边距
1.margin 外边距
格式:
<body>
<div style="border:1px solid red;height:70px;">
<div style="background-color: green; height:50px;
width:600px;margin-top:0px;">123</div>
</div>
<br>
<div style="border:1px solid red;height:70px;">
<div style="background-color: green; height:50px;
width:600px;margin-top:10px;margin-left:150px;">123</div>
</div>
<!-
margin-top:外边距,默认(margin-top:0子标签的高度占据父标签边框的顶部)
margin-top:0的时候,如:子标签高度:50px,宽度600px
该子标签的高度占据的是父标签边框的顶部,宽度是占据父标签最左边
margin-top:10的时候,margin-left:150的时候
该子标签的高度占据的是父标签边框的顶部往下移动10像素
该子标签的宽度占据的是父标签边框最左边往右移动150像素
同理:margin-bottom 和 margin-top方向相反
同理:margin-right 和 margin-left方向相反-->
</body>
2.padding 内边距
格式:
<body>
<div style="border:1px solid red;height:70px;">
<div style="background-color: green; height:50px;
width:600px; padding-top:0;">123</div>
</div>
<br>
<div style="border:1px solid red;height:70px;">
<div style="background-color: green; height:50px;
width:600px; padding-top:15px; padding-left: 150px">123</div>
</div>
<!--
padding-top:内边距,默认(padding-top:0 子标签的高度占据父标签边框的顶部)
padding-top:0的时候,如:子标签高度:50px, 宽度是600px
该子标签的高度占据的是父标签边框的顶部,宽度是占据父标签最左边
padding-top:15的时候,margin-left:150的时候,
高度=50+15 =65 宽度=600+150=750
该子标签高度在顶部增加15px的高度,也就是该子标签高度=65(记住是顶部增加)
该子标签宽度在左边增加150px的宽度,也就是该子标签宽度=750(记住是顶部增加)
-->
</body>
6)position内部属性(固定页面标签 )fixed、absolute、relative
1.position: fixed; 固定在页面某个位置,,浏览器滚动,跟着滚动
2.position:absolute; 绝对固定在页面某个位置,浏览器滚动,不跟着滚动(应用场景不多,但是如果和absolute+relative那么可以应用很多场景)
3.position:relative;单独使用没有任何效果配合absolute使用(标签有position:relative;那么该标签下的标签有position:absolute;这个时候:absolute标签固定在relative标签的某个位置)
4.pisition多层:应用场景当点击一个按钮的时候,跳出一个框,值可以对该框进行操作
需要使用两个内部属性配合:
z-index:9;区别层级,谁的数字大,谁就在最上层
opacity: 0.5; 透明度,0到1,0完全透明 1完全遮住
position: fixed应用场景:
1.1滚动页面的时候不管如何页面往下滚动会出现一个返回顶部
格式:
<body>
<div onclick="GoTop();" style="width: 50px;height: 50px;background-color: black;color: white;
position: fixed;
bottom:20px;
right: 20px;">
返回顶部
</div>
<!--
内部属性position: fixed–>把该div从底层放到上层 固定到页面某个位置
(图层概念,默认是div都是背景层(也就是底层))
bottom:20px 把该div标签放在离底部20PX
right:20px 把该div标签放在离右边20PX
这样该标签永远放在浏览器页面右下角距离底部和右边20PX距离
onclick="GoTop():Js时候教的
-->
<div style="height: 5000px;background-color: #dddddd;">
asdfasdf
</div>
<script>
function GoTop(){
document.body.scrollTop = 0;
}
</script>
</body>
</html>
position: fixed应用场景
1.2.不管页面如何滚动,上面的菜单永远在顶部
格式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header01{
height: 48px;
background-color: black;
color: #dddddd;
position: fixed;
top:0;
right: 0;
left: 0;
}
/*position: fixed; 固定页面的位置,并且把该div从背景层(底层)变底层上层
固定在 top right left:距离顶部、左、右 0px距离
这样以后就不管你页面往下滚动,该div一直存在该浏览器页面的顶部
*/
.pg-body01{
background-color: #dddddd;
height: 5000px;
margin-top: 50px;
}
/*背景层(底层)试验position写的装饰功能
margin-top偏离顶部50px这样才不会被盖住
(后期就不需要了,因为可以利用display隐藏固定div*/
</style>
</head>
<body>
<div class="pg-header01">头部</div>
<!-- 调用pg-header01装饰,达到不管你如何在浏览器滚动页面,该div永远在页面顶部-->
<div class="pg-body01">内容</div>
<!--背景层(底层)试验positionn该内部参数-->
</body>
</html>
position:relative;配合position:absolute应用场景:
absolute标签依据relative标签进行固定位置
格式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
<div style="position: absolute;left:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div>
</div>
<div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
<div style="position: absolute;right:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div>
</div>
<div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
<div style="position: absolute;right:0;top:0;width: 50px;height: 50px;background-color: black;"></div>
</div>
<!--position:relative;和position:absolute配合使用:
absolute标签固定在relative标签的某个位置(abosolut依据relative标签固定位置)-->
</body>
</html>
position多层应用场景
当点击一个按钮的时候,跳出一个框,值可以对该框进行操作
格式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="z-index:10; position: fixed;top: 50%;left:50%;
margin-left: -250px;margin-top: -200px; background-color:white;height: 400px;width:500px; ">
<input type="text" />
<input type="text" />
<input type="text" />
</div>
<!--第三层
z-index:9;区别层级,谁的数字大,谁就在最上层
需要注意有了position的标签margin:0居中会失效
应用场景:本身该标签加上内部属性display:none;隐藏的
然后当点一个按钮以后,这个框就跳出来(JS的时候才讲display实现按钮功能)-->
<div style="z-index:9; position: fixed;background-color: black;
top:0;
bottom: 0;
right: 0;
left: 0;
opacity: 0.5;
"></div>
<!--第二层
用黑色覆盖了第一层
opacity: 0.5;透明度,0到1,0完全透明 1完全遮住
z-index:9;区别层级,谁的数字大,谁就在最上层
-->
<div style="height: 5000px;background-color: green;">
asdfasdf
</div>
<!--背景层(第一层)-->
</body>
</html>
7)overflow
overflow: hidden放置的图片,超过标签定义的高度和宽度,超过的隐藏
overflow: auto:放置的图片,超过定义标签的高度和宽度,超过出现滚动条
格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 200px;width: 300px;overflow: auto">
<img src="1.jpg">
</div>
<!--overflow: auto:放置的图片,超过定义标签的高度和宽度,超过出现滚动条-->
<div style="height: 200px;width: 300px;overflow: hidden">
<img src="1.jpg">
</div>
<!--overflow: hidden放置的图片,超过标签定义的高度和宽度,超过的隐藏-->
<div style="height: 200px;width: 300px;">
<img src="1.jpg" style="height: 200px;width: 300px">
</div>
<!--把图片大小调成定义好的宽高度一样的大小-->
</body>
</html>
8) :hover 当样式后面加上:hover,那么鼠标移到装饰该样式的标签,该:hover样式生效
格式
<style>
.menu{
display: inline-block;
padding: 0 10px 0 10px;
color: white;
}
/*
display: inline-block; 行内标签转块级标签(a标签就可以设置左右上下宽度)
padding: 10px (上下左右+10px)
padding:0 10px (上下+0px 、左右+10px)
padding: 0 10px 0 10px (上+0px 、右+10px 、下+0px 、左+10px)
*/
.menu:hover{
background-color: blue;
}
/*
menu:hover:当鼠标移动到当前menu标签上时,该hover属性才生效
*/
</style>
</head>
<body>
<div>
<a class="logo">LOGO</a>
<!--一般需要点击以后跳转的都需要a标签-->
<a class="menu">全部</a>
<a class="menu">42区</a>
<a class="menu">段子</a>
<a class="menu">1024</a>
<!--由于menu样式使用了:hover,当鼠标移动至装饰menu样式的标签
那么该:hover样式会生效-->
</div>
</div>
</body>
9) background-image:背景图片
background-image: url(icon_18_118.png) 添加背景图片;(默认图片横竖平铺该div空间)
background-repeat:repeat-y; 图片竖平铺,
background-repeat:repeat-x; 图片横平铺,
background-repeat:no-repeat; 不平铺,
background-position-x:0px;横向移动框内背景图片
background-position-y:-140px;竖向移动框内背景图片
background-position:0 -140px ;上面两个综合简写
格式
<div style="background-image: url(icon_18_118.png);
height: 180px;border: 1px solid red">
</div>
<!--background-image: url(icon_18_118.png) 背景图片;
默认图片横竖平铺该div空间-->
<div style="background-image: url(icon_18_118.png);
background-repeat:repeat-y;
height: 360px;border: 1px solid red">
</div>
<!--background-image: url(icon_18_118.png) 背景图片;
background-repeat:repeat-y; 图片竖平铺,
background-repeat:repeat-x; 图片横平铺,
-->
<div style="background-image: url(icon_18_118.png);
background-repeat:no-repeat;
height: 20px;width:20px;border: 1px solid red">
</div>
<!--background-image: url(icon_18_118.png) 背景图片;
background-repeat:no-repeat; 不平铺,
-->
<div style="background-image: url(icon_18_118.png);
background-repeat:no-repeat;
height: 20px;width:20px;border: 1px solid red;
background-position-x:0px;
background-position-y:-140px;">
</div>
<!--background-image: url(icon_18_118.png) 背景图片;
background-repeat:no-repeat; 不平铺,
background-position-x:0px;横向移动背景图片
background-position-y:-140px;竖向移动北京图片
background-position:0 -140px ;上面两个综合简写
-->