Menu

• 第十一章 表布局
  • dispaly
  • 表层
  • caption-side
  • border-collapse
  • border-spacing
  • empty-cells
  • cells边框合并规则
  • 表大小
    • 水平对齐
    • 垂直对齐
• 第十二章 列表与生成内容
  • list-type-style
  • list-style-image
  • list-style-positon
  • list-stype 类似于border集合属性
  • tag:before tag:after 伪元素
  • quites 设置引号类型
  • counter-reset（创建&重置） counter-increment（递增值）counter属性
  • counters function 为嵌套列表自动追加计数器
• 第十三章 用户界面样式
  • outline 轮廓
• 第十四章 非屏幕媒体
  • 分页
  • page-break-after & page-break-before：always 定义分页行为
  • page-break-after & page-break-before：left or right 打印纸张位置
  • page-break-after & page-break-before：avoid 不分页
  • page-break-inside：avoid 元素内部不分页

第十一章 表布局

dispaly

dispaly

• 表层

  • 单元格cell会在最上一层，如果在cell应用背景色，就会覆盖下面层应用的背景色；

    
    
    表6层

• caption-side

  • caption-side 属性设置表格标题的位置。
  • 该属性指定了表标题相对于表框的放置位置。表标题显示为好像它是表之前（或之后）的一个块级元素。
  • top 默认值。把表格标题定位在表格之上。
  • bottom 把表格标题定位在表格之下。

• border-collapse

  • border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示（默认表格边框是分隔显示）。
  • separate ：默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
  • collapse：如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

  • collapse：在collapse模式下，对行和行框应用padding无效；

    
    
    separate & collapse

• border-spacing

  • border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边 框分离”模式）。
  • 规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。
  • 如果定义一个 length 参数，那么定义的是水平和垂直间距。
  • 如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。
  • 在border-spacing：separate 模式中，不能给行、行组、列、列祖添加border；

table.separate {border-collapse: separate; border-spacing:3px 10px; }

• empty-cells
  • empty-cells 属性设置是否显示表格中的空单元格（仅用于“separate”模式）。

table.separate td {empty-cells: hide;}

border-separate 模式下应用 empty-cells

• cells边框合并规则

  • 如果border-style为hidden：权重最高

  • 如果border-style为none：权重最低（默认）

  • 以下都是在其它样式一样的情况下比较：

  • 从左到右、从上到下: 左右相邻，左边权重高；

  • 从里到外：cell > row > colum > table ;

  • border-style从粗到细：线的样式粗的权重高 double > solid > dashed > dotted；

  • border-width从粗到细：粗的权重高；

  • 表大小

    • 水平对齐
      • text-align
    • 垂直对齐
      • vertical-align：
        • top
        • middle
        • bottom

        • baseline（对第一行中最低的哪个单元格的基线）

          
          
          baseline对齐

• 第十二章 列表与生成内容

• list-type-style

  • 如果对一个有序列表中的其中一个设置：list-type-style：none，只是序列前面的数字隐藏。这个list-item还是算在所有计数里面；

  • 嵌套列表的list-type-style是可继承的。如果要单独设置。需要显示声明；否则浏览器会有默认的样式；

  • list-style-image

    • 可继承，嵌套列表自动继承祖先的 list-style-image，如果不要继承，覆盖即可；

ul li {list-style-image: url(imagepath.jpg); }

• list-style-positon
  • 默认值是：outside
  • 该属性用于声明列表标志相对于列表项内容的位置。外部 (outside) 标志会放在离列表项边框边界一定距离处，不过这距离在 CSS 中未定义。内部 (inside) 标志处理为好像它们是插入在列表项内容最前面的行内元素一样。

ul {list-style-position: inside;}

• list-stype
  • 简写属性在一个声明中设置所有的列表属性。

ul {list-style: square inside url('image_path.gif')}

• tag:before tag:after 伪元素
  - :before 伪元素在元素之前添加内容。
  - :after 伪元素在元素之后添加内容。
  - 由content属性插入的内容如果有css保留符号会直接插入；
  - 如果要插入回车，需要用十六进制的unicode值；
  - 如果content识别不了要插入的资源，则自动忽略；

p:after
{
content:"- 台词";
background-color:yellow;
color:red;
font-weight:bold;
}

• 还可以插入元素的属性值：

a[href]:after {content: "网址具体连接是：[" attr(href) "]";}

<a href="http://www.python.com">LINK</a>

• quotes 设置引号类型
  • 利用标签占位，然后格式化左右符号；

myeasy {quotes: '"' '"' "(" ")"}
myeasy:before, mnew:before {content: open-quote}
myeasy:after, mnew:after {content: close-quote}

<myeasy>Whether you're <mnew>new</mnew> to programming or an experienced developer, it's easy to learn and use Python.</myeasy>

• 利用伪类：after ：before 在前后插入内容：
• 前后引号也可以用关键词：open-quote 和 close-quote代替；

    quote:after {content:  " [后]"}
    quote:before {content: "[前] "}

<p>注意:当声明了<quote>dog时， <q>IE8</q>才支持这些属性。</quote></p>
<!-- 注意:当声明了[前] dog时， "IE8"才支持这些属性。 [后]  -->

• counter-reset（创建&重置） counter-increment（递增值）
  • counter-reset属性创建或重置一个或多个计数器，默认是0，如需要指定，可以是任何数字，包括负数；
  • counter-reset属性通常是和counter-increment属性，content属性一起使用，
  • counter-increment 是指定一次增加多少数，也可以是负数；
  • 多段落计数：
    • h1的identifier在父标签里初始化，如果在自己的标签里定义，
      碰到自己标签又会重新初始化，放在父标签里会一直递增。如果碰到段落，那就每次碰到父标签就会重新初始化一次数字； */
    • 标识符的括号里还可以加用什么加列表项标记的类型list-style-type（默认为decimal），比如：counter(chapter，upper-latin )
    • display:none的元素不会递增， visibility:hidden的元素会递增；

body {counter-reset: chapter}   
h1 {counter-reset: section; counter-increment: chapter;}
h1:before {content: counter(chapter) ". ";}

h2 {counter-increment: section; }
h2:before { content: counter(chapter) ". " counter(section) ". ";}

<h1>HTML tutorials</h1>
<h2>HTML Tutorial</h2>
<h2>XHTML Tutorial</h2>
<h2>CSS Tutorial</h2>

<h1>Scripting tutorials</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>

<h1>XML tutorials</h1>
<h2>XML</h2>
<h2>XSL</h2>

多段落计数

• counters function 为嵌套列表自动追加计数器
  • 应用于嵌套列表，为各层列表追加前缀；
  • counters(variable, ".") " - " str的.是每层后面都要追加的点，后面的 - 只在最后出现；

ol {counter-reset: variable; }
ol li:before {
counter-increment: variable; 
content: counters(variable, ".") " - ";
}

<ol>
    <li>HTML Tutorial</li>
    <li>HTML Tutorial</li>
    <li>XHTML Tutorial</li>
        <ol>
            <li>HTML Tutorial</li>
                <ol>
                    <li>HTML Tutorial</li>
                    <li>XHTML Tutorial</li>
                    <li>CSS Tutorial</li>
                </ol>
            <li>XHTML Tutorial</li>
            <li>CSS Tutorial</li>
        </ol>
    <li>CSS Tutorial</li>
</ol>

counters function 为嵌套列表自动追加计数器

第十三章 用户界面样式

• outline 轮廓
  • ontline 是 outline-width、outline-style、outline-color的简写形式，类似于border：1px solid red；

span:hover {outline:3px dotted pink; border:1px solid red;}

第十四章 非屏幕媒体

• 分页
  • css只允许在两个地方放分页符；

    1. 在块级框的中间；

       
       
       图片.png
       
       
       图片.png

    2. 在一个块级框中的两个行框之间；

       
       
       图片.png

• page-break-after & page-break-before：always 定义分页行为

  • 在打印的时候会在指定标签后面进行分页，就是换一张纸打印；

• page-break-after & page-break-before：left or right 打印纸张位置

  • h1 {page-break-after:left;} 在h1前面放足够分页符 使h1打印到纸张的左边页面；

• page-break-after & page-break-before：avoid 不分页

  • table {page-break-after:avoid;} 如果table后面的剩余空间还放得下下一个元素 那么在table标签后面就不分页，如果放不下还是会分页；

• page-break-inside：avoid 元素内部不分页

  • div {page-break-inside:avoid;} 如果一个div在当前页面还打印的下那就不分页，如果打印不下，那还是会分页的；