第十九天学习：表样式+外边框样式

关键字：表样式+外边框样式

学习计划：

  • 表
    • border-collapse特性
    • border-spacing特性
    • capton-side特性
    • empty-cells特性
    • table-layout特性
  • 外边框（轮廓）
    • outline-width特性
    • outline-style特性
    • outline-color特性
    • outline特性（简写形式）
  • ：focus伪类和：active伪类
  • 生成的内容
    • content特性
  • 其他特性
    • cursor特性
    • display特性
    • visibility特性

学习记录：

  • 表
    • 通常用于<table>、<td>和<th>元素的特性包括：
      • padding：用于设置表单元格的边框和它的内容之间的空间量--这个特性对于表的可读性来说非常重要
      • border：用于设置表边框的特性
      • text和font：用于改变单元格中编写的任何内容的外观
      • text-align：用于设置表单元格中内容的水平对齐方式，包括左、右或居中3种对齐方式
      • vertical-align：用于设置表单元格中内容的垂直对齐方式，包括顶部、中部或底部3种对齐方式
      • width：用于设置表或单元格的宽度
      • height：用于设置单元格的高度（通常也用于行）
      • background-color：用于改变表或单元格的背景色
      • background-image：用于在表或单元格中添加一幅背景图像
    • border-collapse特性
      • 设置表格的边框是否合并为一个单一的边框，还是像在标准的html中那样分开显示
      • 可能的值：
        • separate：默认值，边框会被分开。不会忽略border-spacing和empty-cells属性
        • collapse：如果可能，边框会合并为一个单一的边框。会忽略border-spacing和empty-cells属性
    • border-spacing特性
      • 指定相邻单元格的边框之间的距离，它可以采用一个值或两个值，这些值应当是长度单位，
      • 如果设置一个值，则该值将同时应用于垂直和水平边框，如果指定两个值，则第一个值用于水平间隔，第二个值用于垂直间隔
    • capton-side特性
      • 用于指定表格标题的位置
      • 可能的值：
        • top：默认值，把表格标题定位在表格之上
        • right：标题出现在表的右边
        • bottom：标题出现在表的下方
        • left：标题出现在表的左边
    • empty-cells特性
      • 指示当单元格没有内容时是否显示它的边框
      • 可能的值：
        • show：即使单元格为空，也会显示边框
        • hide：如果单元格为空，将隐藏边框
    • table-layout特性
      • 用来显示表格单元格、行、列的算法规则
      • 固定表格布局：
        • 在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关
        • 通过使用规定表格布局，用户代理在接收到第一行后就可以显示表格
      • 自动表格布局：
        • 在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。
        • 此算法有时会较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容
      • 可能的值：
        • automatic：默认，列宽度由单元格内容设定
        • fixed：列宽度由表格款的和列宽度设定
  • 外边框（轮廓）
    • 轮廓是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
    • outline-width特性
      • 指定轮廓的宽度
      • 它的值必须是长度值或者thin、medium、thick中的某一个值，这一点类似于border-width属性
    • outline-style特性
      • 指定轮廓的样式，这些线将环绕着框，它的值必须是border-style特性所用的某个值
    • outline-color特性
      • 用于指定轮廓的颜色，它的值必须是颜色名、十六进制颜色或者RGB值
    • outline特性（简写形式）
      • 它用于指定前面讨论的3中特性中任意一种特性的值，并且可以采用任意顺序
  • ：focus伪类和：active伪类
    • 当一个元素获得焦点时，它是在外观上趋向于与其他元素稍有不同。
    • :focus伪类可用于在元素获得焦点时将一些额外的规则与该元素相关联
    • :active伪类可用于当元素被激活（例如用户点击链接）时将更多的样式与这些元素相关联
  • 其他特性
    • cursor特性
      • 用于指定显示应该给用户的鼠标光标类型，当使用图像作为表单上的提交按钮时通常实现这个特性
      • 默认情况下，当用户将鼠标指针悬停在一个链接上时，光标将从指针形状改为手状。但是，对于表单上的提交按钮不会发生这种情况。
      • 可能的值：
        • auto：默认，浏览器设置的光标
        • crosshair：光标呈现为指示链接的指针（一只手）
        • move：光标指示某对象可以被移动
        • e-resize：光标指示矩形框的边缘可被向右（东）移动
        • ne-resiz：向上及向右移动（北东）
        • nw-resize：向上左移动
        • n-resize：向上移动
        • se-resize：向下右移动
        • sw-resize：向下左移动
        • s-resize：向下移动
        • w-resize：向左移动
        • text：指示文本
        • wait：指示程序正忙（通常是一只表或沙漏）
        • help：指示可用的帮助（通常是一个问号或一个气球）
    • display特性
      • 将元素或框强制为与用户期望类型不同的框
      • 值：
        • inline：以使传统的块级框成为内联框
        • none：用于表明不显示框
    • visibility特性
      • 可用于隐藏框，使其不可见，但是框仍然会影响页面的布局（即使看不到框的内容）
      • 可以选择使用visibility特效隐藏错误信息以便仅在用户需要看到这个内容时才显示，或者隐藏测试的答案直到用户选择了某个选项
      • 可能的值：
        • visible：向用户显示框和它的内容
        • hidden：框和它的内容不可见，但这些内容仍然会影响页面的布局
        • collapse：该值仅用于动态的表列和行效果，此值可删除一行或一列，但是不会影响表格的布局，被行货列占据的空间会留给其他内容使用。如果这值用在其他的元素上，会呈现“hidden”

扩展阅读：

  • CSS伪类
    • 伪类用于向某些选择器添加特殊的效果
    • 语法：
      • elector：pseudo-class{property：value}
    • 属性：
      • :active：向被激活的元素添加样式
      • :focus：向拥有键盘输入焦点的元素添加样式
      • :hover：当鼠标悬浮在元素上方时，向元素添加样式
      • :link：向未访问的链接添加样式
      • :visited：向已被访问的链接添加样式
      • :first-child：向元素的第一个子元素添加样式
      • :lang：向带有指定lang属性的元素添加样式
  • CSS伪元素
    • 用于向某些选择器设置特殊效果
    • 语法：
      • select：pseudo-element{property：value}
    • 属性：
      • :first-letter：向文本的第一个字母添加特殊样式
      • :first-line：向文本的首行添加特殊样式
      • :before：在元素之前添加内容
      • :after：在元素之后添加内容

问题的记录与解答：

posted @ 2016-07-27 17:31  桂  Views(194)  Comments(0)    收藏  举报