CSS

---

一、CSS定义

• CSS就是web标准中的表现标准，专门用来对网页标签进行布局和样式设定的语言

• CSS又叫层叠样式表

---

二、CSS基本语法

1.结构：

• 选择器{属性: 属性值; 属性2: 属性值2; 属性3:属性名3....}

2.说明

• 选择器：用来选中确定设置样式的标签

• {}：固定写法

• 属性：CSS提供的属性，共200多个

• 属性值：根据属性赋不同的值

---

三、CSS样式

1.内联样式

• 将样式表写在标签的style属性中 -- 样式只对一个标签有效

2.内部样式

• 将样式表写在head的style标签中 -- 样式只对当前HTML文件中的标签有效

3.外部样式

• 将样式表写在外部CSS文件中，然后在head中通过link标签导入 -- 样式可作用于所有HTML文件

---

四、选择器

1.元素选择器

• 将标签名作为选择器，选中指定的标签

• 用法：标签名{}

2.id选择器

• 将标签中的id属性的值作为选择器，选中指定的标签

• 用法：#id{}

3.class选择器

• 将标签中的class属性的值作为选择器，选中指定的标签

• 用法：.class{}

4.群组选择器

• 多个选择器用逗号隔开作为一个选择器，同时选中多个标签

• 用法：标签名1，标签名2{}

5.父子选择器

• 多个选择器用空格隔开作为一个选择器，按顺序依次往后找，选中最后一个选择器对应的标签

• 用法：标签名1 标签名2 标签名3{}

6.通配符

• 将*作为选择器，选中网页中所有标签

• 用法：*{}

7.选择器优先级

• 元素选择器< class选择器

---

五、标准流布局

1.标准流

• 块级标签是一个占一行，默认宽度是父标签的宽度，设置宽高有效

• 行内标签是一行可以显示多个，默认宽度和高度都是内容的宽高，设置宽高无效

• 行内快标签是一行可以显示多个，默认宽度和高度都是内容的宽高，设置宽高有效

2.块级标签

• h1~h6、p、hr、ol\ul\dl\li、table、tr、div

3.行内标签

• a、img、td、input、select、option、span

4.设置标签性质

• display:block -- 将标签设置为块级标签

• display:inline-block -- 将标签设置为行内标签

• display:inline -- 将标签设置为行内标签

---

六、常用CSS属性

1.颜色

• 设置背景颜色(background-color)

• 设置字体颜色(color)

• 注:CSS中的颜色值
  a.颜色的英文单词
  b.#颜色值对应的6位16进制值（#ff00, #00ff00）
  c.rgb(r,g,b) rgba(r,g,b,a);r,g,b的取值范围是0-255，a表示透明度，取值范围是0-1

2.文本（text / font）

• 文本的大小和字型(font-size / font-family)

• 斜体、粗体、大写和下划线(font-weight / font-style / text-decoration)

• 行间距(line-height)、字母间距(letter-spacing)和单词间距(word-spacing)

• 对齐(text-align)方式和缩进(text-ident)

• 链接样式（:link / :visited / :active / :hover）

3.盒子（box model）

• 盒子大小的控制（width / height）

• 盒子的边框、外边距和内边距（border / margin / padding）

• 盒子的显示和隐藏（display / visibility）

• 边框图像（border-image）

• 投影（border-shadow）

• 圆角（border-radius

4.图像

• 控制图像的大小（display: inline-block）
• 对齐图像(margin: 0 auto)
• 背景图像（background / background-image / background-repeat / background-position）

5.列表、表格和表单

• 列表的项目符号（list-style）

• 表格的边框和背景（border-collapse）

• 表单控件的外观

• 表单控件的对齐

• 浏览器的开发者工具

6.布局

• 相对定位（position：relative）

• 绝对定位（position：absolute）

• 固定定位（position：fixed）

• 浮动元素（float / clear）