CSS权威指南第三版(11章)

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
描述
none 此元素不会被显示。(删除) ;
inline 默认。此元素会被显示为内联元素,元素前后没有换行符;
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。(只有IE内核的浏览器能用)
table 此元素会作为块级表格来显示(类似 ),表格前后带有换行符。
inline-table 此元素会作为内联表格来显示(类似 ),表格前后没有换行符。)。)。)。)。)。)
table-row-group 此元素会作为一个或多个行的分组来显示(类似
table-header-group 此元素会作为一个或多个行的分组来显示(类似
table-footer-group 此元素会作为一个或多个行的分组来显示(类似
table-row 此元素会作为一个表格行显示(类似
table-column-group 此元素会作为一个或多个列的分组来显示(类似
table-column 此元素会作为一个单元格列显示(类似
table-cell 此元素会作为一个表格单元格显示(类似
table-caption 此元素会作为一个表格标题显示(类似
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) "]";}
LINK
  • quotes 设置引号类型
    • 利用标签占位,然后格式化左右符号;
myeasy {quotes: '"' '"' "(" ")"}
myeasy:before, mnew:before {content: open-quote}
myeasy:after, mnew:after {content: close-quote}
Whether you're new to programming or an experienced developer, it's easy to learn and use Python.
  • 利用伪类:after :before 在前后插入内容:
  • 前后引号也可以用关键词:open-quote 和 close-quote代替;
    quote:after {content:  " [后]"}
    quote:before {content: "[前] "}

注意:当声明了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) ". ";}

HTML tutorials

HTML Tutorial

XHTML Tutorial

CSS Tutorial

Scripting tutorials

JavaScript

VBScript

XML tutorials

XML

XSL

多段落计数
  • counters function 为嵌套列表自动追加计数器
    • 应用于嵌套列表,为各层列表追加前缀;
    • counters(variable, ".") " - " str的.是每层后面都要追加的点,后面的 - 只在最后出现;
ol {counter-reset: variable; }
ol li:before {
counter-increment: variable; 
content: counters(variable, ".") " - ";
}
  1. HTML Tutorial
  2. HTML Tutorial
  3. XHTML Tutorial
    1. HTML Tutorial
      1. HTML Tutorial
      2. XHTML Tutorial
      3. CSS Tutorial
    2. XHTML Tutorial
    3. CSS Tutorial
  4. CSS Tutorial
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在当前页面还打印的下那就不分页,如果打印不下,那还是会分页的;

你可能感兴趣的:(CSS权威指南第三版(11章))