------ 本文为回顾复习，只记录部分内容，仅供参考 ------
本文包括以下css内容:
id和class的区别伪类选择器导入外部样式样式的继承和优先级标记的显示模式盒子模型Float, Clear属性Others
id和class的区别
id只能被调用一次，class可以被调用多次。如果id被多次调用，则在id的调用上会出现问题。
伪类选择器
标签:link标签:visited标签:hover标签:active (注:用于鼠标活动)
更多查看菜鸟教程- css - 伪类
导入外部样式
Link标签只能用于HTML中：
<link rel="stylesheet" href="css/test.css">
import url('css文件路径');
在style中可使用import导入外部样式。在此样式中，可以直接继承外部导入的样式。例如.aa。
<style>
@import url('css/test.css');
.aa{
font-size:14px;
}
</style>
另外，在css文件中可以直接引入外部样式，同样可继承外部样式。用法如下：
@import url('css/test.css');
样式的继承和优先级
1. 元素的继承
子元素继承父元素的样式，如果子元素拥有相同的样式，标签则使用子元素的样式。
例如下列语句，则最终文本显示的字体颜色为green：
<p style = "color:red"><b style="color=green">This is test.</b></p>
2. 行内样式的优先级
行内(style)样式 > 内嵌样式 > 外部样式
3. 内嵌样式优先级：
id > class > 标签样式
...
<style>
p{
color:red;
}
.aa{
color:yellow;
}
#bb{
color:green;
}
</style>
...
<p class="aa" id="bb" style="color:blue">This is the test.</p>
4. 强制优先级（不建议使用）
强制优先级可以手动指定，只需要在样式后面加!important。例如上文内嵌样式优先级中的<style>标签：
...
<style>
p{
color:red !important;
}
.aa{
color:yellow;
}
#bb{
color:green;
}
</style>
...
<p class="aa" id="bb" style="color:blue">This is the test.</p>
最终显示的p标签的字体颜色为red。
标记的显示模式
标记的显示模式分为 “行显示标记” 和 “块显示标记”。
1. 行显 示标记
行显示标记不能设置高度和宽度，例如a标签，从左到右排列。
2. 块 显示标记
例如p标签， 从上到下排列。
通过使用margin-left:auto;和margin-right:auto;可将块显示标记居中
3. 显示标记 转换
使用display:block;方法将 行显示标记 转换为 块显示标记。
使用display:inline-block;方法将 行显示标记 转换为 可设置宽高度的行显示标记。
盒子模型
Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域，内边距是透明的。Content(内容) - 盒子的内容，显示文本和图像。
Float, Clear属性
在使用了float进行排版的时候会出现一些重叠的问题, 此时需要在样式中使用clear来进行属性的清楚。但是在样式中使用了clear属性之后无法使用margin属性来调整边距, 因为clear同样会清除该属性。而排版量大的布局注定无法在每个class或者id中添加clear来实现逐个清楚。因此, 惯用的做法是在几个div中单独添加一个带clear:both;属性的div作为分割来完成块的布局。
Others
- (鼠标动作)
cursor:pointer;: 当光标移动到标签的时候鼠标变为手的形状。 - (表格边框)
border-collapse:collapse;将td之间的边框去掉一个。 - (背景图片)
background-repeat:no-repeat(repeat-x/y);不平铺背景图片(横/纵向平铺)。
持续更新中......
2020年2月1日
