python解析css⽂件_pythoncss概述
1. 概述
css是英⽂Cascading Style Sheets的缩写，称为层叠样式表，⽤于对页⾯进⾏美化。
存在⽅式有三种：元素内联、页⾯嵌⼊和外部引⼊，⽐较三种⽅式的优缺点。
语法：style = 'key1:value1;key2:value2;'
⾏内式：
在标签中使⽤ style='xx:xxx;'单独加在某个标签上，style增加其他属性需要以分号分隔；
我是div
嵌⼊式：
在页⾯中嵌⼊ < style type="text/css"> 块
Title
div{
background-color:darkgrey;
height: 100px;
width:100px;
}
链接式：
将.css⽂件引⼊到HTML⽂件中，创建⼀个.css⽂件，将css⽂件放⼊link标签中
1
2
3
Title
4
5
导⼊式：
将⼀个独⽴的.css⽂件引⼊HTML⽂件中，导⼊式使⽤CSS规则引⼊外部CSS⽂件，
1
2
3
Title
4
5 @import"mystyle.css"; #此处要注意.css⽂件的路径
6
7
注意：import 会先解析页⾯所有信息，先不会渲染页⾯，等待所有信息加载后再渲染页⾯，如果加载慢会出现⽆渲染页⾯，导致⽤户体验不好，推荐使⽤嵌⼊式和链接式
2.1 基础选择器
2.1.1 通⽤元素选择器
通⽤元素选择器，匹配任何元素
1 *{
2 color: darkgrey;
3 }
2.1.2 标签选择器
匹配所有使⽤XX标签的元素；
例如，需要选择所有标签为div的元素设置样式
1 div{
2 color: grey;
3 background-color: antiquewhite;
4 }
2.1.3 class选择器
.info 或E.info ：class属性选择器，匹配所有class属性中包含info的元素，class属性可以重复，即多个class属性相同的元素；页⾯
color: grey;
background-color: antiquewhite;
}
我是div1标签
我是div2标签
我是p标签
2.1.4 id选择器
#info或E#info :id属性选择器，匹配所有id属性等于info的元素
页⾯
#cs1{
color: grey;
background-color: antiquewhite;
}
我是div1标签
我是div2标签
我是p标签
2.2 组合选择器
2.2.1 多元素选择器
E,F：多元素选择器，同时匹配所有E标签元素或F标签元素，E和F之间⽤逗号分隔
页⾯
div,p{
color: grey;
background-color: antiquewhite;
}
我是div1标签
我是p标签
SPAN
2.2.2 后代元素选择器
E F：后代元素选择器，匹配所有属于E标签元素后代的F标签元素，即所有类似形式的所有后代，⼦⼦孙孙，E和F之间⽤空格分隔;
页⾯
div p{
color: grey;
background-color: antiquewhite;
}
我是p1标签
我是p2标签
我是p3标签
2.2.3 ⼦元素选择器
E >
F ：⼦元素选择器，匹配所有E元素的⼦元素F，只匹配到⼦元素，⼦元素的⼦元素匹配不到;
页⾯
#outer>.c1{
color: grey;
background-color: antiquewhite;
}
我是p1标签
我是p2标签
我是p3标签
页⾯
#outer>.c1{
color: grey;
background-color: antiquewhite;
}
我是p1标签
我是p2标签
我是p3标签
2.2.4 毗邻元素选择器
E + F：毗邻元素选择器，匹配所有紧随E元素之后的同级元素
F ，即只匹配挨着的下⼀个F元素，如不相邻也不起作⽤;
页⾯
#outer+.c1{
css 属性选择器color: grey;
background-color: antiquewhite;
}
我是p1标签
我是p2标签
我是p3标签
2.3 属性选择器
根据属性进⾏筛选匹配，只有第⼀个input标签匹配上对应的样式
页⾯
input[name="Hello"]{width:20px;height:20px}
>
3. 常⽤属性
3.1 颜⾊属性
color：
①英⽂单词形式，例如：red，yellow
②编码形式，例如：#cc3399，如双重可简写#c39
③基调颜⾊透明度设置，例如：rgb(255,255,255,0.5)，red、green、blue三⾊透明度设置，最后⼀个值设置透明度
3.2 字体属性
font-size: 20px/50%/larger 设置字体⼤⼩；
font-family:'Lucida Bright' ⽂本的字体系列；
font-weight: lighter/bold/border/ 字体的粗细；
font-style:normal/oblique/italic ⽂本的字体样式；
3.3 背景属性
font-family: Verdana, Arial, Helvetica, sans-serif; background-color: rgb(238, 238, 238);">background-image: 背景图⽚；background-repeat：平铺⽅式，no-repeat 不平铺，repeat 平铺满；
background-size: 图⽚⼤⼩设置，auto；
background-position：center 上下左右居中；left center左侧上下居中；top，bottom，right类似；
Title
3.4 ⽂本属性
text-align：center ⽂本居中
line-height：xxpx；⾏⾼ ，针对⽂本处理
width：xxpx；宽 %50
height：xxpx；⾼ %50
text-indent：xxpx ⾸⾏缩进，基于⽗元素
letter-spacing：xxpx；字母与字母之间距离
word-spacing：xxpx ；单词之间距离
direction：rt1
text-transform：capitalize；将单词⾸字母⼤写
min-height：设置默认最⼩⾼度
height：auto！important 以此样式为准
vertical-align：xxpx；垂直居中
opacity：0.3 透明度
3.5 CSS样式边框
border-style：solid；边框样式
border-color：red；边框颜⾊
border-width：1px；边框宽度
border-radius：20%；边框变成圆⾓
3.6 CSS样式浮动
正常⽂档流：将元素(标签)在进⾏排版布局时按照从上到下、从左到右的顺序分布排版的流；
脱离⽂档流：将元素从⽂档流中取出，进⾏覆盖，其他元素会按⽂档流中不存在该元素重新布局；
float 浮动标签属性(⾮完全脱离)：
假如某个div元素A是浮动的，如果A元素上⼀个元素也是浮动的，那么A元素会跟随在上⼀个元素的后边(如果⼀⾏放不下这两个元素，那么A元素会被挤到下⼀⾏)；如果A元素上⼀个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上⼀个元素的底部对齐。
注意：当初float被设计的时候就是⽤来完成⽂本环绕的效果，所以⽂本不会被挡住，这是float的特性，
即float是⼀种不彻底的脱离⽂档流⽅式。
float：left，right，both
清除浮动： clear : none | left | right | both
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
1
2 #div4{
3 border:solid 1px lavender;
4 background-color: rebeccapurple;
5 height: 100px;
6 }
7 #div1{
8 background-color: darkolivegreen;9 height: 100px;10 width: 980px;11 margin: auto;12 }13 #div2{
14 border-left: solid 1px lavender;15 height: 100px;16 width: 100px;17 background-color: darkgray;18 float: left;19 }20
#div3{
21 border-left: solid 1px lavender;22 height: 100px;23 width: 100px;24 background-color: darkgray;25 float: left;26 }27
#clear{
28 clear:both;29 }30
31

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。