什么是css？
CSS是一种为您的网站添加样式（颜色，图像，边框，边距...）的语言。这真的很简单。CSS不用于在您的网站上放置任何内容，它只是用于获取您拥有的内容并使其变得漂亮。首先要做的是将CSS文件链接到HTML文档。通过添加以下行来执行此操作：
<link rel="stylesheet" href="style.css" type="text/css">
该行应放在您的<head>代码之间。如果您有多个页面，则可以为所有页面添加完全相同的行，并且它们都将使用相同的样式表，但稍后会有更多相关内容。让我们看看我们刚刚链接到的文件“style.css”。
h1 { font-size: 40px;
height: 200px;
}
.warning { color: red; font-weight: bold;
}
#footer { background-color: gray;
}
你有三个选择那里，h1，.warning和#footer。选择器只指向HTML文档中的某个位置。它可以以多种方式构建，并且可以是以下构建块的组合：
1.元件
2.类
3.ID
我将通过所有这三个并解释他们做了什么。
一个元素在HTML标签指向某个网页上。在上面的示例中，我们要为`<h1>`-tag 设置样式。请注意，使用类似的元素会影响具有该名称的所有标记，因此使用`p { margin-left: 100px; }`给所有 `p -tags`一个左边距。
使用类也很简单。在编写时.your_class，所有标签都使用名为“your_class”的类来设置样式。在上面的例子中，我们有.warning这将样式如`<div class="warning">`和`<em class="warning">`，那就是与类警告任何元素。如果您想以某种方式设置几个标签的样式，可能会使用类，也许您希望某些链接变红？将类添加到所有这些链接。
你还需要一个构建块：id。这次你设置一个元素，其属性“id”设置为你选择的id。除了一件事以外，它的工作方式与类完全相同; 在每个HTML文档中只能有一个具有特定名称的ID。在上面的例子中我们风格`<div id="footer">`。如果您查看示例，它确实有意义：HTML文档可能包含多个警告但只包含一个页脚。当您只想设置一个特定标签时，应该使用ID。
使用这三个构建块将带您走远，但是当您进入更高级的布局时，您可能希望将构建块组合到更高级的选择器中。只是给你两个你可以做的例子：em.warning只设置那些`<em>`带有类.warning集的标签。您还可以使用#footer a仅设置嵌套在ID为“footer”的标记内的链接的样式。很好，不是吗？
每个选择器都有一组与它们相关的声明。每个声明都有一个属性，描述我们想要更改的内容和值，我们应该将其更改为什么。那里的条款太多了？你还在听我说吗？让我用一个例子来解释：`a { color: Blue; font-size: 3em; }`。您有选择器 a，因此文档中的所有链接都将被设置样式。我们有两个声明：color: Blue和font-size: 3em;。最后，每个声明由两部分组成：属性 color和值 Blue。唷！做得好到目前为止。上面的术语很有用，因为它为您提供了一种谈论CSS的方法。如果你加入一个CSS频道寻求代码的帮助，他们会告诉你“你在第二个声明中的a-selector中有错误”你知道确切的位置！对？
现在你可能会问有什么属性。你看过了font-size，color但还有什么？答案是，有很多东西你可以风格和玩耍。另外（接近）所有标签在CSS中是相同的，因此如果您仅使用HTML，则可以像使用表一样设置任何元素的边框和颜色。开始看到可能性？
CSS就是分离
CSS最少遵循的部分之一就是它背后的理念，即内容和设计分离的想法。这里的想法是所有网站都包含两个主要部分，内容：所有文章，文字和照片以及设计：圆角，颜色和效果。通常这两个是在网页的生命周期的不同部分制作的。设计在开始时确定，然后您开始填充内容并保持设计固定。因此，如果您只是想为您的网站添加内容，您不希望被迫使用该设计，是吗？反过来也是如此，如果您决定重新设计，为什么还要弄乱内容，确保它适合新的布局？
在CSS中，你只需添加<link>我告诉你的关于HTML文档头部的nifty -tag，你就已经创建了一个指向你设计的链接。在HTML文档中，您只放置内容，而您的链接确保它看起来正确。您还可以在许多页面上使用完全相同的链接，为它们提供相同的设计。你想添加内容吗？只需编写一个简单的HTML文档，并考虑标记为“标题”而不是“大蓝色标题”，并使用CSS使所有标题看起来像你想要的方式！
这是一种不同的网页思考方式，这需要一段时间让我理解。为了帮助你，我写了一些好的和坏的编码的例子。这有什么问题？
<font size="3">Welcome to my page</font>
注释：font-tag的设计和设计不应该在HTML文档中。所有设计都应该在CSS文件中！而是这样做：
在HTML中：
<h1>Welcome to my page</h1>
在CSS中：
h1 { font-size: 2em; }
还有一个例子：
<b>An error occurred</b>
评论：这看起来不对吗？但如果你抬头`<b>`找到什么代表你很快就会发现大胆。但大胆的当然是设计，所以它仍然不属于HTML文档。一个更好的选择是`<em>`代表强调或简单地说“这段文字很重要”。因此，不要说“这个文本看起来像这样”，而是说“这个文本很重要”，你让看起来由CSS决定。似乎是一个小改动，但它说明了如何选择您的标签。请改用：
In the HTML:
<em>An error occured</em>
In the CSS:
em { font-weight: bold;
color: Red;
}
最后一个例子：
<table>
<tr>
<td><a href="">北京尚学堂</a>
</td>
</tr>
<tr>
<td><a href="">www.bjsx.com</a>
</td>
</tr>
...
</table>
评论：很多人都像上面的例子那样格式化他们的导航菜单。但导航菜单真的是一张桌子吗？如果您查找表的定义，您会看到它是为表格数据制作的，您将在Excel工作表中输入相同类型的数据。该示例只有一列数据，没有标题......有些人声称他们使用表格，因为这意味着他们可以在导航中获得边框和背景颜色，但这正是CSS文件的用途（而不是HTML文档） ）。那我们该怎么办？深入了解w3schools的HTML元素列表，你会发现一个叫做无序列表的东西<ul>。看看这个：
In the HTML:
<ul>
<li><a href="">北京尚学堂</a></li>
<li><a href="">www.bjsxt.com</a></li>
...
</ul>
In the CSS:
li {
border: 1px solid;
}
这可能是一种不同于HTML习惯的方式，而不是相信我，但是当你使用它一段时间后，你会看到它的强大功能。这种编码方式不仅可以为您提供更合理的结构，还可以证明这可以提高您在搜索引擎中的排名，并使辅助功能设备更容易阅读您的网站。这种设计方式很棒。
接下来，我们将构建一个简单的HTML模板，以便在构建新页面时用作开始。喜欢看吗？
构建基于标准的HTML模板
我们已经讨论了CSS和HTML背后的理论，它们共同构成了一个与设计分离的良好结构的网站。但是你打字时，构建页面的第一部分总是一样的
<!doctype html>
<html>
<body>
<div id="header">
<!-- Header here! -->
</div>
<div id="navigation">
<!-- Navigaiton here! -->
</div>
<div id="content">
<!-- Content here -->
</div>
</body>
</html>
好吧，那里可能会有一些新东西让我们一个接一个地浏览。首先我们说明这个文档的doctype：我们使用什么语言。您可能听说过XHTML，这是另一种类似的Web语言，但是对于第一页，我们不需要能够访问的功能，保持简单，只需使用HTML。此外，`<!doctype html`>上面设置文档使用严格的 HTML。要了解您需要知道浏览器中有两种呈现方式。一个遵循W3C设置的标准，“标准模式”，一个用于旧页面，称为“怪癖模式”。标准模式是我们想要使用的。它使得页面在现代浏览器中呈现（几乎）相同，并使我们不再依赖于特定的浏览器，我们只会遵循标准。Quirks模式是一种bug模式。它是保持旧页面看起来与浏览器开始尝试遵循标准之前的相同，因此故意充满了奇怪的错误。浏览器根据我们使用的doctype确定要使用的渲染模式，因此请确保使用正确的文档类型！
好。对于单行代码，这是很多解释，我现在会更快，下一行。您可能`<html>`以前在文档的开头写过。除了我在lang="en"那里添加之外，我的界限几乎就是这样。该行告诉浏览器我们将使用哪种语言。为什么我们使用哪种语言很重要？你问......好吧，有一种辅助技术可以向网络读者大声读取网页。那些人必须知道能够发音的语言是什么。你可以很容易地添加这几个字符，为什么不这样做呢？如果您不打算制作英文页面，可以通过访问WAIs语言代码找到您自己的语言代码，并在那里查看两个字母的名称（注意： 语言代码是小写的。
接下来我们有文件的负责人。头部包含一些关于页面的元信息，如字符编码，标题和要使用的样式表（CSS文件）。那里的charset是最棘手的，所以让我们先拿出来。一种语言中有很多不同的字母。当最初构建工程师的计算机只考虑美国/英语时，他们甚至没有想到瑞典的字母å，ä，ö或deutschumlautü或者＆-sign？有很多角色，起初没有就如何处理它们达成一致意见。这时，有人想出了将其分组为的聪明的主意套，在世界某些地方使用的字符组。因此，元标记所做的只是简单地说：“这个人想要输入西方字符（拉丁字符1个字符）”，这告诉浏览器要使用什么字符集。更通用的方法是使用utf-8字符集但很快就会变得棘手。最后，我们在那里有一个text / html，它只是告诉服务器将文档作为HTML发送，而不是像图像那样。该`<title>`和<link>你应该熟悉，如果没有，baidu一下:)
这只是几行代码的很多信息，我希望我没有给人的印象是这些东西很难，因为它不是。要使用上面的内容，您只需复制并粘贴它，然后开始填充内容。
文档的主体由一堆分区组成，让我们为它们添加一些内容：
...
<div id="header">
<h1>The name of this page</h1>
</div>
<div id="navigation">
<h2>Navigation</h2>
<ul>
<li><a href="first.html">First</a></li>
<li><a href="second.html">Second</a></li>
<li><a href="third.html">Third</a></li>
</ul>
</div>
<div id="content">
<h2>Content</h2>
北京尚学堂科技有限公司是一家从事JAVA、前端、hadoop大数据云计算技术开发为一体的软件公司。公司由海外留学人员和国内IT精英人士创建，主要成员均拥有硕士以上学位，毕业于国内著名大学如：清华大学，北京航空航天大学等。
</div>
<div id="footer">
This page is written by [Your name] and builds on a
<a href="http://friendlybit.com">Friendlybit template</a>.
</div>
...
我们在这做了什么？首先，您应该注意，文档的快速概述会告诉您很多内容。你可以很容易地看到一些东西是标题（h1，h2），有些只是一个链接列表（ul，li，a）。让我们快速浏览一下代码：
首先我们有一个标题。标题通常是一个大图像和一些文本。有些页面根本没有HTML标题，它们只链接到图像并在该图像中包含文本。问题在于搜索引擎和屏幕阅读器都无法获得标题文本。由于标题文本是最重要的描述，访问者必须访问他们所访问的页面，因此您确实遇到了问题。所以请相信我，保留那里的文字。
接下来我们有导航。导航应该几乎总是标记为无序的链接列表。我已经看到了这个最奇怪的变体，包括表格，嵌套表格，每行之后的`-tags等等，但是唯一的内容是链接列表，为什么不是这样呢？使用列表并不意味着它必须以某种方式查看，请记住，稍后在CSS中处理所有设计，这只是我们在这里处理的HTML。注意：您可以轻松删除子弹标记list-style: none;，这不是使用其他HTML的理由。
HTML文档中最重要的部分是内容。这就是人们访问您网页的原因，这是您应该投入大部分精力的地方。使用适当的标题标记标记您的标题，并确保它们看起来与普通文本不同，这样可以更轻松地快速掌握您想说的内容。在段落周围使用段落标记可以更轻松地设置文本样式。CSS text-indent: 2em;只在每个段落中的第一个单词之前添加了一些空格，只是为了说明当你使用好的标记时可以用CSS做的一件简单的事情。
最后，在页面中添加页脚可能是个好主意。确保您在此处或您网站上的其他位置有某种联系信息，谁知道人们会问你什么？如果您想帮助我，您也可以在您网站的某个位置添加指向此网站的链接。如果你这样做，非常感谢！
在这篇简短的初学者指南的下一页（也就是最后一页）中，我们将包装所有内容并添加一些示例CSS。您可以在页面上免费复制和使用所有内容。准备？
完整的HTML模板和示例CSS
让我们首先将我展示的两个HTML放在一起，然后将它与一些示例CSS结合起来：示例HTML + CSS。您可以在下面找到制作该页面的所有代码。您可以随意复制以下代码并自行试验。
<html lang="en">
<body>
<div id="header">
<h1>The name of this page</h1>
</div>
<div id="navigation">
<h2>Navigation</h2>
<ul>
<li><a href="first.html">First</a></li>
<li><a href="second.html">Second</a></li>
<li><a href="third.html">Third</a></li>
</ul>
</div>
<div id="content">
<h2>Content</h2> Some sample content, add your own here
</div>
<div id="footer"> This page is written by [Your name] and builds on a
<a href="http://friendlybit.com">Friendlybit template</a>. </div> </body> </html>
我们来看看上面的六条规则。首先我们设置body的背景颜色，body是所有内容的背景，所以这将与HTML中的bgcolor相同。
接下来，我们在页面上的所有分区上设置一些样式。我们有四个，通过这个单一的规则，我们会影响他们。首先，我们将黑色边框设置为3像素宽（请注意，CSS中的数字和单位之间没有空格）。然后我们将填充（边框和内容之间的空间）设置为7像素，最后我们将所有div的宽度设置为600像素（请注意，边距，边框和填充不包括在宽度中）。
第三个规则选择页面上的所有标题，并从中删除边距（边框和其他附近元素之间的空格）。在元素之间使用逗号将相同的CSS应用于所有元素。
接下来，我们为三个部门制定了一些具体规则。我们将导航定位在内容的左侧。这是通过使用浮动来完成的，这是一种并排放置的方法。如果你在HTML中的图像上使用了align-attribute，你就会知道浮点数是如何工作的，它们将元素尽可能地移动到左边，然后让下一个元素紧跟在它旁边。如果你想在浮子下面放一些东西，你需要清除它。清除将元素向下移动，直到它位于任何浮动的下方，正好是我们想要页脚的位置。因此，导航和内容都会浮动并给定宽度以匹配600像素宽的标题，并且页脚将被清除。
希望对大家有所帮助，大家多多关注！
