《HTML&&CSS3入门经典》(7)——层叠样式表

  1. 继承:CSS的一项强大特性,当一个属性被应用于某一元素后,该属性经常会被子元素(规则声明所在的元素中包含的元素)所“继承”(inherited)。如果另一条规则更具体地指明所应用的元素,它会覆盖<body>元素或任何包含元素中的任何相关联的属性。
  2. 可以添加CSS规则的位置:
    • 外部样式表(external style sheet):将CSS规则放在一个独立文件中
    • 内部样式表(internal style sheet):位于一个<style>元素内,该元素位于文档的<head>元素中
    • 内联样式规则(inline style rule):位于一个可以带有style特性的元素中,作为style特性的值
  3. <link>元素:用于在网页中描述两个文档之间的关系。这种链接类型与<a>元素不同,因为两个文档是自动关联的——用户不必通过单击任何东西以激活链接。<link>元素永远是空元素,且当与样式表一同使用时,它必须带有两个特性:rel和href。
    • rel特性:必须属性。用于指定包含该链接的文档与链接指向文档间的关系。用于链接样式表时的键值是“stylesheet”
    • href特性:用于指定链接指向文档的URL
    • media特性:用于指定应该用于该文档的输出设备
  4. <style>元素:使用时,尽管并非强制,但应该永远带有type属性
  5. 外部样式表的优势
  6. CSS属性:CSS规则包含了两个部分:一个选择器,用于指定规则应用的元素;以及一个或多个属性,用于控制这些元素的呈现。属性有如下分组:
    • 字体
    • 文本
    • 背景
    • 边框
    • 外边距
    • 内边距
    • 尺寸
    • 定位
    • 轮廓
    • 表格
    • 列表与标记
    • 生成内容
    • 分类

    除此之外:还有一个新的CSS版本,即关注于“模块”(module)的CSS3

  7. 控制文本
    • font-family属性:指定应用CSS规则的元素中所有文本所应使用的字型
    • font-size属性:为字体设置尺寸
      • 长度:px em ex pt in cm pc mm rem vm vh
      • 绝对尺寸:xx-small x-small small medium large x-large xx-large
      • 相对尺寸:smaller larger
      • 百分比:2% 10% 25% 50% 100%
    • font-weight:基于浏览器算法,可能取值为:normal bold bolder lighter 100 200 300 400 500 600 700 800 900
    • font-style属性:指定字体为normal、italic(斜体)、oblique(伪斜体)
    • font-variant属性:可能去职:normal和small-caps(小型大写字体)
  8. 文本格式化
    • color:指定文本颜色
    • text-align:指定文本在包含元素中的水平对齐
    • vertical-align:指定文本你在包含元素中的垂直对齐
    • text-decoration:指定文本是否应具有下划线、上划线或中划线
    • text-indent:指定从左侧边框起文本的锁紧
    • text-transform:指定元素内容应全部为大写、小写,或首字母大写
    • text-shadow:指定文本应具有投影
    • text-spacing:控制字符间宽度
    • word-spacing:控制单词间的距离
    • white-spacing:指定空格是否应该被压缩、保留或阻止换行
    • direction:指定文本行文方向(类似于dir特性)
  9. 文本伪类
    • first-letter
    • first-line
  10. 选择器
    • 通用选择器:由一个“星号”(*)表示
    • 类型选择器:匹配所有在由逗号分隔的列表中指定的元素
    • 类选择器
    • id选择器:#
    • 子选择器:大于号>连接符
    • 后代选择器:连接符是空格
    • 相邻兄弟选择器:连接符加号+
    • 一般兄弟选择器:连接符~
    • 特性选择器
  11. 长度
    • 相对单位:
      • px:一个像素即是屏幕分辨率中最小的单位
      • em:1单位em与当前字体的高度等价。em单位是最常用于测量包含文本的元素以及控制文本间距的长度单位。通常认为该值是从小写字母m的宽度得出
      • ex:应为小写字母x的高度
      • rem:与根元素的字体尺寸等价——即一个“根em”
      • vh:等价于百分之一的视野高度
      • vw:
    • 绝对单位
      • pt:磅
      • pc:pica
      • in:英寸
      • cm:厘米
      • mm:毫米
    • 百分比:
  12. 盒子模型
    • 三个重要属性:bordermarginpadding
    • 对于外边距而言,当一个盒子的下外边距与另一个盒子的上外边距相遇时,只有其中盒子尺寸较大的一个会显示出来(如果两个盒子尺寸相同,则外边距为两个外边距中较大的一个)
    • border属性:
      • border-color属性:进一步设置border-bottom-color、border-right-color、border-top-color、border-left-color

      • border-style属性:指定边框为实现、虚线还是双股线,或者其他可能取值。具体如下:
        • none:不存在边框(等价于border-width:0)
        • solid:实心线
        • dotted:一系列的点
        • dashed:一系列短线
        • double:两条实心线
        • groove:边框具有切入效果
        • ridge:与groove效果相反
        • inset:使盒子看起来内嵌于页面中
        • outset:使盒子看起来突出于画布之外
        • hidden:与none相同,但作为表格元素的边框冲突解决方案

        同样设置border-bottom-style、border-right-style、border-top-style、border-left-style

      • border-width属性:通常以像素为单位。同样可设置border-bottom-width、border-right-width、border-top-width、border-left-width
      • 缩略形式表达边框属性,如p {border: 4px solid red;}值与值之间除空格外不能有任何内容。同理可设置border-bottom、border-right、border-top、border-left
    • padding属性:多数使用像素指定,可以使用任何之前介绍过的长度单位、百分比或关键字inherit。元素的内边距默认不会继承,除非使用关键字inherit。可指定每一边的不同内边距大小:padding-bottom、padding-top、padding-left、padding-right
    • marging属性:取值与padding属性完全相同
    • 内容盒子的尺寸
      • height:盒子高度
      • width:盒子宽度
      • line-height:文本行的高度(即行距)
      • max-height:盒子最大高度
      • min-height:盒子最小高度
      • max-width:盒子最大宽度
      • min-width:盒子最小宽度
      • overflow:用于处理当盒子内容比所允许空间更大时:
        • hidden:溢出内容被隐藏
        • visible:溢出内容在盒子外可见
        • scroll:盒子将添加滚动条以允许用户滚动查看其内容
        • auto:盒子在必要时添加滚动条
        • inherit:盒子从父元素继承overflow属性
    • W3C盒子模型和IE盒子模型
Table of Contents