CSS样式代码基础教程解析

1、CSS样式表，CSS技术是格式化网页的标准方式，它通过设置CSS属性使网页元素得到各种效果。本部分共分为9个示例，主要内容包括基本知识、CSS的创建和导入、CSS的语法结构、常用CSS的分类、CSS的使用原则等。本章的主要内容包括以下内容： 1.1样式表的基本实例1-1样式表的简单实例1-2样式表的规则实例1-3样式表中的选择器1.2样式表的引用实例1-4导入CSS文件，1.1样式表的基础，示例1-1样式表1简介。要求和目的：掌握什么是样式表；掌握样式表的分类将简单地设计内嵌样式表，而内嵌样式表将创建外部样式表2。程序和步骤：1。通过单击任务栏上的菜单命令开始程序附件记事本打开记事本。2在记事

2、本的编辑面板中输入以下代码，创建具有样式的页面。例如，这个文本将以红色显示。此文本的背景色是黄色。本文将以粗体显示学习样式表的相关知识。3将文件保存到确定的目录，文件名为css1.htm。4操作结果如图11所示。图11是样式表的示例。第三，它涵盖了知识要点：1什么是在CSS(层叠样式表)技术中格式化网页的标准方式，它扩展了HTML的功能并使网页设计者能够以更有效的方式格式化网页。上面的例子只是级联样式表的一个应用。还可以看到，级联样式表的最大优势在于内容和格式的分离，这使得以统一的方式管理各种显示格式成为可能。级联样式表将内容与格式分开，以便以统一的方式管理不同的显示格式。层叠样式表是后来提出

3、的标准，因此只有4.0及更高版本的IE浏览器对CSS有更好的支持。2CSS优先级级联样式表“级联”是指在同一个HTML文档中可以有多层样式表，不同级别的样式表根据它们的位置有不同的优先级。优先级越高，显示时使用的时间越晚。换句话说，网页对象(文本、图片或表格等。)可以用多层样式表来修饰，但它最终将以优先级最高的样式表定义的格式显示。一般来说，级联样式表可以分为三种类型：内联样式表、嵌入样式表和外部样式表。让我们分别看看这三个样式表。内嵌样式表嵌入在样式表的外部样式表中。内联样式表基于现有的HTML元素，并使用样式属性将特殊样式直接添加到控件信息的标记中，例如以下示例：内联样式表仅适用于使用它的

4、元素，但不影响HTML文档中的其他元素。因此，内嵌样式表通常用于需要特殊格式的网页对象。在这种情况下，网页应用内嵌样式表。在本例中，文本的每个段落都定义了自己的内嵌样式表：该段落将以红色显示，该段落的背景颜色为黄色，该段落将以粗体显示，并且该代码中第一个P元素中的样式表将以中文云显示文本。另一个特殊的地方是第二个P元素与元素嵌套在一起。从图中可以看出，元素中的文本也使用了P元素中的样式。这个属性通常被称为继承，这意味着子元素继承父元素的样式。如图11所示。嵌入式样式表嵌入式样式表通常包含在文档的HEAD元素中，并且有一个特殊的元素样式来标记这个样式表。它的写作格式通常是：在这种格式中，styl

5、e元素的类型属性必须设置为text/css，这意味着它定义了一个级联样式表。这样，不支持级联样式表的浏览器在读取此属性时会自动忽略此样式表。此外，在STYLE元素中添加了对HTML的注释，这样做的好处是可以防止旧浏览器在网页上用文字显示这些样式。嵌入式样式表可以首先定义一个HTML标签的样式。定义样式后，整个网页中的所有标签都将以此样式显示网页对象。例如，在本例中，嵌入式样式是为H1元素定义的，因此网页中H1元素中包含的所有单词都将以定义的样式显示，如图41所示。外部样式表，这意味着样式表作为一个独立的文件保存在计算机上，并且这个文件采用。css 作为文件扩展名。样式表文件中的样式定义与嵌入式

6、样式表中的相同，只是不再需要样式元素。例如，要将此示例中的嵌入样式定义到样式表文件mystyle.css中，此样式表文件的内容应该是嵌入样式表中的所有样式，如下所示：h1 font-size: 36px。Font-family:隶书；font-weight : bold；color: # 993366提示：定义嵌入式样式表时，标签必须放在和标签之间。示例1-2样式表1的规则。要求和目的：掌握样式表定义规则2。掌握规则组合2。过程和步骤：1依次单击任务栏上的开始、程序、附件和记事本，打开记事本。2在记事本的编辑面板中输入下面的代码，创建一个使用样式的页面css2.htm:直接在标签中嵌套样式信息

7、，一代人在晚上给了我黑眼睛，但我用它来找到光3保存文件为css2.htm。运行结果如图12所示。3.涵盖知识点：1。样式规则直接在html标记中指定样式信息。显然，它没有发挥样式表的主要优势来简化格式设置和维护，因为每个样式属性必须单独设置。如果我们能统一定义所有相似的风格。然后把它应用到网页中的元素上，就可以显示出CSS的优越性。事实上，这是CSS应用于网页的最常见的方式，即在HEAD标记中使用STYLE标记，然后在STYLE标记中定义STYLE:selector property 1: vaue 1；property2:value2其中，选择器表示样式作用的对象(选择器)，属性和值表示相应

8、的CSS属性和值。每对属性和值用分号分隔。例如，h1 font-family : italics _ GB 2312；Text-align:center，其中h1是选择器，font-family : italics _ GB 2312；Text-align:center 是一个声明。在声明中，字体系列和文本对齐是属性，斜体_gb2312和居中是相应的属性值。定义样式时，有许多不同的元素需要使用相同的样式。此时，没有必要逐一定义样式规则。您可以将它们组合起来，并用分号分隔每个声明。例如h1、h2、p font-family : italics _ GB 2312。通过以这种方式定义文本对齐：center，页面中所有使用h1、h2和p的对象都具有相同的显示模式。示例1-3