前台界面（2）---CSS 样式

目录

1. 内联样式

2. 层叠样式表CSS

2.1. 类选择器

2.1.1. 颜色设置

2.1.2. 字号设置

2.1.3. CSS边框属性

2.1.4. 设置背景颜色

2.1.5. 设置布局边框

2.1.6. 样式的优先级别

2.2. ID属性及选择器

2.3. 颜色几种表示方法

2.3.1. 用英文颜色单词

2.3.2. 用6 位十六进制数字

2.3.3. 用rgb值

--------------------黄金分割线----------------------

1. 内联样式

样式的属性有很多，其中color用来指定颜色。

以下是为h2元素的文本颜色设置为蓝色的内联样式示例代码：

<h2 style="color: blue">CatPhotoApp</h2>

2. 层叠样式表CSS

内联样式是为元素添加样式的最简单有效的方式，但是更易于维护的方式是使用层叠样式表CSS（Cascading Style Sheets）。

在代码的最顶端，创建一个如下的style元素：

<style>
</style>

2.1. 类选择器

2.1.1. 颜色设置

在这个style元素内, 你可以为所有的h2元素创建一个元素选择器。比如，如果你想要将所有的h2元素设置为红色, 你的代码应该看起来像这样：

<style>
  选择器 {属性名称: 属性值;}
  h2 {color: red;}
</style>

注意：一定要在属性值的后面加上分号;。

我们先声明一个类选择器：

<style>
  .blue-text {
    color: blue;
  }
</style>

上面的代码在 <style> 标记中声明了一个叫做blue-text 的类样式。

然后在h2元素上应用我们声明的类选择器：

<h2 class="blue-text">CatPhotoApp</h2>

注意：在CSS中，类选择器应该添加.为前缀。

而在HTML中，class属性不能添加.为前缀。

这是因为在CSS中如果类选择器前不添加. 浏览器就会误认为类选择器是一个元素选择器。

2.1.2. 字号设置

字号是由样式属性font-size来控制的, 如下：

h1 {
  font-size: 30px;
}

用font-family属性来设置元素的字体。

如果你想把副标题的字体设置为Sans-serif，你可以使用下面的CSS：

h2 {
  font-family: Sans-serif;
}

现在，让我们来导入谷歌字体。

首先，你需要用link标签来引入谷歌Lobster字体。

复制下面的代码片断并将其粘贴到你的代码编辑器的顶部：

<link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">

有几种默认的字体是所有浏览器都可用的，包括Monospace、Serif和Sans-Serif。

当某种字体不可用时，你可以让浏览器自动降级到另一种字体。

例如，如果你想让段落的字体为Helvetica，但你同时想在Helvetica字体不可用时自动降级使用Sans-Serif字体，你可以使用如下CSS样式：

p {
  font-family: Helvetica, Sans-Serif;
}

2.1.3. CSS边框属性

CSS 边框的属性有style(样式)、color(颜色)、width(宽度)、height(高度)等。

举个例子，如果我们想要让一个HTML元素的边框颜色为红色、边框宽度为5像素(px)、边框样式为固体(solid)，代码如下:

<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
</style>

提示：你可以应用多个class到一个元素，只需要在多个class之间用空格分开即可。例如：

<img class="class1 class2">

如果感觉边框比较尖，我们可以通过CSS的一个叫border-radius(边框半径)的属性来让它的边框变成圆的。

你同样可以使用像素来指定border-radius的属性值，如border-radius:10px;。

除了像素，你还可以使用百分比来指定border-radius边框半径的值，如border-radius:50%;

2.1.4. 设置背景颜色

你可以用 background-color 属性来设置一个元素的背景颜色。

例如，如果你想把一个元素的背景颜色设置为green，你应该把这些加到你的 style 元素中：

.green-background {
  background-color: green;
}

2.1.5. 设置布局边框

有三个影响HTML元素布局的重要属性：padding(内边距)、margin(外边距)、border(边框)。

2.1.5.1. padding(内边距)

元素的 padding 控制元素内容 content和元素边框 border 之间的距离。

有时你想要自定义元素，使它的每一个边具有不同的 padding。

CSS 允许你使用 padding-top、padding-right、padding-bottom 和 padding-left来控制元素上右下左四个方向的 padding。

除了分别指定元素的 padding-top、padding-right、padding-bottom 和 padding-left 属性外，你还可以集中起来指定它们，举例如下：

padding: 10px 20px 10px 20px;

这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左。

2.1.5.2. margin(外边距)

元素的外边距 margin 控制元素边框 border 和元素实际所占空间的距离。

如果你将一个元素的 margin 设置为负值，元素将会变大。

有时你想要自定义元素，使它的每一个边具有不同的 margin。

CSS 允许你使用 margin-top、margin-right、margin-bottom 和 margin-left 来控制元素上右下左四个方向的 margin。

除了分别指定元素的 margin-top、margin-right、margin-bottom 和 margin-left 属性外，你还可以集中起来指定它们，举例如下：

margin: 10px 20px 10px 20px;

这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左。

2.1.6. 样式的优先级别

浏览器读取 CSS 的顺序是从上到下，这意味着，在发生冲突时，浏览器会使用最后的 CSS 声明。

id 属性总是比类属性具有更高的优先级。无论在 style 元素 CSS 的哪个位置进行声明，id 声明都会覆盖 class 声明。

行内样式将覆盖style 中定义的所有 CSS。

还有最后一种覆盖 CSS 的方法，这是所有方法中最强大的，但是在讲它之前，我们先讲讲为什么你要覆盖 CSS。

很多情况下，你会使用 CSS 库，这些库可能会意外覆盖掉你自己的 CSS。所以当你需要确保某元素具有指定的 CSS 时，你可以使用!important。

举例如下：

color: pink !important;

2.2. ID属性及选择器

除了 class属性之外，每一个 HTML 元素还可以使用 id 属性。

使用 id 属性有若干好处，一旦当你开始使用 jQuery 的时候你会有更深的体会。

id 属性应该是唯一的，虽然浏览器并不强制唯一，但基于最佳实践，这一点是被广泛认可的，所以请不要给一个以上的元素设置相同的id 属性。

下面举例说明了如何设置h2 元素的id属性为cat-photo-app。

如：<h2 id="cat-photo-app">

和类选择器一样，你也可以使用ID选择器来声明样式。

声明一个叫cat-photo-element的ID选择器 ，并设置背景色为绿色。：

#cat-photo-element {
  background-color: green;
}

注意：在你的 style 元素内部，定义类选择器必须添加 . 为前缀，定义ID选择器必须添加 #为前缀。

2.3. 颜色几种表示方法

2.3.1. 用英文颜色单词

如    color: blue;

2.3.2. 用6 位十六进制数字

在 CSS 中，我们可以使用 6 位十六进制数字来表示颜色，每 2 位分别表示红色 (R)、绿色 (G) 和蓝色 (B) 成分。例如， 是黑色，同时也是可能的数值中最小的，如   color: #000000;。

0 是 hex code（十六进制编码）中最小的一个，它代表颜色的完全缺失。

F 是 hex code（十六进制编码）中最大的一个，它代表最大可能的亮度。

Hex code 遵循 red-green-blue（红-绿-蓝），或者叫 rgb 格式。hex code 中的前两位表示颜色中红色的数量，第三四位代表绿色的数量，第五六位代表蓝色的数量。

所以要得到绝对的纯红色，你只需要在第一和第二位使用 F （最大可能的数值），且在第三、第四、第五和第六位使用 0 （最小可能数值）。

许多人对超过 1600 万种颜色感觉十分地抓狂，并且 hex code 非常难以记忆。幸运的是，你可以缩短它。

例如，红，hex code 是 #FF0000 ，可被缩写成 #F00。也就是说，一位表示红，一位表示绿，一位表示蓝。

这会把所有可能的颜色数减少至大约 4000 种，但是浏览器会把 #FF0000 和 #F00 解释为完全相同的颜色。

2.3.3. 用rgb值

在 CSS 中表示颜色的另一个方法是使用 rgb值，如    color: rgb(0, 0, 0);。

代表黑色的 RGB 值看起来是下面的样子：

rgb(0, 0, 0)

代表白色的 RGB 值看起来是下面的样子：

rgb(255, 255, 255)

最后最后最后，重要的事情说三遍,来着是客，如果您觉得好就推荐或评论下，觉得不好希望能得到您的建议，继续改善，您的支持就是对我最大的鼓励.