Python之路【第十一篇续】前端初识之CSS
css解释
css样式:
css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化,CSS的可以使页面更加的美观。基本上所有的html页面都或多或少的使用css。
存在方式有三种:元素内联、页面嵌入和外部引入
语法:style = 'key1:value1;key2:value2;'
在标签中使用 style='xx:xxx;'
在页面中嵌入 < style type="text/css"> </style > #在头部指定CSS样式
引入外部css文件
优先级:标签>页面镶入>外部,这个仅限同样的样式冲突是才有用元素内联:
直接在标签上应用:代码如下
<p style="background-color: aqua"> shuaige </p>
页面嵌入
在头部写好css样式然后应用:代码如下
<head> <meta charset="UTF-8"> <title>luotianshuai_study</title> <!--在头部指定好CSS样式然后,在标签里使用class="样式名应用"--> <style> .css_test{ background-color: darkorchid; } </style> </head> <body> <div> <p class="css_test"> <!--这里应用指定好的CSS样式名即可--> shuaige </p> </div> </body>
效果图如下:
外部引用
写一个独立的文件存储css样式代码如下:建议(在样式文件里加上标注防止出现遗忘)html代码如下:
<head> <meta charset="UTF-8"> <title>luotianshuai_study</title> <!--这里通过link导入样式,有点类似与python导入模块中的import *--> <link rel="stylesheet" href="study_html_css.css"> </head> <body> <div> <p class=page_color> <!--这里直接应用指定好的CSS样式名即可--> shuaige </p> </div> </body>
效果图如下:
CSS样式应用中通过class应用CSS样式即可,还有两种知道即可代码如下:
id应用,"#",这个调用CSS样式的方法,就是在头部<style>#name{....}</style> #name意思就是所有id为name的都会使用这个Css样式,代码如下:
<head> <meta charset="UTF-8"> <title>luotianshuai_study</title> <style> #name{ background-color: red; } </style> </head> <body> <div> <p id="name"> <!--这里不需要指定,只要id=name的就会自动应用头部指定的CSS样式--> shuaige </p> <p id="name"> luotianshuai </p> </div> </body>
效果图如下:
标签应用,为指定标签统一设置格式:在头部<style>p{....}</style> 这里的p是标签的名称,也可以是div这样就会给所有的div设置格式,代码如下
<head> <meta charset="UTF-8"> <title>luotianshuai_study</title> <style> p{ background-color: lightskyblue; width: 100px; height:100px; } </style> </head> <body> <div> <p> <!--这里不需要指定,只要id=name的就会自动应用头部指定的CSS样式--> shuaige </p> <p> luotianshuai </p> </div> </body>
效果图如下:
CSS常用属性
background 【背景】
background-color 背景颜色 代码如下:
<div style="background-color: red"> Hello,html </div>
显示效果:
background-image 背景图片 代码如下:
<div style="background-image: url(favicon.ico);height: 80px;" > </div>
显示效果如下:
首先确认,div是块级别的标签,我们的图片仅仅是一个小的图片,但是现在是平铺,所以看下面的代码:
<div style="background-image: url(favicon.ico);height: 80px;background-repeat: no-repeat" > </div>
显示效果如下图:
border 【边框】
设置边框,效果图如下图:
代码如下:
<!--border:有3个参数:线的粗细、线的样式(实线、点、虚线等)、线的颜色--> <!--第一种:线的粗细为1像素,实线、红色--> <div style="border:1px solid red;height:10px" ></div> <!--第二种:线的粗细为1像素,点、蓝色--> <div style="border:1px dotted blue;height:10px" ></div> <!--第三种:线的粗细为1像素、虚线、紫色--> <div style="border:1px dashed purple;height:10px" ></div>
边框可以单独的设置一边的边框、上、下、左、右
<!--在左边设置边框,3px、实线、红色--> <div style="border-left: 3px solid red">Luotianshuai</div>
效果图如下:
Display
代码如下:
<!--display 为none将隐藏标签--> <div style="display: none;">Luotianshuai</div> <!--display 为inline会将块级别标签调为内联标签--> <div style="background-color:red;display:inline">Luotianshuai</div> <!--display 为block会将内联标签调为块级别标签--> <a style="background-color:red;display:block">Luotianshuai</a>
cursor 鼠标停放所显示的效果
代码如下(实际效果自己写看):
<div style="cursor:pointer">停放在这里显示小手(pointer)</div> <div style="cursor:help">停放在这里显示问号(help)</div> <div style="cursor:wait">停放在这里显示问号(wait)</div> <div style="cursor:move">停放在这里显示移动(move)</div> <div style="cursor:crosshair">停放在这里显示定位(crosshair)</div>
浮动 float (用的比较多,用来布局使用)
效果图如下:
代码如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>luotianshuai_study</title> <style> .float-left{ width:20%; background-color:red; height: 500px; float: left; /*这里长和宽,可以用百分比或者直接指定像素来指定*/ } .float-right{ width: 80%; background-color:blue; height: 500px; float:left; /*这里长和宽,可以用百分比或者直接指定像素来指定*/ } </style> </head> <body> <div class="float-left"></div> <div class="float-right"></div> </body> </html>
注:这里需要注意,有一种情况,如果不给父div设置高度,并且设置了float之后,子的float可能会覆盖父div的颜色怎么办?在父的div内加一条:
<div style="clear:both;"></div>
更多见:http://www.cnblogs.com/wupeiqi/