CSS（一）

CSS——网页的美容师

1.HTML主要做结构，显示元素内容。

2.CSS美化HTML，布局网页。

3.CSS最大价值：由HTML专注去做结构呈现，样式交给CSS，即结构(HTML）与样式（CSS）相分离。

CSS语法规范

• CSS规则由两个主要的部分构成：选择器以及一条或多条声明。
• 选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
• 属性和属性值以“键值对”的形式出现。
• 属性和属性值之间用英文“：”分开
• 多个“键值对”之间用英文“；”进行区分

CSS代码风格

1. 属性值前面，冒号后面，保留一个空格
2. 选择器（标签）和大括号之间保留空格

选择器分类

• 基础选择器是由单个选择器组成的
• 基础选择器又包括：标签选择器、类选择器、id选择器和通配选择器

常用的CSS选择器

元素选择器：h1，img，p

• 类选择器：className

id选择器：#id

通配符选择器：*

常见的CSS属性

• 字体大小：font-size
• 字体颜色：color
• 宽度：width
• 高度：height
• 背景色：background-color
• 文本水平居中：text-align
• 文本行高（垂直居中）：line-height

选择器进阶（更多选择器）

• 层级选择器：selector1 selector2
• 组合选择器：selector1，selector2
• 伪类选择器（增加行为）：selector：hover
• 伪元素选择器（增加元素）：selector：：before，selector：：after

CSS2：伪类选择器和伪元素选择器都是一个冒号

CSS3：让伪元素选择器增加了一个冒号 

   选择器权重

相同选择器：后面的会覆盖前面的

不同选择器：ID（100）>CLASS（10）>element（1）

层级选择器：按权重累加计算

有关盒子模型的CSS属性

边框：border-width；border-style；border-color；

外边框：margin（-top\-right\-bottom\-left)

内边框：padding（-top\-right\-bottom\-left)

HTML元素的分类

块元素：可以设置宽度和高度，独立成行。h1——6、、p、div、ul、li

行内元素（内联元素、行级元素）：不可以设置宽度和高度，不独立成行。a、span

行内块元素：可以设置宽度和高度，不独立成行img，input，button

display属性

block：转换为块元素 

inline：转换为行内元素

inline-block：转换为行内元素

none：隐藏元素

浮动元素的特性：脱离文档流

空div清除浮动（clear：both）

.clear::after,.lear::before{

content:" ";

display:block;

clear:both;

}

去掉文字链接的下划线：text-decoration：none；