CSS的学习记录(一)

------ 本文为回顾复习，只记录部分内容，仅供参考 ------

本文包括以下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日