CSS快速入门

一、概述

CSS是层叠样式表（Cascading Style Sheets）的缩写。从名称可以看出，CSS是用来定义如何显示HTML元素，并且多个样式是可以叠加的。之所以在HTML中使用样式，是为了解决内容与表现分离的问题。样式通常存储在样式表中，而外部样式表通常存储在CSS文件中。

二、语法

CSS规则由两个主要部分构成：选择器，以及一条或多条声明。选择器通常是需要改变样式的HTML元素。声明由一个属性和一个值组成，多个声明之间用分号分隔。属性是希望设置的样式属性，每个属性有一个值，属性和值用冒号分隔。多个选择器可以共用同一个声明，选择器之间用逗号分隔。

selector {property : value}

三、选择器

选择器大体上可以分三种：标签选择器、id选择器、类选择器。

1、标签选择器

为指定元素设置特定的样式，可以为多个元素进行设置。在CSS中，标签选择器直接以元素标签来定义。

tag_selector {property : value}

2、id选择器

为带有指定id属性的HTML元素设置特定的样式，具有唯一性。id属性不要以数字开头，否则会导致某些浏览器不能识别。在CSS中，id选择器以#来定义。

#id_selector {property : value}

3、类选择器

为带有指定class属性的HTML元素设置特定的样式，class属性可以在多个元素中使用。在CSS中，类选择器以.来定义。

.class_selector {property : value}

4、选择器的优先级

原则上，选择器指向越准确，它的优先级越高。从选择器的种类区分来看，显然类选择器要优先于标签选择器，而id选择器要优先于类选择器。此外，有一种写法是直接在标签内部定义样式，这种方式的优先级最高，但不推荐，因为这样就违背了内容和表现分离的思想。

5、选择器的组合

有的时候，需要使用组合选择符来表示两个选择器之间的关系。主要分为四种组合方式：后代选择器、子元素选择器、相邻兄弟选择器、普通兄弟选择器。

  • 后代选择器

    使用空格分隔，选择作为某元素后代的所有元素。

  • 子元素选择器

    使用>分隔，选择作为某元素子元素的元素。

  • 相邻兄弟选择器

    使用+分隔，选择紧接着某元素后的元素，并且二者拥有相同的父元素。

  • 普通相邻兄弟选择器

    使用~分隔，选择所有指定元素的相邻兄弟元素。

更多关于选择器的内容，可以参考：css选择器知识汇总

四、样式表的使用

当HTML文档读取到一个样式表时，浏览器会自动进行解析，并对文档进行格式化。
根据样式表定义的位置，HTML文档读取样式表有三种方式：外部样式表、内部样式表以及内联样式。

1、外部样式表

当样式需要应用到许多页面时，可以选择使用外部样式表。通过改变一个样式文件，就可以改变整个站点的外观，是一件极有效率的事情。

用法：每个页面使用<link>标签链接到外部样式表，<link>标签在文档的头部定义。

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

2、内部样式表

当某个页面需要特殊的样式时，可以选择使用内部样式表。这样，样式只对当前页面产生效果，而不会影响到其他页面。

用法：使用<style>标签在文档的头部定义内部样式表。

3、内联样式

当样式只需要在某个元素应用一次时，可以选择使用内联样式。这样，样式只对该元素产生效果。

用法：在相关的标签内使用style属性，属性值包含要设置的样式的各种属性。

4、多重样式

当一个HTML元素被多个样式定义时，所有的样式会按照优先级的顺序叠加成一个虚拟的样式表，最终，会根据这个虚拟样式表来显示页面。

五、样式属性

1、背景

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

  • background-color，设置元素的背景颜色
  • background-image，设置元素的背景图片
  • background-repeat，设置背景图片是否重复以及如何重复
  • background-attachment，设置背景图片是否固定或者随着页面滚动
  • background-position，设置背景图片的起始位置

为了简化，可以将这些属性合并成一个属性，简写为background，属性值的顺序按照上面的定义顺序排列。

2、文本

通过文本属性，可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本进行缩进等。

  • color，设置文本颜色
  • direction，设置文本方向
  • text-align，设置文本的水平对齐方式
  • text-transform，设置文本的大写和小写字母
  • text-shadow，设置文本阴影

3、字体

字体属性定义字体、加粗、大小、文字样式等。

  • font-family，设置文本的字体系列
  • font-size，设置文本的字体大小
  • font-style，设置文本的字体样式
  • font-weight，设置文本字体的粗细

4、列表

列表属性用来设置列表项标记，包括有序、无序、图像。

  • list-style-type，设置列表项标记的类型
  • list-style-postion，设置列表项标记的位置
  • list-style-image，设置图像为列表项标记

可以使用缩写属性list-style，属性值的顺序按照上面的定义顺序排列。

5、盒子模型

盒子模型规定了元素框处理元素内容、内边距、边框和外边距的方式。其中，元素框的最内部分是实际的内容，直接包围内容的是内边距，内边距的边缘是边框，边框以外是外边距。内边距、边框和外边距都是可选的，默认值是0。

Tips：当指定一个CSS元素的宽度和高度时，实际上设置的是内容区域的宽度和高度，不包括内外边距和边框。

5.1 内边距

padding属性定义了元素边框与元素内容之间的空白区域。可以接受长度值或百分比值，但不允许使用负值。百分比值是相对于其父元素的width计算的，如果父元素的width改变，它也会随之改变。

  • padding-top，设置上填充
  • padding-right，设置右填充
  • padding-bottom，设置下填充
  • padding-left，设置左填充

可以使用缩写属性padding，属性值的顺序按照上面的定义顺序排列。

5.2 边框

border属性允许指定元素边框的样式和颜色。

  • border-width，设置边框宽度
  • border-style，设置边框样式
  • border-color，设置边框颜色

可以使用缩写属性border，属性值的顺序按照上面的定义顺序排列。

5.3 外边距

margin属性定义了元素周围的空白区域。可以接受长度值、百分比值或自动，还可以使用负值。

  • margin-top，设置上边距
  • margin-right，设置右边距
  • margin-bottom，设置下边距
  • margin-left，设置左边距

可以使用缩写属性margin，属性值的顺序按照上面的定义顺序排列。

6、定位

元素可以通过顶部、底部、左部和右部属性进行定位，在使用这些属性之前需要设定position属性。而position属性由于定位方法的不同，它们的工作方式也有所不同。

  • static定位

    HTML元素默认是静态定位，即没有定位。元素正常显示，不会受到top、bottom、left和right属性的影响。

  • fixed定位

    元素的位置相对于浏览器窗口是固定的，即使窗口滚动它也不会随之移动。固定定位使得元素的位置与文档流无关，不占据空间，并且会和其他元素重叠。

  • relative定位

    元素的位置是相对其正常位置的，即从正常位置进行偏移。元素发生偏移后，原来所占的空间仍然保留，并且移动元素可能会导致其覆盖其他区域。

  • absolute定位

    元素的位置相对于最近已定位的父元素，如果没有已定位的父元素，那么它的位置就会相对于文档<html>。绝对定位使得元素的位置与文档流无关，不占据空间，并且会和其他元素重叠。

7、浮动

float属性会使元素水平移动，其周围的元素也会重新排列。虽然起初float属性是用于图像排列，但是它在布局时往往会收到出其不意的效果。

一个浮动元素会一直水平移动，直到它的外边缘碰到包含框或其他浮动框的边框为止。浮动元素之后的元素会围绕该浮动元素，而浮动元素之前的元素则保持不变。

元素浮动之后，周围的元素会重新排列。为了避免这种情况，可以使用clear属性，指定元素两侧不能出现浮动元素。

六、伪类和伪元素

伪类和伪元素都是用来添加一些选择器的特殊效果。

1、语法

选择器的语法：

selector:pseudo-class/pseudo-element {property:value;}

类选择器的语法：

selector.class:pseudo-class/pseudo-element {property:value;}

2、 first-line和first-letter

  • first-line用于向文本的首行设置特殊样式
  • first-letter用于向文本的首个字母设置特殊样式

只能用于块级元素。

3、 before和after

  • before用于在元素的内容前面插入新内容
  • after用于在元素的内容后面插入新内容

4、 链接

  • link表示所有未访问的链接
  • visited表示所有访问过的链接
  • active表示正在活动的链接
  • hover表示鼠标放在链接上的状态

5、表单元素

  • checked表示所有选中的表单元素
  • disabled表示所有禁用的表单元素
  • enabled表示所有启用的表单元素

相关阅读：

阮一峰：CSS Modules 用法教程

posted @ 2017-01-22 22:22  凛_冬_将_至  阅读(171)  评论(0)  编辑  收藏  举报