CSS

最新推荐文章于 2024-07-25 10:45:42 发布

wx13269317296

最新推荐文章于 2024-07-25 10:45:42 发布

阅读量209

点赞数

分类专栏：前端文章标签： css 前端 HTML

本文链接：https://blog.csdn.net/wx13269317296/article/details/87917620

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

正如我们在前一章中所解释的那样，HTML元素使网页设计者能够在文档中标记其结构。HTML规范列出了浏览器应如何显示这些元素的指南。例如，您可以合理地确定强元素的内容将以粗体显示。此外，您几乎可以相信大多数浏览器将使用大字体大小显示h1元素的内容…至少大于p元素并且大于h2元素。但除了信任和希望之外，您无法控制文本的显示方式。

CSS改变了这一点。CSS将设计师置于驾驶员的位置。我们将本书的其余部分用于解释您可以使用CSS做些什么。在本章中，我们首先介绍如何编写样式表的基础知识，以及CSS和HTML如何协同工作来描述文档的结构和外观。

规则和样式表

要开始使用CSS，您甚至不必编写样式表。第16章将告诉您如何指向Web上的现有样式表。

有两种方法可以创建CSS。您可以使用普通文本编辑器并“手动”编写样式表，也可以使用专用工具（例如支持CSS的网页设计应用程序）。专用工具允许您在不学习CSS语言语法的情况下创建样式表。但是，在许多情况下，设计师之后会想要手动调整样式表，因此我们建议您学会手动编写和编辑CSS。让我们开始吧

H1 { color: green }

您在上面看到的是一个包含一个规则的简单CSS规则。一个规则是关于一个或多个元素的一个文体方面的发言。甲样式表是一组适用于HTML文档的一个或多个规则。上面的规则设置所有第一级标题的颜色（h1）。让我们快速看一下规则的可视结果：

在这里插入图片描述

分组选择器和规则

在设计CSS时，简洁是一个目标。我们认为，如果我们可以减少样式表的大小，我们可以让设计师“手动”编写和编辑样式表。此外，短样式表比较长样式表加载速度快。因此，CSS包括几种通过对选择器和声明进行分组来缩短样式表的机制。

例如，考虑以下三个规则：

H1 { font-weight: bold }

H2 { font-weight: bold }

H3 { font-weight: bold }

所有三个规则都具有完全相同的声明 - 它们将字体设置为粗体。（这是使用font-weight属性完成的，我们在See Fonts中讨论。）由于所有三个声明都是相同的，我们可以将选择器分组为逗号分隔列表，只列出一次声明，如下所示：

H1，H2，H3 {font-style：bold}

此规则将产生与前三个相同的结果。

选择器可能有多个声明。例如，我们可以编写一个包含以下两个规则的样式表：

H1 { color: green }

H1 { text-align: center }

在这种情况下，我们将所有h1设置为绿色并以画布为中心。（这是使用text-align 属性完成的，在第5 章中讨论过。）

但是，通过将与同一选择器相关的声明分组为以分号分隔的列表，我们可以更快地实现相同的效果，如下所示：

H1 {

  color: green;

  text-align: center;

}

所有声明都必须包含在花括号中。分号分隔声明，可以 - 但不必 - 也出现在最后一个声明的末尾。另外，为了使您的代码更易于阅读，我们建议您将每个声明放在自己的行中，就像我们在这里所做的那样。（浏览器不关心，他们只会忽略所有额外的空格和换行符。）

现在您已掌握了如何创建CSS规则和样式表的基础知识。但是，你还没有完成。为了使样式表具有任何效果，您必须将样式表“粘合”到HTML文档中。

将样式表“粘合”到文档中

对于影响HTML文档的任何样式表，必须将其“粘合”到文档中。也就是说，必须组合样式表和HTML文档，以便它们可以一起工作以呈现文档。这可以通过以下四种方式之一完成：

使用样式元素为文档应用基本的文档范围样式表。

使用style属性将样式表应用于单个元素。

使用link元素将外部样式表链接到文档。

使用CSS @import表示法导入样式表。

在下一节中，我们将讨论第一种方法：使用样式元素。我们将讨论使用第 4 章“CSS选择器”中的style属性，并使用第16 章“ 外部样式表”中的link元素和@import表示法。

使用STYLE元素进行粘合

通过将样式表放在文档顶部的样式元素中，可以将样式表和HTML文档粘合在一起。所述样式元件在HTML引入专门以允许HTML文档内的被插入的样式表。这是使用样式元素粘贴到示例文档的样式表（以粗体显示）。结果如图2.3 所示。

<HTML>

  <TITLE>第二个样式页面</TITLE>

  <STYLE>

    H1, H2 { color: green }

  </STYLE>

  <BODY>

    <H1>尚学堂</H1>

    <P>课程

    <UL>

      <LI>java

      <LI>大数据

      <LI>前端

      <LI>人工智能，等

    </UL>

    <H2>历史</H2>

    <P>北京尚学堂科技有限公司是一家从事JAVA、IOS、android、hadoop大数据云计算技术开发、培训、咨询为一体的软件公司。公司由海外留学人员和国内IT精英人士创建，主要成员均拥有硕士以上学位，毕业于国内著名大学如：清华大学，北京航空航天大学等。

  </BODY>

</HTML>

向样式表添加规则以将h1变为绿色，然后使用样式元素将样式表粘贴到文档的结果。
在这里插入图片描述
请注意，style 元素放在title 元素之后和body元素之前。文档的标题不会显示在画布上，因此不受CSS样式的影响。

样式元素的内容是样式表。但是，当画布上出现h1，p和ul等元素的内容时，样式元素的内容不会显示在画布上。相反，它是影响的内容的风格元素-样式表-即在画布上出现。因此，您不会在屏幕上看到“{color：green}”; 你看到两个 h1元素是绿色的。没有添加任何影响任何其他元素的规则，因此这些元素以浏览器的默认颜色显示。

浏览器和CSS

有关可用浏览器的更新概述，请参阅W3C概述页面

要使CSS按照本书中的描述工作，您必须使用CSS增强的浏览器，即支持CSS的浏览器。CSS增强型浏览器会将样式元素识别为样式表的容器，并相应地显示文档。目前分发的大多数浏览器都支持CSS，例如Microsoft Internet Explorer 4（IE4），Netscape Navigator 4（NS4）和Opera 3.5（O3.5）。保守估计表明，超过一半的网络用户使用CSS增强型浏览器，数字正在稳步上升。您与之交流的人可能拥有CSS增强的浏览器。如果没有，给他们升级的理由！

关于不同浏览器如何支持CSS的信息的最佳来源是WebReview的图标

唉，并非所有的CSS实现都是完美的。当您开始尝试样式表时，您很快就会注意到每个浏览器都带有一组错误和限制。通常，较新的浏览器比旧的浏览器表现更好。IE4和O3.5是最好的，Netscape的下一个产品 - 代号为Gecko - 也承诺大大改进了对CSS的支持。

那些不使用CSS增强浏览器的人仍然可以阅读使用样式表的页面。CSS经过精心设计，即使浏览器对CSS一无所知，所有内容仍应保持可见。某些浏览器，如Netscape的Navigator版本2和3不支持样式表，但他们对样式元素有足够的了解，可以完全忽略它。在支持样式表旁边，这是正确的行为。

然而，其他浏览器不知道的风格元素，如Netscape的Navigator 1和Microsoft Internet Explorer 2将忽略这些样式的标签，但显示的内容中的风格元素。因此，用户将最终得到打印在画布顶部的样式表。在撰写本文时，只有百分之几的Web用户会遇到此问题。为避免这种情况，您可以将样式表放在HTML注释中，我们将在第1 章中讨论。由于评论不会显示在屏幕上，因此通过将样式表放在HTML注释中，可以防止最旧的浏览器显示style 元素的内容。CSS增强的浏览器知道这个技巧，并将style元素的内容视为样式表。

回想一下HTML注释的开头。以下是上一个代码示例的摘录，该示例演示了如何在HTML注释中编写样式表。注释仅包含样式元素内容：

<HTML>

  <TITLE>第二个样式页面</TITLE>

  <STYLE> <！ -

      H1 {颜色：绿色}

    - >

</ STYLE>

  <BODY>

    ..

  </ BODY>

</ HTML>

CSS也有自己的一组注释，您可以在样式表中使用它们。CSS注释以“/ *”开头，以“* /”结尾。（那些熟悉C编程语言的人会认识到这些。）CSS注释中的CSS规则不会对文档的表示产生任何影响。

浏览器还需要告知您正在使用CSS样式表。CSS是目前唯一与HTML文档一起使用的样式表语言，我们不希望这种情况发生变化。对于XML，情况可能会有所不同。但就像有多种图像格式（GIF，JPEG和PNG一样），可能会有多种样式表语言。所以告诉浏览器他们正在处理CSS是一个好习惯。（事实上，HTML要求你。）这是使用style元素的type属性完成的。类型的值表示正在使用哪种类型的样式表。对于CSS，该值为“text / css”。以下是我们之前的示例文档的摘录，该文档向您展示了如何编写此文档（结合使用HTML注释）：

<HTML>

  <TITLE>第二个样式页面</ TITLE>

  <STYLE TYPE =“text / css”>

    <！ -

      H1 {颜色：绿色}

    - >

  </ STYLE>

  <BODY>

    ..

  </ BODY>

</ HTML>

当浏览器加载文档时，它会检查它是否理解样式表语言。如果是，它将尝试读取工作表，否则将忽略它。该类型属性的上式元件是一种方法，让浏览器知道正在使用哪个样式表语言。该类型属性必须被包括在内。

为了使示例更易于阅读，我们选择不在HTML注释中包装样式表，但我们在本书中使用了type属性。

树结构和继承

回忆关于HTML的讨论，该HTML表示具有树状结构的文档以及HTML中的元素如何具有子项和父项。拥有树形结构文档的原因有很多。对于样式表，有一个很好的理由：继承。就像孩子从父母那里继承一样，HTML元素也是如此。HTML元素不是继承基因和金钱，而是继承风格属性。

让我们首先看一下示例文档：

<HTML>

  <TITLE>我的第二个样式页面</ TITLE>

  <BODY>

    <H1>尚学堂</ H1>

    北京尚学堂科技有限公司是一家从事JAVA、android、hadoop大数据云、人工智能计算技术开发、培训、咨询为一体的软件公司。

      <STRONG>行业</ STRONG>总多

    <UL>

      <LI> JAVA

      <LI>hadoop大数据云

      <LI>圣人工智能

    </ UL>

  </ BODY>

</ HTML>

该文档的树结构是：
在这里插入图片描述
通过继承，在一个元素上设置的CSS属性值将从树向下传输到其后代。例如，我们的示例到目前为止，h1和h2元素的颜色设置为绿色。现在，比如说，您希望在文档中的所有元素上设置相同的颜色。您可以通过列出选择器中的所有元素类型来执行此操作：

<STYLE TYPE =“text / css”>

  H1，H2，P，LI {颜色：绿色}

</ STYLE>

但是，大多数HTML文档比我们的示例文档更复杂，您的样式表很快就会变长。有一种更好 - 更短的方式。我们不是在每个元素类型上设置样式，而是将它设置在它们的共同祖先身体元素上：

<STYLE TYPE =“text / css”>

  身体{颜色：绿色}

</ STYLE>

继承的结果.

在这里插入图片描述

如上所述，继承是一种运输工具，它将风格属性分配给元素的后代。由于body元素是所有可见元素的共同祖先，因此当您要为整个文档设置样式规则时，body是一个方便的选择器。

重写继承

在前面的示例中，所有元素都通过继承赋予相同的颜色。然而，有时孩子看起来不像父母。毫不奇怪，CSS也解释了这一点。假设您希望h1 元素为蓝色，而其余元素应为绿色。这在CSS中很容易表达：

<STYLE TYPE="text/css">

  BODY { color: green }

  H1 { color: navy }

</STYLE>

由于h1是body的子元素（从而继承自body），因此上述样式表中的两个规则是冲突的。第一个设置body元素的颜色- 从而也设置h1通过继承的颜色- 而第二个设置颜色特定于h1元素。哪条规则会获胜？我们来看看：

在这里插入图片描述

第二条规则获胜的原因是它比第一条规则更具体。第一条规则非常通用 - 它会影响画布上的所有元素。第二条规则仅影响文档中的h1元素，因此更具体。

如果CSS是一种编程语言，那么指定规则的顺序将决定它们中的哪一个会获胜。CSS不是一种编程语言，在上面的例子中，顺序是无关紧要的。如果我们使用此样式表，结果完全相同：

<STYLE TYPE="text/css">

  H1 { color: navy }

  BODY { color: green }

</STYLE>

CSS旨在解决上述样式表规则之间的冲突。特异性是其中一个方面

不继承的属性

作为一般规则，CSS中的属性从父元素继承到子元素，如前面的示例中所述。但是，有些属性不会继承，并且总有一个很好的理由。我们将使用background属性（作为不继承的属性的示例。

假设您要为页面设置背景图像。这是对Web的常见影响。在CSS中，您可以编写：

<HTML>

  <TITLE>Bach's home page</TITLE>

  <STYLE TYPE="text/css">

    BODY {

      background: url(texture.gif) white;

      color: black;

    }

  </STYLE>

  <BODY>

    <H1>北京尚学堂</H1>

    <P>北京尚学堂科技有限公司是一家从事JAVA、android、hadoop大数据云、人工智能计算技术开发、培训、咨询为一体的软件公司。公司由海外留学人员和国内IT精英人士创建，主要成员均拥有硕士以上学位，毕业于国内著名大学如：清华大学，北京航空航天大学等。

  </BODY>

</HTML>

的背景属性有一个指向一个背景图像作为值的URL（“texture.gif”）。加载图像时，画布看起来像：
在这里插入图片描述
上面的例子中有一些值得注意的事情：

背景图像像壁纸一样覆盖表面 - 也涵盖了h1和p元素的背景。这不是由于继承，而是因为除非另有设定，否则所有背景都是透明的。因此，由于我们没有将h1或p元素的背景设置为其他内容，因此父元素body将会通过。

除了图像的URL之外，还指定了颜色（白色）作为背景。如果找不到图像，您将看到颜色。

body元素的颜色已设置为黑色。为了确保文本和背景之间的对比，在设置背景属性时始终设置颜色是一个好习惯。

那么，究竟为什么背景属性不会继承？在视觉上，透明度的效果类似于继承：看起来所有元素都具有相同的背景。有两个原因：首先，透明背景比其他背景更快显示（没有什么可显示！）。其次，由于背景图像相对于它们所属的元素对齐，否则您将不会总是得到平滑的背景表面。

CSS的常见任务

设置颜色和背景 - 如上所述 - 是CSS执行的最常见任务之一。其他常见任务包括在元素周围设置字体和空白区域。本节将向您介绍CSS中最常用的属性。

常见任务：字体

让我们从字体开始。如果您以前使用过桌面出版应用程序，那么您应该能够阅读这个小样式表：

H1 { font: 36pt serif }

上面的规则设置h1元素的字体。值的第一部分 - 36pt - 将字体大小设置为36 磅。“点”是一种旧的印刷测量单位，它已经存活到数字时代。

在这里插入图片描述

该字体属性是同时设置其他几个属性的简写属性。通过使用它，您可以缩短样式表并在其替换的所有属性上设置值。如果您选择使用扩展版本，则必须设置所有这些以替换上面的示例：

H1 {

  font-size: 36pt;

  font-family: serif;

  font-style: normal;

  font-weight: normal;

  font-variant: normal;

  line-height: normal;

}

有时您只想设置其中一个。例如，您可能希望在某些元素中倾斜文本。这是一个例子：

UL {font-style：italic}

该字体风格的属性不会改变字体大小或字体系列，它将只偏股现有的字体。当在ul元素上设置时，里面的li元素将变为倾斜，因为继承了font-style。
希望大家多多关注，不定期的更新！

wx13269317296

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS

正如我们在前一章中所解释的那样，HTML元素使网页设计者能够在文档中标记其结构。HTML规范列出了浏览器应如何显示这些元素的指南。例如，您可以合理地确定强元素的内容将以粗体显示。此外，您几乎可以相信大多数浏览器将使用大字体大小显示h1元素的内容…至少大于p元素并且大于h2元素。但除了信任和希望之外，您无法控制文本的显示方式。CSS改变了这一点。CSS将设计师置于驾驶员的位置。我们将本书的其余部...
复制链接

扫一扫