CSS学习

1. CSS 简介

层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 或 XML（包括如 SVG、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

2. 为何使用CSS？

CSS最重要的目标是将文件的内容与它的显示分隔开来。在CSS出现前，几乎所有的HTML文件内都包含文件显示的信息，比如字体的颜色、背景应该是怎样的、如何排列、边缘、连线等等都必须一一在HTML文件内列出，有时重复列出。CSS使作者可以将这些信息中的大部分隔离出来，简化HTML文件，这些信息被放在一个辅助的，用CSS语言写的文件中。HTML文件中只包含结构和内容的信息，CSS文件中只包含样式的信息。

3. CSS引入

常见的三种不同方式将 CSS 应用到 HTML 文档上，有的方式比其他方式更有用。

• 内联式CSS样式
• 嵌入式CSS样式
• 外部式CSS样式

3.1 内联式CSS样式

内联样式是仅影响一个元素的CSS声明，被 style属性包括着

CSS

3.2 嵌入式CSS样式

内部样式表是指不使用外部 CSS 文件，而是将你的 CSS 放置在

3.3. 外部式CSS样式

将你的 CSS 保存在一个独立的扩展名为 .css 的文件中，并从HTML的 元素中引用它。

注：除非有必要，否则最好不要使用 " 内联式CSS样式 "，CSS和HTML信息混合，使 CSS 难以阅读和理解，强烈建议使用 " 外部式CSS样式 "，保持不同类型代码的分离和纯净使处理该代码的任何人工作更为容易。

4. CSS语法

CSS

5. CSS选择器

5.1 标签选择器（h1，p等）

标签选择器

5.2 类别选择器（class）

类别选择器

5.3 ID选择器（ID）

ID选择器

6. 注意的CSS属性

float

定义元素在哪个方向浮动（ left/right ），浮动元素会从普通文档流中脱离，但浮动元素影响的不仅是自己，它会影响周围的元素对齐进行环绕，因此需在浮动元素的父元素上添加 " clearfix::after " 属性。

" clearfix::after " 的写法

clearfix::after {
    content: '';
    display: block;
    clear: both;
}

display

指定用于元素的呈现框的类型

主要属性

block

该元素生成一个块元素盒。

inline-block

该元素生成一个块状盒，该块状盒随着周围内容流动，如同它是一个单独的行内盒子。

position

用于指定一个元素在文档中的定位方式。

主要属性

fixed

不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。

absolute

不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。

relative

该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。

注：在父元素使用relative，子元素使用absolute，这时子元素将相对于父元素定来位。