CSS（层叠样式表）初识下

前言

上次小编带大家初次接触了CSS，请点开链接： CSS（层叠样式表）初识下
今天小编继续带大家学习CSS。

语法

CSS规则主要由两部分组成：

1. 选择器：
   主要作用：确定需要改变样式的HTML元素
2. 一条或多条声明：
   每条声明由一个属性和一个值组成，花括号包围声明，属性与值之间用冒号(:)分开；每个属性建分号隔开
   h1 {color:red; font-size:14px;}

选择器分类：（5种）

• 元素选择器（标签选择器）：使用html中的标签作为选择器
• 类选择器：独立于Html标签的选择器
• id选择器：唯一性，所有页面重点内容只出现一次
• 伪类选择器：向某些选择器添加特殊效果。
• 属性选择器:根据元素的属性及属性值来选择元素。

补充：

• 标准流：标签的排列方式/布局，网页内容的呈现方式，以标签的排列方式来呈现的。

常用样式

定位： CSS 定位 (Positioning) 属性允许你对元素进行定位。
CSS 有三种基本的定位机制：普通流、浮动和绝对定位
例子：

• 创建浮动：float: left;

• 清除浮动： clear：left;

盒子模型：

• 本质：布局的抽象

• CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。

• Margin(外边距)-清楚边框外的区域，外边距是透明的：上下左右

• Padding（内边距）-清楚内容周围的区域，内边距是透明的 ：上下左右

• Border(边框)-围绕内边距he内容外的边框：宽

• Content（内容）–盒子内的内容，显示文本和图像。：宽，高

作用

• 实现html内容和表现分离。
• 使用样式表极大的提高了工作效率
• 样式可以重复使用,方便网站以后的维护
• 页面的精确控制,实现精美复杂的页面