HTML5与CSS3权威指南.pdf7
第14章使⽤选择器在页⾯中插⼊内容
使⽤选择器来插⼊⽂字图⽚
pdf转htmlh2.class1:after{content:none}，也可以插⼊图⽚h2:after{content:url(test.png)}，将alt属性的值作为图像的标题显⽰h2:after{content:attr(alt)}使⽤content属性来插⼊项⽬编号
h2:after{content:counter(mycounter)}；还需要对counter-increment属性进⾏设定，计数器名称必须相同h2{counter-increment:mycounter}；在项⽬编号中追加⽂字h1:before{content:'第'counter(mycounter)'章';}指定编号的样式h2:after{content:counter(mycounter);color:blue;font-size:42px;}也可以指定⾮数值的编号content:counter(计数器名，编号种类)，编号嵌套h1后有h2元素，可以分别设定编号
如果需要重置编号，则需要在h1额外设置counter-reset:（⼩编号的计数器），⼀个编号内嵌⼊其他编号
h2:after{content:counter(mycounter)'-'counter(mycounter2)}，在字符串两边添加嵌套⽂字符号h1:before{content:open-
quote;}h1:after{content:close-quote;}h1{quotes:"(" ")";}如需要添加引号等特殊字符需要加转义字符
第15章⽂字与字体相关的样式
给⽂字添加阴影——text-shadow属性
text-shadow:length length length color横向纵向模糊半径阴影颜⾊
text-shadow:length length length color,length length length color指定多个阴影
让⽂本⾃动换⾏——word-break属性
normal采⽤浏览器默认 keep-all只能半⾓空格或连字符处 break-all允许在单词内换⾏
让长单词与URL地址⾃动换⾏——word-wrap属性
属性值为normal与break-word，前⼀个为默认，只在半⾓空格或连字符的地⽅进⾏换⾏，break-word为让长单词与URL地址内部进⾏换⾏使⽤服务器端字体——Web Font与@font-face属性
@font-face{
font-family:WebFont;
src:url('font/Fontin_Sans_f') format("opentype");
}
以上分别指定了使⽤服务器端字体，字体的路径、字体格式，定义粗体或斜体时添加⼀⾏font-style:italic font-weight:bold 显⽰客户端本地的字体URL属性值更改为scr:local('Arial')
修改字体种类⽽保持字体尺⼨不变——font-size-adjust
使⽤不同的字体，即使font-size设置相同，字体还是会有不同⼤⼩的区别，font-size-adjust是指使⽤这个字体写出来的⼩写x的⾼度（x-height），除以字体⾼度的出来的常量
第16章盒相关样式
CSS中的盒分为block类型与inline类型（使⽤display属性来定义盒的类型，display:run-in）
inline-block类型属于block类型的⼀种，但是显⽰时具有inline类型盒的特点，为inline添加⾼度和宽度，其不会发⽣变化，可以为inline-block类型添加⾼度和宽度
inline-table类型，table标签为block类型表格前后的⽂字处于不同⾏中，使⽤inline-table可以使表格前后的⽂字处于同⼀⾏
list-item类型，将多个元素作为列表来显⽰，类似<li>标签
run-in类型与compact类型，如果元素后⾯还有block类型的元素，run-in的元素则包含在后⼀个元素内，compact则放在block元素的左边
表格相关的类型
none类型，该元素不会被显⽰
对于盒中容纳不下内容的显⽰
overflow属性，hidden（隐藏）scroll auto（根据需要出现⽔平或垂直滚动条） visible（相对于不设置overflow属性，原样显⽰）overflow-x与overflow-y属性，单独指定在⽔平⽅向或垂直⽅向内容超出盒范围时显⽰样式
text-overflow属性，在⽔平超出以后显⽰“...”
对盒、单元格等使⽤阴影
box-shadow属性：box-shadow:length length length color
Firefox：“-moz-box-shadow” Safari：“-webkit-box-shadow”
指定针对元素的宽度与⾼度的计算⽅法
box-sizing属性，有两个值content-box（默认）和border-box，指定为content-box时，宽度和⾼度不包括内容补⽩区域，指定为border-box 时，宽度和⾼度包括内容补⽩区域（width:300px；减去padding和边框实际为180px;），Firefox“-moz-box-sizing” Safari“-webkit-box-sizing” Opera“box-sizing” Internet Explorer“-ms-box-sizing”
发布评论