>> [音乐播放]
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赖默斯：非常感谢你。