[音乐播放] ALLISON BUCHHOLTZ-AU：那么 我们基本上只是要 给你一个破败 CSS的，因为我们知道 它不是盖的 在所有的部分。 我们真的要确保你 你们有这个工具在您的处置， 因为它有使能力 您的网站看起来更漂亮。 如果你正在建设一个网站，然后 你可能希望把它漂亮。 我的意思是，你不必， 但我建议它。 （笑） 如果你希望用户使用它，你可能 想让它一点[听不清]。 所以我们要尝试给你刚才 一些基本的工具和理解， 所以，当你走出去，你 研究的事情有关CSS， 它没有完成胡言乱语， 像CSS有时候是。 TOMAS赖默斯：是的。 佳佳说，这非常好。 所以我想的第一件事我们 应该是什么是CSS开始？ 所以CSS是真棒。 CSS-- ALLISON BUCHHOLTZ-AU：那是 我们研讨会的名称。 TOMAS赖默斯：是的。 这真的很重要 你明白了吧。 如果你只拿走1 的事情，那就是CSS，如果真棒。 二是CSS代表 层叠样式表。 因此，在其核心，就是CSS 一个样式表，这意味着 它可以让你风格的网页。 然后这意味着什么，这是一个 的方式来添加样式到你的网站。 因此，通过造型，我们意味着一切 这不是structural-- 这样的事情般的色彩，背景 图像，边框等，填充， 利润率。 我们将谈论什么 所有这意味着在一个位。 因此，我们刚刚经历进取， 打开这两个在gedit中的。 所以这是的index.html。 这是的main.css。 所以的main.css无关。 ALLISON BUCHHOLTZ-AU：没有风格至今。 TOMAS赖默斯：无。 正如你所看到的，这是 一个真正丑陋的网站。 ALLISON BUCHHOLTZ-AU：这只是普通的。 TOMAS赖默斯：是的。 是的，这是不丑， 它只是最低限度的。 然后我们在这里有index.html的。 等了快 HTML，佳佳的回顾一下， 你只想谈谈网页？ ALLISON BUCHHOLTZ-AU：是的。 所以，很显然，我们有我们的HTML 标签，它只是名字HTML文件。 我们有我们的头在这里，与CSS 迷死人，which--如果你回去。 哪里是？ TOMAS赖默斯：哦。 是的，你可以看到。 ALLISON BUCHHOLTZ-AU： 并注意头 这片头部右侧在这里。 然后“你好，世界！”是 我们刚才文 显示在网络上 页面，这is--回去。 返回。 这仅仅是在我们的身体 这里 - 纯文本。 此外，一件事 请注意，如果你看这里， 托马斯交换了这些 两个来自我们的幻灯片。 所以只要你拥有所有 这三种，你的罚款。 他们可以在任何以他们想要的。 什么是最重要的就是这样 你有每个这样的三件事情。 TOMAS赖默斯：酷。 添加文档类型？ ALLISON BUCHHOLTZ-AU：是的。 TOMAS赖默斯：是的。 酷。 ALLISON BUCHHOLTZ-AU：显然， 我的麦克风不喜欢我。 TOMAS赖默斯：哦，给大家一个秒只 而佳佳切换了她的麦克风。 所以，是的。 因此，我们有我们的主页。 这是一种无样式。 我们没有多少。 我们只需要基本的文字。 我们有样式表。 我们拥有的称号。 因此，只要裸去骨 组件使一个网站。 因此，从那里，让我们 说说什么是CSS 和什么样子，所有这一切。 因此，对于that-- ALLISON BUCHHOLTZ-AU： 回到幻灯片。 TOMAS赖默斯：回到幻灯片。 和Allison可以接管。 ALLISON BUCHHOLTZ-AU：呜。 好不好。 因此，在你的CSS文件， 你将有 很多这些东西叫做选择。 这只会是 依据你的CSS文件。 它只是将是 很多很多的这些。 如此选择。 这仅仅是一般的解剖结构。 我们将通过 例子，因为如果你们永远 看着我的部分，我觉得 类似的事情在抽象 没有真正意义。 它总是帮助，看例子。 所以，我们有一些选择。 这将是一些标识符 我们想要的样式应用到。 然后我们就可以有 设置的规则和价值观。 所以，选择你可能会看到 可能是这样的身体， 或P段， 或标题，或什么的， 你希望你的HTML标签是什么。 因此，在这种情况下，我们有身体。 我们有一些规则， 此对应 以你的风格适用于。 因此，在这种情况下，我们有 背景颜色和字体的重量。 因此，这将改变 任何事物的背景 在我们的HTML文件的任何body标签。 而且它要给 这本淡蓝色值。 因此，这将令 背景浅蓝色。 然后在身体什么是 将有一个字体粗细大胆。 所以它只是要 大胆的所有文字。 而这仅仅是一个选择。 但是你可以有非常多的了。 正如我们将要展示 越到后来，一点点变成怎样 该作品和更多的例子在那里。 任何你想补充的吗？ TOMAS赖默斯：第 佳佳得到了它。 我们只是削减了一个 例如在这里我们的例子网站。 因此，让我们真正需要这一点。 这是完美的。 所以我只是去复制和粘贴 这种权利到我们的main.css文件。 而且我要保存它。 然后，我们将运行它。 所以侧面说明，之一 最令人沮丧的事情 是，如果你不保存文件，并 那么你一样，重新加载页面， 而像，为什么不 变化发生？ 它发生。 所以在这里我们看到，我们取得了我们的 网站上的淡蓝色背景 有的黑体字。 我还要提到，如果你 男人对什么问题 我们正在做的，请随时 免费阻止我们，问我们。 我们完全愿意 到现场的问题。 ALLISON BUCHHOLTZ-AU：显然，与 CSS，一切都建立在本身。 所以，如果有一件事不 道理现在，我们 不想那以后陷入你失望。 TOMAS赖默斯：让我们 种剖析这一点。 所以，你想开始 这里的选择？ ALLISON BUCHHOLTZ-AU：是的。 正如我说之前，身体 只是我们在这里选择。 所以，如果我们回到了我们的index--啊。 TOMAS赖默斯：我刚才关闭。 给我一秒钟。 所以文件，打开，index.html的。 ALLISON BUCHHOLTZ-AU：酷。 所以，如果你在这里看到，我们 有这些body标签，对不对？ 所以选择只对应于 我们正在谈论的标签。 所以身体就在这里。 所以，我们在说什么是 一切 - 我们能回去吗？ 我希望我可以只 像触摸屏幕。 它会是这么凉爽。 所以，在这些事情 身体标记，这是我们看到的 只是，像，文， 和主体的一般 指，喜欢的背景。 如果你想 改变背景， 这将是在body标签。 只是有这些规则适用于他们。 所以，如果我们去 index.html的还有 - 实际上， 我们可以有一些 身体的外？ 如果我们有，像，页脚或 的东西，它并不适用于这一点。 但在任何 这些body标签是怎么回事 受到影响这身 选择器，我们已经取得了。 所以，如果你输入 别的那里 - TOMAS赖默斯：让我们开车的那家。 所以，如果我们有一个div--所以这是 只是一个标签，你可以有。 我要关闭它。 还是让我们做这一个段落。 所以，p表示段落。 而该段内。 然后我说，“这是文本”。 酷。 然后我做了这个规则适用于 一个段，而不是身体。 你会看到它是如何仅适用于 新成立的段落，权利， 不是整个事情。 这是否有意义？ ALLISON BUCHHOLTZ-AU： 所以，这是所有身体， 但现在我们只选择 对应于该段。 所以，我们只能大胆和蓝色 对于此特定段 因为这是唯一的事 这是p标签内封闭。 TOMAS赖默斯：这是否有意义排序 事情如何封装其他的东西呢？ ALLISON BUCHHOLTZ-AU：另外，刚 说一样，最好的方法之一 要真正获得舒适与CSS 是刚刚做这样的事情， 只是尝试一下。 这是非常简单的事情型 出，击中刷新，看看会发生什么。 而且，与大多数的CS， 实验往往能 导致一个更好的 直观的了解。 甚至比我们刚刚， 喜欢，跟你说话。 TOMAS赖默斯：绝对 100％同意这一点。 所以，如果我们回到这一点，让我们开始 解剖正是这两个事情。 因此，我们必须在这两个规则。 所以，第一个是背景颜色。 你可以看到，我们已经设置 等于一个值，淡蓝色。 因此，在CSS，CSS是排序 非常宽松的关于如何 你可以定义颜色。 所以，你可以通过名称来定义它们。 你也可以这样做“红”。 然后如果我们回到这一点， 你会看到，背景是红色的。 您还可以得到really--我想你 可以得到相当的创意与此， 不是吗？ ALLISON BUCHHOLTZ-AU：我 想你可以使用十六进制。 不是吗？ TOMAS赖默斯：是的。 所以，你可以使用十六进制。 但我想的名字明智的。 不是吗？ ALLISON BUCHHOLTZ-AU： 你可以做不少。 几乎最喜欢的颜色，你 可以像名称 - 我认为鲑鱼就是其中之一。 TOMAS赖默斯：我们要去尝试鲑鱼。 ALLISON BUCHHOLTZ-AU：我 认为黄绿色就在那里。 TOMAS赖默斯：是的。 看到了吗？ 这样你就可以得到相当的创意。 ALLISON BUCHHOLTZ-AU：你 能得到相当的创意。 喜欢，如果你能想到的 颜色名称，它可能是在那里。 如果你真的想细 细节，你可以去十六进制。 TOMAS赖默斯：是的。 所以十六进制。 如果你们还记得这回 从旧PSET，图像恢复， 你们不得不处理 这些十六进制值。 排序，并回顾一下那是什么， 六角具有存储在其中的三个值。 所以，这两种增量组。 前两个代表红色值。 第二个代表 绿色的价值。 最后一个是蓝色的？ 所以FF恰好代表 一个十六进制的255。 所以，你有255红，255 绿色和0为蓝色。 和值的范围为0至255。 听众：是的。 所以基本上，我们可以搜索 互联网为我们想要的任何颜色， 并确定所述实际的已知 彩色光谱组合， 然后我们可以把它？ ALLISON BUCHHOLTZ-AU：没错。 所以，你必须非常全面控制 在颜色你想在CSS。 我们要说说 背景图片以后呢？ 还是我们想要做的是什么？ TOMAS赖默斯：是的。 当然可以。 因此，首先，只是为了显示 红色和绿色是黄色的。 如果你需要一些 帮助寻找，你 可以谷歌的东西 像“拾色器”。 ALLISON BUCHHOLTZ-AU：哦，它是那么好。 我爱拾色器。 TOMAS赖默斯：colorpicker.com 就是一个很好的例子。 在这里，你会看到你有 一个完整的Photoshop般的颜色选择器。 ALLISON BUCHHOLTZ-AU：嗯。 此外，很酷的事情是你 可以生成配色方案 这样你就不用， 像，冲突的色彩。 TOMAS赖默斯：然后 这里是这里的十六进制值了。 所以，你可以随时在网上找到基本 地方得到的十六进制值。 它不是那种只是，像我们 看到在数字世界的颜色。 它更是我们上网 并找到我们想要的颜色， 然后取数下降。 因为它只是一个非常简单的 的方式来引用CS的东西。 ALLISON BUCHHOLTZ-AU： 然后还有also-- 我忘记了网站的确切名称。 但有绝对的，我 认为，从Adobe的东西 生成的配色方案适合你， 这是真的很酷，因为你 definitely--它有时 很难搞清楚， 哦，如果我想用这个颜色， 什么可能是另一种有用的 在我的网站上的其他地方使用， 状，使其漂亮和凝聚力​​。 TOMAS赖默斯：佳佳的谈论 1由Adobe所谓的Kuler，我想。 这是K-U-L-E-R上。 ALLISON BUCHHOLTZ-AU：我认为是这样。 我敢肯定，这是一个。 TOMAS赖默斯：我最喜欢的有 一向颜色方案设计师。 ALLISON BUCHHOLTZ-AU：哦。 TOMAS赖默斯：这是now-- ALLISON BUCHHOLTZ-AU： 啊，这是美丽的。 TOMAS赖默斯：你 基本上可以说，喜欢， 我想彼此相邻三种颜色。 然后让我们做一件好事。 然后你就可以得到一个例子 什么可能的样子。 然后，如果你在悬停的任何 其中，它给你的十六进制值。 因此，正如一个很好的方式开始 想着配色方案 或者是什么颜色的网站 可能会去得很好。 因为这更是出奇地 如你想象的那么容易上手。 然后其他很酷的事情 我总是发现这个网站 是，如果你打的例子，它会 展示一下一个例子网站 可能看起来像使用的配色方案。 反正。 回到实际的CSS。 ALLISON BUCHHOLTZ-AU：但很明显，我们 知道这些引用可能是有用的。 TOMAS赖默斯：不，他们 肯定是有帮助的。 所以，第二条规则，佳佳？ ALLISON BUCHHOLTZ-AU：是的。 第二条规则就是 对应我们的字体。 所以，字体粗细仅仅是一种 of--所以重量会 ，如果你只想要一样， 正常或像，更薄的字体， 或在此情况下，象，粗体。 我忘记了。 有什么，如果你想它 - 有 更薄的人比刚一样，正常吗？ TOMAS赖默斯：我实际上并不 知道如果有一个薄的。 ALLISON BUCHHOLTZ-AU：我忘了。 所以，字体粗细，我们一般 只需使用大胆。 如果你想获得真正进入 它，我们要告诉你。 W3Schools的有各种不同 事情你可以做的字体。 但基本上，如果你想 要改变有关字体什么， 它总是将是， 像，字体什么的。 所以它会是这样，font-family的，如果你 试图改变实际类型。 这将是字体的风格，如果你 想让它像草书， 或斜体，或诸如此类的东西。 甚至字体颜色，如果 我们想改变这种状况。 TOMAS赖默斯：是啊。 所以，你可以改变这种状况。 和排序只是为了 现在回顾一下，这样你就可以 看到我们选择了这里。 我们有这些大括号。 然后我们有规矩 用分号分隔。 这是否有意义？ 是吗？ 酷。 因此，如果这是good-- ALLISON BUCHHOLTZ-AU：返回。 TOMAS赖默斯：让我们来谈谈具体 什么样的选择，我们有。 “原因，现在我们已经 只是有点所示的标签。 但是你们可以看到它似是而非。 说你有两个段落 一个页面，你 希望能够以风格 之一，但不是其他， 你不就是想限制自己 不得不使用不同的实际的HTML 标签给他们不同的风格。 因此，我们有三个基本 类型选择器。 ALLISON BUCHHOLTZ-AU：是的。 因此，我们有标签，这是什么 我们一直在谈论现在。 所以这有点像你的身体或p。 然后我们有一流的，这是 当我们在CSS文件中定义它， 它总是会被点，无论 你想成为你的类的名称。 这可以应用到多个的东西。 说你有五段 其中两个三个 需要被样式相同， 你会一类适用于它。 而这仅仅是我们做的方式。 我们会给你一个例子 其中，这实际上显示了。 但是，如果你有或许有些标签 P，之后，你会写， 级等于什么班 要应用它。 我们希望所以，无论类选择 适用于本具体段落， 我们可以只写这样的。 当然，我觉得一个例子 将使它更具体。 另一个我们有 是的id，我们表示 用哈希或磅，或包括hashtag。 TOMAS赖默斯：井号。 ALLISON BUCHHOLTZ-AU：井号。 这样的作品，太。 而这一次真的应该是唯一的。 他们应该只适用于 有一件事您的网页上。 因此，无论这是一个特定的段落， 或在列表中的某些项目，或什么的， 这应该是唯一的。 并以同样的方式，我们只是 说，喜欢的class =“class1的类class2，” 这可能仅仅是，无论我们有ID。 TOMAS赖默斯：是的。 因此，让我们谈谈肯定 这里的例子。 而我只是去潜水 直回代码。 所以，让我们来看看我们的HTML。 因此，我们现在有一个段落。 这是文字。 我只是要修改 它。 “这是文本1.” 然后我们要 有一个“这是文2”。 ALLISON BUCHHOLTZ-AU：第二个。 TOMAS赖默斯：是啊。 所以，我们现在有“这是文2”吧？ 而且我们要看到，如果我们刷新 该页面中，我们要怎么找 就是我们要find-- ALLISON BUCHHOLTZ-AU：哦。 TOMAS赖默斯：是的。 我们要找到一个“这是 文本1“和”这是文本2“。 ALLISON BUCHHOLTZ-AU：而 出可爱的黄色。 TOMAS赖默斯：你会看到 我们的选择，现在， 它适用于P的，或者 段落，影响了他们两个， 因为他们两人的见面 条件是他们俩一个p标签。 这使得总感觉。 所以，问题是，好了，有什么 如果我们想只有一次？ 所以，酷似佳佳说的话， 我们有两个方法可以做到这一点。 我将开始与ID。 ALLISON BUCHHOLTZ-AU： 让我们先从ID。 TOMAS赖默斯：而且两者 这些都是属性。 因此，在HTML存在的属性。 而且他们都是 您添加的东西 这是标签内 从标签名称分开。 所以，你可以有多个属性。 是吗？ ALLISON BUCHHOLTZ-AU：我正要 从PSET 7说，从你的榜样， 如果你们尝试调整 事情为中心， 你可能已经使用 “文字对齐=中心”。 你可能注意到了这一点 应该居中 你的文字或您的导航栏。 所以，这也只是一个属性 你可能很熟悉。 TOMAS赖默斯：有一堆 属性，你会看到的。 是啊。 像很好的参考PSET 7。 我们有ID。 你也可以有 一流的，像这样的事情。 单个标签可以有很多属性。 所以，开始的ID，让我们假装我们 想拥有一个id of--我不知道。 我们会打电话给它特殊的， 因为这一次，我们是 要大胆，和 下划线，等等。 ALLISON BUCHHOLTZ-AU：这是 要成为超级特殊。 TOMAS赖默斯：所以这 1，我们有特殊的标识。 这样的方式来选择，那么，是 在的main.css，而不是有一个p标签， 你做#special，OK？ 而且，其选择 id为特别的东西。 这是否有意义给大家？ 听众：是的。 TOMAS赖默斯：酷。 所以现在，如果我们回去， 我们将see--哎呦。 是啊。 我们会看到，它只是选择 一个id为特殊。 是吗？ 听起来很酷。 是。 听众：可以的东西有一个 这两个类和一个id属性？ TOMAS赖默斯：是的。 听众：OK。 然后会发生什么，如果你再给 它在CSS冲突的一些规则？ TOMAS赖默斯：当然。 我们肯定会 谈论这一点。 那么究竟你得到什么 时，你也可以上课。 因此，让我们假装我有 三段我 想样式第一 2而不是三分之一。 好了，你的第一个想法可能是，好了，我 可能只是给第二个的ID。 但你不能，因为一个id， 酷似佳佳说的话， 必须是唯一的。 因此，而不是一个id，你 可以用的是你可以使用一个类。 和分类 - 是什么让 你做的基本上是说， 这属于作为一个组的一部分。 在这种情况下，我们的基 被称为特殊。 而我们要做的就是再 我们要say--而不是一斤， 我们要使用点。 好不好？ 并注意英镑和点 仅在CSS文件中存在， 不是在HTML。 ALLISON BUCHHOLTZ-AU：是的。 重要的区别。 TOMAS赖默斯：我有 有这么多的斗争， 因为我把散在HTML和 然后只觉得愚蠢的很长一段时间。 看看它是如何选择这两个 那些与类？ 酷。 现在，事情可以有多个类。 比方说，我想先做出 两人有黄色背景 和第二二有 蓝色的字体颜色。 好不好。 我真的不知道为什么我最好 要做到这一点，但我可以。 ALLISON BUCHHOLTZ-AU：可能并非 推荐它为您的网站。 但我们的目的，它会做。 TOMAS赖默斯：这不是 一个很好的配色方案。 ALLISON BUCHHOLTZ-AU：嗯，黄色 和蓝色是我高中的色彩。 我不知道，但。 TOMAS赖默斯：佳佳的高 学校有一个伟大的配色方案。 [笑] 这样的话我们可以称之为这是 让我们把this--所以我们特别 我们有漂亮的。 我建议，对于这一点，你使用 更多的描述性的名称。 ALLISON BUCHHOLTZ-AU：是的，我会 调用此，像，黄色或蓝色。 TOMAS赖默斯：我们不 实拍真正的网站， 这就是为什么我们不这样做。 但是，如果你真的 有一个真正的网站，你 可能有，像，文头， 文章内容，第一个字， 这样的事情，这让 你要多得多的描述。 这些都是真的就像变量。 他们应该在某种程度上，其中被命名为 你可以，like--是的，因为这样的。 完美。 这样的背景颜色。 然后我们要say--于是 方法来改变颜色只是“颜色”。 而且我们要让它蓝色。 这很酷。 所以，现在我们有 前两个有特殊的。 接下来人会 拥有“一流=很漂亮。” ALLISON BUCHHOLTZ-AU：然后你就会 要添加“漂亮”的中间的一个。 TOMAS赖默斯：是啊。 然后到中间的一个， 添加“漂亮”，会发生什么 就是你刚才有一个空间。 因此，类属性 是一个空格分隔的列表 所有类 适用于该标记。 好不好？ 它不是像这样的是属于 某种特殊的类被称为 “特殊，空间，漂亮。” 它属于两个classes-- 特别的漂亮。 是吗？ 酷。 然后如果我们看一下 在发生什么，我们 要看到，第一个具有 黄色背景，黑色文本。 第二埃德蒙顿 ALLISON BUCHHOLTZ-AU：--has大胆 黄色背景，蓝色文本。 而我们的最后一个只是有 我们分配给它的蓝色文本。 TOMAS赖默斯：酷？ 如何选择工作？ 真棒。 ALLISON BUCHHOLTZ-AU：难道我们要 说说现在的冲突呢？ TOMAS赖默斯：所以是的。 当然可以。 如果你恰巧是什么 有冲突吧？ 让我们假设第一个 建立东西like-- ALLISON BUCHHOLTZ-AU：也许 这一改变的背景？ TOMAS赖默斯：是的。 所以我们要做出“漂亮” 背景更改为鲑鱼。 ALLISON BUCHHOLTZ-AU：你只是用 所有伟大的颜色的今天，托马斯。 TOMAS赖默斯：是的。 因为我发现我可以 用鲑鱼作为一个真正的颜色。 因此，我们只打算这样做。 我也觉得夕阳是一个真正的颜色。 听众：日落是一个真正的颜色？ ALLISON BUCHHOLTZ-AU：让我们试试吧。 TOMAS赖默斯：这个演示后， 只是因为如果它弄乱了， 我不希望被调试。 所以我们知道鲑鱼是真正的颜色。 因此，任何的猜测上 什么事情发生呢？ ALLISON BUCHHOLTZ-AU：你知道吗？ 观众：[听不清]。 TOMAS赖默斯：是的。 所以，你得到它完全正确。 基本上，它需要的 它被赋予最后一条规则。 ALLISON BUCHHOLTZ-AU：所以这是 其中，级联生效。 TOMAS赖默斯：那么还记得我们如何 有这样的级联样式表？ 因此，通过这一点，我们种的意思 我们有一堆规则 适用于彼此的顶部上，并 他们还可以互相覆盖。 ALLISON BUCHHOLTZ-AU：那么 凡是在底部 将覆盖无论是在顶部。 你可以说完全有规则 先否定的东西。 这也是为什么你想成为 当你的造型小心， 这样你就不会创建规则 你只是完全覆盖。 TOMAS赖默斯：或者，也许你 确实要覆盖规则。 ALLISON BUCHHOLTZ-AU：或者，也许你做的。 是。 TOMAS赖默斯：假设你有一个 这适用于大多数类的东西， 但让我们说你要改变 背景颜色为红色，字体 重量大胆的大多数 的事情，但为一体， 您只需要在背景颜色 是红色的，但你希望所有其他 性能，你可以做一些事情 像“字体体重=正常，” 这将随后撤消了大胆的改变。 是吗？ 再次，最好的办法，我认为 佳佳说，只是练习。 ALLISON BUCHHOLTZ-AU：实验。 TOMAS赖默斯：练习，练习， 实践和实验。 我知道有很多人认为这 CSS是只是很多猜测和检查 在一天结束时，其中如果 你想要做something--一样， 你有一个大概的了解，但 你仍然可能需要 尝试一下，以确保 你知道它是什么样子。 听众：当你申请 类，多于一个 以同款 或部分，不是 不管你可以什么顺序 它们输入到引号？ TOMAS赖默斯：没有，一点都没有。 ALLISON BUCHHOLTZ-AU：重要的是 你的CSS样式表中的顺序。 听众：你能重复一次这个问题？ TOMAS赖默斯：哦。 ALLISON BUCHHOLTZ-AU：在 一流的，当你给班 某事的HTML，不 它无论他们以什么顺序？ 没关系的顺序。 重要的是的顺序 您在CSS类选择， 在您的样式表。 TOMAS赖默斯：声音好？ ALLISON BUCHHOLTZ-AU：可爱。 TOMAS赖默斯：然后 我们将继续to-- ALLISON BUCHHOLTZ-AU： 我们有什么下一个？ 我忘记了。 哦，我们只是例子。 但是，我们已经种做这些。 我们已经做了上飞的例子。 TOMAS赖默斯：我们去 很快结合选择。 ALLISON BUCHHOLTZ-AU：哦， 我们得到的组合选择。 TOMAS赖默斯：所以有的 例子之一是我们有 ＃dog--一斤，或包括hashtag， 或井号，或任何 要呼叫that--尖锐。 ALLISON BUCHHOLTZ-AU：夏普狗。 TOMAS赖默斯：那你有.pets。 一些有狗的ID， 这里只有一只狗在页面上。 东西有一个id 猫，这里只有一只猫。 有可能是在页面上许多宠物。 这就是为什么我们给了类。 你有P的一个例子。 然后这样的1 最后一个例子，这 是我们还没有谈到， 就是当你把它们会发生什么。 所以p.pets。 所以，让我们回到 代码和引进another--耶。 所以回到这里。 ALLISON BUCHHOLTZ-AU：我 感觉这是really-- 像刚才翻翻例子 真的是要学习这种方式。 所以，这就是我们正在做的。 TOMAS赖默斯：让我们假装我们 只需要选择文本2，对不对？ 所以，我们绝对不能 这样做有一个id。 好了，我们可以做到这一点与 标识，但它不具有一个id。 我可以添加一个，但让我们假装 我不想增加一个 或者它已经有别的东西。 我不能这样做这一点。 标签绝对不是唯一的，对不对？ 也不是类。 但是你可以将这些东西。 比方说，我们想要做的事 这仅适用于东西 有类特殊 它们具有类漂亮。 所以，你所能做的就是在的main.css， 你可以说，让我们先删除这个。 您可以将这些。 所以你可以做。特别。 没有空间。 只是.special.pretty。 这是什么意思是什么 这既是特殊的和漂亮的。 这是否有意义？ 如果我们去这里，有什么 你会看到 是此规则仅适用于 第二个，其具有两个。 你可以这样做了很多事情。 您可以say--我们 假装我只是想 做事情有相当类 并且这也是一个段落标记。 所以p.pretty。 让我们假设我有 一些漂亮的标签体。 好不好？ 我可以运行此，我 可以看到，这只是 要应用到的东西这是 与类漂亮的段落。 你可以将这些， 基本上，只要你想尽可能多的。 所以，你可以把它们放在一起。 这是否有意义？ ALLISON BUCHHOLTZ-AU：那么 种，这是更有益 时，托马斯在说更早，也许 你有一个非常复杂的网站， 你已经有很多 这些规则写的， 而你只需要 从之前合并两个。 像而不是写一个整体 新的选择和改变它在那里， 你可以结合 他们在那里重叠。 TOMAS赖默斯：或者你 可能会发现out--有时 有一类， 使得像字体的颜色为蓝色， 还有另外一个类， 使背景的蓝色。 而这是行不通的。 所以，你写一个特例，其中， like--但是如果它有两种，你在做什么 要做的事情就是你要 使这个本树荫蓝色 而这一次蓝这另一个阴影。 对不对？ ALLISON BUCHHOLTZ-AU：好 对于那些类型的异常。 TOMAS赖默斯：所以要 思考问题 当你把他们可能会出现。 酷。 所以回到我们的介绍。 ALLISON BUCHHOLTZ-AU： 我们快到了。 TOMAS赖默斯：它 已停止连接。 ALLISON BUCHHOLTZ-AU：哦，不。 ALLISON BUCHHOLTZ-AU：在CS 办公，上网下降。 呵呵，讽刺。 TOMAS赖默斯：那么幸运的是，我们可以 目前没有互联网，我猜， 因为我们有所有的幻灯片在这里。 因此，让我们来谈谈 标签的关系。 ALLISON BUCHHOLTZ-AU：没错。 种这么正要 关闭什么托马斯说， 这只是另一种方式来做到这一点。 所以，我们有一些家长 选择器，提供孩子选择。 因此，在这里这个例子中，我们有一些 机身采用了类导航栏，类按钮。 啊。 TOMAS赖默斯：哦，对不起。 ALLISON BUCHHOLTZ-AU：而 基本上，这是什么意思 是选择所有的孩子一样， 所有这些种类的选择， 在这个家长选择。 而这些都是唯一的 它曾经打算申请。 我不知道，如果你 有更好的办法of-- TOMAS赖默斯：所以我 猜的方式去思考 关于这是怎么才想起 排序，我们喜欢把它们放在一起。 然后，这意味着一个元件 匹配所有这些。 这是什么意思是，我 要你的一切相匹配 在some--我想 你找一个选择。 然后在这一点，我想 您匹配新的东西。 对不对？ 因此，在CSS，这有点所有关于 能够以匹配这些项目。 你可以尝试搭配 其他项目中的项目。 因此，让我们真正做一个例子， 而且我们认为会澄清。 因此，让我们假装我们有特殊的， 特别漂亮，等等。 然后我们有一个链接，OK？ 所以请记住，一个是链接。 它不会去任何地方。 我们要去给它 类的链接，我猜。 让我们给它的 分类 - 给我一个想法。 ALLISON BUCHHOLTZ-AU：酷。 TOMAS赖默斯：Coo--我们 去它的类漂亮。 为什么不呢？ ALLISON BUCHHOLTZ-AU：OK。 TOMAS赖默斯：所以 现在漂亮的东西 要进行后台 蓝色，背景鲑鱼的颜色。 这是有道理的。 如果我们做this-- ALLISON BUCHHOLTZ-AU： 你想添加文本 这样的超级链接实际上是显示了？ TOMAS赖默斯：那 将是一个良好的通话。 ALLISON BUCHHOLTZ-AU：因为权 现在我们只是要去什么也得不到。 TOMAS赖默斯：所以这是一个链接。 “这是一个链接。” 哦，这是怎么回事 是另一个链接。 让我们给它的类“酷”。 你说得对。 酷。 所以现在我们要抓住这个。 我们要扔掉的。 我们有一个在 特殊的标记，我们也 将有一个在美丽的标签。 而现在我们打算 做的是我们要做出cool-- 什么，我们希望它做什么？ ALLISON BUCHHOLTZ-AU： 我们可以把它更大？ TOMAS赖默斯：让我们给它一个边界。 ALLISON BUCHHOLTZ-AU：我们可以边框。 TOMAS赖默斯：是的。 所以，我们要做的事 状，边界is--和我们 要解释这一切都在第二。 目前-- ALLISON BUCHHOLTZ-AU：为盒模型。 TOMAS赖默斯：但现在，我们 刚准备给它一个边界。 所以，这是什么意思是你 要看到这些链接。 而且你会看到他们有 这些一样，丑陋的黑色边框，这 凉爽。 ALLISON BUCHHOLTZ-AU： 我们的网站是如此漂亮。 TOMAS赖默斯：是的。 我们的网站是真棒。 所以这两个是环节，他们出现。 现在，让我们假装我 只是想做到这一点 如果不是内部的东西 其中有鲑鱼的背景。 所以请记住，这其中 有鲑鱼的背景下， 因为它是类相当的。 但我们想说的是，只有冷却 这是在课堂上特殊的，不上课 漂亮，应该有边界。 那么，你能做的就是你 可以说，。特殊，空间，.cool。 什么是在做什么，当你觉得 它，就是它基本上是说， OK，找我的一切 符合特殊。 然后，这些标签内，发现 我的一切，这很酷。 ALLISON BUCHHOLTZ-AU：那么另一种方式 这可能是很好的想一想， 把它回C，是 就像范围的想法。 当你有这么一些 选择器，像那些 我们一直在努力为在此之前， 你的整个网页，你的所有的HTML 是你的范围之内，对不对？ 但是，当我们有这些 父子关系， 这是因为，如果你缩小那里 你正在寻找一个特定的地方， 那样的话，就像我们正在寻找中 特定的功能，而不是 我们的整个文件。 听众：所以考虑到这一点，将 这也无妨，如果我们有changed-- ALLISON BUCHHOLTZ-AU：订单？ 听众：--the类CSS 到.cool，空间，。特别？ ALLISON BUCHHOLTZ-AU： 是的，因为那么 可以说，它的范围要 一切有清凉， 再看看has-- 我的意思是，等，在这种情况下， 我不认为这会改变它。 TOMAS赖默斯：如果我们说了什么？ 抱歉。 ALLISON BUCHHOLTZ-AU：如果我们 范围之冷却，然后 查找出来的东西特别， 这将是相同的，其实。 TOMAS赖默斯：所以它不会是。 ALLISON BUCHHOLTZ-AU：它不会？ 哦，哦。 我错了。 TOMAS赖默斯：那么原因 这是different--共同mistake-- 这是现在唯一 链接有很酷，不是吗？ 我想我的问题给你们的， 此页面上有什么是匹配.cool？ 有两个标签在这里，对不对？ 这是这一个，这一个。 两者搭配酷。 没有别的呢。 所以，如果你说，.cool，空间， 。特别，你会说什么的， 这些标签中，是什么特别之处？ ALLISON BUCHHOLTZ-AU：嗯。 这就是它 - 正确的。 因为它像刚才的东西在这里。 TOMAS赖默斯：所以它会选择什么。 ALLISON BUCHHOLTZ-AU：而与 特别的，我们在这里这些标签内。 TOMAS赖默斯：那些和那些。 听众：OK。 因此，从正向这些标签斜线？ TOMAS赖默斯：是的。 这是否有意义？ 如何它基本上 努力缩小范围。 ALLISON BUCHHOLTZ-AU：是的。 我认为这是可能的 最简单的方法去想它。 TOMAS赖默斯：所以我们发现这一点， 我们发现这两种特殊的匹配。 然后我们问，内 这些家伙，什么是酷？ 而在这其中，这其中的凉爽。 在这其中，没有什么很酷。 因此，这是剩下的唯一标记。 ALLISON BUCHHOLTZ-AU：虽然酷 只是这一个标签有内。 TOMAS赖默斯：没错。 这有什么特殊的内那些？ 什么都没有。 现在，我要说的是 如果没有空间， 你问什么是冷静和special-- 或者有什么漂亮，特别的，对不对？ 如果你说.special.pretty，这是 一样.pretty.special。 因为什么除去空间 问的是，当你说。特殊， 你问，OK， 哪些是特殊的？ 然后那些，其中 那些还漂亮， 这是一样的，语法， 为问，什么是漂亮， 这些，然后，什么也特别的？ 对不对？ 它的差 什么是内部是什么。 听众：OK。 TOMAS赖默斯：是的。 真棒。 所以考虑到这一点then-- ALLISON BUCHHOLTZ-AU：我认为我们的最后一 事情是（花式英国口音） 盒模型。 TOMAS赖默斯：本box-- [笑] 我爱的方式佳佳说。 因此，盒模型的事情。 ALLISON BUCHHOLTZ-AU：只要有 一个盒子，我会是你的盒子模型。 TOMAS赖默斯：让我们谈谈这一点。 所以，现在，我们已经花了很多 时间谈论选择。 到现在为止，你们可能一样， 的selectors--你知道主人， 如何确切地选择内容 你想操纵你的屏幕上。 所以，现在的问题是，如何 究竟你能处理呢？ 所以我想最基本的 想想这样 是，好了，究竟是什么 在CSS元素？ 我们已经花了很多时间 谈到什么是标签， 或者什么是最基本的 标记的表示？ 想想一个好办法 也就是说，什么形状是鲑鱼？ 什么形状，喜欢的 鲑鱼色的背景是什么？ 听众：这是一个矩形。 TOMAS赖默斯：这是一个矩形，对不对？ ALLISON BUCHHOLTZ-AU： 是不是一招的问题。 [笑] TOMAS赖默斯：不尝试 欺骗你们这么晚。 所以，我们有这个矩形。 而标签是P，对不对？ 所以这给了我们很好 相信段落 被表示为一个长方形，在 至少在浏览器中的一点，这 它是。 ALLISON BUCHHOLTZ-AU：我的意思是， 浏览器通常是长方形的， 因此它是有道理的。 TOMAS赖默斯：这个想法是在这里 所有在CSS标签的 被表示为矩形。 和每一个长方形有四 部分根据CSS，OK？ 你有实际的内容。 这就是文字所在。 ALLISON BUCHHOLTZ-AU： 也许你的图片。 TOMAS赖默斯：是的。 你有填充，这是 只是某种空白。 那么你有一个边界。 然后你有保证金，这 是那个以外的空白。 所以这是没有意义的 任何人，所以我们 要谈论的一秒钟。 所以在这里，我们要做的 是我们要创建一些div的，OK？ 原谅我，而我 - ALLISON BUCHHOLTZ-AU：我觉得喜欢 我们应该把一个可爱的照片。 TOMAS赖默斯：我们当然应该。 ALLISON BUCHHOLTZ-AU： 我觉得每个人都 可受益于 可爱的图片，仅此而已。 TOMAS赖默斯：我们能否 从A--中获益 听众：是的，当然。 TOMAS赖默斯：OK，凉。 所以，我们应该把一个可爱 画面中的某个地方。 ALLISON BUCHHOLTZ-AU：我觉得自己像一个 现在可爱的兔子可能是有用的。 TOMAS赖默斯：当然。 ALLISON BUCHHOLTZ-AU：本周结束。 有一些adorab-- TOMAS赖默斯：如何回合一只小猫？ ALLISON BUCHHOLTZ-AU： 一只小猫作品了。 TOMAS赖默斯：酷，因为 有一个网站的。 这就是所谓的PlaceKitten。 ALLISON BUCHHOLTZ-AU：那太好了。 TOMAS赖默斯：是的。 ALLISON BUCHHOLTZ-AU：只为一样， 占位符图像在你的网站。 TOMAS赖默斯：嗯。 还有PlacePuppy。 并有PlaceBacon。 ALLISON BUCHHOLTZ-AU：PlaceBacon？ 真的吗？ TOMAS赖默斯：哦，我们不 有互联网连接在这里。 ALLISON BUCHHOLTZ-AU：[呻吟] 悲剧。 TOMAS赖默斯：否则， 我会告诉你的家伙 如何把图像在你的网站。 我们将设法让这个 工作之前，我们得走了。 但现在，我们只是 要谈的颜色即可。 我们希望把kittens--的照片 ALLISON BUCHHOLTZ-AU：我们做到了。 TOMAS赖默斯：--the互联网 下来的那一刻是。 因此，我们有两个div，而且我们 要给他们两个ID。 我们要叫它 “第一”和“第二”。 所以ID =“第一”。 我们打​​算给他们两种颜色。 那么，我们如何选择的东西 与“第一”的ID？ ALLISON BUCHHOLTZ-AU：点或哈希？ 听众：夏普。 TOMAS赖默斯：夏普，完美。 夏普，哈希，无论we-- ALLISON BUCHHOLTZ-AU： 很多事情来调用它。 TOMAS赖默斯：OK。 我们要解决的包括hashtag，并 这就是我们要一起去。 好不好？ ALLISON BUCHHOLTZ-AU：包括hashtag。 TOMAS赖默斯：所以包括hashtag第一。 ALLISON BUCHHOLTZ-AU：那么 你可以鸣叫的seminar-- 包括hashtag CSS，包括hashtag凉爽。 TOMAS赖默斯：包括hashtag迷死人。 ALLISON BUCHHOLTZ-AU： 包括hashtag迷死人，是的。 TOMAS赖默斯：OK。 因此，我们有“第一”，“第二”。 因此，首先，我们将有 红色的背景色。 ALLISON BUCHHOLTZ-AU：嗯，结肠癌。 TOMAS赖默斯：是啊。 ALLISON BUCHHOLTZ-AU： 我会是你当场检查。 TOMAS赖默斯：佳佳的拉去。 的blue--背景颜色 TOMAS赖默斯：紫色！ TOMAS赖默斯：紫色。 ALLISON BUCHHOLTZ-AU：是的。 紫色是我最喜欢的颜色， 我们并没有使用它。 TOMAS赖默斯：紫罗兰。 ALLISON BUCHHOLTZ-AU：紫罗兰。 这一工程。 TOMAS赖默斯：所以我们 将有两个div。 他们将是完全空白。 我们也许应该有一些文字。 因此，“第一”将是“HELLO”。 和“老二”会say-- ALLISON BUCHHOLTZ-AU：再见。 听众： - “世界”。 你好，再见。 ALLISON BUCHHOLTZ-AU：我看到了 在一周他们的演唱会。 TOMAS赖默斯：披头士？ ALLISON BUCHHOLTZ-AU：对于实数。 他们不是很大。 我不喜欢它。 TOMAS赖默斯：我们有 “HELLO”和“再见”。 再次，CSS只是真棒， 因为它承认我们的颜色。 不需要连 担心它们的存在。 他们这样做。 ALLISON BUCHHOLTZ-AU：它们的存在。 TOMAS赖默斯：所以，CSS，我认为有 255字谈色。 如果你能想到的颜色之外 那些255一样，我会留下深刻的印象。 ALLISON BUCHHOLTZ-AU：是的。 我想你们可能 刚进来权后。 TOMAS赖默斯：所以在这里， 你会看到，我们有两个箱子 对上对方，右上？ HELLO和GOODBYE。 ALLISON BUCHHOLTZ-AU： 有之间没有空格。 他们只是smooshed 右在彼此的顶部。 TOMAS赖默斯：所以第一件事 我想我们应该谈谈 是让我们也say--耶。 所以CSS代表他们作为排序箱。 和作为盒，它们具有的内容。 和内容，现在是有点 该HELLO或GOODBYE，就是这样。 好不好？ 所以第一件事情之一，你 可以做的是，你可以添加填充。 填充说多少空间 它应该留在每边。 因此，让我们说，我想说的 10个像素，每边。 我会剖析，在第二。 ALLISON BUCHHOLTZ-AU： 所有这些东西在这里 将要主要在像素 为研讨会的休息。 你会看到它有 周围的一些空间，对不对？ 所以你看不出这里有什么的 这种无形的排序填充 在每一侧，它说，等， OK，你有你的内容 - 箱 ALLISON BUCHHOLTZ-AU：你想 刚刚拉起检查元素？ TOMAS赖默斯：是啊，这是个好主意。 ALLISON BUCHHOLTZ-AU：另外，我发现 该检查的元素是一个好办法 要弄清楚，如果事情是怎么回事 错了，意想不到的事情发生了， 检查标签，看看哪些 这就像覆盖是有帮助的。 TOMAS赖默斯：所以我不知道 如果你们能看到这种颜色。 你能吗？ 你会看到这个填充 边缘的排序。 然后就看到实际的 在蓝含量，对不对？ 所以这是非常 盒模型的基础知识。 你有内容。 那么你有填充。 听众：你为什么不只是 使用盒内the-- ALLISON BUCHHOLTZ-AU：没错。 因为它只是选择 元素现在。 TOMAS赖默斯：是啊。 其他的事情。 所以，让我们来谈谈 用于第二填充指令。 因此，在CSS，测量 需要有一个单元。 所以，首先你得的数额。 所以在这种情况下，我们说10。 然后下一个 我们说的是像素，像素。 其他的则可能是有 之类的东西厘米，英寸。 你可以做这样的事情， 什么为10英寸？ 它的将是可笑的。 ALLISON BUCHHOLTZ-AU：哦，男孩。 听众：哇。 TOMAS和Allison：是的。 TOMAS赖默斯：所以这就是所有的填充。 我要回去像素。 ALLISON BUCHHOLTZ-AU：像素 往往是，比如，标准。 当你看到很多网站， 他们大多工作以像素为单位。 TOMAS赖默斯：所以你会看到 无论是pixels--其他的人，你看 是他们，这是新兴市场的 等于所述字体的高度 您目前使用。 ALLISON BUCHHOLTZ-AU：MM。 TOMAS赖默斯：这是一个很好的方式来表达， 就像，我想尽可能多的空间我的字体 是服用。 ALLISON BUCHHOLTZ-AU：不知道。 你每天都学到新的东西。 TOMAS赖默斯：有 很多的CS测量。 我建议你​​看看他们。 对于所有的情况下，我觉得 像素应该是充分的。 而且他们还什么 你会看到 在大多数例子在网上完成。 因此，我们将离开它的像素。 您还可以，我应该say--等 填充集中的所有垫的。 你也可以这样做 “填充顶”只是set-- ALLISON BUCHHOLTZ-AU：也许 我们会得到我们的“HELLO”回来。 TOMAS赖默斯：--to只是设置 填充在顶部和没有别的。 所以这四个命令填充顶， 填充底，填充左， 和padding-权利。 ALLISON BUCHHOLTZ-AU：就像 你所期望的一个盒子。 TOMAS赖默斯：是的。 没有什么太疯狂了那里。 这是否有意义？ 所以这是填充。 我将所有设置 在垫回10。 然后我会转移到边境。 那么，什么边界是 边框是一个奇怪的命令。 这需要排序三个件事。 所以，第一个是有多大你 希望它是作为一个测量。 同样，我只使用像素。 最后一点我 要添加到测量 是一件事 不需要一个单元为0。 它实际上是不正确 得到0单位， 因为0是0跨越英寸， 像素，厘米，等等。 这一切都只是意味着0，对不对？ 所以，首先你给它的测量。 那么你给它的风格。 所以我会说“实”。 和我们谈谈这意味着什么。 然后最后，你给它的颜色。 所以我会说“黑”。 而这些都是我们已经所有的东西 现在见过的，除了款式， 但我们会谈论这个。 所以你们看到的测量， 你见过的颜色。 什么情况是，我们得到这个 它周围漂亮的黑色边框，对不对？ 你们看看我们是怎么做的？ 听众：是的。 TOMAS赖默斯：酷。 那么，什么是？ 所以，首先，它是一个像素。 这是不言而喻的就够了，对不对？ 喜欢，这是一个像素厚。 或者，这将是一个像素，但我 放大，所以这是多一点点 比。 ALLISON BUCHHOLTZ-AU：我们有 这是荒谬的分辨率电视。 TOMAS赖默斯：是的。 你可以把它做大， 较小的，等等。 因此，这里的两个像素的边框。 你会看到它的两倍厚。 接下来的事情你必须是彩色的。 这不是有趣。 我不会说话 这个，真的。 ALLISON BUCHHOLTZ-AU：但风格 可能只是一点点有趣。 TOMAS赖默斯：是的。 所以风格的，也有少数的人 我看到用常用。 第一个稳固的，下一次的 虚线，和最后一个的虚线。 这里星罗棋布。 你会看到，他们是 一帮点吧？ 一个好方法排序，以得到一个不错的边界 走，短线也很受欢迎。 ALLISON BUCHHOLTZ-AU： 然后当然，我 肯定还有很多其他的 风格，你可以得到。 我们有一个伟大的一套 在结束对你们的联系 种细读和 看多爽CSS。 TOMAS赖默斯：然后 最后一件事，我们 要谈论的 盒子模型真正的快。 哦，然后边框， 酷似填充， 你也有类似的东西 左边框，右边框，边框顶部， 边框底部，它允许你 获得在特定边界。 因此，这里的仅仅是边框左侧定义。 这是否有道理？ ALLISON BUCHHOLTZ-AU：这是一个很酷 办法强调事物或增加 不同元素之间的连线。 TOMAS赖默斯：当然。 所以这就是我们的边界。 和最后一个的幅度。 保证金的像填充 但它不是within-- ALLISON BUCHHOLTZ-AU：这是 不在身边你的元素 但实际上围绕整个 中，我们已经看到。 TOMAS赖默斯：是的。 佳佳说，它完美。 这不一样，在你的 元素，它是围绕整个框。 这意味着这样的 背景并不适用于它。 它基本上说， 就像，我什么都不要 在我这么多的空间。 所以像我们这里有 的10个像素的幅度​​。 因此，在10个像素没事 应该是我旁边。 这是一种其 空间，但那种没有。 所以这是非常 盒模型的基础知识。 这是否有意义？ 冷静，冷静。 ALLISON BUCHHOLTZ-AU：真棒。 所以现在我觉得我们只是 有我们的清凉资源 我们会带你们 通过非常快。 我们将actually--好， 我们有互联网了吗？ TOMAS赖默斯：让我们 看看我是否能打开up-- 让我看看，如果我 可以迅速得到互联网 而佳佳谈什么 佳佳愿意谈论。 ALLISON BUCHHOLTZ-AU： 所以basically--我不 知道还有什么我可以说在这一点上。 但这些都是一些 真正的好资源。 这些都是那些 托马斯和我用 而我们实际上 用来预习本。 W3Schools的是一个你 你们应该已经看到过。 我们推荐它了 很多事用CSS。 我知道我把它推荐给 我的部分所有的时间。 一个伟大的事情是，它 让你那种乱用CSS的 和看到的变化 瞬间在此， 象，双窗口中查看它了。 所以你不必担心 建立自己的网页， 或设立虚拟主机在你的 本土家电和本地主机， 并获得所有的东西的工作。 这是在页面中嵌入的权利。 它有这些小 教训可以 通过学习 更多选择， 或了解你的操作 字体或背景，或图像。 你有这些 瞬时结果你 不必做任何 其他准备工作。 所以我喜欢W3Schools的。 这是美妙的。 是它的工作？ TOMAS赖默斯：是的。 不，它不是。 难道你要我试试 并重新启动我的电脑？ 还是我们想要to-- ALLISON BUCHHOLTZ-AU：我的意思是， 同时，这也将是在网上。 所有的幻灯片将在网上。 所以，我只是强烈建议做这些。 这是伟大的，因为只是 像小抄。 这只是所有的基本 命令你有。 这是伟大的，当你第一次 开始了你的网站。 因为也许你不 想进入所有 真正的细节问题 设计沉重的东西。 你只需要在一个格式化的方式 种是有道理的和意志 做暂时。 如果你真的想 进入它，我知道 这是一样，一 托马斯最喜欢引用。 我们用它来 准备，它的美妙。 这是从Mozilla的开发人员。 TOMAS赖默斯：所以Mozilla是 谁使Firefox的人。 而这只是自己的开发人员 参考，我认为这是真棒。 它有一个美好的 资源的列表。 所以我们have-- ALLISON BUCHHOLTZ-AU： 然后最后一个音符是 当你试图 设计你的网站， 汲取灵感的东西 你认为是漂亮。 检查元件， 检查源代码 可超有用 对于试图找出 如何风格你自己的网站。 通常情况下，我觉得最好的 这样，除了实验， 只是看 事情是漂亮。 我觉得真的很难只 种设计的东西你自己， 特别是在开始时。 所以，请看看网站 你喜欢看。 找出是什么使 他们吸引你。 然后随意 尝试和复制的。 TOMAS赖默斯：对。 偶喜欢的网站 这样，你可以看到 有绝对是一个DIV顶部。 然后，你还要在另一个分区 在这里，这是CSS的迷死。 然后你有一大堆的链接在这里。 如果你真的只是检查 元素，可以排序的 开始看到什么做网站 样子，哪能 重建，如果我想。 这是否有意义？ 因此，我们只剩下三分钟。 所以，问题吗？ 它们中的任何？ 是。 顾客：颜色 矩形，你会如何 have--如果你不希望它 要在整个页面上，可以 你已经是去对面只 一半页面或只是文本？ TOMAS赖默斯：是的，绝对。 因此，让我真正看到。 我有两个想法。 所以首先，你 也可以用百分比。 听众：真的吗？ ALLISON BUCHHOLTZ-AU：那么什么 查找是相对的定位。 这件事情，我们 没有时间进入， 但它的东西我绝对 建议你们检查。 TOMAS赖默斯：那么百分比。 看看我们如何使它 只有50％的宽度？ ALLISON BUCHHOLTZ-AU：如果您 实际上知道的像素数， 你可以更精确的方式。 你可以反复折腾它。 但是50％以上。 如果我们要调整我们的浏览器， 这将使其更小。 TOMAS赖默斯：嗯，这是 基本上是50％，现在，我想。 它的50％，然后将余量 已被添加到这一点。 CSS有很多怪癖。 所以现在这是 50％的页面宽度。 但请记住，你有10 像素从每一侧取下。 所以，如果你是移动，对 在浏览器的左边缘， 那么它看起来像50％。 同样，就像我说的，CSS可以 有很多的猜测和检查。 就像，你认为什么是 要表现的一种方式， 但它的行为是完全不同的方式。 ALLISON BUCHHOLTZ-AU： 而你只是变得更聪明， 而你只是得到一个更好的 直觉它，你待着。 TOMAS赖默斯：它 变得越来越糟糕。 所以，它实际上只是一场比赛。 ALLISON BUCHHOLTZ-AU： 这是超级令人鼓舞。 我们希望他们能够喜欢CSS。 TOMAS赖默斯：CSS是真棒。 记住这一点。 其他问题吗？ ALLISON BUCHHOLTZ-AU：一件事。 还要别的吗？ 酷。 TOMAS赖默斯：真棒。 ALLISON BUCHHOLTZ-AU：好吧，如果你 你们有什么问题以后， 我们总是可以按往常一样。 你可能会看到一些 美国最终项目 绝对的黑客马拉松。 TOMAS赖默斯：当然。 并在公平的。 ALLISON BUCHHOLTZ-AU：而在展会上。 呵呵。 TOMAS赖默斯：期待 看到所有的awesome--的 ALLISON BUCHHOLTZ-AU：我们会看到 所有你真棒网站 这将是美丽的。 TOMAS赖默斯：您可以随时 看看，喜欢的网站 谁曾一样，良好的CSS，然后 像那些谁没有尝试做CSS。 ALLISON BUCHHOLTZ-AU：此外，另一个 的事情，一件事，探讨 是自举。 所以引导是伟大的。 TOMAS赖默斯：谷歌，如果你 - ALLISON BUCHHOLTZ-AU：谷歌吧。 这是美妙的。 你会爱上它。 现在你有一个 基本的了解CSS的， 它会让很多更有意义。 真棒。 谢谢，伙计们。 TOMAS赖默斯：非常感谢你。