css基础知识

什么是CSS?

CSS 指层叠样式表 (Cascading Style Sheets)

样式定义如何显示HTML 元素

样式通常存储在样式表中

把样式添加到HTML 4.0 中，是为了解决内容与表现分离的问题

外部样式表可以极大提高工作效率

外部样式表通常存储在 CSS 文件中

多个样式定义可层叠为一个

为什么使用CSS？

CSS允许您针对HTML元素应用特定的样式。

CSS的主要好处在于，它允许你将样式与页面内容进行分离。

仅使用HTML，样式将和页面内容格式混杂在一起，这样的页面将会变得难以维护。

所有的web页面样式都可以（也应该）从HTML文档中分离出来，建立成一个单独的CSS 文件再进行引用。

内联CSS

在web文档中直接插入一个CSS是内联样式的使用方法之一。使用内联样式，将CSS应用于单个元素。

为了使用内联样式，将CSS属性直接添加到相关标签中。

下面的例子展示了如何创建一个灰色背景和白色文本的段落：

外部引用CSS

通过这种方法将所有的CSS样式保存在同一个后缀名为.css的拓展文件中。然后通过html标签在HTML页面的部分将CSS文件引入。如下例子所示：

HTML部分：

CSS部分：

CSS语法

CSS是由浏览器解释的样式规则,然后应用于文档中相应的元素。样式规则有三个部分：选择器，属性和值。

例如，标题颜色可以定义为：

详解：

选择器要指向需要设置样式的HTML元素。

声明块包含一个或多个用分号分隔的声明。

每个声明都包含一个由冒号分隔的属性名称和值。

例如：

类型选择器

最常见和易于理解的选择器是类型选择器。该选择器以页面上的元素类型为目标。

例如，要定位页面上的所有段落：

CSS注释

注释用于解释您的代码，并可能在您稍后编辑源代码时为您提供帮助。浏览器会自动忽略注释。

CSS的注释如下所示：

例子：（将原先设置红色背景色的CSS样式注释掉）

CSS级联

网页的最终外观是不同的样式结合的结果。

通过样式的三个主要来源形成一个级联：

由页面的作者创建的CSS样式

浏览器的默认CSS样式

浏览页面的用户自定义CSS样式

CSS继承

继承是指属性在页面中流动的方式。除非另有定义，子元素通常会采用父元素的特征。

例子：

元素选择器

元素选择器：就是对已选中的HTML元素符号设置CSS样式（例如：div、p、a、ul、li等元素符号）。

如下图所示，就是为div元素设置CSS样式的width和height属性。

参考代码片段：

class选择器

class选择器（类型选择器）：是最常见和易于理解的。该选择器通过绑定HTML

后代选择器

后代选择器：选中某个父级下对应的所有子级，并针对该子级设置CSS样式。?后代选择器设置的CSS样式不会影响到父级。

?父级和子级之间需要用空格隔开。

?后代选择器可以存在多层级父级，并不局限在单一父子级之间，层级越深所设置的CSS样式优先级越高。

参考代码片段：

子元素选择器

子元素选择器：子元素选择器与后代选择器较为类似。相对于后代选择器，子元素选择器所涉及的范围会更小。

?后代选择器可以跨层级影响，而子元素选择器要求父元素和子元素一定为上下级关系，中间如果隔着其他元素则会失效。

?父元素和子元素之间需要用> (子结合符) 隔开。

参考代码片段：

相邻选择器

相邻选择器：选中对应元素的下一个兄弟元素。

?所涉及的相邻兄弟元素必须是该元素的同级元素。

?所涉及的相邻兄弟元素必须是相邻兄弟元素，中间若有其他元素隔开也将导致失效。?元素A和对应的相邻兄弟元素之间需要用+隔开。

参考代码片段：

属性选择器

属性选择器：检索HTML页面中符合所设置的属性条件的元素。

属性选择器通过[ ]设置被选元素的属性条件。如下图所示，将选择HTML页面中所有包含了alt属性的img元素并为其设置CSS样式。

参考代码片段：

设置页面上所有含有class属性并且属性值的词列表的某个词等于w3cschool的div元素。(适用于针对设置了多个class名称的元素使用)

选择器分组

选择器分组：当需要多个元素同时使用同一套CSS样式时，可以使用选择器分组，这样可以避免为每个元素单独设置样式而照成不必要的冗余。

选择器分组通过, （逗号）将需要复用同一套样式的多个元素进行分隔。

参考代码片段：

font-family属性

font-family属性指定元素的字体。

有两种字体系列名称：

?字体系列：特定的字体系列（如Times New Roman或Arial）

?通用族：一组具有相似外观的字体族（如Serif或Monospace）

以下是不同字体样式的示例：

HTML代码：

font-family属性

font-family属性应该包含几个字体名称作为备选。在CSS样式中指定Web字体时，请添加多个字体名称，以避免意外的行为。如果客户端计算机出于某种原因没有您选择的字体时，则会尝试下一个字体。

指定通用字体系列是一个很好的做法，如果没有其他字体可用，让浏览器在通用系列中选择相似的字体。

如果浏览器不支持Arial字体，则会尝试下一个字体（Helvetica Neue，Helvetica）。如果浏览器没有任何一个，它会尝试通用的sans-serif。

font-size属性

font-size属性

font-size属性用于设置字体的大小。设置网页字体大小的其中之一方法是使用关键字。例如xx-small, small, medium, large, larger, etc等。

HTML代码：

CSS代码：

您还可以使用像素(px)或相对尺寸单位(em)数值来操纵字体大小。

当您需要像素精度时，以像素值(px)设置字体大小是一个不错的选择，它可以让您完全控制文本大小。

em尺寸单位是设置字体大小的另一种方式（em是相对尺寸单位）。它允许所有主流浏览器调整文本的大小。如果您没有在页面上的任何位置设置字体大小，那么这是浏览器的默认大小，即16px。

要计算em大小，只需使用以下公式：em = px / 16，即1em = 16px。

例如：

font-style属性

font-style属性通常用于指定斜体文本。

HTML代码：

CSS代码：

font-style属性有三个值：normal，italic和oblique。oblique非常类似于italic，但浏览器的支持较少。HTML代码：

CSS代码：

font-weight属性

font-weight控制文本的粗细。值可以设置为normal (默认)，bold，bolder，和lighter。

HTML代码：

CSS代码：

根据文本的厚度，也可以使用从100（细）到900（粗）的数字来定义字体粗细。400与normal相同，700与bold相同。

HTML代码：

CSS代码：

font-variant属性

font-variant属性允许您将字体转换为所有小型大写字母。值可以设置为normal，small-caps，和inherit。

HTML代码：

CSS代码：

color属性

color属性用于指定文本的颜色。

指定文本颜色的其中一种方法是使用颜色名称：如red, green, blue等

以下是更改字体颜色的示例。

HTML代码：

CSS代码：

定义color的其他方法是使用十六进制值和RGB。

十六进制形式是一个井号(#)，最多6个十六进制值(0-F)。

RGB定义了红色，绿色和蓝色的各个值。

在下面的示例中，我们使用十六进制值将标题颜色设置为蓝色，使用RGB形式将段落设置为红色。

HTML代码：

CSS代码：