css-basic

CSS 为样式文件，简单的来说就是对 Html 中各个标签的内容进行定义，使得展示出各种不同的颜色、形状、布局等等，宗旨还是为了提升美观程度，从而提升用户浏览体验。速查手册 CSS3 教程，以下为常用 or 易遗忘 or 基本概念速查清单：

[!note]

• 引用：在 html 文件中使用 Css 进行样式渲染一共有三个方法
  1. 内联样式（不推荐）：在 html 中的每一个想要润色的标签中添加 style 属性进行渲染
  2. 内部样式表（不推荐）：在 html 的 head 中编写 style 标签进行全局 Css 进行渲染
  3. 外部样式表（最推荐）：在 .css 为后缀的文件中进行编写相应的样式内容，最后在 html 的 head 标签中通过 link 引用该样式文件即可
• 选择器
  1. 标签选择器。顾名思义就是根据已有的标签进行样式书写，格式示例为 p { color: red; }
  2. 类选择器。根据自定义的类名进行样式书写，格式示例为 .ClassName { color: red; }
  3. id 选择器。根据页面中某一个元素唯一的 id 进行样式书写，格式示例为 #OnlyId { color: red; }
• 渲染优先级：内联样式 > ID 选择器 > 样式表
• 背景：背景颜色（rgb 赋值、hex 赋值、name 赋值），背景图片（定位、滚动样式）
• 文本：文字颜色、文字对齐
• 字体：字体系列、字体大小
• 链接：链接样式（link、visited、hover、active 顺序记忆为 l o v e & ha te）
• 盒子模型：每一个标签都是一个盒子，分为行级标签、块级标签等。对于每一个盒子，分为内边距（元素与边框的距离）、边框和外边距（各个盒子之间的距离）。其中：
  1. 内边距通过 margin 进行控制。属性值含有四个参数，分别代表上右下左的距离值，如果只含有三个，则其中第一个为上，第二个为左右，第三个为下；如果只含有两个，则其中第一个为上下，第二个为左右；如果只含有一个，则表示上右下左均为该值
  2. 外边框通过 padding 进行控制。属性值同 margin 的属性值
• 浮动布局。即 float 属性，可以理解为元素环绕属性，有 left 与 right 两个属性值。设定浮动属性后，元素将脱离文档流，上面的元素布局不变，下面的元素向上浮动调整
• 定位布局。即 position 属性，是为了实现透视覆盖的视觉效果而诞生的。即设定一个元素的 position 值为 relative，即设定其为相对元素，接着在此相对元素的位置基础之上，设定其余元素的 position 值为 absolute 以及相应的位置参数大小，即可相对相对参照元素进行布局