CSS样式

• CSS基础教程W3School

背景

• 常用背景属性

  background-color设置元素的背景颜色
  background-image把图像设置为背景。
  background-position设置背景图像的起始位置。
  background-repeat设置背景图像是否及如何重复。
  background-attachment背景图像是否固定或者随着页面的其余部分滚动。
  background简写属性，作用是将背景属性设置在一个声明中。
  简写顺序：color image repeat attachment position;

• h5新增属性
  background-size:px | % | cover | contain;

  background-size: 50px;
  输入一个值，对应的值等比例缩放
  background-size: 50px 150px;
  输入两个值，不成比例，图片将被拉伸
  background-size: cover;
  cover使图片填充整个页面 不顾图片的展示效果。把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
  background-size: contain;
  contain使整个图片按比例完全显示在页面内。把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

  background-clip: border-box|padding-box|content-box;

  background-clip:border-box;
  背景被裁剪到边框盒
  background-clip: padding-box;
  背景被裁剪到内边距框
  background-clip: content-box;
  背景被裁剪到内容框。

  • 线性渐变line-gradient

  • 径向渐变radial-gradient

    背景渐变gradient详解

边框/轮廓

• 常用边框属性

  border-width规定边框的宽度。
  border-style：dotted | solid | double | dashed; 规定边框的样式。
  border-color规定边框的颜色。
  border简写属性，顺序：border-width border-style border-color

• 新增边框属性

  border-radius: 1-4 length|% / 1-4 length|%;
  “/”前是指圆角的水平半径，而“/”后是指圆角的垂直半径

  border-radius属性简介
  border-radius属性详解

• 轮廓

  outline-color设置轮廓的颜色。
  outline-style设置轮廓的样式。
  outline-width设置轮廓的宽度。
  outline-offset: length|inherit;轮廓与边框边缘的距离。
  outline简写属性

  outline属性介绍

• border与outline的区别

  1、outline是不占空间的，既不会增加额外的width或者height
  2、outline有可能是非矩形的
  3、border 可应用于几乎所有有形的html元素，而 outline 是针对链接、表单控件和ImageMap等元素设计
  4、outline 的效果将随元素的 focus 而自动出现，相应的由 blur 而自动消失。这些都是浏览器的默认行为，无需JavaScript配合CSS来控制。

  border与outline的区别

文本

• 常用字体属性

  font-family 设置字体系列。多个用逗号隔开
  font-size 设置字体的尺寸。
  font-style:normal(文本正常显示)|italic(文本斜体显示)|oblique (文本倾斜显示)
  font-weight:bold|bolder|normal|lighter|100~900整数 设置字体的粗细
  line-height 设置行高
  font简写属性顺序： style weight size/line-height family

• 常用文本属性

  color设置文本颜色
  direction设置文本方向。
  line-height设置行高。
  text-align对齐元素中的文本。
  vertical-align:top|middle|bottom。
  text-decoration：none|underline(下划线)|overline(上划线)|（line-throung）|blink(闪烁） 添加修饰。
  text-indent缩进元素中文本的首行
  letter-spacing设置字符间距。
  word-spacing设置字间距。
  white-space设置元素中空白的处理方式。

• h5新增文本属性
  text-shadow：h-shadow v-shadow blur color;
  word-wrap:normal|break-word;

  CSS3的文字阴影—text-shadow详细讲解
  IE下实现类似css3 text-shadow效果的方法

盒阴影

• box-shadow

  语法：
  E {box-shadow:inset x-offset y-offset blur-radius spread-radius color}
  换句说：
  对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}

  box-shadow详解

颜色透明

• rgba

  background: rgba(颜色值,颜色值,颜色值,透明度);

• opacity

  background: rgb(颜色值,颜色值,颜色值);
  opacity: 0~1;

• 区别

  相同之处就是背景色完全是一样的
  RGBA设置透明度可以不影响其他的元素属性,opacity影响

  rgba与opacity详情

列表

• 列表常用属性

  • list-style-type:disc(实心圆点)|square（方块）|circle（空心圆点）|none
  • list-style-image:url(引入图片的路径)
  • list-style-position:inside|outside
  • list-style简写属性顺序：type position image;

表格

• 表格常用属性

  • border-collapse：
    separate默认值。边框会被分开。不会忽略border-spacing 和 empty-cells 属性。
    collapse如果可能，边框会合并为一个单一的边框.会忽略 border-spacing 和 empty-cells 属性。
  • border-spacing设置分隔单元格边框的距离。
  • caption-side设置表格标题的位置。
  • empty-cells设置是否显示表格中的空单元格。
  • table-layout设置显示单元、行和列的算法。