这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天

走进css

CSS 作为前端技术栈中关键一环，对页面元素及样式呈现起到了直接作用

1. CSS 代码构成
2. CSS 使用方法
3. CSS 流程之选择器组、文本渲染
4. 调试 CSS

• css的工作流程

选择器selector

• 找出页面中的元素，以便给他们设置样式
• 使用多种方式选择元素，按照标签名类名或ID按照属性，按照dom树中的位置

通配选择器

标签选择器

id选择器

类选择器

属性选择器

内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性

CSS 优先规则：

内联样式 > id 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器

CSS 背景属性用于定义HTML元素的背景。

CSS 属性定义背景效果:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

body {background-color:#b0c4de;}

CSS中，颜色值通常以以下方式定义:

• 十六进制 - 如："#ff0000"
• RGB - 如："rgb(255,0,0)"
• 颜色名称 - 如："red"

以下实例中, h1, p, 和 div 元素拥有不同的背景颜色:

h1 {background-color:#6495ed;}  
p {background-color:#e0ffff;}  
div {background-color:#b0c4de;}

CSS 文本格式

颜色

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

• 十六进制值 - 如: ＃FF0000
• 一个RGB值 - 如: RGB(255,0,0)
• 颜色的名称 - 如: red

文本的对齐方式

文本排列属性是用来设置文本的水平对齐方式。

文本可居中或对齐到左或右,两端对齐.

当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

文本修饰

text-decoration 属性用来设置或删除文本的装饰。

从设计的角度看 text-decoration属性主要是用来删除链接的下划线：

h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;}