python基础6-web之css
CSS
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
编写css样式
1.标签的style属性
2.写在head里面，style标签中写样式
- id选择器
- class选择器
- 标签选择器
div{
...
}
所有div设置上此样式
- 层级选择器（空格）
.c1 .c2 div {
}
- 关联选择器
idselect p {
backgroundcolor:red;
}
<div id="idselect"><p></p></div>
- 组合选择器(逗号)
input,div,p {
backgroundcolor:red;
}
- 属性选择器，对选择到的标签通过属性再进行一次筛选
input[type='text']{
width:100px;height:200px;
}
-
ps:优先级，标签上style优先，编写顺序，就近原则
s7.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TTML/CSS1</title>
<style>
<!-- commons.jss文件中内容可移植在head标签中的style标签内-->
</style>
<link rel="stylesheet" href="commons.css" />
</head>
<body>
<div class="c1" id="i1" style="background-color:pink;">盒子1</div>
<div class="c1" id="i2">盒子2</div>
<div class="c1" id="i3" name="n3">盒子3</div>
<div class="c1" id="i4">盒子4</div>
<div class="c1" id="i5" name="n5">盒子5</div>
<span class="c1">hello world
<div id ="i6">Hi ￥</div>
hello world
</span>
</body>
</html>
commons.css
.c1 {
background-color: red;
width: 950px;
height: 180px;
}
#i2, #i4 {
background-color: green;
}
.c1[name="n3"], .c1[name="n5"] {
background-color: yellow;
color: blue;
}
span div {
background-color: black;
color: white;
}
.c1 div {
background-color: blue;
color: yellow;
}
2.5 css样式也可以写在单独文件中
<link rel='stylesheet' href="commons.css" />
3.注释
/* */
4.边框
宽度，样式，颜色（border:4px dotted虚线的/solid实体的 red;）
border-left/right/top/bottom
5.背景
height 不可以百分比
width
text-align:center 水平居中
line-height 垂直方向根据标签高度居中
color
font-size 字体大小
font-weight 字体加粗
6.float
让标签浪起来，块级标签也可以堆叠
浮动后，若有父级div，老子管不住孩子，需要在最后添加一个div如下
<div style='clear':both></div>
7.display
实现块级标签与内联（行内）标签的转换
如：
<div style=" display:inline">asdf</div> 块级转为行内
<span style=" display:block">asdf</span> 行内转为块级
但是行内转为块级，还是无法设置高度，宽度，padding margin
若设置参数为inline-block就可以啦
display:none 让标签消失
display:inline-block
具有inline,默认自己有多少占用多少
具有block,可以设置高度，宽度，padding margin
8.padding margin(0,auto)
padding内边距，填充
margin外边距，边缘，页边的空白
9.text-align 水平居中
line-height=标签的height就是垂直居中
10.height width line-height color font-size
font-weight
11.background-image:url()
问题1：样式共有的可以单独写出，减少代码重复性
问题2：自适应和改变大小变形
左右滚动条的出现
宽度，百分比
页面最外层：像素的宽度 => 最外层设置绝对宽度
自适应：media
问题3：image标签中，默认有个1px的边框，在ie中图片会有个蓝色边框
去除方法：border为0
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>a+img去border</title> </head> <body> <a href="http://www.baidu.com"> <img src="jpg.jpg" style="width:200px;height:200px;border:0" /> </a> </body> </html>
图片做超链接：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <a href="http://www.baidu.com"> <img src="jpg.jpg" style="width:300px;height:300px;" /> </a> </body> </html>
问题4：数量输入框
html回顾：
1.块级和行内
2.form标签：
<form action="http://www.baidu.com" method="GET">
<input type="text" anme="q" />
<input type="text" name="b" />
<input type="submit" />
</form>
GET:http://www.baidu.com?q=用户输入的值
http://www.baidu.com?q=用户输入的值&b=用户输入的内容
POST 请求头 请求内容
12.position
a.fixed
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>position=fixed</title> </head> <body> <div onclick="GoTop();" style="position:fixed;bottom:50px;right:50px; height:50px;width:80px;background-color:black;color:white; ">返回顶部</div> <div style="height:5000px;background-color:#dddddd;"></div> <script> function GoTop() { document.body.scrollTop = 0; } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ background-color:black; height:50px; color:#dddddd; top:0; left:0; right:0; position:fixed; } .pg-body{ background-color:green; height:5000px; color:yellow; margin-top:52px; } </style> </head> <body> <div class="pg-header" >头部</div> <div class="pg-body" >内容</div> </body> </html>
b.relative+absolute
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>relative+absolute</title> </head> <body> <div style="position:relative; width:500px;height:200px;border:1px dotted red; margin:0 auto;"> <div style="position:absolute;width:50px;height:50px;border:1px solid black; left:0;bottom:0;background-color:green;"></div> </div> </body> </html>
13.opacity : 0.5透明度
示例：二层遮罩：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="position:fixed;background-color:black; top:0; bottom:0; right:0; left:0; opacity:0.5;"></div> <div style="height:5000px;background-color:green;">asdfghjkl;</div> </body> </html>
14.z-index 层级顺序
示例：三层遮罩：（注意：其中display:none这个属性需要js配合，目前水平需要去掉）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>z-index</title> </head> <body> <!-- z-index谁大谁在最表层--> <div style="display:none;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" value="name"/> <input type="text" value="password"/> <input type="text" value="e-mail"/> </div> <div style="display:none;z-index:9;position:fixed;background-color:black; top:0; bottom:0; right:0; left:0; opacity:0.1;"></div> <div style="height:5000px;background-color:green;">asdfghjkl;</div> </body> </html>
15.overflow:hidden,auto 超过这个范围，做什么样的行为
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>overflow=hidden只显示父级大小</title> </head> <body> <div style="height:200px;width:300px;overflow:hidden;"> <img src="逻辑.png" /> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>overflow:auto</title> </head> <body> <div style="height:200px;width:300px;overflow:auto;"> <img src="逻辑.png" /> </div> </body> </html>
16.hover:当鼠标移动到当前标签上时，以下css属性才生效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hover</title> <style> .pg-header{ position:fixed; top:0; right:0; left:0; height:50px; background-color:#2459a2; line-height:50px; } .pg-body{ margin-top:50px; } .w{ width:900px; margin:0 auto; } .pg-header .menu{ display:inline-block; padding:0 20px 0 20px; /*顺时针上右下左*/ color:white; } /*当鼠标移动到当前标签上时，以下css属性才生效*/ .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">视频</a> <a class="menu">小说</a> <a class="menu">游戏</a> </div> </div> <div class="pg-body"> <div class="w">body</div> </div> </body> </html>
17.background 下面的background-*,可以简写属性值以空格隔开就好
如：background:red url(1.jpg) 10px 20px no-repeat;
background-image:url("image/1.gif") #默认，div大，图片重复放
background-repeat:no-repeat 去重
background-repeat:repeat-x
background-repeat:repeat-y
background-position-x 很多小图标放在一张图片张，通过移动图片本身的位置来获取其中某个小图标
background-position-y
练习 输入框，右边放个小图标
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>clear-both</title> </head> <body> <div style="height:35px;width:400px;position:relative;"> <input type="text" value="用户名" style="height:35px;width:360px;padding-right:35px;"/> <span style="position:absolute;right:0px;top:2px; background-image:url(pwd-icons-new.png); background-repeat:no-repeat; background-position-x:0px; background-position-y:0px; height:35px;width:35px;display:inline-block;"></span> </div> </body> </html>
CSS补充之后台管理页面布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>布局</title> <style> .left{ float:left; } .right{ float:right; } .pg-header{ margin:0 ; height:48px; background-color:#2459a2; color:white; } .pg-content .menu{ position:fixed; top:48px; left:0; bottom:0; width:200px; background-color:#dddddd; color:white; /*min-width:200px;*/ } .pg-content .content{ position:fixed; top:48px; right:0; bottom:0; left:200px; background-color:purple; color:white; overflow:auto; } </style> </head> <body > <div class="pg-header">LOGO</div> <div class="pg-content"> <div class="menu left">MENU</div> <div class="content left">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> </div> <div style="clear:both"></div> </div> <div class="pg-footer"></div> </body> </html>
后台管理页面布局：
通过修改一个属性，可以实现俩种效果 overflow:auto;
a.注释实现左侧菜单跟随滚动条,
b.使用该属性，则左侧及以上不动，（此种效果较为常用）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>布局</title> <style> .left{ float:left; } .right{ float:right; } .pg-header{ margin:0 ; height:48px; background-color:#2459a2; color:white; } .pg-content .menu{ position:absolute; top:48px; left:0; bottom:0; width:200px; background-color:#dddddd; color:white; /*min-width:200px;*/ } .pg-content .content{ position:absolute; top:48px; right:0; bottom:0; left:200px; /*此处注释是因为内部又嵌套一个div，通过设置内部div背景色*/ /*background-color:purple;*/ color:white; overflow:auto; //此处注释与否，可以实现俩种不同的页面管理布局，注释实现左侧菜单跟随滚动条, 否则左侧及以上不动， } </style> </head> <body > <div class="pg-header">LOGO</div> <div class="pg-content"> <div class="menu left">MENU</div> <div class="content left"> <!--CONTENT--> <div style="background-color:purple"> <p style="margin-top:0 ">力量</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 style="margin-bottom:0">力量</p> </div> </div> <div style="clear:both"></div> </div> <div class="pg-footer"></div> </body> </html>
浙公网安备 33010602011771号