CSS
1 查找标签（选择器）
- 引入选择
- 嵌入式
- 链接式 css文件中写（重点使用）
- 导入式 这种最后加载css 用户体验不好,而且引用的数量有限制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<link rel="stylesheet" href="css_test.css"> <!--导入css文件-->
<!--<style>-->
<!--@import "css_test.css";-->
<!--</style>-->
</head>
<body>
<!--<p style="color: red;background-color: green">hello</p>-->
<p>hello</p>
<div>DIV</div>
</body>
</html>
选择器
注意：一个块级标签可以嵌套块、内联标签，内联不能嵌套块级标签
p不能嵌套任何块标签
组合选择器
- 后代
- 子代
- 毗邻
- 兄弟
子代选择器
2操作标签（属性选择）
E[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略。
比如“[cheacked]”。以下同。） p[title] { color:#f00; }
E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; }
E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
td[class~=”name”] { color:#f00; }
E[attr^=val] 匹配属性值以指定值开头的每个元素
div[class^="test"]{background:#ffff00;}
E[attr$=val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;}
E[attr*=val] 匹配属性值中包含指定值的每个元素 div[class*="test"]{background:#ffff00;}
[po="p1"] po是自己定义的属性
<style>
# 这样就能共同查找了
div[po="p2"]{
color: red;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div</title>
<style>
/*div[po="p2"]{*/
/*color: red;*/
/*}*/
/*通过class属性寻找
.c1[po="p1"]{
color: red;
}
</style>
</head>
<body>
<div po="p1" class="c1">p1</div> <!--普通的属性-->
<div po="p2" class="c1">p2</div> <!--普通的属性-->
<div >p3</div>
</body>
</html>
优先级****
1 内联样式表的权值最高 style=""－－－－－－－－－－－－1000；
2 统计选择符中的ID属性个数。 #id －－－－－－－－－－－－－－100
3 统计选择符中的CLASS属性个数。 .class －－－－－－－－－－－－－10
4 统计选择符中的HTML标签名个数。 p －－－－－－－－－－－－－-－1
通过值进行计算，谁的和大，谁的优先级高
css文本属性：
颜色
字体大小
水平对齐方式：
css背景属性
display属性
display:none
页面布局
这么把div放到一行，div是块级标签，不在一行
内联标签是不能设置长宽的
解决方法：
使用inline-block
- span 使用display:block变成块级标签 会独占一行
- inline 可以给块级标签设置成内联标签
- inline-block 都可以设置