第二章 CSS入门 v1.0

层叠样式表(Cascading Style Sheets，CSS)，用来描述HTML文档的呈现

第一部分 CSS语法

一、基础语法

1.组成

CSS一般由两个主要的部分构成：选择器，以及一条或多条声明，此外还有注解/* */

选择器 {
  color:red; /*声明：颜色属性为红色*/
  text-align:center; /*声明：文本对齐为水平居中*/
}

2.HTML文件中书写位置

在HTML文件中，一般在<title>下添加<style>标签，在其中书写CSS代码

<title>CSS</title>
<style>
  /* 在此书写CSS代码 */
</style>

3.引入外部样式表

在HTML文件的<head>中引入：<link rel="stylesheet" href="./demo.css">

二、基础选择器

1.id选择器

为标有特定 id 的 HTML 元素指定特定的样式

格式：#id-name(应用于元素属性：id="id-name")

注意： id属性不要以数字开头，数字开头的id在 Mozilla/Firefox 浏览器中不起作用。

2.class选择器

用于描述一组元素的样式，有别于id选择器，class可以在多个元素中使用

格式：.class-name(应用于元素属性：class="class-name")

3.元素选择器

最常见的 CSS 选择器，又被称为类型选择器，匹配文档树中该元素类型的每一个实例

格式：element(应用于元素：element)

4.通配符选择器

查找页面中的所有标签，设置相同的样式

格式：*

5.复合选择器

由两个或多个基础选择器，通过不同的方式组合而成，能更准确、更高效的选择目标元素

1. 后代选择器(选择某元素的后代元素)

写法：父选择器 子选择器(选择器之间以空格分隔)

1. 子代选择器(选择某元素的子代元素)

写法：父选择器>子选择器(父选择器后使用大于号指向子选择器)

1. 并集选择器(选择多组标签设置同样的样式)

写法：选择器1, 选择器2, ..., 选择器n(选择器之间以逗号分隔)

1. 交集选择器(选择同时满足多个条件的元素)

写法：选择器1选择器2(选择器之间连写，无任何符号)

三、高级选择器

1.伪类选择器

伪类选择器表示元素状态，选中某个状态设置样式

1. 鼠标悬停状态

写法：选择器:hover

1. 点击时(激活)

写法：选择器:active

1. 访问前(超链接)

写法：选择器:link

1. 访问后(超链接)

写法：选择器:visited

2.结构伪类选择器

结构伪类选择器根据元素的结构关系查找元素标签

1. 查找第一个Element元素标签，写法：Element:first-child
2. 查找最后一个Element元素标签，写法：Element:last-child
3. 查找指定关系的Element元素标签，写法：Element:nth-child(parameter)

数字：如Element:nth-child(N)，表示查找第N个Element元素标签

公式：以n为未知数书写公式，如2n表示偶数标签，2n-1表示奇数标签

3.伪元素选择器

创建虚拟元素(伪元素)，用来摆放装饰性的内容

1. 在Element元素里面最前面添加一个伪元素：Element::before
2. 在Element元素里面最后面添加一个伪元素：Element::after

注意要点：

• 必须设置content:""属性，用来设置伪元素的内容，如果没有content属性，伪元素选择器不生效
• 伪元素默认是行内显示模式，伪元素选择器的权重和标签选择器相同

四、引入样式表

1.外部样式表

在<head>标签使用<link>标签链接到样式表

<head>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

2.内部样式表

当单个文档需要特殊的样式时，使用<style>标签在文档头部定义内部样式表

<head>
  <style>
    hr {color:sienna;}
    p {margin-left:20px;}
    body {background-image:url("images/back40.gif");}
  </style>
</head>

3.内联样式

当样式仅需要在一个元素上应用一次时可以使用内联样式，在相关的标签内使用样式style属性

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

五、CSS特性

1.继承性

子集默认继承父级的文字控制属性

属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来

2.层叠性

相同的属性会覆盖：后面的CSS属性会覆盖前面的CSS属性

不同的属性会叠加：不同的CSS属性都会生效

3.优先级

选择器优先级(优先级高的样式生效)：!important>行内样式>id选择器>class选择器>标签选择器>通配符选择器

如果是复合选择器， 需要依照选择器优先级进行权重叠加计算，从左至右比较选中个数

(内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式

4.相关关键字

inherit关键字：指定属性从父元素继承

initial关键字：用于设置 CSS 属性为它的默认值

第二部分 常见样式

一、背景

1. background-color：元素的背景颜色

2. 十六进制，如：#ff0000

3. RGB，如：rgb(255,0,0)

4. RBGA，如：rgba(255,0,0,0.5)，a属性为透明度

5. 颜色名称，如：red

6. background-image:url('pic.png')：元素的背景图像

7. background-size：背景图缩放

8. 关键字：cover(缩放至覆盖背景区，可能溢出)/contain(缩放至装入背景区，可能留白)

9. 百分比：根据盒子尺寸计算图片大小，如：50%

10. 数字+单位：固定缩放图片到对应单位(不常用)

11. background-repeat：背景图像是否及如何重复

12. repeat：背景图像将向垂直和水平方向重复(默认)

13. repeat-x：只有水平位置会重复背景图像

14. repeat-y：只有垂直位置会重复背景图像

15. no-repeat：不会重复

16. background-attachment：背景图像是否固定或者随着页面的其余部分滚动

17. scroll：背景图片随着页面的滚动而滚动(默认)

18. fixed：背景图片不会随着页面的滚动而滚动

19. local：背景图片会随着元素内容的滚动而滚动

20. background-position：设置背景图像的起始位置

21. x% y%：第一个值是水平位置，第二个值是垂直位置(默认值：0% 0%)

22. xpos ypos：pos为css单位(如ps(像素))，可以与x% y%混用

23. left/right/center top/bottom/center：若指定一个关键字，另一个默认值为center

24. background：背景复合属性，背景色 背景图 平铺方式 背景图位置/缩放 背景图固定(不区分顺序)

二、文本内容

1. font-size：字体大小

2. color：字体颜色，参见上面的颜色表示方法

3. font-weight：字体粗细

4. 数字：400(常规)/700(加粗)

5. 关键字：normal/bold

6. font-style：字体倾斜，属性值：normal/italic

7. line-height：行高

8. 数字：表示原行高的倍数，如：2表示两倍行高

9. 数字+单位：表示固定为行高，如：16px表示行高固定为16px

10. font-family：字体族，以逗号分隔的字体名列表，最后一个建议使用无衬线字体(如：sans-serif)

11. text-indent：文本缩进

12. 数字px：表示固定缩进单位长度

13. 数字em：推荐使用，表示缩进若干个当前标签字号大小的距离

14. text-align：子标签的文本对齐(需要设置给父标签)，属性值：left/center/right

15. text-decoration：修饰线

16. none：无修饰线

17. underline：下划线

18. line-through：删除线

19. overline：上划线

20. font：字体复合属性，从左至右依次为：是否倾斜 是否加粗 字号/行高 字体(不能缺省)

三、其他样式

1.鼠标样式(cursor)

1. 点击(手型)：hand/pointer
2. 等待：wait
3. 选择：move

2.鼠标悬停

1. 鼠标悬停：onmouseover，值为js脚本
2. 鼠标移出：onmouseout，值为js脚本