CSS总结

CSS

1、基本语法 2、引入方式 3、选择器 4、属性 5、文档流

6、内联元素和块级元素 7、盒子模型 8、浮动 9、定位 10、层叠规则 11、CSS3

1、基本语法

2、引入方式

• 行内样式
• 内部样式表
• 外部样式表

3、选择器

• 通用选择器 *
• 标签选择器
• id 选择器
• class 选择器
• 属性选择器
• 派生选择器
  • 后代选择器
  • 子元素选择器
  • 相邻兄弟选择器
• 组合选择器
• 伪类选择器
• 选择器优先级

4、属性

• 单位

  • px
  • em：1em的默认大小是16px。可以通过下面这个公式将像素转换为em：**px/16=em
  • rem
  • vw
  • vh

• 背景

  Property	描述
  background-color	属性指定元素的背景色
  background-image	属性指定用作元素背景的图像。默认情况下，图像会重复，以覆盖整个元素。
  background-repeat	默认情况下，background-image 属性在水平和垂直方向上都重复图像。
  background-position	属性用于指定背景图像的位置
  background-attachment	属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动

  属性	描述
  background	在一条声明中设置所有背景属性的简写属性。
  background-attachment	设置背景图像是固定的还是与页面的其余部分一起滚动。
  background-clip	规定背景的绘制区域。
  background-color	设置元素的背景色。
  background-image	设置元素的背景图像。
  background-origin	规定在何处放置背景图像。
  background-position	设置背景图像的开始位置。
  background-repeat	设置背景图像是否及如何重复。
  background-size	规定背景图像的尺寸。

  body {
      background-image: url("paper.gif");
  }
  
  body {
    background-image: url("gradient_bg.png");
  }
  // 仅在水平方向重复
  body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
  }
  // 背景图像仅显示一次：
  body {
    background-image: url("tree.png");
    background-repeat: no-repeat;
  }
  
  // 把背景图片放在右上角：
  body {
    background-image: url("tree.png");
    background-repeat: no-repeat;
    background-position: right top;
  }
  //  属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）：
  body {
    background-image: url("tree.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
  }
  
  // 指定背景图像应随页面的其余部分一起滚动：
  body {
    background-image: url("tree.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: scroll;
  }
  
  // 属性简写顺序
  background-color
  background-image
  background-repeat
  background-attachment
  background-position
  
  body {
    background-color: #ffffff;
    background-image: url("tree.png");
    background-repeat: no-repeat;
    background-position: right top;
  }
  // 简写
  body {
    background: #ffffff url("tree.png") no-repeat right top;
  }
  

• 边框

  属性	描述
  border	简写属性，在一条声明中设置所有边框属性。
  border-color	简写属性，设置四条边框的颜色。
  border-radius	简写属性，可设置圆角的所有四个 border-*-radius 属性。
  border-style	简写属性，设置四条边框的样式。
  border-width	简写属性，设置四条边框的宽度。
  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	设置上边框的宽度。

• 文本

• 属性	描述
  color	设置文本颜色。
  direction	指定文本的方向 / 书写方向。
  letter-spacing	设置字符间距。
  line-height	设置行高。
  text-align	指定文本的水平对齐方式。
  text-decoration	指定添加到文本的装饰效果。
  text-indent	指定文本块中首行的缩进。
  text-shadow	指定添加到文本的阴影效果。
  text-transform	控制文本的大小写。
  text-overflow	指定应如何向用户示意未显示的溢出内容。
  unicode-bidi	与 direction 属性一起使用，设置或返回是否应重写文本来支持同一文档中的多种语言。
  vertical-align	指定文本的垂直对齐方式。
  white-space	指定如何处理元素内的空白。
  word-spacing	设置单词间距。

  // 设置文本的颜色
  body {
    background-color: lightgrey;
    color: blue;
  }
  
  // 文本的水平对齐方式
  h1 {
    text-align: center;
    text-align: left;
    text-align: right;
  }
  // 元素的垂直对齐方式
  img.top {
    vertical-align: top;
    vertical-align: middle;
    vertical-align: bottom;
  }
  
  // 文字装饰
  a {
    text-decoration: none;
    text-decoration: overline;
    text-decoration: line-through;
    text-decoration: underline;
  }
  
  // 文字大小写
  p.uppercase {
    text-transform: uppercase;
    text-transform: lowercase;
    text-transform: capitalize;
  }
  
  p {
    text-indent: 50px;  // 文字缩进
    letter-spacing: 3px;  // 字母间距
    line-height: 0.8;  // 行高
    word-spacing: 10px;  // 字间距
    white-space: nowrap;  //  空白
  }
  
  // 文字阴影
  h1 {
    text-shadow: 2px 2px;  // 最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）
    text-shadow: 2px 2px red;  // 接下来，向阴影添加颜色（红色）：
    text-shadow: 2px 2px 5px red;    // 向阴影添加模糊效果（5px）：
  }
  

• 字体

  Property	描述
  font	在一个声明中设置所有的字体属性
  font-family	指定文本的字体系列 Font Family："宋体
  font-size	指定文本的字体大小
  font-style	指定文本的字体样式（） normal 正常 italic 斜体 oblique 倾斜的文字
  font-variant	以小型大写字体或者正常字体显示文本。
  font-weight	指定字体的粗细。 font-weight: normal、 bold、900;（正常、加粗、）

• 列表

  属性	描述
  list-style	简写属性。在一条声明中设置列表的所有属性。
  list-style-image	指定图像作为列表项标记。
  list-style-position	规定列表项标记（项目符号）的位置。
  list-style-type	规定列表项标记的类型。

  ul.a {
    list-style-type: circle;
  }
  
  ul.b {
    list-style-type: square;
  }
  
  ol.c {
    list-style-type: upper-roman;
  }
  
  ol.d {
    list-style-type: lower-alpha;
  }
  
  ul {
    list-style-image: url('sqpurple.gif');
  }
  
  ul.a {
    list-style-position: outside;
  }
  
  ul.b {
    list-style-position: inside;
  }
  
  // list-style-type:none 属性也可以用于删除标记/项目符号。请注意，列表还拥有默认的外边距和内边距。要删除此内容， // 请在 <ul> 或 <ol> 中添加 margin:0 和 padding:0 ：
  
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  
  // 简写
  ul {
    list-style: square inside url("sqpurple.gif");
  }
  

• 表格

  属性	描述
  border	简写属性。在一条声明中设置所有边框属性。
  border-collapse	规定是否应折叠表格边框。
  border-spacing	规定相邻单元格之间的边框的距离。
  caption-side	规定表格标题的位置。
  empty-cells	规定是否在表格中的空白单元格上显示边框和背景。
  table-layout	设置用于表格的布局算法。

5、文档流

• 标准流

• 浮动流

• 定位流

  bottom	设置定位框的底部外边距边缘。
  clip	剪裁绝对定位的元素。
  left	设置定位框的左侧外边距边缘。
  position	规定元素的定位类型。
  right	设置定位框的右侧外边距边缘。
  top	设置定位框的顶部外边距边缘。
  z-index	设置元素的堆叠顺序。

6、内联元素和块级元素

7、盒子模型

8、浮动

9、定位

bottom	设置定位框的底部外边距边缘。
clip	剪裁绝对定位的元素。
left	设置定位框的左侧外边距边缘。
position	规定元素的定位类型。
right	设置定位框的右侧外边距边缘。
top	设置定位框的顶部外边距边缘。
z-index	设置元素的堆叠顺序。

10、层叠规则

11、CSS3