css 基础知识
huangsq
# css 基础知识
# 所有 CSS 文本属性
| 属性 | 描述 |
|---|---|
| color (opens new window) | 设置文本颜色。 |
| direction (opens new window) | 指定文本的方向 / 书写方向。 |
| letter-spacing (opens new window) | 设置字符间距。 |
| line-height (opens new window) | 设置行高。 |
| text-align (opens new window) | 指定文本的水平对齐方式。 |
| text-decoration (opens new window) | 指定添加到文本的装饰效果。 |
| text-indent (opens new window) | 指定文本块中首行的缩进。 |
| text-shadow (opens new window) | 指定添加到文本的阴影效果。 |
| text-transform (opens new window) | 控制文本的大小写。 |
| text-overflow (opens new window) | 指定应如何向用户示意未显示的溢出内容。 |
| unicode-bidi (opens new window) | 与 direction 属性一起使用，设置或返回是否应重写文本来支持同一文档中的多种语言。 |
| vertical-align (opens new window) | 指定文本的垂直对齐方式。 |
| white-space (opens new window) | 指定如何处理元素内的空白。 |
| word-spacing (opens new window) | 设置单词间距。 |
比如text-shadow
h1 {
text-shadow: 2px 2px red; // 给文字加红色阴影
}
# 所有 CSS 背景属性
在使用简写属性时，属性值的顺序为：
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
属性值之一缺失并不要紧，只要按照此顺序设置其他值即可。请注意，在上面的例子中，我们没有使用 background-attachment 属性，因为它没有值。
| 属性 | 描述 |
|---|---|
| background (opens new window) | 在一条声明中设置所有背景属性的简写属性。 |
| background-attachment (opens new window) | 设置背景图像是固定的还是与页面的其余部分一起滚动。 |
| background-clip (opens new window) | 规定背景的绘制区域。 |
| background-color (opens new window) | 设置元素的背景色。 |
| background-image (opens new window) | 设置元素的背景图像。 |
| background-origin (opens new window) | 规定在何处放置背景图像。 |
| background-position (opens new window) | 设置背景图像的开始位置。 |
| background-repeat (opens new window) | 设置背景图像是否及如何重复。 |
| background-size (opens new window) | 规定背景图像的尺寸。 |
# CSS 字体属性
# 字体属性
为了缩短代码，也可以在一个属性中指定所有单个字体属性。
font 属性是以下属性的简写属性：
- font-style
- font-variant
- font-weight
- font-size/line-height
- font-family
使用简写声明设置一些字体属性：
p.a {
font: 20px Arial, sans-serif;
}
p.b {
font: italic small-caps bold 12px/30px Georgia, serif;
}
# 所有 CSS 字体属性
| 属性 | 描述 |
|---|---|
| font (opens new window) | 简写属性。在一条声明中设置所有字体属性。 |
| font-family (opens new window) | 规定文本的字体系列（字体族）。 |
| font-size (opens new window) | 规定文本的字体大小。 |
| font-style (opens new window) | 规定文本的字体样式。 |
| font-variant (opens new window) | 规定是否以小型大写字母的字体显示文本。 |
| font-weight (opens new window) | 规定字体的粗细。 |
# 浮动和清除
# float 属性
float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。
float 属性可以设置以下值之一：
- left - 元素浮动到其容器的左侧
- right - 元素浮动在其容器的右侧
- none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
- inherit - 元素继承其父级的 float 值
最简单的用法是，float 属性可实现（报纸上）文字包围图片的效果。
# clear 属性
clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。
clear 属性可设置以下值之一：
- none - 允许两侧都有浮动元素。默认值
- left - 左侧不允许浮动元素
- right- 右侧不允许浮动元素
- both - 左侧或右侧均不允许浮动元素
- inherit - 元素继承其父级的 clear 值
使用 clear 属性的最常见用法是在元素上使用了 float 属性之后。
在清除浮动时，应该对清除与浮动进行匹配：如果某个元素浮动到左侧，则应清除左侧。您的浮动元素会继续浮动，但是被清除的元素将显示在其下方。
下例将清除向左的浮动。表示在（div 的）左侧不允许出现浮动元素：
# clearfix Hack
如果一个元素比包含它的元素高，并且它是浮动的，它将“溢出”到其容器之外：
然后我们可以向包含元素添加 overflow: auto;，来解决此问题：
# 实例
.clearfix {
overflow: auto;
}
# CSS 函数
CSS 函数用作各种CSS属性的值。
| 函数 | 描述 |
|---|---|
| attr() (opens new window) | 返回所选元素的属性值。 |
| calc() (opens new window) | 允许您执行计算来确定 CSS 属性值。 |
| cubic-bezier() (opens new window) | 定义三次贝塞尔曲线。 |
| hsl() (opens new window) | 使用色相-饱和度-亮度模型（HSL）定义颜色。 |
| hsla() (opens new window) | 使用色相-饱和度-亮度-阿尔法模型（HSLA）定义颜色。 |
| linear-gradient() (opens new window) | 将线性渐变设置为背景图像。定义至少两种颜色（从上到下）。 |
| radial-gradient() (opens new window) | 将径向渐变设置为背景图像。定义至少两种颜色（从中心到边缘）。 |
| repeating-linear-gradient() (opens new window) | 重复线性渐变。 |
| repeating-radial-gradient() (opens new window) | 重复径向渐变。 |
| rgb() (opens new window) | 使用红-绿-蓝模型（RGB）定义颜色。 |
| rgba() (opens new window) | 使用红-绿-蓝-阿尔法模型（RGB）定义颜色。 |
| var() (opens new window) | 插入自定义属性的值。 |