css相关内容:常见样式

在进行前端样式优化的过程中，还需要用到许多常见的样式内容，下面用简单的HTML页面介绍常见的样式。

原始页面代码如下：

      <!-- <div class="top">top</div>
      <div class="middle">middle</div> -->
      <div class="bottom">bottom</div>

原始页面如下：

颜色相关设置

在CSS中，颜色的表示方式有很多种。

用颜色名表示

CSS中可以直接用颜色的英文名称进行表示，对一些常见的颜色，这个方法简单快速，但对于复杂的颜色来说，这个方法不友好。

 background: yellow;

效果如下：

六位十六进制的数值表示颜色

用六位十六进制的数值表示颜色，每一位的取值范围为0~f，其利用的原理是三元色混合原理。其中前两位表示的为红光，中间两位表示为绿光，最后两位表示为蓝光。三个颜色的范围为00~ff，其中00表示没有颜色，ff表示这个颜色的光拉满。

表示方法为：#加上六位十六进制数字。

  background: #817764;

效果如下：

rgb(red，green，blue)表示颜色

这个类似于上述的六位十六进制表示方法，此方法是将颜色的数值转化为10进制，每个颜色的取值范围为0~255，0表示没有颜色，255表示颜色拉满。

  background: rgb(111, 166, 233);

效果如下：

特殊rgba(red，green，blue，alpha)

此方法在rgb基础上加了一个alpha属性，意为透明度。alpha的取值为0~1，0表示不透明，1表示完全透明。此外，这个属性只针对背景颜色，不涉及到整个元素的透明度设置。

background: rgba(216, 48, 2, 0.8);

效果如下：可以看到文字部分并没有变成透明状态。

透明度 opacity

此属性是对整个元素的透明度进行设置。也就是说，不只是背景，其他内容也可以变成透明状态。此属性的取值为0~1，其中1为完全不透明状态，0为完全透明状态。

  opacity: 0.5;
  font-size: 40px; 为了效果直观，增大了字号
  color: #fff; 改变了字体颜色

效果如下：

颜色渐变

颜色渐变用到的是linear-gradient。此属性也是颜色属性，属于渐变色，需要自己创建。linear-gradient(方向，颜色，颜色...) 需要传输的参数有方向、颜色(其中颜色可以有多种，没有准确的数量限制)。方向参数为角度，也就是控制颜色超哪个方向进行渐变，这个角度计算为以十二点钟为起始边，最终边与起始边的夹角，最终边所指的方向即为渐变方向。

background: linear-gradient(30deg, red, green);

效果如下：

透明色transparent

此属性也是颜色属性。顾名思义，就是完全透明的颜色。

 background: transparent;

效果如下：

字体相关设置

字体颜色 color

字体颜色用color属性进行设置。color可以使用上面颜色相关的所有内容(上面演示中用的是背景作为对象)。

  color: #b50000;

效果如下：

font 复合属性

font的相关属性介绍如下：

  font-size:设置字体大小
  font-weight:设置字体粗细
  font-style:设置字体风格 normal正常 italic斜体...

演示代码如下：

  font-size: 40px;
  font-weight: 500;
  font-style: italic;

效果如下：

text-decoration 设置文字是否有修饰线

此属性主要有四个值：none无修饰、 underline下划线、 line-through中划线 、overline上划线。

  text-decoration: underline;

效果如下：

text-align 规定文字的水平对齐方式

此属性有三个值：right右边、 left左边、 center居中。

  text-align: center;

效果如下：

line-height 设置行高

  line-height: 10px;

效果如下：

背景相关设置 background

background 是一个复合属性，其相关设置如下：

background-color 设置背景颜色
background-image 设置背景图片 url函数指定图片地址 绝对地址，相对地址
background-repeat 设置背景图片是否平铺 no-repeat不平铺 repeat平铺 repeat-x x轴平铺 repeat-y y轴平铺
background-size 设置背景图片大小 cover把所在的容器铺满
background-position 设置背景图片位置 center居中
background-attachment:fixed; 设置背景图片不随浏览器的滚动而滚动

效果如下(演示第一个)：

列表相关 list-style

此属性用于设置列表的样式。其中用得较多的一个是list-style:none，用于去除列表的序号以及列表的列表点。

  list-style: none;

效果如下：

边框属性 border-radius

此属性可以设置边框为圆角边框。值越大圆角弧度越大，可以单独对角设置，设置方法为顺时针单独设置每个角。

  border-radius: 20px;

效果如下：

阴影效果 box-shadow

此属性有四个属性： 水平、 垂直、 模糊度、 颜色。

  box-shadow: 10px 10px 10px red;

效果如下：

保持图片不变形属性

此属性是保持图片不变形 object-fit:cover。

  object-fit: cover;

效果如下(图片没有受到放大的影响)：

定位 position

此属性用于设置定位模式，其值如下：

  static 代表静态模式 常态模式 对left，right，bottom，top，z-index不识别
  fixed 代表固定模式 不随浏览器的滚动而滚动，释放自己原来的空间，参考物是整个浏览器
  relative 代表相对模式 随浏览器的滚动而滚动，保留自己原来的空间，参考物是自己原来的位置
  absolute 代表绝对模式 随浏览器的滚动而滚动，释放自己原来的空间，参考物是整个浏览器
  结合模式：父级使用relative，子集元素使用absolute 子集元素随浏览器的滚动而滚动，释放自己原来的空间，参考物是父级元素

特殊的属性 z-index

此属性是设置元素的层叠关系，值越大越靠上。

设置定位层级 z-index值越大越靠上

到此，常见的样式内容全部介绍完毕。