• 以前的
• 概述:开始使用web
• 下一个

CSS(层叠样式表)是为web内容设置样式的代码。CSS基本知识介绍你需要开始做的事情。我们将回答这样的问题:如何将文本设置为红色?我如何使内容显示在(网页)布局的特定位置?我如何装饰我的网页与背景图像和颜色?

和HTML一样，CSS也不是一种编程语言。它也不是一种标记语言。CSS是一种样式表语言。CSS是您用来选择性地样式化HTML元素的工具。例如，这个CSS选择段落文本，将颜色设置为红色:

p ｛
  颜色：红色的；
｝

让我们试一试!使用文本编辑器，将上面的三行CSS粘贴到一个新文件中。将文件保存为style.css在一个名为风格．

为了使代码工作，我们仍然需要将这个CSS(上面的)应用到HTML文档中。否则，样式化不会改变HTML的外观。(如果你还没有关注我们的项目，请在这里停下来阅读处理文件和HTML基础知识.）

1. 打开你的index . html文件。把下一行粘贴在头部(中间)< >头和< / >头标签):

   <链接 href＝＂风格/ style.css＂ rel＝＂样式表＂>
   

   复制到剪贴板
2. 保存index . html然后把它载入你的浏览器。你应该会看到这样的结果:

如果你的段落文本是红色的，恭喜你!您的CSS正在工作。

让我们剖析一下红色段落文本的CSS代码来理解它是如何工作的:

整个结构称为a规则集． (这个词规则集经常被称为正义吗规则)。请注意各个部件的名称:

这是规则集开头的HTML元素名。它定义了要被样式化的元素(在这个例子中，< p >元素)。要设置不同元素的样式，请更改选择器。

这是一条简单的规则颜色:红色;． 它指定了哪个元素属性你想要风格。

这些是您可以样式化HTML元素的方法。(在这个例子中,颜色的属性是< p >元素)。在CSS中，您可以选择希望在规则中影响哪些属性。

在属性的右边——冒号之后——有一个属性值． 它从许多可能的表象中为给定的属性选择一种。(例如，有很多颜色除了价值红色的.）

注意语法的其他重要部分:

• 除了选择器之外，每个规则集都必须用花括号括起来。（{}）
• 在每个声明中，必须使用冒号(：)将属性与其一个或多个值分开。
• 在每个规则集中，您必须使用分号(；)，将每个声明与下一个声明分开。

如果要在一个规则集中修改多个属性值，可以用分号分隔，如下所示:

p ｛
  颜色：红色的；
  宽度：500 px；
  边境：1 px固体黑色；
｝

您还可以选择多个元素，并将一个规则集应用于所有元素。用逗号分隔多个选择器。例如:

p, li h1 ｛
  颜色：红色的；
｝

有许多不同类型的选择器。上面的例子使用元素选择器，它选择给定类型的所有元素。但我们也可以做出更具体的选择。下面是一些更常见的选择器类型:

还有更多的选择器有待发现。要了解更多信息，请参见MDN选择器指南．

现在我们已经了解了一些CSS基础知识，让我们通过向style.css文件。

1. 首先,找到字体输出你之前保存的你的网站看起来会是什么样子?． 添加<链接>元素在index . html的头部(任何在< >头和< / >头标签)。它看起来像这样:

   <链接 href＝＂https://fonts.googleapis.com/css?family=Open+Sans＂ rel＝＂样式表＂>
   

   复制到剪贴板
   这段代码将您的页面链接到一个样式表，该样式表将为您的网页加载Open Sans字体家族。
2. 接下来，删除您在style.css文件。这是一个很好的测试，但是我们不要继续使用大量的红色文本。
3. 添加以下行(如下所示)，替换字体类型任务与你的字体类型选择从你的网站看起来会是什么样子?． 房地产字体类型引用要用于文本的字体。该规则定义了整个页面的全局基本字体和字体大小。自< html >是否整个页面的父元素，它内部的所有元素继承相同字体大小和字体类型．

   超文本标记语言 ｛
     字体大小：10 px； /* px表示“像素”:基础字体大小现在是10像素高*/
     字体类型： “开放无”，无衬线； /*这应该是您从谷歌字体得到的其余输出
   ｝
   

   复制到剪贴板

   注意:CSS中的任何内容／*和*／是一个CSS的评论． 浏览器在呈现代码时忽略注释。CSS注释是为你的代码或逻辑写有用的注释的一种方式。

4. 现在，让我们为那些在HTML正文中包含文本的元素设置字体大小(<标题>，<李>,< p >)． 我们也将标题居中。最后，让我们扩展第二个规则集(如下所示)，设置行高和字母间距，使正文内容更具可读性。

   h1 ｛
     字体大小：60像素；
     text-align：中心；
   ｝
   
   p,李 ｛
     字体大小：16 px；
     行高： 2；
     字母间距：1 px；
   ｝
   

   复制到剪贴板

调整px你喜欢的价值观。你正在进行的工作应该如下所示:

在编写CSS时，你会注意到:很多内容都是关于方框的。这包括设置大小、颜色和位置。页面上的大多数HTML元素都可以被看作是盒子上的盒子。

从照片https://www.geograph.org.uk/photo/3418115版权©吉姆·巴顿 使用cc / 2.0

CSS布局主要是基于盒模型。每个占据页面空间的盒子都有如下属性:

• 填充，内容周围的空间。在下面的例子中，它是段落文本周围的空格。
• 边境的实线，只是在填充外面。
• 保证金，边界外面的空间。

在本节中，我们还使用:

• 宽度(一个元素)。
• 背景颜色，元素内容和填充后面的颜色。
• 颜色，元素内容(通常是文本)的颜色。
• 文本阴影设置元素内文本的投影。
• 显示设置元素的显示模式。(继续阅读了解更多)

为了继续，让我们添加更多的CSS。继续在下面添加这些新规则style.css． 尝试改变值，看看会发生什么。

超文本标记语言 ｛
  背景颜色：# 00539 f；
｝

该规则为整个页面设置背景颜色。将颜色代码更改为你在What will my website look like中选择的颜色?．

身体 ｛
  宽度：600 px；
  保证金：0汽车；
  背景颜色：# FF9500；
  填充：0 20px 20px 20px；
  边境：5 px固体黑色；
｝

对象有几种声明<身体>元素。让我们逐行来看看这些内容:

• 宽度:600 px;这将迫使body的宽度始终为600像素。
• 保证金:0汽车;当您在一个属性上设置两个值时，如保证金或填充，第一个值影响元素的顶部和底部(设置为0在这种情况下);第二个值影响左边和的右边。(在这里,汽车是将可用水平空间平均划分为左右的特殊值)。您还可以使用1、2、3或4个值，如文档中所示保证金的语法．
• background - color: # FF9500;这将设置元素的背景颜色。这个项目使用微红色的橙色作为主体的背景色，而不是深蓝色的< html >元素。(请随意尝试。)
• 填充:0 20px 20px 20px;这将为填充设置四个值。目标是在内容周围留出一些空间。在这个例子中，主体的顶部没有填充，而右侧、底部和左侧有20个像素。这些值依次设置为上、右、下、左。与保证金，您可以使用1、2、3或4个值，见填充的语法．
• 边框:5px实心黑色;设置边框的宽度、样式和颜色的值。在本例中，它是一个五像素宽的实心黑色边框，在身体的所有边。

h1 ｛
  保证金： 0；
  填充：20 px 0；
  颜色：# 00539 f；
  文本阴影：3px 3px 1px黑色；
｝

你可能已经注意到在身体的顶部有一个可怕的缺口。发生这种情况是因为浏览器将默认样式应用于<标题>元素(等)。这似乎是个坏主意，但其目的是为无样式页面提供基本的可读性。为了消除这个差距，我们用这个设置覆盖了浏览器的默认样式保证金:0;．

接下来，我们设置标题的顶部和底部填充为20像素。

接下来，我们将标题文本设置为与HTML背景颜色相同的颜色。

最后,文本阴影将阴影应用于元素的文本内容。它的四个值是:

• 的第一个像素值设置横向偏移量阴影从文字中移出的距离。
• 的第二个像素值设置垂直偏移量阴影与文字的关系:它向下移动的距离。
• 的第三个像素值设置模糊半径的影子。值越大，影子看起来就越模糊。
• 第四个值设置阴影的基础颜色。

尝试使用不同的值，看看它是如何改变外观的。

img ｛
  显示：块；
  保证金：0汽车；
｝

接下来，我们将图像居中，使其看起来更好。我们可以用保证金:0汽车就像处理尸体一样。但是有一些不同之处，需要进行额外的设置才能使CSS工作。

的<身体>是一个块元素，这意味着它占用页面上的空间。应用于块元素的边距将受到页面上其他元素的尊重。相反，图像是内联元素，为了使自动边距技巧在这个图像上工作，我们必须给它块级行为使用显示:块;．

如果你遵循了这篇文章中所有的说明，你应该有一个页面看起来类似于这个:

(你可以在这里查看我们的版本)。如果你卡住了，你总是可以把你的工作与我们的比较在GitHub上完成了示例代码．

在本练习中，我们只了解了CSS的皮毛。走得更远，看得更远学习使用CSS来设计HTML．

• 以前的
• 概述:开始使用web
• 下一个

• 安装基本软件
• 你的网站看起来会是什么样子?
• 处理文件
• HTML基础知识
• CSS基本知识
• JavaScript基础知识
• 发布你的网站
• 网络是如何运作的