[音乐播放] 道格·劳埃德:那么,让我们多了一个 视频谈多了一个语言。 这一次,我们将讨论CSS。 这样的CSS,这是短期的 层叠样式表, 是我们用另一种语言 建设网站的时候。 想想看,是这样的。 如果HTML是什么,我们用它来组织 内容我们希望把我们的页面, CSS是,我们一般使用的工具 定制我们的网站怎么看, 以及如何在用户体验真正的 是,我们的网站进行交互。 类似于HTML,CSS是 不是一种编程语言。 它不具有逻辑。 它不具有的变量。 它不具有任何种类的该 流相关的事情,C那样被。 这是一种造型语言。 其语法相当 简单,只是介绍 如何的元素我们的 页面有一定的HTML 元件应该被修改。 为此,如果你还没有 但观看我们的视频在HTML, 或不熟悉 HTML通常,你 可能想看一看那 首先,因为这CSS的讨论 是要依赖于 HTML有一定的了解。 因此,这里是一个非常 简单的CSS样式表。 即使你从来没有 之前,CSS编程, 我敢肯定,你可以计算出 正是这个样式表做什么。 它做什么? 好,适用于我们的网络体 身体标记之间的网页,一切 在我们的HTML,并将这 该页面以蓝色背景色。 嗯,这是一个非常简单的样式表。 它实际上是非常人性化 友好的语言,CSS。 所以,即使你从来没有使用过, 你可能会猜到这是什么做。 事实上,如果我们加载一个页面,其中 这个样式表嵌入不知何故, 我们网页的背景颜色会 是蓝色,而不是标准的白色。 那么,我们如何建立样式? 那么首先,我们要 确定一个选择器。 在最后一个例子, 该选择是身体。 然后我们有一个开放 大括号,而且我们 要开始定义 样式的选择符。 在大括号之间,我们 只是有键值对的列表。 以前的值对是 背景色的蓝色分号, 但我们可以做更多的这些以及更多。 你可以有多重的东西应用 该标签,即选择的身体。 它们中的每一个是由一个分离 分号,我们称之为他们每个人 一个宣言,一个CSS声明。 当我们所有的样式,我们做 要应用到特定的标签, 我们只是有一个右大 振奋结束样式表, 我们正在做的定义样式表 该特定选择器。 什么是一些常见的CSS属性? 好吧,也许你想要把 周围的东西边界。 所以,你可以说,边境, 这将是你的关键, 然后你的价值观会, 什么款式,颜色和宽度 你希望它是。 因此,风格可以是固体 线,点线,虚线, 一个棱线,这将是波形线。 也许你想拥有它 是蓝色或黑色或绿色。 也许你希望它是 1或2或10像素宽。 您可以指定所有这些事情。 也许你想设置背景 你的网页在一个特定的方式颜色。 我们已经看到,设置 身体的背景是蓝色的。 然后你可以使用一个关键词, 所以CSS有一定的颜色 被内置到它,蓝色,绿色, 黑色的,很简单的颜色,我们知道。 但你也可以指定任何 十六进制颜色,你会喜欢的。 回想一下,颜色可以被识别 由一组三十六进制数 从0到255,RG和b,所述 红色,绿色和蓝色分量。 因此,我们可以指定 我们希望通过任何颜色, 代替使用蓝色或绿色或黑色, 使用英镑,然后六个内六角的数字, 这将给予我们 六个数字颜色。 所以这是背景色。 我们也有前台 颜色,这通常是 要在您的网页的文本。 你可以同样做到这一点 与关键字和六个两位数的十六进制。 所以,你可以指定任何颜色,你 想为你的网页的文本 针对一个特定的 背景色,同比增长上面。 您还可以更改和处理 与字体,以及文本的方式 呈现在网页上。 所以,你可以改变您的字体大小。 您可以使用关键词,如额外的, 额外的小,或者XX小或中等, 大,等等。 您可以使用固定点,10 点,12点,依此类推。 可以使用百分比,80%,20%, 其中100%是默认的字体 大小,通常要 是像11或12分。 或者,你甚至可以作为它的基础关闭 的最新的字体大小。 如果你只是写东西,你知道的 你想要的是它要小一些, 但你不知道到底是什么大小你 希望它是,好了,你可以说, 字体大小更小。 它将基地起飞的, 刚起来上面,它的字体大小。 你可以变得更小或更大。 所以这是一个很大的不同 方法来指定字体大小。 您还可以指定哪些 你想字体系列。 如果你有一个特别的 名字,还有在某种程度上CSS-- 我们不会谈论它 这里 - 定义一个非常特定的字体 并将其嵌入到您的网页。 您还可以使用通用名。 有很多的网络安全字体 这是预先定义的CSS。 如果你是微软的用户 办公室在过去的20年中, 你可能熟悉 很多这些Web安全字体 目前,宋体,Arial字体, 宋体,格鲁吉亚,宋体,宋体, 等等。 这些都被认为是网络安全的字体。 而实际上,部分 因此,他们走过来的 还是被用来制造web--每一页 有机会访问这个默认设置的字体 各种衬线,而这一切 字体的东西,我们不会进入, 但这些通常 在你的CSS访问, 即使你不 另外定义的字体。 最后,你可以调整你的文字, 而不是它是,默认情况下,对齐 向左,你可以 它右对齐, 或者你可以对齐居中,或 正当使命中了利润。 因此,这些都是可以使用的所有选项 改变你的文字看起来像, 以及它如何显示在您的网页上。 您的选择不 必须仅标签。 我们之前看到一个body标签 选择器和标签选择器 看起来就像这样。 你的名字标签,然后 定义样式表的标签。 但你也可以做一些事情 所谓的ID选择。 一个ID选择看起来很相似。 但是请注意,现在我没有使用 HTML标记,我使用的,在这种情况下, #unique或哈希独特。 如果您还记得我们 视频HTML,我们聊 有关如何标记可以有属性。 而一个属性适用 到几乎所有的HTML标签, 但我们并没有谈论它, 一些所谓的ID标签。 因此,这个特殊的CSS将 仅适用于具有HTML标记 一个非常具体的ID,您已经命名。 所以,如果你有地方 在你的代码,在某处 在你的HTML文件,标签和你 指定为属性的标签, ID等于独特的,这 尤其是样式表 这里将仅适用于间 该标签具有独特的ID。 你也可以做一些事情 所谓一类选择。 因此,除了具有 ID属性,你也可以 添加一个类属性的HTML标签。 而当你使用一个类属性, 它可以应用到多个标签。 所以,如果你有几件事情, 都差不多,也许你想说的话, 开放标签等等,等等,等等, 胡说,班等于学生。 然后这个特定 样式表将适用 以它的类每个标签是学生。 在这种情况下,我们会设置 背景色为黄色, 我们会设置不透明度,其 是我们没有谈论一个标签, 只是涉及如何透明 事情是,到70%,在这种情况下。 有两种选择 写作样式表。 你可以把它们写 直接到HTML 通过将样式表 在风格上标记之间。 而那些风格标签去内 你的网页的head标签。 该或许更优选的方式做 这是写一个单独的.css文件, 然后将其链接到您的 使用link标签记录。 链接标签,再次,是 从超链接不同, 如果从我们的视频回忆的HTML。 而link标签是我们如何 拉在不同的文件。 它有点像相当于 #包括用于网页编程的。 因此,让我们来看看table.HTML。 如果您还记得我们 HTML视频,我发现 的一个非常一例 简单的乘法 表看起来相当 丑陋,也许有 一个方法,使其具有更好的 CSS,使之实际上看起来 更像一个乘法 表,什么 这不只是粘在一起 没有具体分工 行和列之间。 因此,让我们头以上 CS50 IDE,看一看 在如何将CSS,排序,调整 我们以前开始, 并使其东西好了很多。 所以我们在CS50 IDE 现在,如果不熟悉, 我们会拉起来在这 表HTML页。 Table.HTML基本 刚刚定义的内容 的multiple--它应该是 一个四乘四乘法表。 这是非常简单的。 而且我们认为,这将 看起来很良好的组织。 但事实上,当我们预览该页面, 我们看到,它是一种丑恶的,对不对? 很显然,我们在这里的行和列。 有某种分离。 但它不是一个有意义的分离。 我们没有真正得到 这里太多的信息。 还有的之间没有分离 在术语的行和列 的水平或垂直的规则。 我们或许可以使这 看起来更好一点。 所以让我们试试。 所以,我要在这里关闭此选项卡。 而且我要结束我的table.HTML, 我有另一个版本在这里 所谓table2.HTML。 我们将打开了。 的页面的主体是 几乎相同, 但我已经改变了 在顶部点点。 我会在这里向上滚动。 注意,这一次,我 采用内嵌式的标签。 我已经开了一个风格的标签,而我现在 定义只是里面的CSS样式表 它。 我有一个样式表,上面写着,表。 这是我的标签选择器。 我不使用点或散列, 我会,如果我做 是使用一个ID或类选择。 我有一个标签选择这里 - 表。 这种风格会 适用于每个表的标签。 显然,我想提出一个 像素宽,固体蓝色边框, 在我的表。 这听起来像它可能会 帮助的情况下,对不对? 我们将有 事情看起来好多了。 所以,这是好的。 在文体上,我只是 嵌入我的样式表在这里。 这当然是一个 可以接受的方式来做到这一点。 让我们来看看这是什么样子。 所以,我会回去到这里,和 我会预览我的table2.HTML。 嗯,这并不完全是我想要的, 但它正是我们提出的要求。 我们说,这种风格 要应用到我们的餐桌。 我们的餐桌现在有一个像素 周围宽阔,坚实的蓝色边框。 我们没有真正得到 在表格单元格。 我们才刚刚在餐桌上。 所以CSS工作。 它应用了 样式表到我们的餐桌。 但并没有完全做到 我们希望它做什么。 我们怎么能这么做 我们希望它做什么? 好吧,让我们来看看在一个多 这个版本的中table3.HTML。 所以,我只是要关闭这些标签。 我要回去了这里我 文件树,并开辟table3.HTML。 再次,它会好看 类似此处在开始。 但通知,这一次,而不是使用 嵌入权有一个样式表, 我要去一个链接 使用样式表的链接标签。 所以我显然是连接在 样式表叫tables.CSS, 这也等于 样式表仅仅是指:好, 文件相对于该是什么就是什么 我doing--的是,我是一个样式表 用我的网页。 所以,如果我真的想看到什么 我用CSS来这里干什么, 我需要去开了 table.CSS文件中。 所以我们要回去在这里 再次我们的文件树。 有table.CSS。 我们将弹出打开。 现在我们看到了一点CSS的。 很显然,我有一对夫妇 事情怎么回事。 我显然希望把五 像素宽,纯红色边框, 在我的桌子。 我们已经知道,这是怎么回事 只是去在外线。 我们看到,在table2.HTML。 每行,我 显然想指定 该行高度为50像素高。 因此,对于每一行,记 这就是tr标签呢, 我让它成为50像素高。 最后,我有这样的评论。 这就是我们如何在CSS中的注释。 这是非常相似的,抓住块 注释语法斜线明星。 所有你想要的文字。 有没有斜线斜线虽然CSS。 对于短行内注释,我们有 在这里使用这种特殊的格式。 它看起来像我做一个 很多事情在我的TD标记。 记住TD标签,或表 数据,这真的只是 内的列 我们的行,显然 每段数据的 在我的表,我想 设置背景颜色 是黑色的,颜色为白色, 颜色为前景色。 因此,这将是 我的网页的文本。 我想大字体,22 字体,我想 它是字体系列,乔治亚州。 所以我不打算 有默认的字体。 我要去指定格鲁吉亚,这 是那些网络安全的字体之一 我们已经看到过。 我希望我的文字对齐 集中,在框的中央, 我不希望它被抛 对齐或右对齐。 我希望我的列宽 为50个像素宽为好。 让我们来看看 这是什么样子, 看看这也许是一种进步。 所以我要去table3.HTML,这 召回,包括table.CSS为纽带, 我们会进行预览。 这是好多了,对不对? 这实际上是开始寻找一个 很多更像是一个乘法表。 我有一个红色的边框 在我的桌子,但现在 我还指定了 每行50个像素宽, 或者是50个像素tall--借口 我 - 每列50个像素宽。 每一列中的数据,并且只有 中的数据,有一个黑色的背景。 所以这就是为什么那些 白线在那里。 因为在该空间 所有这些单元之间, 它不是在边界 与本身,它只是 我只填写 细胞,这实际上 使表的边界,其中 显然确实存在,一直以来,它 只是细白线。 现在,他们是可见的。 现在,他们突然在屏幕上。 所以这是一个非常简单的 样式表,我申请, 现在我的表看起来更像 一个四乘四乘法表, 而不是仅仅混乱的烂摊子,其中 一切是显然的行和列, 但不是超级良好的组织。 我们真的只是冰山一角 你可以用CSS在这里做什么。 幸运的是,CSS文件 是非常简单的。 您将使用它的几个 属性,相当频繁。 我们谈到的那些 此前在这部影片。 有几种您 可能不会使用所有。 而这,也行。 但是,仅仅知道,有一个 大量的文档在那里。 因此,即使我们没有面面俱到, 你肯定不会留在你自己的。 但是,CSS是真的很好玩 尝试。 而且我会强烈建议您 玩弄你的网页, 看你如何让他们 外观和感觉,以改善用户 访问你的页面的经验。 我是道格·劳埃德。 这是CS50。