css权威指南
2016-07-11 21:46:02 0 举报AI智能生成
《CSS权威指南》是一本详尽介绍CSS（层叠样式表）的专业书籍，由Eric A. Meyer撰写。这本书深入探讨了CSS的各种特性和用法，包括选择器、盒模型、布局、字体、颜色、动画等。书中的内容不仅涵盖了基础知识，还深入讲解了高级技巧和最佳实践。无论你是CSS初学者还是有一定经验的开发者，都能从这本书中获得宝贵的知识和启示。《CSS权威指南》以其严谨的论述、丰富的示例和清晰的解释，被誉为CSS领域的“圣经”，是每一个Web开发者必备的参考书籍。
作者其他创作
大纲/内容
选择器
类选择器
ID选择器
属性选择器
伪类
:link,:visited,:hover,:active
选择第一个子元素:first-child
根据语言选择:lang(fr)
伪元素
首字母:first-letter,只能用于块级元素
第一行:first-line,只能用于块级元素
:before
:after
使用文档结构
选择子元素
选择后代元素
选择相邻兄弟元素
结构和层叠
特殊性
内联样式>ID>类/属性/伪类>元素/伪元素
!important
继承
继承值完全没有特殊性
层叠
按显式权重排序。
!important最高
创作人员>读者>用户代理
按特殊性排序
按出现顺序排序
越晚出现权重越高
导入样式表中的声明在前，主样式表的所有声明在后
长度单位
绝对长度单位
英寸in
厘米cm
毫米mm
点pt
派卡pc
相对长度单位
em
1em=font-size
em的值会相对于父元素的字体大小而改变
rem
相对于根元素
ex
所用字体中x的高度
1ex=0.5em
px
取决于屏幕分辨率
字体
font-family
font-weight
normal(400)
bold(700)
bolder
先确定从父元素继承的,选择一个更大的数
lighter
font-size
em框
em框指示没有设置line-height时字体基线间的距离
font-size是为给定字体的em框提供大小
绝对大小
xx-small,x-small,small,medium,large,x-large,xx-large
相对大小
larger,smaller
百分比，根据从父元素继承的大小计算
继承的是计算值
font-style
normal
italic
斜体
oblique
倾斜
inherit
font-variant
normal
small-caps
小型大写字母文本
inherit
font-stretch,font-size-adjust已在css2.1移除
font
font-style || font-variant || font-weight 可随意顺序，且可忽略
font-size，font-family必须存在且按序
line-height可选，格式font-size/line-height
@font-face
文本属性
水平对齐
text-align
只能应用于块级元素
left,right,center,justify
text-indent
只能应用于块级元素
若块级元素首行有图像也会随之移动
可为负值，可继承
垂直对齐
line-height
文本行基线之间的距离
line-height与font-size之间的差就是行间距
缩放因子是继承值，根据自身font-size计算
行内框
文本行中的每个元素都生成一个内容区，由字体大小确定
内容区生成一个行内框：内容区高度font-size
(line-height-font-size)/2分别应用到内容区的顶部和底部->行内框
行框
高度恰好足以包含最高行内框的顶端和最低行内框的底端
vertical-align
只应用于行内元素和替换元素，不可继承
baseline(默认),sub下标,super上标,top,text-top,middle,bottom,text-bottom,%,inherit,
上标和下标不会改变元素字体大小
bottom
行内框底端与行框底端对齐
text-bottom
对齐行内文本底端。只适用于文本元素
middle
将行内元素框的中点与父元素基线上方0.5ex处的一个点对齐
通常将元素的垂直重点与父元素基线上方0.25em处的一个点对齐
数值
将元素的基线/替换元素的底边相对于父元素的基线升高或降低指定的量
正数升高，负数降低
间隔
word-spacing
修改字间间隔
正值扩大间隔，负值减少间隔
letter-spacing
修改字母间间隔
子元素会继承计算值
text-transfrom
uppercase,lowercase,capitalize,none,inherit
text-decoration
none,underline,overline,line-through,blink,inherit
text-shadow ,,,
前两个长度为阴影与文本的偏移距离，【右，下】第三个长度可选“模糊半径”
white-space
pre-line合并空白符，保留换行符，允许自动换行
normal合并空白符，忽略换行符，允许自动换行
nowrap合并空白符，忽略换行符，不允许自动换行
pre保留空白符，保留换行符，不允许自动换行
pre-wrap保留空白符，保留换行符，允许自动换行
direction
影响块级元素中文本书写方向，表中列布局方向、内容水平填充元素框方向、两端对齐元素中最后一行位置
行内元素，只有unicode-bidi设置为embed/bidi-override才会应用
unicode-bidi
normal
embed行内元素，在元素内部隐式完成顺序重排
bidi-override顺序重排在元素内部严格按direction属性进行
基本视觉格式化
基本概念
包含块
由最近的块级祖先框、表单元格或行内块祖先框的内容边界构成
非替换元素
元素内容包含在文档中
替换元素
作为其他内容占位符的一个元素e.g.img
水平格式化
正常流中块级元素框的水平部分总和=父元素width
垂直格式化
内边距、边框、外边距
颜色和背景
浮动和定位
表布局
列表与生成内容
用户界面样式
非屏幕媒体
0 条评论
下一页
