响应页面设计笔记三

用 border-radius 添加圆角边框

border-radius 的属性值单位可以是 px（像素)

用 border-radius 制作圆形图片
除像素外，也可以使用百分比来指定 border-radius 的值

background-color 属性可以设置元素的背景颜色
如果想将一个元素的背景颜色改为 green，可以在 style 里面这样写：

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

设定元素id
一个元素只有一个id

<h2 id="我是id">

使用 id 属性来设定元素的样式
选择 id 为 cat-photo-element 的元素，并设置它的背景颜色为绿色。 可以在 style 标签里这样写：

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

id 不可以重复，它只能作用于一个元素上。 如果一个元素同时应用了 class 和 id，且两者设置的样式有冲突，会优先应用 id 中所设置的样式。

调整元素的内边距
每个 HTML 元素所占有的矩形空间由这三个重要的属性来控制：内边距 padding、外边距 margin 、边框 border。
padding 用来控制着元素内容与 border 之间的空隙大小
CSS 允许使用 padding-top、padding-right、padding-bottom、padding-left 属性来设置四个不同方向的 padding 值。
也可以一次性表达：

padding: 10px 20px 10px 20px;

调整元素的外边距
外边距 margin 用来控制元素的边框与其他元素之间的 border 距离。
如果你把元素的 margin 设置为负值，元素会变得占用更多空间。
CSS 允许使用 margin-top、margin-right、margin-bottom、margin-left 属性来设置四个不同方向的 margin 值。
也可以一次性表达：

margin: 10px 20px 10px 20px;

使用 [attr=value] 属性选择器
这个选择器使用特定的属性值来匹配和设置元素样式。 例如，下面的代码会改变所有 type 为 radio 的元素的外边距：

[type='radio'] {
  margin: 20px 0px 20px 0px;
}

绝对单位与相对单位
单位长度的类型可以分成 2 种：相对和绝对
绝对单位与长度的物理单位相关。 例如，in 和 mm 分别代表着英寸和毫米。 绝对长度单位会接近屏幕上的实际测量值，不过不同屏幕的分辨率会存在差异，这就可能会造成误差。
相对单位长度，比如 em 和 rem，它们的实际值会依赖其他长度的值而决定。 比如 em 的大小基于元素字体的字体大小。 如果使用它来设置 font-size 值，它的值会跟随父元素的 font-size 值来改变。

给 HTML 的 body 元素添加样式
请将以下代码添加到 style 标签里面：

body {
  background-color: black;
}

body 元素继承样式:

内联样式的格式：

<h1 style="color: green;">

important的格式：
粉红文本元素的颜色声明添加关键词 !important，以确保 h1 元素为粉红色。

.pink-text {
   color: pink !important;
  }

但是class选择器的优先级高于继承样式，且在 <style>标签里面声明的 class 顺序十分重要，之后的声明会覆盖之前的声明。 第二个声明的优先级始终高于第一个声明。并且ID 选择器优先级高于 Class 选择器。内联样式的优先级高于 ID 选择器，但是Important 的优先级最高。
所以说优先级为：继承样式<Class 选择器<Class 选择器后一个声明<ID 选择器<内联样式<Important

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