CSS基础

CSS(层叠样式表)是用来设计网页样式的代码。CSS基础带你通过什么你需要开始。我们将回答这样的问题:如何将文本变为黑色或红色?我如何使我的内容显示在屏幕上某某地方?我如何用背景图片和颜色装饰我的网页?

CSS用来干嘛？用来装饰html 页面的。

p {
  color: red;
}

选择html里面的p元素，将他们的color属性全设置为红。

保存我们的css，然后导入它到html页面中。

link href="styles/style.css" rel="stylesheet" type="text/css">

这么一个东西被称之为规则集，p=选择器，color:red是声明，属性：值。

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

• 每个规则集(除了选择器)都必须用大括号({})括起来。
• 在每个声明中，必须使用冒号(:)将属性与其值分隔开。
• 在每个规则集中，必须使用分号(;)将每个声明与下一个声明分开。

所以要同时修改多个属性值，你只需要用分号分开来写，就像这样:

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

同时选择多个元素，

p, li, h1 {
  color: red;
}

元素选择器：如p
id选择器：如#my-id Selects

or
类选择器：如.my-class Selects

and
属性选择器：如img[src] Selects but not
伪类选择器 a:hover Selects , but only when the mouse pointer is hovering over the link.

字体和文本

现在我们已经学习了一些CSS基础知识，让我们开始向style.css文件中添加更多的规则和信息，使我们的示例看起来更漂亮。让我们从让字体和文本看起来更好一点开始。

首先，返回并找到存储在安全位置的谷歌字体的输出。在索引中添加元素。html的头部(同样，位于和标记之间)。它看起来是这样的:

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

这段代码将您的页面链接到样式表，样式表将下载Open Sans字体系列和web页面，并允许您使用自己的样式表在HTML元素上设置它。

接下来，删除style.css文件中已有的规则。这是一个很好的测试，但是红色的文本看起来不是很好。

在其位置添加以下行，用从谷歌字体中获得的实际字体族行替换占位符行。(font-family就是你想要用于文本的字体。)该规则首先为整个页面设置一个全局基本字体和字体大小(因为是整个页面的父元素，其中的所有元素继承相同的字体大小和字体族):

html {
  font-size: 10px; /* px means 'pixels': the base font size is now 10 pixels high  */
  font-family: 'Open Sans', sans-serif; /* this should be the rest of the output you got from Google fonts */
}

注意: CSS文档中/和/之间的任何内容都是CSS注释，浏览器在呈现代码时会忽略它。这是一个你可以写下你正在做的有用的笔记的地方。

现在，我们将为HTML主体中包含文本的元素设置字体大小(

、

• 和

  )。我们还将把标题的文本居中，并在正文内容上设置一些行高和字母间距，使其更具可读性:

h1 {
  font-size: 60px;      # 字体大小
  text-align: center;   # 文本对齐 
}

p, li {
  font-size: 16px;      # 字体大小
  line-height: 2;       # 行距
  letter-spacing: 1px;  # 字符间距
}

盒子

在编写CSS时，你会注意到很多都是关于框的——设置它们的大小、颜色、位置等等。页面上的大多数HTML元素都可以看作是相互叠在一起的盒子。

毫不奇怪，CSS布局主要基于框模型。每一个在你的页面上占据空间的块都有这样的属性:

• padding，内容周围的空格(例如，段落文本周围)。
• border，位于填充外的实线。
• margin，元素外部的空间。

在本节中，我们还使用:

• width (元素的)。
• background-color，元素内容和填充后面的颜色。
• color，元素内容(通常是文本)的颜色。
• text-shadow:在元素内的文本上设置一个阴影。
• display:设置元素的显示模式(现在还不用担心这个)。

所以，让我们开始并添加更多的CSS到我们的页面。继续在页面底部添加这些新规则，不要害怕尝试更改值，看看结果如何。

改变页面的颜色

html {
  background-color: #00539F;
}

此规则为整个页面设置背景颜色。

整理内容

body {
  width: 600px;  # 宽度
  margin: 0 auto; # 外边上下=0,左右=auto
  background-color: #FF9500;  # 背景颜色
  padding: 0 20px 20px 20px;  # 上/下/左/右
  border: 5px solid black;    # 线长度5px 黑色 实线
}

定位和样式我们的主页标题

h1 {
  margin: 0;
  padding: 20px 0;    
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}

你可能已经注意到身体顶部有一个可怕的缺口。这是因为浏览器对

元素(以及其他元素)应用了一些默认样式，即使您根本没有应用任何CSS !这听起来可能不是个好主意，但我们甚至希望一个没有样式的网页具有基本的可读性。为了消除空白，我们通过设置margin: 0;覆盖了默认样式。

接下来，我们将标题的顶部和底部填充设置为20像素，并使标题文本的颜色与html背景颜色相同。
我们在这里使用的一个非常有趣的属性是text-shadow，它将文本阴影应用于元素的文本内容。它的四个值如下:

• 第一个像素值设置从文本到阴影的水平偏移量——它移动的距离:一个负值应该将它移动到左边。
• 第二个像素值设置阴影与文本的垂直偏移量——在本例中，它向下移动的距离;负值应该向上移动。
• 第三个像素值设置阴影的模糊半径——越大的值意味着阴影越模糊。
• 第四个值设置阴影的基本颜色。

定位图像中心

img {
  display: block;
  margin: 0 auto;
}

最后，我们将图像居中，使它看起来更好。我们可以再次使用margin: 0 auto 技巧，就像之前对body所做的那样，但是我们还需要做一些其他的事情。元素是块级别的，这意味着它占用页面上的空间，可以应用margin和其他间距值。另一方面，图像是内联元素，这意味着它们不能。因此，要将边距应用于图像，我们必须使用display: block;给出图像块级行为。

注意:上面的说明假定您使用的图像小于主体上设置的宽度(600像素)。如果你的图片比较大，那么它就会溢出整个页面，并溢出到页面的其他部分。要纠正这一点，您可以1)使用图形编辑器减少图像的宽度，或者2)通过在元素上设置一个较小值(例如，400px;)的宽度属性来使用CSS调整图像的大小。

**注意:**如果您还不理解display: block，请不要担心;**块级/内联的区别。**随着你对CSS学习的深入，你将会学到更多。有关不同可用显示值的更多信息，请访问我们的显示参考页面。