Web前端日记_02

7月1日:

                                                                                         CSS基础

除了class属性，每一个 HTML 元素也都有id属性,可以通过id选择器来改变单个元素的样式,id属性应是唯一的.id不可以重用，只应用于一个元素上。同时，在 CSS 里，id的优先级要高于class，如果一个元素同时应用了class和id，并设置样式有冲突，会优先应用id的样式。

                                                                             CSS ：调整元素的内边距

 

每个 HTML 元素周围的矩形空间由三个重要的属性来控制：padding（内边距），margin（外边距）和border（边框）。

padding控制着元素内容与border之间的空隙大小.CSS 允许使用padding-top，padding-right， padding-bottom和padding-left属性来设置四个不同方向的padding值,

不想每次都要分别声明padding-top，padding-right，padding-bottom和padding-left属性，可以把它们汇总在padding属性里面声明，如下：                                                   padding: 10px 20px 10px 20px;

       这四个值按顺时针排序：上，右，下，左，并且设置的效果等同于特定声明每一个方向的padding。

margin（外边距）控制元素的边框与其他元素之间的距离,CSS 允许使用margin-top，margin-right，margin-bottom和margin-left属性来设置四个不同方向的margin值,

同样，每个方向的外边距值可以在margin属性里面汇总声明，来代替分别声明margin-top，margin-right，margin-bottom和margin-left属性的方式，代码如下：             margin: 10px 20px 10px 20px;

这四个值按顺时针排序：上，右，下，左，并且设置的效果等同于特定声明每一个方向的margin。

 

                                                                 CSS ：使用属性选择器来设置元素的样式

[attr=value]-------这个选择器使用特定的属性值来匹配和设置元素样式.

CSS ：ID 选择器优先级高于 Class 选择器

        :   内联样式的优先级高于 ID 选择器

        ：Important 的优先级最高

 

 

                                                                CSS ：理解绝对单位与相对单位

单位长度的类型可以分成 2 种，一种是相对的，一种是绝对的。例如，in和mm分别代表着英寸和毫米。绝对单位长度会接近屏幕上的实际测量值，不过不同屏幕的分辨率会存在差异，可能会导致一些误差.

相对单位长度，就像em(元素的字体高度)和rem(元素字体高度)，它们会依赖其他长度的值。就好像em的大小基于元素的字体的font-size值，如果你使用em单位来设置font-size值，它的值会跟随父元素的font-size值来改变.

 

                                                                 使用十六进制编码获得指定颜色

在 CSS 里面，我们可以用使用 6 个十六进制的数字来代表颜色，每两个数字控制一种颜色，分别是红（R），绿（G），蓝（B）。例如，#000000代表着黑色，同时也是最小的值。0是十六进制里面最小的数字，表示着没有颜色。F是十六进制里面最大的数字，表示着最高的亮度。

                                                                使用缩写的十六进制编码

缩写的方法:例如，红色的#FF0000十六进制编码可以缩写成#F00。在这种缩写形式里，三个数字分别代表着红（R），绿（G），蓝（B）颜色。在浏览器里#FF0000和#F00完全是同一种颜色。

 

                                                               CSS 基础：使用 RGB 值为元素上色

黑色的 RGB 值声明如下：

rgb(0, 0, 0)

白色的 RGB 值声明如下：

rgb(255, 255, 255)

RGB 不像十六进制编码，并不需要用到 6 位十六进制数字。在 RGB 里，你只需要指定每种颜色的亮度大小，从 0 到 255。

在数学的角度来看，如果将十六进制的一种颜色的两位数字相乘，16 乘以 16 也等于 256。所以，从 0 到 255 计算的 RGB 值的具有十六进制编码相同的颜色可能性。