Python_css选择器
标签：source覆盖窗口play辅助顺序排版绝对定位方法
1. 概述
css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化。
存在方式有三种：元素内联、页面嵌入和外部引入，比较三种方式的优缺点。
语法：style = ‘key1:value1;key2:value2;‘
- 行内式：
在标签中使用 style=‘xx:xxx;‘单独加在某个标签上，style增加其他属性需要以分号分隔；
<div style=\”background-color:darkgrey; height: 100px; width:100px\”>我是div</div>
- 嵌入式：
在页面中嵌入 < style type=\”text/css\”> </style >块
<head>
<meta charset=\”UTF-8\”>
<title>Title</title>
<style>
div{
background-color:darkgrey;
height: 100px;
width:100px;
}
</style>
</head>
- 链接式：
将.css文件引入到HTML文件中，创建一个.css文件，将css文件放入link标签中
<head>
<meta charset=\”UTF-8\”>
<title>Title</title>
<link href=\”http://www.mamicode.com/mystyle.css\” rel=\”stylesheet\” type=\”text/css\”/>
</head>
- 导入式：
将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中.
<head>
<meta charset=\”UTF-8\”>
<title>Title</title>
<style type=\”text/css\”>
@import\”mystyle.css\”; #此处要注意.css文件的路径
</style>
</head>
注意：import 会先解析页面所有信息，先不会渲染页面，等待所有信息加载后再渲染页面，如果加载慢会出现无渲染页面，导致用户体验不好，推荐使用嵌入式和链接式。
2. CSS选择器
2.1 基础选择器
2.1.1 通用元素选择器
通用元素选择器，匹配任何元素
*{
color: darkgrey;
}
2.1.2 标签选择器
匹配所有使用XX标签的元素；
例如，需要选择所有标签为div的元素设置样式
div{
color: grey;
background-color: antiquewhite;
}
2.1.3 class选择器
.info 或E.info ：class属性选择器，匹配所有class属性中包含info的元素，class属性可以重复，即多个class属性相同的元素；
.cs1{
color: grey;
background-color: antiquewhite;
}
<div class=\”cs1\”>我是div1标签</div>
<div class=\”cs1\”>我是div2标签</div>
<p class=\”cs1\”>我是p标签</p>
<!– 以上三个标签都会变成.cs1的样式 –>
2.1.4 id选择器
#info或E#info :id属性选择器，匹配所有id属性等于info的元素。只匹配id等于info的元素
#cs1{
color: grey;
background-color: antiquewhite;
}
<div id=\”cs1\”>我是div1标签</div>
<div class=\”cs1\”>我是div2标签</div>
<!– 以上标签，只有id=cs1的标签会变成#cs1的样式–>
