Python自动化运维之21、CSS
一、css简介
CSS 是 Cascading Style Sheets的缩写，称为层叠样式表，用来设计网页的样式布局，以及大小来适应不同的屏幕等，使网页的样式和网页数据分离，
二、导入css
导入css有3种方式：
1.元素内嵌 行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。 <div style="background:red"></div> 2.页面嵌入 嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下： <head> <style> div {
background-color: red !important; # 如果有!important则会无论如何都会运用上这个css
} </style> </head> 3.外部引用 也是将一个.css文件引入到HTML文件中<link rel="stylesheet"href="mystyle.css" /> 注意： 导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面， 闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件， 因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。此外行内的样式等级最高
三、css选择器(常用)
标签选择器：
div { background-color:red; }
<div > </div>
class选择器：
.bd { background-color:red; }
<div class='bd'> </div>
id选择器：
#idselect { background-color:red; }
<div id='idselect' > </div>
关联选择器：
#idselect p{ background-color:red; }
<div id='idselect' > <p> </p> </div>
组合选择器：
input,div,p{ background-color:red; }
属性选择器：
input[type='text']{ width:100px; height:200px; }
.c1[xiao='a']{color:red;}
<div class='c1' xiao='a'>自定义属性选择器</div>
伪元素选择器：
a:link{background-color:red;} # 鼠标没有碰过的样式
a:hover{background-color:red;} # 鼠标放上去的样式
a:active{background-color:red;} # 选择链接时的样式
a:visited{background-color:red;} # 已经访问过的链接的样式
四、css常用的属性
1 颜色属性：
color：green color：#ff6600 color：#f60 color：rgb(255,255,255) # 红(R)、绿(G)、蓝(B) 每个的取值范围0~255 color：rgba(255,255,255,1) # RGBA是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha的(色彩空间)透明度
2 字体属性：
font-size:14px/50%/larger
font-family:微软雅黑,serif
font-weight:normal(默认值)/bold(粗)/bolder(更粗)/lighter(更细)
100、200、300~900,400 = normal，而 700 = bold
简写方式:
font: 20px '微软雅黑'
3 背景属性：
background-image:url(图片路径)
background-repeat:no-repeat(不重复)/repeat(重复平铺满)/repeat-x(向Y轴重复)/repeat-y(向Y轴重复)
background-position: right top(20px 20px);(横向：left center right)(纵向：top center bottom)
简写方式:
background:背景颜色 url(图像) 重复 位置
background:#f60 url(images/bg,jpg) no-repeat top center
4 文本属性：
text-align: center; # 横向排列 line-height: 200px; # 文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比 text-indent: 150px; # 首行缩进， letter-spacing: 10px; # 字符间距 word-spacing: 20px; # 单词间距
5 边框属性：
border-style: none # 无边框
solid # 直线边框
dashed # 虚线边框
dotted # 点状边框
double # 双线边框
inherit # 继承
groove # 凸槽边框
ridge # 垄状边框、inset inset边框、outset outset边框 依赖于border-color属性
border-width：px 固定值的边框
medium 中等边框
thick 粗边框
thin 细边框
inherit继承
border-color：red
#ff0000
rgb(255,255,0)
rgba(255,255,0,0.1)
border-radius: px 倒角
简写方式：
border：2px #f60 solid
6 列表属性：
list-style-type:none 无标记。
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
decimal 标记是数字。
decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)
lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek 小写希腊字母(alpha, beta, gamma, 等。)
lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
hebrew 传统的希伯来编号方式
armenian 传统的亚美尼亚编号方式
georgian 传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic 简单的表意数字
hiragana 标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana 标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha 标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha 标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）
list-style-position:inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
inherit 规定应该从父元素继承 list-style-position 属性的值。
list-style-image:URL 图像的路径。
none 默认。无图形被显示。
inherit 规定应该从父元素继承 list-style-image 属性的值。
简写方式:
list-style:square inside url('/i/arrow.jpg');
7 dispaly属性：
display:none # 隐藏属性
block # 变块级元素
inline # 变内联元素
inline-block # 内联元素默认不能设置长宽，块级可以，这个让内联元素可以设置height width
8 cursor属性：
cursor:pointer # 鼠标变小手
help
move
9 opacity属性：
opacity：0.4 # 0-1之间的小数，颜色透明度
10 z-index属性：
z-index：10 # 设置优先级，一般用在模态对话框
11 margin,pading边距属性：
margin: 10px # 外边距(本身不会增加)，与边框的距离 padding: 10px # 内边距(本身会增加) 遵循上右下左，元素之间的距离
12 float属性
float:left/right clear:both
<body> <div style="width: 500px;border:2px solid red;"> <div style="width:20%;float: left;background-color: aqua;">a</div> <div style="width:80%;float: left;background-color: beige;">b</div> <div style="clear:both"></div> </div> </body>
13 position属性
position: fixed # 固定浏览器窗口，网页返回顶部的按钮
absolute # 固定窗口
relative # 一般用于和absolute配合使用，相对于absolute
<div style="height:2000px;"> <div style="position: fixed;bottom: 0px;right: 0px;background-color: red;">111111</div> </div>
<div style="height: 500px;width: 400px;border: 2px solid red;position: relative;"> <div style="height: 200px;background-color: red;"> <div style="position:absolute;bottom: 0px;right: 0px;">111</div> </div> </div>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模态对话框</title> <style> .hide { display: none; } .modal{ width:400px; height:300px; background-color: #dddddd; position: fixed; top:50%; left:50%; margin-top:-150px; margin-left:-200px; z-index: 10; } .shadow { position: fixed; top:0px; left:0px; right:0px; bottom:0px; /*background-color: black;*/ /*opacity: 0.6;*/ background-color: rgba(0,0,0,.6); z-index: 9; } </style> </head> <body> <input type="button" value="添加"/> <div class="shadow"></div> <div class="modal"> <input type="text"/> <input type="text"/> <input type="text"/> <input type="text"/> </div> <div style="height: 2000px;"></div> </body> </html>
注意：
1、css文档从上到下执行，以最后一个为准
a { font-size: 10px; } b { font-size: 40px; } <p class = "a b"> ddd </p>
2、有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt 切记
3、父div里面的子div都float,
方法1、在最后加一个div然后添上属性 clear：both
方法2、定义一个通用属性，
clearfix:afte{
content: '111';
display: block;
clear: both;
/* visibility 隐藏内容但占高度*/
visibility: hidden;
height: 0;
/*display: none;隐藏内容也不占高度*/
}
一些案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>带图像的登录</title> <style> .icon-name{ background-image: url(i_name.jpg); height:16px; width:200px; display: inline-block; background-repeat:no-repeat; } </style> </head> <body> <div style="width:200px;position: relative;"> <input style="width:180px;padding-right: 20px;" type="text"/> <span class="icon-name" style="position: absolute;top:5px;right: -186px;"></span> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类选择器运用清除浮动</title> <style> .c1:after { content:'aaa'; } .c2:before { content:'666'; } .clearfix:after{ content:'.'; clear:both; display: block; visibility: hidden; height:0; } .left{ float:left; } </style> </head> <body> <div class="c1">ddd</div> <div class="c2">888</div> <div style="background-color: red;" class="clearfix"> <div class="left" style="height:100px;background-color: green">1</div> <div class="left">2</div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小尖角</title> <style> .icon { display: inline-block; border-top:15px solid red; /*border-right:15px solid green;*/ /*border-bottom:15px solid yellow;*/ /*border-left:15px solid pink;*/ border-right:15px solid transparent; border-bottom:15px solid transparent; border-left:15px solid transparent; } </style> </head> <body> <div class="icon"></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>后台布局一</title> <style> * { margin:0; } .pg-header { height:48px; background-color: #2459a2; } .pg-body .body-menu{ position: absolute; top:48px; left:0; bottom:0; width:200px; background:red; } .pg-body .body-content{ position: absolute; top:48px; left:210px; /*bottom:0;*/ right:0; background:green; } </style> </head> <body> <div class="pg-header"></div> <div class="pg-body"> <div class="body-menu"></div> <div class="body-content"> asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/> asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/> asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/> asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/> asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/> asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/> asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/> asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/> asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/> asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/> asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/> </div> </div> <div class="pg-heaher"></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>后台布局二</title> <style> * { margin:0; } .pg-header { height:48px; background-color: #2459a2; } .pg-body .body-menu{ position: absolute; top:48px; left:0; bottom:0; width:200px; background:red; } .pg-body .body-content{ position: absolute; top:48px; left:210px; bottom:0; right:0; background:green; overflow: auto; } </style> </head> <body> <div class="pg-header"></div> <div class="pg-body"> <div class="body-menu"></div> <div class="body-content"> asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/> asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/> asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/> asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/> asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/> asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/> asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/> asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/> asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/> asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/> asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/> </div> </div> <div class="pg-heaher"></div> </body> </html>
