被CSS吓倒？让你的恐惧消失的权威指南

Disclosure:您的支持有助于保持网站的运行！我们赚取介绍费的一些服务，我们推荐在这个页面。

 

CSS是定义网页表示的语言。它用于添加颜色、背景图像和纹理，以及在页面上排列元素。然而，CSS所做的不仅仅是描绘一幅美丽的图画。它也被用来提高网站的可用性。下图显示了YouTube的首页。左边是页面的常规呈现，右边是没有CSS的情况。

右边的图片不仅不那么有趣，而且很难使用。

在这篇简短的指南中，我们将介绍CSS，演示CSS语法，解释CSS如何工作，向您展示如何向HTML文档添加CSS标记，并向您介绍web上的大量资源，在这些资源中您可以了解更多关于CSS的信息。

内容 [隐藏]

• 1什么是CSS？
  • 1.1CSS和HTML有什么不同？
• 2CSS语法
  • 2.1CSS语法示例
• 3为样式准备HTML标记
  • 3.1何时使用类
  • 3.2何时使用ID
  • 3.3何时不使用钩子
  • 3.4准备样式化标记的最佳实践
• 4将CSS规则链接到HTML文档的方法
  • 4.1内联样式
  • 4.2内部样式表
  • 4.3外部样式表
  • 4.4何时使用每种方法
• 5CSS如何工作
  • 5.1级联遗传
  • 5.2具体性
• 6CSS能做什么？
  • 6.1盒子模型
  • 6.2创建布局
  • 6.3网页字体和排版
  • 6.4创建一致的跨浏览器体验
• 7相关要素
• 8教程和资源

什么是CSS？

CSS代表级联样式表，它是用来设计网页视觉表示的语言。CSS是一种语言，它告诉web浏览器如何呈现网页的不同部分。

网页上的每一项或元素都是用标记语言编写的文档的一部分。在大多数情况下，HTML是标记语言，但也有其他语言在使用，如XML。在本指南中，我们将使用HTML来演示CSS的运行，只要记住，同样的原则和技术适用于使用XML或者不同的标记语言。

CSS和HTML有什么不同？

在讨论CSS主题时，首先要了解的是何时使用像CSS这样的样式化语言，何时使用像HTML这样的标记语言。

• 所有关键网站内容应该添加到网站使用标记语言，如HTML。
• 陈述网站的内容应该定义的样式语言，如CSS。

不属于web页面表示的博客文章、页面标题、视频、音频和图片都应该使用HTML添加到web页面中。背景图像和颜色、边框、字体大小、排版以及网页上项目的位置都应该由CSS定义。

区分这一点很重要，因为如果不使用正确的语言，将来很难对网站进行更改，并且会给使用纯文本浏览器或屏幕阅读器的网站访问者带来可访问性和可用性问题。

CSS语法

CSS语法包括选择器、属性、值、声明、声明块、规则集、at-rules和语句。

• 一个选择器用于标识将受样式影响的网页元素的代码片段。
• 一个财产要影响的元素的方面。例如，颜色、填充、边距和背景是一些最常用的CSS属性。
• 一个价值用于定义财产例如，属性颜色可能被赋予红色的值，如下所示：color: red;.
• A的组合财产和a价值叫做宣言.
• 在很多情况下声明应用于单个选择器A．a声明块用于引用应用于单个选择器.
• 一个选择器以及声明块后面的组合称为规则集.
• At-rules类似于规则集但从@签名而不是用选择器最常见的at-rule是@media规则，通常用于创建CSS规则块，这些规则块根据查看网页的设备的大小应用。
• 二者都规则集和at-rules是CSS发言.

CSS语法示例

让我们使用一个CSS块来阐明这些条目是什么。

h1 {
    color: red;
    font-size: 3em;
    text-decoration: underline;
    }

在这个例子中，h1是选择器。选择器后面跟着一个声明块，其中包括三个声明。每个声明与下一个声明之间用分号分隔。选项卡和换行符是可选的，但大多数开发人员使用它们来使CSS代码更易于阅读。

使用h1作为选择器，我们说web页面上的每个级别1标题都应该遵循这个规则集中包含的声明。

规则集包含三个声明：

• color:red;
• font-size: 3em;
• text-decoration: underline;

color, font-size和text-decoration都是财产。实际上数百个CSS属性你可以用，但只能用常用的有几十种.

我们应用了价值观red, 3em和underline我们用过的房产。每个CSS属性都被定义为接受以特定方式格式化的值。

为color属性我们可以使用颜色关键字或十六进制、RGB或HSL格式的颜色公式。在本例中，我们使用color关键字redCSS3中有几十个颜色关键字可用，但是其他颜色模型可以访问数百万种颜色。

我们应用了3em去物业font-size有各种尺寸单位我们可以使用包括像素、百分比等等。

最后，我们添加了underline去物业text-decoration我们还可以用overline或line-through作为text-decoration此外，CSS3还允许使用线条样式--实线、双、虚线、虚线和波浪形--很好地规范了文本装饰颜色。我们可以使用这样的声明同时应用这三个值：

text-decoration: blue double underline;

该规则将导致h1在我们最初的例子中，用蓝色的双线下划线。文本本身将保持红色，如我们的color property.

为样式准备HTML标记

应该使用CSS向网页添加内容。该任务最好由标记语言（如HTML和XML）处理。相反，CSS用于选择网页上已经存在的项，并定义每个项应该如何显示。

为了尽可能容易地在网页上选择项，应该将标识符添加到网页上的元素中。这些标识符，在CSS上下文中通常称为钩子，使得识别应该受CSS规则影响的项变得更加容易。

类和ID用作CSS样式的钩子。虽然CSS的呈现方式不受使用类和钩子的影响，但它们使开发人员能够确定他们希望样式化的HTML元素。

类和ID不能互换。知道什么时候使用它们很重要。

何时使用类

当单个网页上有多个需要样式化的元素时，使用类。例如，假设您希望页眉和页脚中的链接以一致的方式样式设置，但与页面正文中的链接不同。要确定这些链接，您可以向每个链接或保存链接的容器添加一个类。然后，您可以使用类指定样式，并确保它们只应用于具有class属性的链接。

何时使用ID

对网页上只出现一次的元素使用ID。例如，如果你使用HTML无序列表作为你的站点导航，你可以使用这样的ID资产为该列表创建唯一的钩子。

下面是一个简单的电子商务网站导航栏的HTML和CSS代码示例。

<style>
    #nav {
        background: lightgray;  
        overflow: auto; 
        }
    #nav li {
        float: left;
        padding: 10px;
        }
    #nav li:hover {
        background: gray;
        }
</style>

<ul id="nav">
    <li><a href="">Home</a></li>
    <li><a href="">Shop</a></li>
    <li><a href="">About Us</a></li>
    <li><a href="">Contact Us</a></li>
</ul>

该代码将生成一个水平导航菜单，其背景为浅灰色，从页面左侧开始。每个导航项目将有10像素的间距在所有方面和背景将变得更暗，当您允许您的鼠标悬停在它。

同一网页上的任何其他列表都不会受到该代码的影响。

示例-资产净值{
背景：浅灰色；
溢出：自动；
}
#示例-nav li {
浮动：左；
填充物：10px；
}
#示例-nav li：however {
背景：灰色；
}

• 家
• 商店
• 关于我们
• 联系我们

何时不使用钩子

你不必向HTML元素添加类或ID来使用CSS样式。如果您知道要样式化网页上特定元素的每个实例，则可以使用元素标记本身。

例如，假设你想创建一致的标题样式。与其向每个标题添加类或ID，不如使用heading标记简单地设置所有标题元素的样式。

<style>
    ul {
        list-style-type: upper-roman;
        margin-left: 50px;
        }
    p {
        color: darkblue
        }
</style>

<p>Some paragraph text here. Two short sentences.</p>
<ul>
<li>A quick list</li>
<li>Just two items</li>
</ul>
<p>Additional paragraph text here. This time let's go for three sentences. Like this.</p>

代码将呈现如下。

代码_ sample ul {
列表式：上罗马字母；
边距-左：50px；
}
代码_ sample p {
颜色：深蓝色
}

这里的一些段落文字。两个短句。

• 快速列表
• 只有两样

此处增加段落正文。这次让我们用三句话。像这样。

• 另一份名单
• 只有两样东西

在本例中，即使我们只编写了ul和p元素，每个元素都会影响多个项。通过在网站的每个页面上创建标题、列表和段落文本的一致样式，使用元素选择器是创建有吸引力、可读性和一致性的网站体验的好方法。

准备样式化标记的最佳实践

现在您已经了解了如何将类、ID和元素标记用作CSS规则集的钩子，那么如何最好地实现这些知识来编写标记，以便更容易地指向特定元素呢？

• 自由一致地应用类。对应在一个方向或另一个方向对齐的项以及在单个网页上重复出现的任何元素使用类。
• 将ID应用于只在网页上出现一次的项。控件上使用IDdiv包含网页内容的ul包含导航菜单的div包含网页页眉的。

将CSS规则链接到HTML文档的方法

向网页添加CSS规则有三种方法：

• 内联样式
• 内部样式表
• 外部样式表

在绝大多数情况下，应该使用外部样式表。但是，在某些情况下可以使用内联样式或内部样式表。

内联样式

内联样式应用于特定的HTML元素。HTML属性style用于定义仅应用于该特定元素的规则。下面我们来看看编写内联样式的语法。

<h1 style="color:red; padding:10px; text-decoration:underline;">Example Heading</h1>

该代码将导致该标题渲染与红色下划线文本和10像素的填充在所有方面。很少有实例应该使用内联样式。在几乎所有情况下，都应该避免它们，并将样式添加到样式表中。

内部样式表

本教程前面的示例使用了内部样式表。内部样式表是添加到HTML文档中的CSS块head元素style元素在开始和结束之间使用head标记，所有CSS声明都添加在style tags.

我们可以使用这种语法在内部样式表中复制上面代码中的内联样式。

<head>
    <style>
        h1 {
            color: red;
            padding: 10px;
            text-decoration: underline;
            }
    </style>
</head>
<body>
    <h1>Example Heading</h1>
</body>

该代码将产生与内联样式相同的结果。但是，使用内部样式表而不是内联样式的好处是h1页面上的元素将受到样式的影响。

外部样式表

外部样式表是只包含CSS语句的文档。使用link标记中的head元素。

要使用外部样式表，首先创建CSS文档。

/*************************************************
Save with a name ending in .css such as styles.css
*************************************************/
h1 {
    color: red;
    padding: 10px;
    text-decoration: underline;
    }

现在我们有了一个带有一些样式的外部样式表，我们可以使用link element.

<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>Example Heading</h1>
</body>

加载此HTML文档时link标记将导致文件中的样式styles.css要加载到网页中的。因此，所有1级标题元素都将显示红色文本、下划线，并在每边应用10像素的填充。

何时使用每种方法

在几乎所有情况下，外部样式表都是设置网页样式的正确方法。使用外部样式表的主要好处是它们可以链接到任意数量的HTML文档。因此，可以使用单个外部样式表来定义整个网站的表示。

在设计一个简单的单页网站时，可以使用内部样式表。如果网站永远不会增长超过单一的初始页面使用内部样式表是可以接受的。

内联样式可以在两种情况下使用：

1. 当编写只应用于单个网页上的单个元素的CSS规则时。
2. 当应用所见即所得编辑器，如tinyMCE编辑器集成到内容管理系统，如WordPress。

在所有其他情况下，应该避免使用内联样式，而使用外部样式表。

CSS如何工作

在编写CSS时，很多时候编写的规则相互冲突。例如，在样式化标头时，下列所有规则都可能应用于h1 element.

• 创建一致性的元素级规则h1呈现在网站的所有页面。
• 定义h1出现在特定位置的元素-例如博客文章的标题。
• 定义呈现h1元素仅用于一个或多个网页上的一个位置-如网站名称。

开发人员如何编写足够通用的规则来涵盖h1然而，足够具体地定义应该只出现在给定元素的特定实例上的样式？

CSS样式遵循两个规则，您需要了解这些规则才能编写有效的CSS。理解这些规则将帮助您编写CSS，当您需要它是广泛的，但当您需要它是高度具体的。

控制CSS行为方式的两个规则是继承和特定。

级联遗传

为什么CSS样式被称为级联当编写的多个规则相互冲突时，将执行最后编写的规则。这样，样式向下级联，并应用最后编写的规则。

让我们看一个例子。让我们在内部样式表中编写两个直接相互矛盾的CSS规则。

<head>
    <style>
        p {color: red;}
        p {color: blue;}
    </style>
</head>
<body>
<p>What color will the text of this paragraph be?</p>
</body>

浏览器将级联所有样式并应用最后遇到的样式，否决所有以前的样式。结果，标题是蓝色的。

Code _ sample _ p { color：red；}
Code _ sample _ p { color：blue；}

这一段的文字会是什么颜色？

在使用外部样式表时，也会产生同样的级联效果。使用多个外部手写板是很常见的。当这种情况发生时，样式表将按照它们在HTML文档中出现的顺序加载head元素。如果样式表规则之间发生冲突，每个样式表中包含的CSS规则将推翻以前加载的样式表中包含的规则。以下面的代码为例：

<head>
<link rel="stylesheet" type="text/css" href="styles_1.css">
<link rel="stylesheet" type="text/css" href="styles_2.css">
</head>

中的规则styles_2.css如果这两个样式表中包含的样式之间有冲突，则应用。

风格继承是CSS样式级联行为的另一个示例。

为父元素定义样式时，子元素将接收相同的样式。例如，如果我们对无序列表应用颜色样式，子列表项将显示相同的样式。

<head>
    <style>
        ul {color: red;}
    </style>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>
</body>

下面是代码的呈现方式。

代码-sample-ul { color：red；}

 

• 项目1
• 项目2

并非每个属性都从父元素传递到子元素浏览器认为某些属性为non-inherited物业。边距是不从父元素传递到子元素的属性的一个例子。

具体性

确定哪些规则应用于每个HTML元素的第二个规则是专属性规则.

更具体的CSS规则选择器会否决不那么具体的CSS规则选择器不管哪个先发生。正如我们所讨论的，三个最常见的选择器是元素标记、类和id。

• 选择器的最小特定类型是元素级选择器。
• 当类用作选择器时，它将否决用元素标记作为选择器编写的CSS规则。
• 当ID用作选择器时，它将否决用元素或类选择器编写的CSS规则。

影响特定性的另一个因素是写入CSS样式的位置。内联写入的样式style属性否决在内部或外部样式表中编写的样式。

另一种提高选择器特异性的方法是使用一系列元素、类和ID来确定要寻址的元素。例如，如果要在列表中精确定位无序列表项，则类“example-list”包含div使用id“example-div”，您可以使用以下选择器创建具有高度特定性的选择器。

div#example-div > ul.example-list > li {styles here}

虽然这是创建非常特定的选择器的一种方法，但建议限制使用这些类型的选择器，因为它们确实比简单的选择器需要更多的时间来处理。

一旦理解了继承和特殊性是如何工作的，您就能够非常准确地确定web页面上的元素。

CSS能做什么？

一个更好的问题可能是：“CSS不能做什么？”

CSS可用于将HTML文档转换为专业的、精美的设计。下面是一些你可以通过CSS实现的事情：

• 创建一个灵活的网格，设计完全响应的网站，在任何设备上渲染精美。
• 样式的一切，从排版，到表格，到表格，等等。
• 使用诸如float, position, overflow, flex和box-sizing.
• 向任何元素添加背景图片。
• 创建形状、交互和动画。

这些概念和技术超出了本介绍性指南的范围，但是下面的资源将帮助您处理这些更高级的主题。

盒子模型

如果您计划使用CSS来构建网页布局，那么首先要掌握的主题之一就是框模型。框模型是一种可视化和理解网页上的每一项是如何由内容、填充、边框和边距组合而成的方法。

CSS盒模型通过Mozilla贡献者, CC-BY-SA 2.5.

理解这四个部分如何组合在一起是一个基本概念，在转向其他CSS布局主题之前必须掌握这个概念。

了解box模型的两个好地方包括：

• 一个盒子模型的解释来自万维网联盟。
• 一个CSS盒模型简介从Mozilla开发者网络。

创建布局

使用CSS创建布局有许多技术和策略，理解框模型是每种策略的先决条件。掌握了框模型，你就可以学习如何操作网页上的内容框了。

Mozilla开发者网络提供了CSS布局简介这篇简短的阅读介绍了CSS布局背后的基本概念，并快速介绍了如下属性text-align, float和position.

W3C提供了更广泛深入的CSS布局指南：CSS布局模型这个文档是专业开发人员的资源，所以如果你是CSS新手，请慢慢来。这不是一个快速阅读。但是，您需要了解的关于创建CSS布局的所有内容都包含在本文档中。

网格布局一直是设计响应式布局的首选策略。CSS网格已经从零开始创建多年，市场上有许多不同的网格生成网站和开发框架。然而，在几年内，对网格布局的支持将成为CSS3规范的一部分。您可以通过以下方法了解很多网格阅读W3C网站上的主题关于网格布局的简短介绍，请查看本文来自Mozilla.

几年内，css3 flexbox有望成为设计网站布局的主导模式。flexbox规范还没有完全完成和最终确定，浏览器对flexbox的支持也不一致。然而，每一个初露头角的CSS开发人员都需要熟悉flexbox，并准备在不久的将来实现它Mozilla开发者网络是在flexbox上加速的最好地方之一。

网页字体和排版

有很多事情可以做，以增加个性和提高网站内容的可读性。在我们的指南中了解有关为web选择字体和排版的更多信息字体和网页排版.

创建一致的跨浏览器体验

每个浏览器对HTML规范的解释略有不同。因此，当相同的代码在两个不同的浏览器中呈现时，代码的呈现方式往往会有细微的差别。

以这段简短的代码为例。

<h1>Heading 1</h1>
<p>A short paragraph of text. Just four sentences. Most of the sentences are quite short. Especially this one.</p>
<h2>Heading 2</h2>
<ul>
    <li>Just a short list</li>
    <li>Three items on this list</li>
    <li>We'll make it an unordered list</li>
</ul>
<h3>Heading 3</h3>
<p>One final short paragraph of text. Just four sentences. Most of the sentences are quite short. Especially this one.</p>

如果我们在两个不同的浏览器中呈现代码，我们会看到细微的差别。下面是Mozilla Firebox和Microsoft Edge如何渲染这些代码。

左边的Firefox在每个标题元素周围增加了一点边距。此外，在边缘渲染时，项目符号点稍微小一点。虽然这些差异并不重要，但在某些情况下，浏览器之间的这些微小差异会造成问题。

CSS可以用来解决这些跨浏览器兼容性问题。一种流行的方法是实现一个样板CSS文档，称为normalize.css这个免费可用的CSS文件可以链接到任何HTML文档，以帮助最小化跨浏览器呈现差异。

最简单的方法normalize.css在您的设计工作是链接到谷歌托管的副本为此，只需将这一行代码放到head元素。

<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />

 

 

 

相关要素

元素名称	属性	说明
如何向HTML文档添加CSS样式规则	< style type = " " " > < style media = " " " >	< style >元素用于向HTML文档添加CSS样式规则。元素预计将出现在文档< head >中，但在文档的< body >中使用时也将呈现可接受的状态。