响应页面设计4

使用 RGB 值为元素上色

RGB 值是在 CSS 中表示颜色的另一种方法。
黑色的 RGB 值：

rgb(0, 0, 0)

RGB 值只需要指定每种颜色的亮度大小，数值范围从 0 到 255。

视觉设计——排版

text-align 属性（可以控制文本的对齐方式）

text-align: justify; 将文本隔开，使每行的宽度相等。
text-align: center; 可以让文本居中对齐。
text-align: right; 可以让文本右对齐。
text-align: left; 是默认值，它可以让文本左对齐。
width 属性

  width: 220px;

height 属性

  height: 20px;

strong 标签（加粗文本）
添加了 strong 标签后，浏览器会自动给元素添加这段样式：font-weight:bold;。

<strong>要加粗的文字</strong>

u 标签（给文本添加下划线）
添加了 u 标签后，浏览器会自动给元素添加这段样式：text-decoration: underline;。

<u>要添加下划线的文字</u>

em 标签（强调文本）
浏览器会自动给元素应用 font-style: italic;，文本会显示为斜体。

<em>要强调的文字</em>

s 标签（给文本添加删除线）
浏览器会自动给元素添加这段样式：text-decoration: line-through;。

<s>要添加删除线的文字</s>

hr 标签（创建水平线）
注意： HTML 中的 hr 是自闭合标签，所以我们不需要为它添加结束标签。
类似与文本分割线，常位于标题与文本之间。

为文本添加背景色
即在<style>标签为要添加的文字所在的元素中加入所需属性值。

• rgba() 颜色
  r = red 红色
  g = green 绿色
  b = blue 蓝色
  a = alpha 透明度

例如：

效果如下：

font-size 属性（调整元素中文本的大小）

font-size:27px;

• 设置多个标题元素的 font-size
  
  font-weight 属性（设置文本中字体的粗细）

font-weight:300;

同理可以设置多个标题元素的 font-weight。

line-height 属性（设置行间的距离）
可以用来设置每行文字所占据的垂直空间。

line-height:25px;

box-shadow 属性（给元素添加阴影）
该属性值是由逗号分隔的一个或多个阴影列表。
box-shadow 属性的阴影依次由下面这些值描述：

• offset-x 阴影的水平偏移量；
• offset-y 阴影的水平偏移量；
• blur-radius 模糊半径；
• spread-radius 阴影扩展半径；
• color

box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

opacity 属性（设置元素的透明度）
属性值为 1 代表完全不透明。
属性值为 0.5 代表半透明。
属性值为 0 代表完全透明。
ps：透明度会应用到元素内的所有内容，不论是图片，还是文本，或是背景色。

opacity: 0.7;

text-transform 属性（给文本添加大写效果）
text-transform 属性可以改变英文字母的大小写。
下面的表格展示了 text-transform 的不同值对文字 “Transform me” 的影响：

text-transform:uppercase;

调整锚点的悬停状态

  a {
    color: #000;
  }
  a:hover {
    color: blue;
  }

即超链接的颜色仍保持黑色，但在悬停时颜色变为蓝色。