前端CSS基础

什么是CSS

• Cascading Stylesheets（层叠样式表）
• 不是编程语言
• 告诉浏览器如何指定样式布局等

三种方式添加css:

• 外部样式表：
  css保存在.css文件中；
  在html的head里面使用<link>引用；

• 内部样式表：
  不使用外部css文件；
  将css放在html的<style>里面;

• 内联样式表：（尽量不要使用）
  仅影响一个元素；
  在html元素的style属性中添加；

例如：

选择器在另一篇有详细说明

字体：

在 CSS 中，有五个通用字体族：

衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
无衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
草书字体（Cursive）- 模仿了人类的笔迹。
幻想字体（Fantasy）- 是装饰性/俏皮的字体。

font-family 属性规定文本的字体

font-style 属性主要用于指定斜体文本。

此属性可设置三个值：

• normal - 文字正常显示
• italic - 文本以斜体显示
• oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）

font-weight 属性指定字体的粗细：

font-variant 属性指定是否以 small-caps 字体（小型大写字母）显示文本。
在 small-caps 字体中，所有小写字母都将转换为大写字母。但是，转换后的大写字母的字体大小小于文本中原始大写字母的字体大小。

font-size 属性设置文本的大小。
font-size 值可以是绝对或相对大小：
绝对尺寸：

• 将文本设置为指定大小
• 不允许用户在所有浏览器中更改文本大小（可访问性不佳）
• 当输出的物理尺寸已知时，绝对尺寸很有用

相对尺寸：

• 设置相对于周围元素的大小
• 允许用户在浏览器中更改文本大小

注释：如果您没有指定字体大小，则普通文本（如段落）的默认大小为 16px（16px = 1em）

CSS盒子模型：

注：当两个盒子靠在一起时只会取一个较大的外边距，即外边距重叠、塌陷

• 背景颜色会填充到marging以内的区域；（边框有颜色时会覆盖掉背景颜色）
• 文字会在content区域；
• Padding不能为负数，而marging可以为负数；（盒子之间会重叠）
•