CSS Basic

Posted on Edited on In , ,

Cascading Style Sheets

层叠次序:

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表
  4. 内联样式

CSS规则:
selector {declaration1; declaration2; … declarationN}
selector {property: value}

选择器的分组: 用逗号将需要分组的选择器分开; 被分组的选择器可以分享相同的声明
声明的分组: 在各个声明的最后使用分号
结合选择器和声明的分组:
CSS继承: 子元素从父元素继承属性
派生选择器: 依据元素在其位置的上下文关系来定义样式; 后代/子元素/相邻兄弟选择器

CSS元素选择器

  • 元素选择器(类型选择器)
  • 通配符选择器: * , 与任何元素匹配
  • 类选择器:
    • 结合通配选择器: 选择所有类名相同的元素, 可以忽略通配选择器
    • 结合元素选择器
    • 多类选择器
  • ID选择器:
    • 只能在文档中使用一次
    • 不同使用ID词列表; ID选择器不能结合使用
    • ID能包含更多含义
  • 属性选择器:
    • *[property]{ }
    • element[property]{ }
    • element[property][property]{ }
    • element[property=value]{ }
    • 属性与属性值必须完全匹配
    • element[property~=value]{ }
    • 部分值属性选择器与点好类名记法的区别
    • 子串匹配属性选择器:
    • *[lang|=”en”]{ } : 选择lang属性等于en或以en-开头的所有属性
  • 后代选择器(包含选择器): 空格作为选择器之间的结合符
  • 子元素选择器: > , 大于号作为结合符
  • 相邻兄弟选择器: + , 加号作为结合符
  • CSS伪类: 用于向某些选择器添加特殊的效果
    • selector : pseudo-class { }
    • 锚伪类: :link, :visited, :hover, :active; 使用顺序有要求
    • :first-child伪类
    • :lang伪类
    • :focus伪类
    • 伪类与CSS类的配合使用
  • CSS伪元素: 用于向某些选择器设置特殊效果
    • selector : pseudo-element {}
    • :first-line
    • :first-letter
    • :before
    • :after
    • 伪元素与CSS类的配合使用

CSS样式

  • CSS背景
    • background
    • background-color
    • background-image:url();
    • background-repeat
    • background-position
    • background-attachment
  • CSS文本
    • color
    • direction
    • line-height
    • letter-spacing
    • text-align
    • text-decoration
    • text-indent
    • text-shadow
    • text-transform
    • unicode-bidi
    • white-space
    • word-spacing
  • CSS字体
    • 通用字体
      • Serif
      • Sans-serif
      • Monospace
      • Cursive
      • Fantasy
    • 特定字体
    • font-family
    • font-style
    • font-variant
    • font-weight
    • font-size
  • CSS链接
    • a:link
    • a:visited
    • a:hover
    • a:active
    • hover位于link和visited之后, 位于active之前
    • text-decoration; background-color;
  • CSS列表
    • list-style
    • list-style-type
    • list-style-image
    • list-style-position
  • CSS表格
    • border: 1px solid green;
    • text-align; vertical-align;
    • border-collapse
    • border-spacing
    • caption-side
    • empty-cells
    • table-layout
  • CSS轮廓
    • outline
    • outline-color
    • outline-style
    • outline-width

CSS框模型

  • 元素内容; 内边距; 边框; 外边距
  • 上, 右, 下, 左
  • padding
  • border
    • border-style
    • border-width
    • border-color
  • margin
  • 值复制: 左用右, 下用上, 右用上
  • 外边距合并: 两个垂直外边距相遇将形成一个外边距, 高度取较大者

CSS定位

  • 一切皆为框: 用display属性改变生成的框的类型
  • CSS定位机制: 普通流, 浮动, 绝对定位
  • position: static/relative/absolute/fixed
  • overflow/clip/z-index
  • 相对定位: 相对于”起点”进行移动
  • 绝对定位: 相对于最近的已定位祖先元素进行移动; 相对于最初的包含块进行移动;
  • 固定定位: 包含块是视窗本身的绝对定位
  • CSS浮动: