css

第一和第二天pink老师css总结.1~2css知识点总结。1css基础选择器，css字体属性，css文本属性，css样式表，2css复合选择器，css显示模式。

1~2css

• 1 css
  • 简介
  • 语法规范
  • 代码风格
  • 选择器的作用
  • 基础选择器（选择器总结）
    • 标签选择器
    • 类选择器
      • 多类名选择器
    • id选择器
      • id选择器和类名选择器区别
    • 通配符选择器
  • css字体属性（字体总结）
    • 字体大小
    • 字体粗细
    • 字体样式
    • 字体的综合写法
  • css文本属性
    • 文本颜色
    • 文本对齐
    • 修饰文本
    • 文本缩进
  • 行间距
  • css样式表
    • 行内样式表（行内式）
    • 内部样式表（嵌入式）
    • 外部样式表（链接式）
  • Chrome(调试工具)
• 2 css
  • emmet语法
    • 快速生成html结构语法
    • 快速生成css样式语法
    • 快速格式化代码
  • css复合选择器（复合选择器总结）
    • what
    • 后代选择器
    • 子选择器
    • 并集选择器
    • 伪类选择器
      • 链接伪类选择器
      • focus伪类选择器
  • css显示模式（元素显示模式总结）
    • what
    • 元素显示模式分类
      • 块元素
        • 一行只能放一个块级元素
        • 高度，宽度，外边距以及内边距都可以控制
        • 默认宽度是容器（父级宽度）的100%
        • 容器可以包含任何标签
      • 行内元素
        • 一行可以放多个
        • 高，宽直接设置是无效的
        • 默认宽度是它本身内容的宽度
        • 行内元素只能容纳文本或其他行内元素
      • 行内块元素
        • 和相邻行内元素在一行，但他们之间会有空白间隙
        • 一行可以放多个行内块元素
        • 默认宽度是本身内容对的宽度
        • 高度，行高，外边距以及内边距都可以控制
    • 元素显示模式的转换
      • 转换为块元素：display:block;
      • 转换为行内元素：display:inline;
      • 转换为行内块：display: inline-block;
    • 单行文字垂直居中的代码
      • 让文字的行高等于盒子的高度 就可以让文字在当前盒子内垂直居中
        • 行高的上空隙和下空隙把文字挤到中间了，
        • 如果行高小于盒子高度,文字会偏上，
        • 如果行高大于盒子高度,则文字偏下。
    • css的背景（背景总结）
      • 背景颜色
        • background-color： 预定义颜色/十六进制/RGB代码;
        • background-color： transparent;
      • 背景图片
        • background-image: none|url(url);
      • 背景平铺
        • background-repeat: repeat|no-repeat|repeat-x|repeat-y
      • 背景图片位置
        • background-position：length/position(分别是 x和y坐标）;
          • 参数是方位名词
            • 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
            • 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
          • 参数是精确单位
            • 如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标
            • 如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中
          • 参数是混合单位
            • 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标
      • 背景图片固定
        • background-attachment：scroll（背景滚动）|fixed（背景固定）
      • 背景样式合写
        • background: transparent url(image.jpg) repeat-y fixed top;
      • 背景色半透明
        • background: rgba(0,0,0,0.3)；后面必须是四个值