[Powered by Google Translate] [CSS] [王阳乐 - 哈佛大学] [这是CS50。 -  CS50.TV] 

今天，我们将谈论CSS层叠样式表。 

那么究竟什么是CSS？ 好吧，让我们打破了长期的CSS跌分为2部分： 层叠样式表。 级联是一点点更复杂，它的东西，我们将在另一个视频。 但对于初学者来说，非常样式表什么是CSS的提示。 它添加样式到HTML的网页， 如何改变网页看起来美观。 这意味着从在页面上的文本的字体的内容的定位 等凉的东西，像一箱的边角圆润，为文字添加阴影。 你甚至可以做疯狂的事情，喜欢把事情动画在屏幕上。 

那么，我们如何使用CSS与HTML？ 我刚写了这个可怜的漂亮的网站。 如果罗布现在来看看这个网站，他可能会说类似的东西， “哇！我的介绍看起来太可怕了。约瑟夫，你是一个可怕的设计师。” “使用默认的Times字体Helvetica是好多了。” 

那么，什么可能是最简单的方法适用罗布想要的造型？ 最明显的方法很多人最初写的CSS 是把元素本身就是我们所说的风格的声明权 使用HTML样式属性。 我们要改变样式声明只是由HTML元素的CSS属性 其次由一个冒号，然后由新的价值属性和一个分号结尾。 例如，让我们说，罗布希望他介绍周围的黑色边框。 首先，我们把罗布在这里的div style属性 然后在双引号内把一个CSS声明： “边界：1px固体黑色; 的1个像素的边框宽度是指，该固体是指边框的样式， 在最后确定边框的颜色是什么颜色。 

如果我们想多种风格的元素上，这些声明的顺序写入。 例如，如果罗布希望他的黑体标题文本的蓝色背景 周围的文字和更多的空间，我们可以这样做： 风格=“字体：黑体;背景颜色：蓝色;填充：加入5px;” 最后一个分号是可选的，但是人们通常保持在一致性的缘故。 

我们解释一些更酷，更复杂的CSS属性可以节省 另一个视频。 如果你有东西在心中，只是在谷歌搜索你想要的效果，其次是CSS 可能会给你不错的成果。 很酷的事情，CSS是相当广泛， 所以赔率是如果有什么事情你想做的事 - 在合理的范围内 -  CSS或许可以做到这一点。 我们把这种内联样式的造型。 元素的风格，好了，行的开始标签。 

对于乡亲谁真的想组织， 你可能会开始变得多么的凌乱，这一切看起来有点气恼。 试想一下，如果你不得不这样做的每一个页面上的元素， 加上现在你的HTML和CSS都混杂和混乱。 毛的，对不对？ 为了解决这个问题，人们最终开始追赶上他们的HTML标记分离 从他们使用的东西称为CSS选择器的CSS样式。 使用CSS选择选择元素声明应用。 结合，具有一系列CSS声明的选择器通常被称为作为一个CSS规则。 这些规则将打开和关闭之间的HTML样式标签​​， 经常在该文件的头部。 

这是很容易看到一个例子， 所以，让我们开始创建一个简单的CSS规则。 首先，让我们把我们的HTML的head部分的style标签。 接着，选择器。 首先，我们将通过使用一个简单的选择器，哈希符号， 选择一个HTML元素的ID属性。 在这种情况下，我们会选择div代表罗布介绍 通过键入div的ID，抢哈希符号。 现在的声明。 罗布的div添加打开和关闭括号和转移早期的内嵌声明 这些括号内，刷新， ，阴凉，罗布的介绍还是有它减去凌乱内嵌丑陋的周围的黑色边框。 

现在，如果我们想，选择H1内部Rob的前奏？ 你可能会想，“让我们把它上的一个ID，然后将我们的早期风格。” 这样的作品，但CSS有其他方式让你选择元素 通过使用我们所说的组合子混合使用简单的选择器。 例如，可以使用空白字符作为一个组合子 指定的所有实例1选择，里面住的另一个选择。 这听起来复杂得多比它实际上是。 下面是一个例子。 我们将键入＃抢，添加一个空格，然后按照一个h1， 另一种简单的选择称为标签选择器选择类型的元素 一样的div段落。 空间结合我们的2个简单的选择器，将所有的CSS声明 h1标签里面住的元素ID =“抢”花括号。 只是为了让你相信它的工作原理，我会改变字体颜色为白色，刷新， 和Rob的头，你看，现在是白色的。 

所有这些工作正好说明使用规则，而不是内联样式 我们可以得到更清晰的代码。 事实上，如果这种风格的块开始变得有点大， 我什至可以把这些样式完全进入一个不同的文件。 

本文档中要包括这个新的文件，如CSS，我就用HTML的链接标签。 在这里，我告诉我链接外部样式表，rel属性， 并指定文件路径，我的href属性。 现在我的HTML标记和CSS很好地组织完全分开的文件， 这是几乎总是设计师喜欢用HTML和CSS的方式。 

如果你想知道，简单的选择包括ID选择 像我们刚才看到的和标签选择 以及类选择器选择某一类的元素， 属性选择器选择元素的其他属性，如类型=“无线电” 单选按钮输入，和pseudoselectors像盘旋和重点 指定造型相互作用时喜欢鼠标在一个元素出现。 

常见的组合程序，包括为所有儿童的空白 和逗号区分选择。 其他你可能会遇到包括直接儿童的箭头， 波浪号元素后所发生的所有的兄弟姐妹， 加号1兄弟后立即出现的元素。 

通过结合这些选择和组合子， 你可以扩大范围的造型，就可以实现对一个给定的网页 写CSS更有效率。 只需几行CSS，你看我这里打字， 我可以很快像这个样子像这样的东西。 

我是约瑟，这是CS50。 

[CS50.TV] 

嗯，我从哪里开始呢？ 让我做，没有 -  [笑]好吧。 添加一个 - 让我改变了这一措辞。 哦。抱歉。