前端学习之CSS

CSS表

CSS样式(背景、文字、字体、链接、列表、表格、轮廓)

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

2. 属性	描述
   color	设置文本颜色
   direction	设置文本方向。
   line-height	设置行高。
   letter-spacing	设置字符间距。
   text-align	对齐元素中的文本。
   text-decoration	向文本添加修饰。
   text-indent	缩进元素中文本的首行。
   text-shadow	设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。
   text-transform	控制元素中的字母。
   unicode-bidi	设置文本方向。
   white-space	设置元素中空白的处理方式。
   word-spacing	设置字间距。

3. 属性	描述
   font	简写属性。作用是把所有针对字体的属性设置在一个声明中。
   font-family	设置字体系列。
   font-size	设置字体的尺寸。
   font-size-adjust	当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）
   font-stretch	对字体进行水平拉伸。（CSS2.1 已删除该属性。）
   font-style	设置字体风格。
   font-variant	以小型大写字体或者正常字体显示文本。
   font-weight	设置字体的粗细。

4. a:link {color:#FF0000;}		/* 未被访问的链接 */
   a:visited {color:#00FF00;}	/* 已被访问的链接 */
   a:hover {color:#FF00FF;}	/* 鼠标指针移动到链接上 */
   a:active {color:#0000FF;}	/* 正在被点击的链接 */
   

5. 属性	描述
   list-style	简写属性。用于把所有用于列表的属性设置于一个声明中。
   list-style-image	将图象设置为列表项标志。
   list-style-position	设置列表中列表项标志的位置。
   list-style-type	设置列表项标志的类型。

6. 属性	描述
   border-collapse	设置是否把表格边框合并为单一的边框。
   border-spacing	设置分隔单元格边框的距离。
   caption-side	设置表格标题的位置。
   empty-cells	设置是否显示表格中的空单元格。
   table-layout	设置显示单元、行和列的算法。

7. 属性	描述	CSS
   outline	在一个声明中设置所有的轮廓属性。	2
   outline-color	设置轮廓的颜色。	2
   outline-style	设置轮廓的样式。	2
   outline-width	设置轮廓的宽度。

CSS 框模型

• padding-bottom	设置元素的下内边距。
  padding-left	设置元素的左内边距。
  padding-right	设置元素的右内边距。
  padding-top	设置元素的上内边距。

• 属性	描述
  border	简写属性，用于把针对四个边的属性设置在一个声明。
  border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
  border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
  border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
  border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中。
  border-bottom-color	设置元素的下边框的颜色。
  border-bottom-style	设置元素的下边框的样式。
  border-bottom-width	设置元素的下边框的宽度。
  border-left	简写属性，用于把左边框的所有属性设置到一个声明中。
  border-left-color	设置元素的左边框的颜色。
  border-left-style	设置元素的左边框的样式。
  border-left-width	设置元素的左边框的宽度。
  border-right	简写属性，用于把右边框的所有属性设置到一个声明中。
  border-right-color	设置元素的右边框的颜色。
  border-right-style	设置元素的右边框的样式。
  border-right-width	设置元素的右边框的宽度。
  border-top	简写属性，用于把上边框的所有属性设置到一个声明中。
  border-top-color	设置元素的上边框的颜色。
  border-top-style	设置元素的上边框的样式。
  border-top-width	设置元素的上边框的宽度。

• 属性	描述
  margin	简写属性。在一个声明中设置所有外边距属性。
  margin-bottom	设置元素的下外边距。
  margin-left	设置元素的左外边距。
  margin-right	设置元素的右外边距。
  margin-top	设置元素的上外边距。

CSS定位

• 属性	描述
  position	把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
  top	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  right	定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移。
  left	定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  overflow	设置当元素的内容溢出其区域时发生的事情。
  clip	设置元素的形状。元素被剪入这个形状之中，然后显示出来。
  vertical-align	设置元素的垂直对齐方式。

CSS 选择器

1. CSS 元素选择器 div{}
2. CSS 类选择器 .class{}
3. CSS ID 选择器 #div{}
4. CSS 属性选择器 name{}
5. CSS 后代选择器 div p b{}
6. CSS 子元素选择器 div>a{}
7. CSS 相邻兄弟选择器 html > body table + ul {}
8. CSS 伪类 属性 描述 CSS
   :active 向被激活的元素添加样式。
   :focus 向拥有键盘输入焦点的元素添加样式。
   :hover 当鼠标悬浮在元素上方时，向元素添加样式。
   :link 向未被访问的链接添加样式。
   :visited 向已被访问的链接添加样式。
   :first-child 向元素的第一个子元素添加样式。

css高级

• 属性	描述
  height	设置元素的高度。
  line-height	设置行高。
  max-height	设置元素的最大高度。
  max-width	设置元素的最大宽度。
  min-height	设置元素的最小高度。
  min-width	设置元素的最小宽度。
  width	设置元素的宽度。

• 属性	描述
  clear	设置一个元素的侧面是否允许其他的浮动元素。
  cursor	规定当指向某元素之上时显示的指针类型。
  display	设置是否及如何显示元素。
  float	定义元素在哪个方向浮动。
  position	把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
  visibility	设置元素是否可见或不可见。

• 属性	描述	CSS
  border-image	设置所有 border-image-* 属性的简写属性。	3
  border-radius	设置所有四个 border-*-radius 属性的简写属性。	3
  box-shadow	向方框添加一个或多个阴影。

• background-clip	规定背景的绘制区域。	3
  background-origin	规定背景图片的定位区域。	3
  background-size	规定背景图片的尺寸。

• 属性	描述	CSS
  hanging-punctuation	规定标点字符是否位于线框之外。	3
  punctuation-trim	规定是否对标点字符进行修剪。	3
  text-align-last	设置如何对齐最后一行或紧挨着强制换行符之前的行。	3
  text-emphasis	向元素的文本应用重点标记以及重点标记的前景色。	3
  text-justify	规定当 text-align 设置为 “justify” 时所使用的对齐方法。	3
  text-outline	规定文本的轮廓。	3
  text-overflow	规定当文本溢出包含元素时发生的事情。	3
  text-shadow	向文本添加阴影。	3
  text-wrap	规定文本的换行规则。	3
  word-break	规定非中日韩文本的换行规则。	3
  word-wrap	允许对长的不可分割的单词进行分割并换行到下一行。

• 函数	描述
  translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
  translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
  translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
  scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
  scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
  scaleY(n)	定义 2D 缩放转换，改变元素的高度。
  rotate(angle)	定义 2D 旋转，在参数中规定角度。
  skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
  skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
  skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

• 属性	描述	CSS
  transition	简写属性，用于在一个属性中设置四个过渡属性。	3
  transition-property	规定应用过渡的 CSS 属性的名称。	3
  transition-duration	定义过渡效果花费的时间。默认是 0。	3
  transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。	3
  transition-delay	规定过渡效果何时开始。默认是 0。

• 动画

  • @keyframes myfirst
    {from {background: red;}
    to {background: yellow;}}
    

  • @keyframes myfirst
    {0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}}