html和css实战
HTML 为div元素设置背景颜色
你可以使用 background-color 属性来设置一个元素的背景颜色。
例如，如果你想要设置一个元素的背景颜色为green，你可以将其放在你的 style 元素中：
.green-background {
background-color: green;
}
创建一个叫 gray-background 的类选择器，设置其 background-color 为 gray，最后应用到你的 div 元素
HTML 为标签添加ID属性
除了 class属性之外，每一个 HTML 元素也可以具有 id 属性。
使用 id 属性有很多好处，一旦你开始使用jQuery，你将了解更多信息。
id 属性应该是唯一的。虽然浏览器不会强制唯一，但这是被广泛认可的。所以请不要给一个以上的元素相同的 id 属性。
以下是一个例子，说明如何设置h2 元素的id属性为cat-photo-app。
<h2 id="cat-photo-app">
任务：设置 form 元素的id属性为 cat-photo-form。
HTML 使用ID属性设置标签样式
关于id属性的一个很酷的事情是，像类选择器一样，你可以使用CSS来设计样式。
以下是一个示例，说明如何使用 cat-photo-element 的id属性来获取元素 ，并设置背景颜色为绿色。在你的style 元素中：
#cat-photo-element {
background-color: green;
}
请注意，在你的 style 元素中，定义类选择器必须添加 . 为前缀，定义ID选择器必须添加 # 为前缀。
任务：尝试给你的 form，添加一个值为 cat-photo-form 的 id 属性，一个绿色的背景。
HTML 使用padding布局页面标签
现在让我们把 Cat Photo App 暂时放一边，并了解学习更多关于的 HTML 样式。
你可能已经注意到了这一点，所有的 HTML 元素本质上都是一些小矩形块。
有三个重要的属性控制每个HTML元素的布局：padding(内边距)、margin(外边距)、border(边框)。
元素的 padding 控制元素与其边框 border 之间的距离。
在这里，我们可以看到，绿方块和红方块都位于黄方块中。请注意，红方块具有比绿方块具有更大的 padding。
当你增大绿方块的 padding时, 它将增加元素内容和元素边框之间的距离。
任务：修改绿方块的 padding ，以使它与红方块匹配。
HTML 为不同方向padding设置不同的值
有时你将需要自定义一个元素，使它的每一个边具有不同的 padding。
CSS 允许你使用 padding-top、padding-right、padding-bottom 和 padding-left属性来控制元素四个方向的 padding。
使你的 green-box class的顶部和左侧具有 40px 的 padding，而底部和右侧则是 20px。
HTML 为不同方向margin设置不同的值
有时你将需要自定义一个元素，使它的每一个边具有不同的 margin。
CSS 允许你使用 margin-top、margin-right、margin-bottom 和 margin-left 属性来控制元素四个方向的margin。
使你的 green-box class的顶部和左侧具有 40px 的 margin，而底部和右侧则是 20px。
HTML CSS中padding简写
除了分别指定元素的 padding-top、padding-right、padding-bottom 和 padding-left 属性外，你还可以集中起来指定它们，如下所示：
padding: 10px 20px 10px 20px;
这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左。
使用顺时针表示法，给".green-box" class在其顶部和左侧具有 40px 的 padding，而底部和右侧具有 20px 的 padding。
HTML CSS中margin简写
让我们用 margin 再试一次。
除了分别指定元素的 margin-top、margin-right、margin-bottom 和 margin-left 属性外，你还可以集中起来指定它们，如下所示：
margin: 10px 20px 10px 20px;
这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左。
使用 顺时针表示法 ，给 "green-box" class 的元素在其顶部和左侧具有 40px 的 margin，而底部和右侧具有 20px 的 margin。
CSS 样式的继承
现在让我们全新开始，并谈谈CSS 继承。
每一个 HTML 页面都有一个 body 元素。
我们可以证明body元素的存在，将其 background-color 设置为黑色。
我们可以通过将以下代码添加到我们的style元素中：
body {
background-color: black;
}
CSS 继承Body元素样式
现在我们已经证明，每个HTML页面都有一个body元素，并且它的body元素同样能够应用样式。
记住，你可以像任何其他HTML元素一样对你的body元素应用样式，并且所有其他元素都将继承你的body元素的样式。
首先，使用文本 Hello World创建一个 h1 元素。
然后，让我们通过向body元素的样式声明部分添加 color: green; 使页面上的所有元素的颜色为green。
最后，通过向 body 元素的样式声明部分添加 font-family: Monospace; 将 body 元素的 font-family（字体）设置为 Monospace。
CSS 样式的覆盖
有时你的 HTML 元素会得到多个相互冲突的样式。
例如，你的 h1 元素不能同时为绿色和粉色。
让我们看看当我们创建一个使文本变成粉色的class，然后将它应用到一个元素时会发生什么。
我们的 class 会override（覆盖） body元素的color: green;CSS 属性吗？
创建一个名为pink-text的 CSS class，它使元素的颜色为粉色。
设置 h1 元素的 class 为 pink-text。
CSS 多个class处理样式覆盖
我们的 "pink-text" class 覆盖了 body 元素的 CSS 声明！
我们刚刚证明了我们的 class 会覆盖 body 元素的 CSS。所以下一个合乎情理的问题就是，我们可以怎样来覆盖我们的 pink-text class ？
再创建一个名为 blue-text 的 CSS class，其颜色设置为蓝色的，确保它在 pink-text class 声明之下。
除了 pink-text class 之外，你还可以将blue-text class 应用到你的 h1 元素，让我们看看哪一个会被应用。
如下例子所示，通过用空格分隔多个 class 属性，可让 HTML 元素应用多个 class 属性：
class="class1 class2"
注意：在 HTML元素中列出这些 class 的顺序并不重要。
然而，<style> 部分中的class 声明的顺序是重要的，第二个声明将始终优先于第一个声明。因为 .blue-text 是第二个声明，它会覆盖.pink-text的属性。
CSS 通过ID的样式属性覆盖class类的声明
我们刚刚证明了，浏览器是从上到下读取CSS。这意味着，如果发生冲突，浏览器将使用最后的任何CSS声明。
我们还有其他覆盖 CSS 的方法。你还记得 id 属性吗？
我们来覆盖你的 pink-text 和 blue-textclass，并使你的 h1 元素变成橙色，给 h1元素一个id，然后对该id进行样式化。
给你的 h1 元素添加名为 orange-text 的 id 属性。记住，id 样式如下所示：
<h1 id="orange-text">
在你的 h1 元素中保留 blue-text 和 pink-textclass。
为你的 style 元素中的 orange-text id 创建一个 CSS 声明。如下例子所示：
#brown-text {
color: brown;
}
注意：你是否将这个css声明在pink-text class之上或之下无关紧要，因为id属性始终是具有更高的优先级。
CSS 通过内联样式覆盖class类的声明
我们已经证明了，id 声明都会覆盖 class 声明，不管它在你的 style 元素 CSS 的哪个位置进行声明。
还有其他方法可以覆盖CSS。你还记得内联样式吗？
使用 in-line style（内联样式）来尝试使我们的 h1 元素变为白色。记住，内联样式如下所示：
<h1 style="color: white;">
在你的 h1 元素上保留 blue-text 和 pink-text class。
CSS 通过使用Important覆盖所有其他样式
好极了！我们刚刚证明了内联样式将覆盖style 中定义的所有 CSS声明。
可是等等。有最后一个方法来覆盖CSS。这是所有的最强大的方法。但在我们这样做之前，让我们来谈谈你为什么要覆盖CSS。
在许多情况下，您将使用CSS库。这些可能会意外覆盖您自己的CSS。所以当你绝对需要确定一个元素具有特定的CSS时，可以使用 !important。
让我们回到之前的 pink-text class 声明。请记住，我们的 pink-text class 被后续的 class 声明、id 声明和内联样式覆盖了。
我们来给 pink-text 元素的 color 声明加上关键字 !important，以使 100% 确保你的 h1 元素是粉色的。
举例如下：
color: pink !important;
CSS 通过使用十六进制代码设置特定的颜色
你知道还有其他方式来表示CSS中的颜色吗？其中一种方式称为 hexadecimal code（十六进制编码），简写为 hex code。
我们通常使用 decimals，也就是十进制数字，它对每一位数字使用符号0到9来表示。Hexadecimals （或 hex）是十六进制数字，这意味着它使用十六个不同的符号。像十进制一样，符号 0-9 代表数值零到九，那么 A、B、C、D、E、F 代表数值十到十五。总共，用 0 到 F 可以表示hexadecimal 中的每一位数字，共为我们提供 16 个可能的数值。
在 CSS 中，我们可以使用 6 个十六进制数字来表示颜色，每 2 个分别表示红 (R)、绿 (G) 和蓝(B) 成分。例如，#000000 是黑色，同时也是可能的数值中最小的。
把 body 元素的 background-color 由 black 替换成其 hex code 表示，即#000000。
CSS 十六进制白色表达方式
数字 0 是十六进制代码中最低的数字，表示完全没有颜色。。
数字 F 是十六进制代码中最高的数字，表示最大可能的亮度。
现在，让我们通过 background-color 的 hex code 修改为 #FFFFFF，把 body 元素的background-color 改为白色。
CSS 十六进制RGB红色表达方式
hex code（十六进制代码） 遵循 red-green-blue（红-绿-蓝），或者叫 rgb 格式。hex code 中的前两位表示颜色中红色的数量，第三四位代表绿色的数量，第五六位代表蓝色的数量。
所以要得到绝对的纯红色，你只需要在第一和第二位使用 F （最大可能的数值），且在第三、第四、第五和第六位使用 0 （最小可能数值）。
通过对 background-color 应用 hex code 值 #FF0000，把 body 元素的 background-color 设置为红色。
CSS 十六进制RGB绿色表达方式
hex code（十六进制代码） 遵循 red-green-blue（红-绿-蓝），或称为 rgb 格式。hex code 中的前两位表示颜色中红色的数量，第三四位代表绿色的数量，第五六位代表蓝色的数量。
所以要得到绝对的纯绿色，你只需要在第三和第四位使用 F （最大可能的数值），且在其它位使用 0 （最小可能数值）。
通过对 background-color 应用 hex code 值 #00FF00，把 body 元素的 background-color 设置为绿色。
CSS 十六进制RGB蓝色表达方式
hex code（十六进制代码）遵循 red-green-blue（红-绿-蓝），或称为 rgb 格式。hex code 中的前两位表示颜色中红色的数量，第三四位代表绿色的数量，第五六位代表蓝色的数量。
所以要得到绝对的纯蓝色，你只需要在第五和第六位使用 F （最大可能的数值），且在其它位使用 0 （最小可能数值）。
通过对 background-color 应用 hex code 值 #0000FF ,把 body 元素的 background-color 设置为蓝色。
CSS 十六进制RGB混合颜色
十六进制代码使用6个十六进制数字表示颜色，每 2 个分别表示红（R），绿（G）和蓝（B）成分。
从这三种纯色（红、绿、蓝），我们可以改变每种颜色创造超过1600万种其他颜色！
例如，橙色是纯红，与一些绿色混合，没有蓝色。在十六进制代码中，这转换为 ＃FFA500。
数字 0 是十六进制代码中最低的数字，表示完全没有颜色。
数字 F 是十六进制代码中最高的数字，表示最大可能的亮度。
用正确的十六进制代码替换 <style> 元素中的颜色词。
ColorHex Code
Dodger Blue #2998E4
Green #00FF00
Orange #FFA500
Red #FF0000
CSS 灰色度设置
从这三种纯色（红、绿、蓝），我们能得到 1600 万种其它的颜色。
我们也可以通过平均混合所有三种颜色得到不同灰度等级的灰色。
通过对 background-color 应用 hex code 值 #808080，把你的 body 元素的 background-color 设置为灰色。
作者：喜欢星期六_
链接：https://www.jianshu.com/p/b15bb986a1e1
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
CSS 不同等级的灰度设置
通过平均混合所有三种颜色，我们还可以得到其他色度等级的灰色，这样我们可以非常接近纯黑色。
通过对 background-color 应用 hex code 值 #111111 ，把你的 body 元素的 background-color 设置为深灰色。
CSS 十六进制RGB表达式缩写
许多人对1600 万种颜色感到不可思议，并且 hex code（十六进制代码） 很难记住。幸运的是，你可以缩短它。
例如，红色的十六进制码 #FF0000 可以缩短为 #F00。这个缩写形式给出一个数字为红色，一个数字为绿色，一个数字为蓝色。
这将把所有可能的颜色总数减少到大约4000种，但是浏览器会把 #FF0000 和 #F00 解释为完全相同的颜色。
继续，尝试使用缩写的十六进制代码对正确的元素进行着色。
CSS 使用rgb属性设定颜色
在 CSS 中表示颜色的另一个方法是使用 RGB 值。
代表黑色的 RGB 值如下所示：
rgb(0, 0, 0)
代表白色的 RGB 值如下所示：
rgb(255, 255, 255)
使用 RGB，是使用RGB指定每个颜色的亮度，数字介于0到255之间，而不是像使用十六进制代码那样使用六个十六进制数字。
如果你做个算术，一个颜色的两位数字等于16 乘以 16，这给我们256个总值，因此，从零开始计数的 RGB 具有与十六进制代码完全相同数量的可能值。
现在，我们用黑色的 RGB 值 rgb(0, 0, 0) 替换掉 body 元素背景色的hex code（十六进制代码）。
CSS 使用rgb属性设定白色
代表黑色的 RGB 值如下所示：
rgb(0, 0, 0)
代表白色的 RGB 值如下所示：
rgb(255, 255, 255)
使用 RGB，是使用RGB指定每个颜色的亮度，数字介于0到255之间，而不是像使用十六进制代码那样使用六个十六进制数字。
现在，将你的body元素的 background-color 从黑色的 RGB 值修改为白色的 rgb 值 rgb(255, 255, 255)。
CSS 使用rgb属性设定红色
和使用 hex code（十六进制编码）一样，你可以通过不同数值的组合来表示 RGB 中不同的颜色。
这些数值遵循 RGB 顺序模式：第一位表示红色，第二位表示绿色，第三位表示蓝色。
使用 rgb 将你的 body 元素的 background-color 设置为红色的 RGB 值：rgb(255, 0, 0)。
CSS 使用rgb属性设定绿色
使用 rgb 将你的 body 元素的 background-color 设置为绿色的 RGB 值：rgb(0, 255, 0)。
CSS 使用rgb属性设定蓝色
使用 rgb 将你的 body 元素的 background-color 设置为蓝色的 RGB 值：rgb(0, 0, 255)。
CSS 使用rgb属性设定混合颜色
就像十六进制代码一样，您可以通过使用不同值的组合来混合RGB中的颜色。
用我们的style元素中的颜色字替换正确的RGB值。
ColorRGB
Bluergb(0, 0, 255)
Redrgb(255, 0, 0)
Orchidrgb(218, 112, 214)
Siennargb(160, 82, 45)
任务：将 body 元素的背景色修改为橙色的 RGB 值： rgb(255, 165, 0)。