python学习之路前端-CSS
CSS概述
css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化。
存在方式有三种:元素内联、页面嵌入和外部引入,比较三种方式的优缺点。
语法:style = 'key1:value1;key2:value2;'
- 在标签中使用 style='xx:xxx;'
- 在页面中嵌入 < style type="text/css"> </style > 块
- 引入外部css文件
必要性:美工会对页面的色彩搭配和图片的美化负责,开发人员则必须知道是如何实现的
常用的选择器
1.标签选择器
/*标签选择器,找到所有的标签应用以下样式*/ div { color: green; }
2.class选择器
/*class选择器,找到class=c1的所有标签,应用以下样式*/ .c1{ background-color: red; }
3.id选择器
/*id选择器,找到标签id等于i1的标签,应用以下样式*/ #i1{ font-size: 56px; /* color: green; */ }
4.关联选择器
/*层级选择器,找到 class=c2 下的div下的p下的class=c3标签,应用以下样式*/ .c2 div p .c3{ background-color: red; }
5.组合选择器
/*组合选择器,找到class=c4,class=c5,class=c6,的标签,应用以下样式*/ .c4,.c5,.c6{ background-color: aqua; }
6.属性选择器
/*属性选择器*/ input[type='text'] {width:80px;height: 20px;background-color: #2459a2}
Style样式
style的使用一共有三种形式:
1.直接设置标签的属性
<div style="font-size:20px;color:red;" ></div>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>style的第一种使用方式</title> </head> <body> <div style="font-size:20px;color:red;" > <span>style的第一种使用方式:直接在标签中设置</span> </div> </body> </html>
2.在head头部进行设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>style的使用</title> <style> div { background-color: blue; font-size: 40px; } </style> </head> <body> <div> <p>style的第二种使用方式:在head头部进行设置</p> </div> </body> </html>
3.将所有的style样式放到一个特定的文件中,然后在使用的地方进行引用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Style的第三种使用方式:引用已经定义好的样式文件</title> <link rel="stylesheet" href="common.css" /> </head> <body> <div>Style的第三种使用方式:引用已经定义好的样式文件</div> </body> </html>
css文件定义的样式
div { font-size: 50px; background-color: aquamarine; color: #000; }
说明:三种方式各有利弊,请根据实际情况来进行选择
标签属性:只针对当前标签生效,不具有重用性。 head头部style:针对当前页面均有效,具有重用性,当程序有多个页面时,则需要将head style分别复制到其他的页面方才能生效 css样式文件:程序有多个页面,当多个页面都需要使用相同的style只需要在使用处引用css文件即可。 三种style可以同时使用,其优先级如下: 标签属性优先级最高 head头部style其次 css样式文件优先级最低 如果标签属性和css文件中的style不同时,则继承css样式文件中的style,如果style和css文件相同时,则标签属性会将css文件中的style给覆盖掉。
style和选择器综合应用实例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!--<style的使用有三种方式:1.直接设置标签的属性 2.在head头部中进行设置 3.将所有的style放到--> <!--一个特定的文件中,然后在使用的地方进行引用,三种方式各有利弊,根据实际情况来选择使用>--> <!--<link rel="stylesheet" href="common.css" />--> <style> /*标签选择器,找到所有的标签应用以下样式*/ div{ color: green; } /*id选择器,找到标签id等于i1的标签,应用以下样式*/ #i1{ font-size: 56px; /* color: green; */ } /*class选择器,找到class=c1的所有标签,应用以下样式*/ .c1{ background-color: red; } /*层级选择器,找到 class=c2 下的div下的p下的class=c3标签,应用以下样式*/ /*.c2 div p a{*/ /**/ /*}*/ .c2 div p .c3{ background-color: red; } /*组合选择器,找到class=c4,class=c5,class=c6,的标签,应用以下样式*/ .c4,.c5,.c6{ background-color: aqua; } /*属性选择器*/ input[type='text'] {width:80px;height: 20px;background-color: #2459a2} </style> </head> <body> 用户名:<input type="text"/> <div class="c4">寒风飘飘落叶</div> <div class="c5">军队是一朵绿化</div> <div class="c6">亲爱的战友你不要想家,不要想妈妈</div> <div class="c2"> <div></div> <div> <p> <span>声声我日夜呼唤,多少句心里话</span> <a class="c3">不要离别时两眼泪花,军营是咱温暖的家</a> </p> </div> </div> <div class="c3">妈妈你不要牵挂,孩儿我已经长大</div> <span class="c1">站岗执勤是保卫国家,风吹雨打都不怕</span> <div class="c1">衷心的祝愿妈妈,愿妈妈健康长寿</div> <a class="c1">待到庆功时再回家,再来看望好妈妈</a> <a id="i1">baidu</a> <div>99</div> <div>99</div> <div>99</div> <div> <div>asdf</div> </div> </body> </html>
background系列
1.background-color
背景色有如下三种表现形式
background-color: #FF69B4;
background-color: rgb(25,180,10);
background-color: red;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .c1{ color: red; font-size: 32px; height: 150px; width: 600px; } </style> </head> <body> <div class="c1">故乡有位好姑娘,我时常梦见她</div> <div style="width: 600px;"> <div style="width: 20%;background-color: antiquewhite;float: left">军中的男儿也有情</div> <div style="width: 80%;background-color: palegoldenrod;float: left">也愿伴你走天涯</div> </div> </body> </html>
2.background-image
可以像定义样式一样将图片的属性在style中进行定义
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .img{ background-image: url("junren.gif"); height: 150px; width: 400px; background-repeat: no-repeat; } .img2{ background-image: url("guniang.jpg"); height: 50px; width: 50px; background-position: 84px -58px; } </style> </head> <body> <div class="img"></div> <div class="img2"></div> </body> </html>
3. background-repeat
显示的背景图片是否重复填充(no-repeat不重复填充)
4.background-position
根据实际需要调整background-position来展示不同的图片、内容
应用:将京东的购物车图案显示为"小房子"
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .img { background-image: url(jd2015img.png); height: 10px; width:10px; background-position: 87px 18px; } </style> </head> <body> <div class="img"></div> </body> </html>
border
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>border的使用</title> </head> <body> <div style="width: 500px;height: 10px;border: 1px solid red;"></div> <br/> <div style="width: 500px;height: 10px;border: 1px dotted blue;"></div> <br/> <div style="width: 500px;height: 10px;border: 1px dashed green;"></div> </body> </html>
marign和padding
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin和padding的使用</title> </head> <body> <h2>margin</h2> <div style="border: 1px solid red;height: 60px;"> <div style="background-color: green;height: 40px;margin-top: 20px;"></div> </div> <h2>padding</h2> <div style="border:1px solid red;height: 70px;"> <div style="background-color: yellowgreen;height: 40px;padding-top: 30px;"></div> </div> </body> </html>
display
1.display的属性值
display none:隐藏,使其内容不显示 display block:使行内标签具有块级标签的属性 display inline:使行内标签具有块级标签的属性 display inline-block:使行内标签具有块级标签的属性
2.display应用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>display的使用</title> </head> <body> <!--display none:隐藏,使其内容不显示--> <span style="color: red;font-size: 10px;">span标签是行内标签,使用display标签前的效果</span> <br/> <span style="color: red;font-size: 40px; display: none;">span标签是行内标签,使用display none标签后的效果</span> <br/> <!--display block:使行内标签具有块级标签的属性--> <span style="color: red;font-size: 20px;">span标签是行内标签,有多少内容占多少空间</span> <span style="background-color: aqua;font-size: 5px;height: 20px;display: block;">使行内标签具有块级标签的属性,占据整行</span> <!--display inline:使行内标签具有块级标签的属性--> <div style="background-color: blueviolet;font-size: 20px;">div是块级标签,不管内容有多少都是占据一行</div> <div style="background-color: cornflowerblue;font-size: 20px;display: inline">使div块级标签具有行内标签的属性</div> <!--display inline-block:使行内标签具有块级标签的属性--> <span style="color: red;font-size: 20px;">span标签是行内标签,有多少内容占多少空间</span> <span style="background-color: aqua;font-size: 5px;height: 50px;display: inline-block;">使行内标签既具有块级标签的属性又具有行内标签的属性,占据整行</span> </body> </html>
cursor
超链接