Python之前端CSS
浏览量:1186
一、css简介
css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化。
存在方式有三种：元素内联、页面嵌入和外部引入，比较三种方式的优缺点。
1.语法：style = 'key1:value1;key2:value2;'
在标签中使用 style='xx:xxx;'
在页面中嵌入 < style type="text/css"> </style > 块
引入外部css文件
必要性：美工会对页面的色彩搭配和图片的美化负责，开发人员则必须知道是如何实现的。、
范例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="background-color: #2459a3;height:20px; ">1</div> <div style="background-color: #dddddd;height:20px; ">2</div> <div style="background-color: red;height:20px; ">3</div> <!--在标签中设置属性--> </body> </html>
注意：如果标签属性需要重用 那么会用到如下的选择器
2.id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
background-color: #2459a2;
height: 20px;
}
</style>
</head> <body>
<div id="i1">1</div>
<div style="background-color: #dddddd;height:20px; ">2</div>
<div style="background-color: red;height:20px; ">3</div>
<!--在标签中设置属性-->
</body>
</html>注意：ID选择器因为id不能重复，因此它的重用性不高
效果：
1
2
3
3.class选择器 ***** .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
background-color: #2459a2;
height: 20px;
}
.c1{
background-color: #dddddd;
height: 20px;
}
</style>
</head>
<body>
<div id="i1">1</div>
<span class="c1">2</span>
<div style="background-color: red;height:20px;">3</div>
<!--在标签中设置属性-->
</body>
</html>4..标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
background-color: #2459a2;
height: 20px;
}
.c1{
background-color: #dddddd;
height: 20px;
}
div{
background-color: black;
color: white;
height: 20px;
}
</style>
</head>
<body>
<div id="i1">1</div>
<span class="c1" >2</span>
<div >3</div>
<!--在标签中设置属性-->
</body>
</html>
注意：标签选择器将会把html里面的div设置成指定样式 ，但是注意顺序从下至上的
5.关联选择器，层级选择器***
范例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
background-color: #2459a2;
height: 20px;
}
.c2{
background-color: #dddddd;
height: 20px;
}
span div{
background-color: black;
color: white;
height: 20px;
}
</style>
</head>
<body>
<div id="i1">1</div>
<span>2
<div id="c2">3</div>
4</span>
<div >5</div>
<!--在标签中设置属性-->
</body>
</html>范例2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
background-color: #2459a2;
height: 20px;
}
.c2{
background-color: #dddddd;
height: 20px;
}
.c1 div{
background-color: black;
color: white;
height: 20px;
}
span div{
background-color: black;
color: white;
height: 20px;
}
</style>
</head>
<body>
<div>1</div>
<span>2
<div id="c2">3</div>
4</span>
<div >5</div>
<!--在标签中设置属性-->
</body>
</html>6.组合选择器（逗号）*******
id选择器方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1,#i2,#i3{
background-color: #2459a2;
height: 20px;
}
</style>
</head>
<body>
<div id="i1">1</div>
<div id="i2">2</div>
<div id="i3">3</div>
<!--在标签中设置属性-->
</body>
</html>class选择器方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.i1,.i2,.i3{
background-color: #2459a2;
height: 20px;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<!--在标签中设置属性-->
</body>
</html>7.属性选择器*****
对选择到的标签再通过属性再进行一次筛选
.c1[n='alex']{ width:100px; height:200px; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input[type='text']{ width:100px; height:200px; }
</style>
</head>
<body>
<input type="text" n="YoungCheung">
<input type="password">
</body>
</html>PS:
- 优先级，标签上style优先，编写顺序，就近原则
- 注意还可以写入单独的css文件中，例如：
commons.css：
#i1,#i2,#i3{
background-color: #2459a2;
height: 20px;
}html：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="commons.css" /> </head> <body> <div id="i1">1</div> <div id="i2">2</div> <div id="i3">3</div> </body> </html>
边框
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height: 48px; width: 100%; /*width宽度 可设置像素也可设置百分百*/ border: 1px solid red; /*border 边框 solid 是给文本加上实体边框 像素为1px 为红色 dotted 虚线*/ font-size: 18px; /*字体大小*/ text-align: center; /*内容水平方向居中*/ line-height: 48px; /*表示文字放在48像素中间*/ font-weight: bold; /*给文字加粗*/ ">YoungCheung </div> </body> </html>
效果：
YoungCheung
属性
width # 宽度，可用百分比
height # 高度
border # 边框 可设置虚实像素的边框
font-size # 字体大小
text-align：center # 上下居中
vertical-align #水平居中，很少用
line-height #更牛逼的水平居中，建议用
font-weight #bold加粗
float让标签浪起来块级标签也可以堆叠
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="width: 20%;background-color: red;float: left;">1</div> <div style="width: 20%;background-color:black;float: right;">2</div> </body> </html>
效果：
1
2
<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="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>
效果：
注意： <div style="clear: both;"></div>，不允许有浮动对象
display
行内标签内联标签角色调换
<body> <div style="background-color: red;display: inline">内容</div> <span style="background-color: red;display:block">内容</span> </body>
效果：
内容
内容
注意： display：inline block
display: none; -- 让标签消失
display: inline; --变成行内标签
display: block; --变成块级标签
display: inline-block;
具有inline,默认自己有多少占多少
具有block，可以设置，无法设置高度，宽度，padding margin
******
行内标签：无法设置高度，宽度，padding margin
块级标签：设置高度，宽度，padding margin
范例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 38px;
background-color: #dddddd;
line-height: 38px;
}
</style>
</head>
<body style="margin: 0">
<div class="pg-header"
style="
height: 38px;
background-color: #dddddd;
line-height: 38px;">
<div style="width: 90%;margin: 0 auto;">
<div style="float: left;">*收藏本站</div>
<div style="float: right;">
<a href="https://login.tmall.com/">登录</a>
<a href="https://register.tmall.com/"/>注册</a>
<a href="https://i.taobao.com/">我的订单</a>
<a href="https://shoucang.taobao.com/">我的收藏</a>
<a href="https://i.taobao.com/my_taobao.htm">VIP会员俱乐部</a>
<a href="https://consumerservice.taobao.com/">客户服务</a>
<a href="https://www.taobao.com/sitemap.php">关注</a>
</div>
<div style="clear: both"></div>
</div>
</div>
</body>
</html>padding margin(0,auto)
<div> <h6>margin</h6> <div style='border:1px solid red; height: 70px;'> <div style='background-color: green; height: 50px; margin-top:20px;'></div> </div> <br/> </div> <div> <h6>padding</h6> <div style='border:1px solid red; height: 70px;'> <div style='background-color: green; height: 50px; padding-top: 20px;'></div> </div> <br/> </div>
效果：
margin 位移
padding 填充
一、padding
1、语法结构
（1）padding-left:10px; 左内边距
（2）padding-right:10px; 右内边距
（3）padding-top:10px; 上内边距
（4）padding-bottom:10px; 下内边距
（5）padding：10px; 四边统一内边距
（6）padding:10px 20px; 上下、左右内边距
（7）padding:10px 20px 30px; 上、左右、下内边距
（8）padding:10px 20px 30px 40px; 上、右、下、左内边距
2、可能取的值
（1）length 规定具体单位记的内边距长度
（2）% 基于父元素的宽度的内边距的长度
（3）auto 浏览器计算内边距
（4）inherit 规定应该从父元素继承内边距
3、浏览器兼容问题
（1）所有浏览器都支持padding属性
（2）任何版本IE都不支持属性值“inherit”
二、margin
1、语法结构
（1）margin-left:10px; 左外边距
（2）margin-right:10px; 右外边距
（3）margin-top:10px; 上外边距
（4）margin-bottom:10px; 下外边距
（5）margin:10px; 四边统一外边距
（6）margin:10px 20px; 上下、左右外边距
（7）margin:10px 20px 30px; 上、左右、下外边距
（8）margin:10px 20px 30px 40px; 上、右、下、左外边距
2、可能取的值
（1）length 规定具体单位记的外边距长度
（2）% 基于父元素的宽度的外边距的长度
（3）auto 浏览器计算外边距
（4）inherit 规定应该从父元素继承外边距
3、浏览器兼容问题
（1）所有浏览器都支持margin属性
（2）任何版本IE都不支持属性值“inherit”
图示：
position
属性规定元素的定位类型
- fixed
固定在某个位置生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
案例1：返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#c1{
position:fixed;
width: 50px;
height: 50px;
background-color: black;
color: white;
bottom: 20px;
right: 20px;
}
</style>
</head>
<body>
<div id="c1" onclick="GoTop();">返回顶部</div>
<div style="height: 500px;background-color: #dddddd"></div>
<script>
function GoTop(){
document.body.scrollTop=0;
}
</script>
</body>
</html>案例2：菜单永远在顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 48px;
background-color: black;
color: #dddddd;
position: fixed;
top: 0;
right: 0;
left: 0;
}
.pg-body{
height: 5000px;
background-color: #dddddd;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="pg-header">头部</div>
<div class="pg-body">内容</div>
</body>
</html>效果：
-relative
生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
-absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="position: relative;height: 200px;width: 500px;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;height: 200px;width: 500px;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;height: 200px;width: 500px;border: 1px solid red; margin: 0 auto"> <div style="position: absolute;left: 0;top: 0;width: 50px;height: 50px;background-color: black"></div> </div> </body> </html>
效果：
opcity 设置 div 元素的不透明级别：
div
{
opacity:0.5;
}z-index
层级顺序z-index存在的情况下z-index大的元素会覆盖z-index小的元素,即z-index越大优先级越高。
三层案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
display:none;
margin:0 auto;
z-index:10;
position: fixed;
top:50%;
left:50%;
margin-left: -250px ;
margin-top:-200px;
background-color: white;
height:400px;
width: 500px;
}
.c2{
display:none;
z-index:9;
position: fixed;
background-color: black;
top:0;
bottom: 0;
right: 0;
left: 0;
opacity: 0.5
}
</style>
</head>
<body>
<div class="c1">
<input type="text" />
<input type="text" />
<input type="text" />
</div>
<div class="c2" >第二层</div>
<div style="height: 500px;background-color: green;">内容</div>
</body>
</html>overflow
overflow 属性规定当内容溢出元素框时发生的事情。
范例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height: 200px;width: 300px;overflow: auto"> . <img src="http://ent.southcn.com/8/images/attachement/jpg/site4/20161209/25/1546877105318190257.jpg"> </div> <div style="height: 200px;width: 300px;overflow: hidden"> . <img src="http://ent.southcn.com/8/images/attachement/jpg/site4/20161209/25/1546877105318190257.jpg"> </div> </body> </html>
overflow：auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
overflow:hidden 内容会被修剪，并且其余内容是不可见的。
效果：
. 
案例：抽屉网站--伪类：hover
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
position: fixed;
right: 0;
left:0;
top:0;
height:48px;
background-color: #2459a2;
line-height: 48px;
}
.pg-body{
margin-top: 50px;
}
.w{
width: 980px ;
margin: 0 auto;
}
.pg-header .menu{
display: inline-block;
padding:0 10px 0 10px;
color: white;
}
/*当鼠标移动到当前标签上时，当前标签才生效*/
.pg-header .menu:hover{
background-color: blue;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="w">
<a class="logo">LOGO</a>
<a class="menu">全部</a>
<a class="menu">42区</a>
<a class="menu">段子</a>
<a class="menu">挨踢1024</a>
<a class="menu">你问我答</a>
</div>
</div>
<div class="pg-body">
<div class="w">正文</div>
</div>
</body>
</html>效果
background-image 背景图片
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 100px"></div>
<div style="background-image: url('http://dig.chouti.com/images/icon_18_118.png?v=2.13');
background-repeat: no-repeat; //不重复
height: 20px;
width:18px;
border: 1px solid red;
background-position-x: 0px;
background-position-y: -20px;
"></div>
</body>
</html>效果
参数：
repeat-x x轴平铺 repeat-y y轴平铺 no-repeat 不平铺 background-position-x 沿x平移 backupgroud-position-y 沿Y轴平移
<DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height:35px;width:400px;position:relative;"> <input type="text style="height:35px;width:370px;padding-right:30px;"/> <span style="position:absolute;right:0;top:10px:backgroud-image:url(image/a.jpg); height:16px; width:16px; display:inline-block;"></span> </div> </body> </html>
效果：
神回复
发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。