CSS学习总结

CSS的导入方式共有三种：内部样式，外部样式，行内样式（当多种样式存在时，遵守就近原则）
行内样式：
<h1 style="color:red;font-size:8px">标题</h1>
内部样式：
<style> h1{ color:red; font-size:8px; } </style>
<h1>标题</h1>

外部样式：
通过link标签实现

三种基本选择器
类选择器通过“.类名{}”来实现
id选择器通过“#id名{}”来实现
标签选择器通过“标签名{}”来实现
选择器优先级：id选择器>类选择器>标签选择器

层次选择器
1.后代选择器
//选中body下的所有p标签
body p{ background:red; }

2.子选择器
//只选中body的下一级中的p标签
body>p{ }

3.相邻兄弟选择器（弟弟选择器）
//此处选中的是与id为wu（即p2）为同级的p标签，只选中p3
#wu + p{ } <p1></p1> <p2 id="wu"></p2> <p3></p3>

4.通用选择器
此时选中的是id为wu的元素向下的所有同级元素，选中p3和p4
#wu ~ p{ } <p1></p1> <p2 id="wu"></p2> <p3></p3> <p4></p4>

属性选择器（常用）可以理解为id与class结合使用
/*
= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾
*/
//存在id属性元素 标签名[id]{} //id为具体的某个值的元素 标签名[id=]{}
文本样式：
文本居中：text-align=center
缩进：text-indent：2em
下划线：text-decoration：underline
文本图片水平对齐：vertical-align：middle