样式表可以分为三类：内部样式表、外部样式表和内联样式。

创建内部样式表的方法是在HTML页面的标签中添加一个标签，并在其中编写CSS样式规则。

样式文件结构通常包括： 注释：可选的注释说明，用于描述样式表的用途、作者、版本等信息。 @规则：以@开头的规则，用于指定特殊的样式规则，例如@charset、@import、@media等。 选择器和样式规则：选择器用于指定要应用样式的HTML元素，样式规则则用于指定要修改的样式属性和属性值。 下面是一个内部样式表的例子：

在这个例子中，我们使用了内部样式表来设置页面的背景颜色、文字颜色、标题样式和链接样式。 注意，在标签中，我们可以通过选择器来指定要应用样式的HTML元素，然后在花括号中编写样式规则。 样式规则由属性和属性值组成，用冒号分隔，多个样式规则之间用分号分隔。 发现有以下属性值，color,background-color,font-size,margin-bottom,text-align,text-transform,text-decoration,a:hover

color: 它用于设置文本颜色，可以使用颜色名称、RGB值或十六进制值来指定颜色。

background-color: 它用于设置元素的背景颜色，可以使用颜色名称、RGB值或十六进制值来指定颜色。

font-size: 它用于设置文本的字号大小，可以使用像素、百分比或其他单位来指定大小。

margin-bottom: 它用于设置元素底部的外边距，可以使用像素、百分比或其他单位来指定大小。

text-align: 它用于设置文本的对齐方式，可以设置为左对齐、右对齐、居中对齐或两端对齐。

text-transform: 它用于设置文本的大小写转换，可以将文本全部转换为大写、小写或每个单词的首字母大写。

text-decoration: 它用于设置文本的装饰效果，可以添加下划线、删除线等效果。

a:hover: 它用于设置链接的鼠标悬停效果，可以设置链接在鼠标悬停时的样式，例如改变链接的颜色或添加下划线等。

CSS（层叠样式表）是一种用于为网页添加样式和布局的语言。以下是CSS的基本使用。

CSS选择器用于选择要应用样式的HTML元素。常见的选择器有：

元素，h1 选择所有 元素。类选择器：选择具有指定类的元素，例如，.my-class 选择所有 class=“my-class” 的元素。ID选择器：选择具有指定ID的元素，例如，#my-id 选择 id=“my-id” 的元素。后代选择器：选择某个元素的后代元素，例如，div p 选择所有

元素，其中父元素是 。子元素选择器：选择某个元素的直接子元素，例如，ul > li 选择所有 元素，其中父元素是 。。属性选择器：选择具有指定属性的元素，例如，[href] 选择所有具有 href 属性的元素。伪类选择器：选择特定状态的元素，例如，:hover 选择鼠标悬停在元素上的元素。 css样式设置

CSS样式可以用于控制元素的字体、颜色、大小、布局等方面。以下是一些基本的CSS样式：

CSS中的背景样式是用于设置HTML元素背景的属性。以下是一些常用的CSS背景样式：

background-color：用于设置元素的背景颜色。可以使用预定义的颜色名称（如"red"、“blue”）或十六进制颜色代码（如"#FF0000"、“#0000FF”）来指定颜色。

background-image：用于设置元素的背景图像。可以使用图像的URL来指定图像文件的路径，例如：background-image: url(“example.jpg”);。

background-repeat：用于控制背景图像的重复方式。可以使用以下值：repeat（默认值，背景图像在水平和垂直方向都重复）、repeat-x（只在水平方向重复）、repeat-y（只在垂直方向重复）和no-repeat（不重复）。

background-attachment：用于指定背景图像是否随着页面滚动。可以使用以下值：scroll（默认值，背景图像随页面滚动）、fixed（背景图像固定在视口中）、local（背景图像随元素滚动）。

background-position：用于指定背景图像的位置。可以使用关键字（如"center"、“top”、“bottom”）或像素值（如"10px 20px"）来指定位置。

background-size：用于控制背景图像的大小。可以使用以下值：auto（默认值，使用原始图像大小）、cover（缩放图像以填充整个元素）、contain（缩放图像以适应元素的宽度或高度）、长度值（如"100px 50px"）。

外部样式表是一种将样式信息从HTML文档中分离出来的方法，使得Web页面的样式信息能够在单独的CSS文件中进行维护和更新。这种方法可以使得HTML文档更简洁，同时也提高了Web页面的可维护性和可重用性。

创建外部样式表的步骤如下：

创建一个新的文本文件，并将其保存为.css扩展名。例如，可以创建一个名为"styles.css"的文件。

在CSS文件中编写CSS规则，用于控制Web页面中的各个元素的外观。例如，可以编写一个规则来控制所有段落的字体颜色：

将CSS文件与HTML文档关联起来。可以在HTML文档中使用标签将CSS文件链接到HTML文档中。例如：

其中，href属性指定CSS文件的路径和文件名。

保存HTML文档和CSS文件，并在浏览器中打开HTML文档，以查看样式是否被正确应用到HTML元素中。

rel属性的值可以是一个或多个关键字，用空格分隔。常见的rel属性值包括：“alternate”（指示当前文档与链接文档之间的替代版本）、“stylesheet”（指示当前文档与链接文档之间的样式表）、“icon”（指示当前文档与链接文档之间的图标）、“nofollow”（指示搜索引擎不应该跟踪这个链接）等等。

使用外部样式表有许多好处，例如：

使得Web页面的样式信息与内容信息分离，提高了Web页面的可维护性和可重用性。

使得样式信息可以在多个Web页面之间共享，从而减少了代码的冗余。

使得HTML文档更加简洁，易于阅读和维护。

提高了Web页面的性能，因为外部样式表可以被浏览器缓存，从而减少了HTTP请求的数量。

CSS提供了多种文本样式来控制文本的外观。以下是一些常见的文本样式：

使用CSS可以设置文本的字体、字号、字体加粗、字体样式等。例如：

使用CSS可以设置文本的颜色和背景色。例如：

使用CSS可以设置文本的对齐方式，包括左对齐、右对齐、居中对齐和两端对齐等。例如：

使用CSS可以设置文本的字间距和字母间距，字间距指的是每个字符之间的距离，字母间距指的是相邻字母之间的距离。例如：

使用CSS可以设置文本的行高，行高指的是每行文本的高度。行高可以通过像素、百分比或者其他长度单位来设置。例如：

使用CSS可以为文本添加下划线、删除线、上标、下标等装饰。例如：

使用CSS可以为文本添加阴影效果。例如：

direction 是CSS的一个属性，用于控制文本的方向，包括从左到右和从右到左。它的取值有两种：

ltr：表示从左到右，即默认的方向。 rtl：表示从右到左，用于控制某些文本的显示方向，如阿拉伯语、希伯来语等从右往左书写的语言。 例如，下面的CSS代码将文本的方向设置为从右到左：

这会影响文本的布局和对齐方式，如在从右到左书写的语言中，文本从右向左对齐，而不是从左向右对齐。在网页中，如果需要显示从右到左书写的语言，就需要使用direction属性来控制文本的方向。

使用CSS可以将文本转换为大写或小写字母。例如：

使用CSS可以为文本的首行添加缩进。例如：

以上是一些常见的文本样式，通过这些样式可以控制文本的外观，从而使得文本更加美观和易于阅读。

在 CSS 中，可以使用 font-family 属性来指定字体名称，它允许指定多个字体，以便在某个字体不可用时使用备用字体。例如：

这段代码将先尝试使用 Arial 字体，如果 Arial 不可用，则使用 sans-serif 字体。

在 CSS 中，可以使用 font-size 属性来指定字体大小。可以使用像素（px）、百分比（%）、em 等单位来指定大小。例如：

在 CSS 中，可以使用 font-weight 属性来指定字体的粗细程度，常见的值有 normal、bold、bolder、lighter 等。例如：

在 CSS 中，可以使用 font-style 属性来指定斜体，可以使用 text-decoration 属性来指定下划线。例如：

CSS（层叠样式表）可以用来改变列表的样式。在HTML中，有两种列表类型：有序列表和无序列表。每种类型都可以使用不同的CSS属性来自定义其样式。

以下是一些常见的CSS属性，可用于自定义列表的样式：

disc：默认值，用实心圆点作为标记 circle：用空心圆圈作为标记 square：用实心正方形作为标记 decimal：用数字作为标记（有序列表） lower-roman：用小写罗马数字作为标记（有序列表） upper-roman：用大写罗马数字作为标记（有序列表） lower-alpha：用小写字母作为标记（有序列表） upper-alpha：用大写字母作为标记（有序列表） 示例代码：

可以将任何图像作为列表项标记，使用该属性指定图像的URL即可。 示例代码：

默认情况下，标记位于列表项文本的左侧。该属性可以接受以下值： inside：标记位于列表项文本内部 outside：标记位于列表项文本外部 示例代码：

该属性可以同时指定list-style-type、list-style-image和list-style-position属性，其值为一个包含这些属性值的空格分隔列表。 示例代码：

总之，使用CSS可以轻松地自定义列表项的外观感和排版。除了上述常见的CSS属性外，还有其他一些CSS属性可以用于自定义列表的样式：

示例代码：

示例代码：

示例代码：

用于创建自定义的有序列表标记。这些属性允许您创建一个计数器，每次列表项出现时递增。可以使用content属性将计数器的值插入到文本中，从而创建自定义标记。 示例代码：

以上是一些常见的CSS属性，可用于自定义列表的样式。通过使用这些属性，您可以轻松地改变列表项的标记类型、颜色、图像、位置、文本对齐和间距，并创建自定义的有序列表标记。

CSS 伪类和伪元素是用于选择 HTML 元素的特殊选择器，它们可以在样式表中设置元素的样式。虽然它们的名称类似，但它们的作用是不同的。

伪类是用于选中特定状态的元素，例如链接的状态，鼠标悬停的状态等等。以下是一些常见的伪类：

超链接伪类 selector:选择器 pseudo-class:伪类 伪类的语法格式为：selector:pseudo-class {style}。

在CSS中，伪类是用于选择文档中特定状态或位置的选择器。伪类不是真正的HTML元素，而是用于选择元素的特定状态或位置。

以下是一些常见的伪类分类：

结构性伪类是 CSS 中一种非常有用的选择器，它们可以根据元素在其父元素中的位置进行选择。在 CSS 中，有很多种结构性伪类可用，每一种都有其独特的用途和语法。 以下是一些常用的结构性伪类： :first-child：选择父元素中的第一个子元素。

上面的代码将会选择第一个 div 元素，只要它是其父元素的第一个子元素。

:last-child：选择父元素中的最后一个子元素。

上面的代码将会选择最后一个 div 元素，只要它是其父元素的最后一个子元素。

:nth-child()：选择父元素中的第 N 个子元素。这个伪类可以接受一个参数，可以是一个具体的数字，也可以是一个公式。

上面的代码将会选择 div 元素中的第二个子元素。

:nth-last-child()：选择父元素中的倒数第 N 个子元素，与 :nth-child() 伪类类似，也可以接受一个参数。

上面的代码将会选择 div 元素中的倒数第二个子元素。

:only-child：选择父元素中仅有一个子元素的元素。

上面的代码将会选择父元素中仅有一个子元素的 div 元素。

:only-of-type：选择父元素中仅有一种特定类型子元素的元素。

上面的代码将会选择父元素中仅有一种 div 元素的元素。

结构性伪类可以帮助开发者精确地选择页面上的特定元素，从而实现更细致的样式控制和页面布局。然而，需要注意的是，在选择器中使用结构性伪类时，要考虑到页面元素的实际结构，以确保选择器能够正确地选择所需的元素。

伪元素是用于在元素的某个位置上插入内容或样式的选择器。常见的伪元素有以下几种：

::before 在元素内容前插入内容 ::after 在元素内容后插入内容 ::first-line 选中元素的第一行文本 ::first-letter 选中元素的第一个字符 ::selection 选择指定元素被客户选中的内容 伪元素的语法格式为：selector::pseudo-element {style}。

值得注意的是，伪元素是双冒号 :: 开头的，而不是单冒号 :。

使用伪类和伪元素可以使 CSS 样式更加灵活，同时也可以提高页面的可读性和可访问性。 可以运行下面代码查看 CSS文件

HTML文件

伪类和伪元素都是 CSS 中用于选择和样式化元素的特殊标记，但它们有着不同的作用。

伪类（Pseudo-classes）是选择器的一个关键字，用于指定元素在不同状态下的样式。例如，:hover 伪类可以用于指定当用户鼠标悬停在元素上时应用的样式。常见的伪类还包括 :active、:visited、:focus 等。

伪元素（Pseudo-elements）则是用于向某个元素的特定部分添加样式的关键字。它们在 CSS 中用双冒号 :: 表示，例如 ::before、::after 等。常见的伪元素包括 ::before、::after、::first-letter、::first-line 等。伪元素允许在文档流中创建虚拟的元素，并向这些虚拟元素添加样式，从而实现一些特殊的效果，如在文本前添加一个图标、在元素后添加一些装饰性内容等。

总的来说，伪类和伪元素都是用于在 CSS 中选择和样式化元素的特殊标记，但它们的作用不同：伪类是用于指定元素在不同状态下的样式，而伪元素是用于向某个元素的特定部分添加样式。

CSS有很多种选择器，以下是一些常见的选择器：

类选择器（Class Selector）：以点（.）开头，选择class属性为指定名称的元素，例如：.example {color: red;}

ID选择器（ID Selector）：以井号（#）开头，选择id属性为指定名称的元素，例如：#example {color: red;}

元素选择器（Element Selector）：选择指定标签名的所有元素，例如：p {color: red;}

后代选择器（Descendant Selector）：选择父元素下的所有符合条件的子元素，例如：div p {color: red;}

子元素选择器（Child Selector）：选择父元素下的直接子元素，例如：div > p {color: red;}

通配符选择器（Universal Selector）：选择所有元素，例如：* {color: red;}

属性选择器（Attribute Selector）：选择具有指定属性或属性值的元素，例如：[title] {color: red;} 或者 [href=“example.com”] {color: red;}

伪类选择器（Pseudo-class Selector）：选择特定状态下的元素，例如：a:hover {color: red;} 或者 input:focus {outline: none;}

伪元素选择器（Pseudo-element Selector）：选择元素中的某个部分，例如：p::first-line {color: red;} 或者 p::before {content: “Hello”;}

:not选择器（Negation Selector）：选择不匹配指定选择器的元素，例如：p:not(.example) {color: red;}

:nth-child选择器（Nth-child Selector）：选择父元素下指定位置的子元素，例如：li:nth-child(2) {color: red;}

:first-child选择器（First-child Selector）：选择父元素下的第一个子元素，例如：li:first-child {color: red;}

:last-child选择器（Last-child Selector）：选择父元素下的最后一个子元素，例如：li:last-child {color: red;}

:empty选择器（Empty Selector）：选择没有子元素的元素，例如：p:empty {color: red;}

:checked选择器（Checked Selector）：选择选中的表单元素，例如：input:checked {background-color: blue;}

:disabled选择器（Disabled Selector）：选择禁用的表单元素，例如：input:disabled {opacity: 0.5;}

:enabled选择器（Enabled Selector）：选择启用的表单元素，例如：input:enabled {border: 1px solid green;}

这些选择器可以根据需要进行组合使用，从而精确地选择需要样式化的元素。

CSS选择器 CSS选择器的优先级是指在多个CSS规则应用到同一个元素时，浏览器根据一定的规则确定哪些规则将优先应用于该元素。

CSS选择器的优先级由四个部分组成，从高到低分别是：

当多个选择器都应用于同一个元素时，浏览器会比较它们的优先级，优先应用优先级高的样式规则。如果两个或更多选择器的优先级相等，则根据它们在样式表中出现的顺序决定哪个样式将被应用。

需要注意的是，使用!important声明的样式具有最高的优先级，可以覆盖任何其他样式规则。然而，使用!important应该谨慎，因为它会破坏样式的可预测性和可维护性。 举个列子 假设有如下CSS样式规则：

然后，在HTML页面中，有如下代码：

根据上述规则，该段文字的字体颜色应该是orange，因为该元素同时匹配了p选择器和.warning类选择器，而类选择器的优先级比元素选择器高。并且还匹配了id选择器#special，但是类选择器的优先级比id选择器低，所以它的颜色将是orange。需要注意的是，即使#special选择器具有更高的优先级，但是它设置的属性（color: red）并没有应用于该元素，因为更具体的选择器（.warning）已经设置了相同的属性，并且优先级更高。