HTML&CSS特性(CSS权威指南)

HTML

href中的相对url，用../表示向上（父元素）

CSS

style中或.css文件中可以使用@import url(__.css); 来加载一个外部样式表，和类似。

/*　必须放在文档的最上端 ，元素的inline-style(<p style="color:grey;">)中无法使用　 */
style中可将内容都包含在注释中，内容仍然能作为css被识别，好处是当旧浏览器不能识别<style>时，ｃｓｓ内容不会出现在网页中。
通配选择器：*｛color: grea;｝对所有元素生效
class和id区分大小写，即Name和name不同
div>p{}

/*　作为div子元素的p, 孙元素不匹配 */
属性选择器 p[backgroud]{border:1px;}

/*　有background属性的p元素；格式：元素名[拥有的属性名];如果有两个[][],则为交集, */p[class = "x"]{border:1px;}

/*　元素的class 值必须与之完全相等（class="x y"不行） */p[class ~= "x"]{border:1px;}

/*　元素的class 值含有x即可匹配;加了~ */[class ^= "x"], [class $= "x"], [class *= "x"]； [class |= "x"]

/*　以x开头/结尾、含有x(这个字符); "x"&"x-whatever" */
相邻兄弟结合符：+;

h1 + p

/*　紧接在h1后的p,它们有共同的父元素 */
伪类：用冒号表示;

a:visited{}

/*　 a:link{}未访问的链接 *//*　 在body元素中写入link="red" vlink="yellow"可达同样效果 */
动态伪类： :focus :hover :active

h1 + p

/*　紧接在h1后的p,它们有共同的父元素 */
p:first-child

在父元素中，作为子元素的第一个p

/*　 */

伪元素(都必须写在选择器的最后)

:first-letter{; :first-line

p:before{content:"haha"}

/* 在p元素前插入content,after同理 */

在冲突的声明中，最高特殊性的声明胜出。
ID:0,1,0,0

/* #id */
类，属性选择，伪类:0,0,1,0

/* .class [class=" "] :before */
元素:0,0,0,1

/* p */
通配选择器 0,0,0,0br>/* * 无贡献 */
0,0,0,0中 第一位的0是为内联样式中style="-:-;"保留的

/* */
在声明后加上!important

/* 在分号前面，font: small Times serif !important; */

/* 重要声明总是比其他优先；重要声明没有特殊性值，它们与非重要声明分开考虑 */
声明会继承给后代元素，部分不能继承，比如border

/* 继承的声明没有特殊性，连0,0,0,0(通配*{})都不如 */
声明会继承给后代元素，部分不能继承，比如border

/* 继承的声明没有特殊性，连0,0,0,0(通配*{})都不如 */
颜色表示：rgb(100%,100%,100%) rgb(255,0,0) #FFF #00ff00

/* Web安全色，20%和51的倍数,十六进制：33的倍数 */
绝对长度单位：in cm mm pt pc
相对长度单位：em ex px

/* 1em=1字高（可变，动态）；ex是x的高度 */css中，相对url是相对于css文件本身，不是html

/* 1em=1字高（可变，动态）；ex是x的高度 */关键字none； text-decoration: none;

/* 字面意思 */关键字inherit； color: inherit;

/* 使用父元素的声明，可用于针对a元素 */font-family:serif, Times, Chicago, 'New century', 'Karrank%';

/* 用逗号分隔, 若字体名中有空格或#$，要用引号; 通用系列不能加引号(例如serif,monospace) */
font-weight: bolder | lighter font-size: smaller | larger

/* 对应于继承父元素的weight/size,更粗一级 */

/* font-size意为没有额外行间距时字体基线/下划线的距离 */
font-size: xx-small | medium | larger 40% 15px 2cm

/* 百分数是针对从父元素继承的大小 */
font-style: italic和oblique基本一样
font-varient: small-caps

/* 大写还是大写，小写变成小大写 */
font: size/line-heigt和family以此顺序放在最后

/* font中必须有size family这两个值 否则无效 */

/* 顺序：[style variant weight(可变)] size/line-hight family 否则无效！ */
系统字体： font: caption | icon | menu | message-box | status-bar | small-caption

/* 使用操作系统的字体： */

text属性

text-align: left right justify

/* justify: 调整字间距，使每行左右端对齐 */子元素会继承父元素的line-height(显式声明1em),当子元素的font-size过小时，易发生上下行相撞

/* 父元素{inline-height:1;}即可（取代1em） */vertical-align只应用于行内元素、替换元素

/* 不影响block */

/* 取值super sub 基线上移/下移，成为上标下标（平方之类的） */

/* text-top text-bottom 针对行内文本 top middle bottom ; baseline同父元素基线对齐 */

/* middle一般用于图像，将元素的中点和父元素的基线往上0.5ex处对齐 */

/* 百分数50%，使此元素的基线相对于父元素基线上升50%（此元素的line-height） */

/* 5px 同理 上升5px */

/* 垂直对齐的部分不会和别行重叠，它会使文本行变高 */
word-spacing 字间的间隔（空白字符，如空格）

letter-spacing 字母间的间隔（受text-align:justify的影响）

/* */text-transform:

/* uppercase capitalize none, capitalize对每个单词的首字母大写 */text-decoration: [underline | overline | line-through |blink]

/* a元素默认有underline，可手动设置为none */

/* 该属性不能继承 */
white-space: nowrap | pre | pre-wrap | pre-line

/* 对空白符的处理方式，pre不合并空格，原样显示 */

/* nowrap 除非有br 否则绝对不换行（哪怕超出浏览器右边） */

/* pre-wrap像原文本那样换行,保留tab,不合并空格 */

/* pre-line像原文本那样换行,不保留tab,合并空格 */
direction:ltr | rtl

/* 默认ltr 文本从左向右，rtl相反 */

视觉格式化

水平属性只有with和margin可以auto

/* 当其中两个固定数值时，另一个变为auto;三个都固定数值称为过分受限；默认三者都auto */
img的height会随width等比变化

/* 反之同理 */
当block元素height为auto，且没有border和padding时,子block元素的margin会完全在父元素的外面

/* 如果父元素有了border和Padding,则会把子元素的margin都包进来 */
垂直相邻的block元素的同正负margin将合并为绝对值大的那个

/* */
对于非替换inline元素，padding、margin没有垂直效果

/* 不影响行内框高度，替换元素相反 */
inline元素的background作用于内容区(font-size)和内边距

/* 不是line-height */
inline元素的background、border作用于内容区(font-size)和内边距

/* 不是line-height */
font-size比line-height大，导致内容区溢出行内框，可能会侵入别行
替换元素的margin、padding和border会并入行内框
display只影响元素如何显示，而不影响它是何种元素
inline-block相当于替换元素，若无指定width，会自动适应最宽那个子元素的宽度

/* 先用width计算出高度，将高度应用于此行的基线定位，再根据height确定底部border的位置 */display: run-in(chorum不支持)使该元素生成块元素框挤进下一个块元素的开头

/* 如果该元素和下一个元素不是block，该元素生成block框 */margin顺序：top right bottom left 顺时针

/* margin和padding的百分数相对于父元素的width计算 */border-style: hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

/* 单边 border-top-style 默认none */

/* border-top -bottom */
border的默认颜色为color
border-width: thin | medium(default) | thick

/* */没有border-style就没有border(完全没有)

/* border-right-color */border-color:transparent

/* 透明，相当于内边距 */background-color 默认为transparent

/* */background-image: url()

/* inline元素也可使用; 如果要image的透明部分透出background-color，b-image要声明在b-color之后，否则被b-color覆盖 */background-repeat: repeat-x | repeat-y | no-repeat

/* 背景image横\竖向阵列，起点为b-position */background-position: left | center | top |

/* 成对出现，一个表示水平向，一个垂直向，example: top right | bottom center | 50% 50% */

/* 如果只有一个值，另一个默认为center */

/* 50% 50%将同时作用于b-img和该元素，即b-img的50% 50%的点和该元素的50% 50%的点对齐 */

/* 10px 10px指的是img左上角相对于元素左上角的偏移 */

/* padding参与b-position定位;可尝试关键字、百分号、像素配合使用 */
background-position可配合min-width | max-height来限制最大/最小的宽度/高度

/* */background-attachment: scroll | fixed

/* fixed:b-img位置变为直接由可视区定位，且不随文档滚动; scroll默认值*/background中的值可采用任何顺序

/* b-position 的两个值必须一起按顺序出现 */

/* 注意：background中未填写的默认值将覆盖之前声明的backgroud-系列声明 */
float元素的Margin会影响到周遭文本的退距

/* 用clear来针对之：left right both */position: relative | absolute | fixed | static

/* */overflow: visible | hidden | scroll

/* 溢出元素框的内容 可见|隐藏|滚动条 */clip: rect(top,right,bottom,left)

/* 圈出一个矩形框，框外裁剪，括号中是距离左上角的距离，不允许有百分数，auto即原边界 */visibility: visible | hidden | collapse

/* collapse在表中使用 */position: absolute

/* 从文档流中完全删除，（根据top等属性）相对于包含块定位，这里“包含块”指的是最近的position不为static的祖先元素，一半将想要指定为包含块的元素position设置为relative且没有偏移 *//* 定位后生成一个block框 */

/* 当top、left、right设置为auto时，对应的边界为原本元素在流中的边界，bottom不是 */

/* 当left margin width right 都是具体长度过度受限时，忽略right/bottom的值，重新计算，使之满足left+margin+border+width+right=包含块width(若其余某个属性是auto,则重新计算该属性来满足等式) */

/* 当heigt为auto时，等于固有高度 */

/* 当bottom为auto,将margin-top/bottom的auto替换为0 */
z-index: 整数 从前向后，越来越接近用户，高的覆盖低的

/* */