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 用法教程

原文地址:https://www.cnblogs.com/gefenghua/p/6341536.html