Web 应用基础
CSS <font color="maroon" face="times, Serif" size="7"> <I><U>Software School</U><I></font> p {color: maroon; font: italic 2.6em Times, Serif; text-decoration: underline;} <p>software School</p>
CSS p, h1 {color: maroon; font: italic 2.6em Times, Serif; text-decoration: underline;}
不鼓励使用元素 <font> <basefont> <u> <strike> <center> <i>
HTML 与 CSS <html> <head> <title>harry's ancestors</title> <link rel="stylesheet" href="sheet1.css" type="text/css" media="all"/> <style type="text/css"><!-- @import url(sheet2.css); h1 {color: maroon; } body {background: yellow; } --></style> </head> <body> <h1>charlus Potter</h1> <p style="color: green;">rowling s Black Family </p> </body> </html>
HTML 与 CSS sheet1.css p { color: red; font: 1em Times;} <html> <head> <title>harry's ancestors</title> shee2.css p { color: blue; } h1 {font: italic 2em Times;} <link rel="stylesheet" href="sheet1.css" type="text/css" media="all"/> <style type="text/css"><!-- @import url(sheet2.css); h1 {color: maroon; } body {background: yellow; } --></style> </head> <body> <h1>charlus Potter</h1> <p style="color: green;">rowling s Black Family </p> </body> </html>
HTML 与 CSS sheet1.css p { color: red; font: 1em Times;} <html> <head> <title>harry's ancestors</title> shee2.css p { color: blue; } h1 {font: italic 2em Times;} <link rel="stylesheet" href="sheet1.css" type="text/css" media="all"/> <style type="text/css"><!-- @import url(sheet2.css); h1 {color: maroon; } body {background: yellow; } --></style> </head> <body> <h1>charlus Potter</h1> <p style="color: green;">rowling s Black Family </p> </body> </html>
Media <link rel="stylesheet" href="sheet1.css" type="text/css" media="all"/> all screen print project aural handheld tty tv 所有媒体屏幕媒体, 如桌面计算机监视器打印机投影仪语言合成器 屏幕阅读器等手持设备, 如个人数字助理或支持 Web 的手机固定间距环境, 如电传打字机电视机
属性值的表示 <type> (X Y) (X Y) [expression] * +? {M, N} 值的类型 X 或 Y X 或 Y, 或者两者都出现, 且 X 和 Y 出现的顺序没有限制 组合 前面的值或组合可以重复 0 次或多次 前面的值或组合可以重复 1 次或多次 前面的值或组合是可选的 前面的值或组合至少重复 M 次, 至多重复 N 次
属性值举例 give me liberty [I am]? the walrus Koo+ Kachoo give liberty give me liberty me give give me liberty I the walrus am walrus the am the I walrus walrus the Koo Kachoo Koo Koo Kachoo Koo Koo Koo Kachoo
属性值举例 I really{1, 3}? [love hate] [Microsoft Netscape Opera] [[Alpha Baker Cray],]{2,3} and Delphi
属性值举例 I really{1, 3}? [love hate] [Microsoft Netscape Opera] I love Microsoft I really hate Microsoft I really really love Netscape I really really really hate Microsoft [[Alpha Baker Cray],]{2,3} and Delphi Alpha, Baker, and Delphi Baker, Cray, and Delphi Cray, Alpha, Baker, and Delphi Alpha, Baker, Cray, and Delphi
规则结构 Declaration block Selector Declaration Declaration h1 { color: red; background: yellow; } Attribute Value
HTML 用例 <html> <head> <title>plutonium</title> <style type="text/css"><!-- --></style> </head> <body> <h1>plutonium</h1> <p>useful for many...</p> <h2>safety Information</h2> <p> <span>when handling plutonium...</span> <span>with plutonium... </span> </P> <h3>comments</h3> <p>it's best to avoid...</p> </body> </html>
HTML 用例 <html> <head> <title>plutonium</title> <style type="text/css"><!-- --></style> </head> <body> <h1>plutonium</h1> <p>useful for many...</p> <h2>safety Information</h2> <p> <span>when handling plutonium...</span> <span>with plutonium... </span> </P> <h3>comments</h3> <p>it's best to avoid...</p> </body> </html>
元素选择器 html {color: black;} h1 {color: red;} h2 {color: green;}
元素选择器 html {color: black;} h1 {color: red;} h2 {color: green;}
元素选择器 h1, h2 {font: medium Arial;} p {font: large/150% sans-serif;} * {color: blue;}
类选择器 <html> <head> <title>plutonium</title> <style type="text/css"><!-- --></style> </head> <body> <h1>plutonium</h1> <p class="warning">useful for many...</p> <h2>safety Information</h2> <p> <span>when handling plutonium...</span> <span>with plutonium... </span> </P> <h3 class="warning">comments</h3> <p>it's best to avoid...</p> </body> </html>
类选择器 p.warning {font-style: italic; color: red}
类选择器 p.warning {font-style: italic; color: red}
类选择器.warning {font-style: italic; color: red}
类选择器.warning {font-style: italic; color: red}
类选择器 <html> <head> <title>plutonium</title> <style type="text/css"><!-- --></style> </head> <body> <h1>plutonium</h1> <p class="warning urgent">useful for many...</p> <h2>safety Information</h2> <p> <span>when handling plutonium...</span> <span>with plutonium... </span> </P> <h3 class="warning">comments</h3> <p>it's best to avoid...</p> </body> </html>
类选择器 p.warning.urgent {font-style: italic; color: blue} p.urgent.warning {font-style: italic; color: blue}
类选择器 p.warning.urgent {font-style: italic; color: blue} p.urgent.warning {font-style: italic; color: blue}
ID 选择器 <html> <head> <title>plutonium</title> <style type="text/css"><!-- --></style> </head> <body> <h1 id="lead-head">plutonium</h1> <p>useful for many...</p> <h2>safety Information</h2> <p> <span>when handling plutonium...</span> <span>with plutonium... </span> </P> <h3>comments</h3> <p>it's best to avoid...</p> </body> </html>
ID 选择器 #lead-head {color: red; background: yellow;}
ID 选择器 #lead-head {color: red; background: yellow;}
属性选择器 <html> <head> <title>plutonium</title> <style type="text/css"><!-- --></style> </head> <body> <h1 lang="en" title="urgent warning">plutonium</h1> <p>useful for many...</p> <h2>safety Information</h2> <p> <span>when handling plutonium...</span> <span>with plutonium... </span> </P> <h3>comments</h3> <p>it's best to avoid...</p> </body> </html>
属性选择器 <html> <head> <title>plutonium</title> <style type="text/css"><!-- --></style> </head> <body> <h1 lang="en" title="urgent warning">plutonium</h1> <p>useful for many...</p> <h2>safety Information</h2> <p> <span>when handling plutonium...</span> <span>with plutonium... </span> </P> <h3>comments</h3> <p>it's best to avoid...</p> </body> </html>
属性选择器 h1 [lang] {color: blue;} h1 [title="urgent warning"] {color: blue;} h1 [lang] [title] {color: blue;}
子串匹配属性选择器 类型 [attr~="value"] [attr^="value"] [attr$="value"] [attr*="value"] [attr ="value"] 描述 attr 属性值包括 "value" 的所有元素 attr 属性值以 "value" 开头的所有元素 attr 属性值以 "value" 结尾的所有元素 attr 属性值中包含 "value" 子串的所有元素 attr 属性值等于 "value" 或以 "value" 开头的所有元素 实例 h1 [title~="warning"] img [src^="\images"] img [src$=".jpg"] a [href*="fudan.edu.cn"] img [src ="picture"]
文档的树型结构 <html> <head> <title>plutonium</title> <style type="text/css"><!-- --></style> </head> <body> <h1>plutonium</h1> <p> <span>when...</span> <span>with... </span> </P> <h2>safety Information</h2> <ol> <li></li><li></li><li></li> </ol> </body> </html> head html body title style h1 p h2 ol span span li li li
后代选择器 p span {color: green;}
后代选择器 p span {color: green;}
后代选择器 html body li {color: red;}
后代选择器 html body li {color: red;}
后代选择器 body > h1 {color: red;} li + li {color: red;}
后代选择器 body > h1 {color: red;} li + li {color: red;}
伪类选择器 a:link {color: navy;} a:visited {color: gray;} a:hover {color: red;} a:active {color: yellow;} link-visited-focus-hover-active
伪类选择器 a:link {color: navy;} a:visited {color: gray;} a:hover {color: red;} a:active {color: yellow;} link-visited-focus-hover-active
伪类选择器 类型 描述 实例 link visited focus hover active lang first-child 未访问链接已访问链接获得焦点旋停激活语言第一个子元素 a:link {color: navy;} a:visited {color: gray;} input:focus {background: silver; color: blue;} a:hover {color: red;} a:active {color: yellow;} html:lang(en) {background: silver;} p:first-child {font-weight: bold;}
伪元素 类型 描述 实例 first-letter first-line before after 首字符第一行之前之后 p:first-letter {font-size: 200%;} p:first-line {color: purple;} h2:before {content: "["; color: silver;} h2:after {content: "]"; color: silver;}
选择器总结 类型 元素选择器类选择器 ID 选择器属性选择器后代选择器伪类选择器 特征符号,. # [ ] 空格 + > : 实例 h1, h2 {font: medium Arial;} p.warning {font-style: italic; color: blue;} #lead-head {color: red; background: yellow;} a [href*="fudan.edu.cn"] {color: maroon;} table * td {color: blue;} a:visited:hover {color: gray;}
Inheritance and cascade Where the name of Cascading Style Sheets from?
特殊性 内联样式 1, 0, 0, 0 ID 选择器 0, 1, 0, 0 类 / 属性 / 伪类选择器 0, 0, 1, 0 元素 / 后代选择器伪元素 0, 0, 0, 1 结合符通配符 HTML 属性 0, 0, 0, 0 继承 None
实例计算 例子 特殊性 (specificity) h1 {color: red;} <p style="color: green;">rowling </p> p span {color: purple;}.grape {color: blue;} *.bright {color: yellow;} p.bright span.dark {color: maroon;} #id216 {color: green;} div#sidebar *[href] {color: silver;} <body bgcolor="yellow"> 0, 0, 0, 1 1, 0, 0, 0 0, 0, 0, 2 0, 0, 1, 0 0, 0, 1, 0 0, 0, 2, 2 0, 1, 0, 0 0, 1, 1, 1 0, 0, 0, 0
练习 html > body table tr[title="totals"] td ul > li {color: red;} Answer: 0, 0, 1, 7
解组 h1 {color: silver; background: black;} h1 {color: silver;} /* 0, 0, 0, 1 */ h1 {background: black;} /* 0, 0, 0, 1 */
解组 h1, h2.section {color: silver; background: black;} h1 {color: silver;} /* 0, 0, 0, 1 */ h1 {background: black;} /* 0, 0, 0, 1 */ h2.section {color: silver;} /* 0, 0, 1, 1 */ h2.section {background: black;} /* 0, 0, 1, 1 */
ID 和属性选择器 <p id="totals">$1,000,000.00</p> p [id="totals"] {color: yellow} #totals {color: red}
ID 和属性选择器 <p id="totals">$1,000,000.00</p> p [id="totals"] {color: yellow} /* 0, 0, 1, 1 */ #totals {color: red} /* 0, 1, 0, 0 */
HTML 用例 <html> <head> <title>plutonium</title> <style type="text/css"><!-- --></style> </head> <body> <h1>plutonium</h1> <p>useful for many...</p> <h2>safety Information</h2> <p> <span>when handling plutonium...</span> <span>with plutonium... </span> </P> <h3>comments</h3> <p>it's best to avoid...</p> </body> </html>
重要性 <h1 id="warning">plutonium</h1> h1 {color: red;} #warninng {color: blue;}
重要性 <h1 id="warning">plutonium</h1> h1 {color: red!important;} #warninng {color: blue;}
重要性注意事项 每一个声明都需要有它自己的!important 标志, 这样这个声明才能被标记为重要 h1 {color: red!important; background: white; } h1 {color: red!important; background: white!important; }
重要性注意事项 每一个声明都需要有它自己的!important 标志, 这样这个声明才能被标记为重要 标志!important 必须放在声明的最后
重要性注意事项 每一个声明都需要有它自己的!important 标志, 这样这个声明才能被标记为重要 标志!important 必须放在声明的最后 重要性和非重要性声明分别归入不同的组, 然后再用特殊性来解冲突, 决定声明的优先级
继承性注意事项 声明会沿着文档的结构树传播到后代元素, 并一直继续, 直到没有元素为止 有些属性不能继承 ( 往往归因于常识, 如 border 属性 ), 大多数框模型属性 ( 包括外边距 内边距 边框 ) 都不能继承 目前浏览器在继承性上有许多 Bug 存在, 所以要避免不加区别地使用通配符
声明来源的优先级 用户的重要性声明 高 创作人员的重要性声明 创作人员的一般性声明 用户的一般性声明 用户代理声明 ( 浏览器用户首选项 ) 低
顺序优先 h1 {color: red;} h1 {color: purple;}
顺序优先的注意事项 a:active {color: orange;} a:hover {color: red;} a:link {color: blue;} a:visited {color: gray;}
推荐顺序 LoVe-HA! a:link {color: blue;} a:visited {color: gray;} a:hover {color: red;} a:active {color: orange;}
保险方法 a:link {color: blue;} a:visited {color: gray;} a:link:hover {color: red;} a:visited:hover {color: purple;} a:link:hover:active {color: yellow;} a:visited:hover:active {color: green;}
HTML 属性优先级 <body bgcolor="yellow"> <style type="text/css"><!-- h1 {background="red";} --></style>
HTML 属性优先级 <body bgcolor="yellow"> <style type="text/css"><!-- h1 {background="red";} --></style> CSS > HTML 属性
通配与继承 <body bgcolor="yellow"> <style type="text/css"><!-- p {background="aqua";} * {background="gray";} --></style>
通配与继承 <body bgcolor="yellow"> <style type="text/css"><!-- p {background="aqua";} * {background="gray";} --></style> 通配 > 继承
Font 与继承 span {color: blue} handling <font color="red"> plutonium</font>, care
Font 与类选择器 span {color: blue}.warning {color: green} handling <font class="warning" color="red"> plutonium</font>, care
用户代理首选项 #toolbar {background: blue; color: white;} <div id="toolbar"> <A href="test.html"> Home </A> <A href="test.html"> Food&Drink </A> <A href="test.html"> Lodging </A> <A href="test.html"> Entertainment </A> <A href="test.html"> Night Life </A><br> </div>
用户代理首选项 #toolbar {background: blue; color: white;} #toolbar a {color: white;} <div id="toolbar"> <A href="test.html"> Home </A> <A href="test.html"> Food&Drink </A> <A href="test.html"> Lodging </A> <A href="test.html"> Entertainment </A> <A href="test.html"> Night Life </A><br> </div>
Bug Pay close attention to the bug of browser Solution: test again and again
颜色表示方法 安全色 English name: red, blue, green, 倍数 rgb(0~100%, 0~100%, 0~100%) 20% rgb(0~255, 0~255, 0~255) 51 #FF0000, #0000FF, #008000, 33
绝对长度单位 in ( 英寸 ) 2.54 厘米 cm ( 厘米 ) mm ( 毫米 ) pt ( 点 ) 1/72 英寸 pc ( 派卡 ) 12 点
相对长度单位 em (em-height) 1em 等于给定字体的 font-size 值 xm (x-height) 1xm 等于给定字体和 font-size 值的小写 x 的高度, 目前大多数设定为 1/2em px ( 像素 )
相对长度单位 <h1>left margin = <span>24 pixels</span></h1> <h2>left margin = <span>18 pixels</span></h2> <p>left margin = <span>12 pixels</span></p> h1 {font-size: 36px;} h2 {font-size: 24px;} p {font-size: 18px;} h1, h2, p {margin-left: 1em;} span {font-size: 0.8em;}
URL 绝对路径 url(protocol://server/pathname) 相对路径 url(pathname) url 与开始括号之间不能留有空格
角度值 deg ( 角度 ) grad ( 梯度 ) rad ( 弧度 ) 取值范围 0~360 90deg = 270deg
时间值 s ( 秒 ) ms ( 毫秒 ) 1/1000 秒 频率值 Hz ( 赫兹 ) KHz ( 千赫 ) 1000 赫兹
字体系列 Times TimesRegular TimesBold TimesItalic TimesOblique TimesBoldItalic TimesBoldOblique
通用字体系列 Serif: Times, Georgia, New Century Schoolbook Sans-serif: Helvetica, Geneva, Verdana, Arial, Univers Monospace: Courier, Courier New, Andale Mono Cursive: Zapf chancery, Author, Comic Sans Fantasy: Western, Woodblock, Kingon
font-family 值初始值应用范围继承性计算值实例 [ [<family-name> <generic-family> ], ] * [ <family-name> <generic-family> ] inherit 用户代理指定的值所有元素有根据指定确定 body {font-family: Times, Palatino Linotype, Karrank% ;}
font-family
font-weight 值初始值应用范围继承性计算值实例 normal bold bolder lighter 100 200 300 400 500 600 700 800 900 inherit normal 所有元素有数字值或某个数字值加上某个相对数 h1 {font-weight: bold;} h2 {font-weight: 400;}
Zurich 字体 Zurich Light Zurich Regular Zurich Medium Zurich Bold Zurich Black Zurich UltraBlack 关键字 normal bold 数字 100, 200, 300 400 500 600, 700 800 900
Zurich 字体 Zurich Light Zurich Regular Zurich Medium Zurich Bold Zurich Black Zurich UltraBlack 关键字 normal bold 数字 100, 200, 300 400 500 600, 700 800 900
font-size 值初始值应用范围继承性百分数计算值实例 xx-small x-small small medium large x-large xx-large smaller larger <length> <percentage> inherit medium 所有元素有根据父元素的字体大小来计算根据指定确定 p {font-size: x-small;} em {font-size: larger; } span {font-size: 120%;} div {font-size: 25px;}
em box
font-size
Larger and Smaller 关键字 xx-small x-small small medium large x-large xx-large 缩放 1.5 5px 7px 11px 16px 24px 36px 54px 缩放 1.2 9px 11px 13px 16px 19px 23px 28px 注 : CSS2 规定缩放因子可以介于 1.0~1.2 之间
font-style 值 italic oblique normal inherit 初始值应用范围继承性计算值实例 normal 所有元素有根据指定确定 p {font-style: italic;} em {font-style: oblique;}
font-variant 值 small-caps normal inherit 初始值应用范围继承性计算值实例 normal 所有元素有根据指定确定 p {font-variant: small-caps;} em {font-variant: inherit;}
Small-caps
font 值初始值应用范围继承性百分数计算值实例 [ [<font-style> <font-variant> font-weight]? <font-size> [/<line-height>]? <font-family>] caption icon menu message-box small-caption status-bar inherit 根据单个属性的初始值所有元素有 <font-size> 相对于父元素进行计算 ;<line-height> 相对于元素的 <font-size> 进行计算根据单个属性计算 p {font: italic 300 small-caps 30px/120% Verdana;} h2 {font: bold normal italic 24px Helvetica, Arial;}
font h1 { font-family: Verdana, Helvetica, Arial, sans-serif font-size: 30px; font-weight: 900; font-style: italic; font-variant: small-caps } h1 { font: italic 900 small-caps 30px Verdana, Helvetica, Arial, sans-serif; }
font 与继承 h1, h2, h3 { font: italic normal small-caps 250% sans-serif; } h2 { font: 200% sans-serif; } h3 { font-size: 150%; } h2 与 h3 命运将不同
font 与继承 h1, h2, h3 { font: italic normal small-caps 250% sans-serif; } h2 { font: normal normal normal 200% sans-serif; } h3 { font-size: 150%; } h2 与 h3 命运如何不同
使用系统字体 caption icon menu message-box small-caption status-bar 控件的标签, 如按钮图标菜单对话框小控件的标签状态条
text-indent 值 <length> <percentage> inherit 初始值应用范围继承性百分数计算值实例 0 块级元素有相对于元素父元素的宽度绝对数值 p {text-intent: 3em;} div {text-intent: 10%;}
text-indent <html> <head> <title>text-indent</title> <style type="text/css"><!-- div {width: 400px;} p {text-indent: 10%;} --></style> </head> <body> <div> <p>this DIV is contained </p> </div> </body> </html>
text-indent <html> <head> <title>text-indent-inherit</title> <basefont face="arial"> <style type="text/css"><!-- div#outer {width: 500px;} div#inner {text-indent: 10%;} p {width: 250px;} --></style> </head> <body> <div id="outer"> <div id="inner">this first line of the DIV is indented by 50 pixels. <p>this paragraph is 200px wide </p> </div> </div> </body> </html>
text-align 值 left center right justify inherit 初始值应用范围继承性计算值实例 用户代理的默认值 ; 取决于语言的书写方向块级元素有根据指定确定 p {text-align: left;} div {text-align: justify;}
line-height 值初始值应用范围继承性百分数计算值实例 <length> <percentage> <number> normal inherit normal 所有元素有相对于元素的字体大小指定最小绝对数值 p {line-height: 0.33in;} div {line-align: 150%;}
Line box
line-height <html> <head> <title>text-indent</title> <style type="text/css"><!-- div {font-size: 18px;} p.heighter {line-height: 1.5;} p.lower {line-height: 0.65;} p {width: 400px;} --></style> </head> <body> <div> <p class="heighter">this paragraph's 'font-size' </p> <p>this paragraph's 'font-size' is </p> <p class="lower">this paragraph's 'font-size' is 18px.</p> </div> </body> </html>
vertical-align 值初始值应用范围继承性百分数计算值实例 baseline sub super top text-top middle bottom text-bottom <length> <percentage> inherit baseline 行内元素和表格的单元格无相对于元素的 line-height 值计算, 确定对父元素基线的升降长度单位为绝对数值, 其他按指定确定 img {vertical-align: bottom;} span {vertical-align: 120%;}
vertical-align
vertical-align
vertical-align
word-spacing 值 <length> normal inherit 初始值应用范围继承性计算值实例 normal 所有元素有绝对数值 p {word-spacing: 0.5em;} span {word-spacing: normal; }
letter-spacing 值 <length> normal inherit 初始值应用范围继承性计算值实例 normal 所有元素有绝对数值 p {letter-spacing: 0.25em;} span {letter-spacing: normal; }
text-transform 值初始值应用范围继承性计算值实例 uppercase lowercase capitalize none inherit none 所有元素有根据指定确定 h1 {text-transform: capitalize;} p {text-transform: uppercase;}
text-transform
text-decoration 值初始值应用范围继承性计算值实例 none [ underline overline line-through blink ] inherit none 所有元素无根据指定确定 h1 {text-decoration: underline overline;} p {text-decoration: line-through;}
text-decoration
white-space 值初始值应用范围继承性计算值实例 normal nowrap pre pre-wrap pre-line inherit normal 所有元素无根据指定确定 p {white-space: pre;} span {white-space: pre-line;}
white-space 值 空白符 换行符 自动换行 pre-line 合并 保留 允许 normal 合并 忽略 允许 nowrap 合并 忽略 不允许 pre 保留 保留 不允许 pre-wrap 保留 保留 允许
direction 值初始值应用范围继承性计算值实例 ltr rtl inherit ltr 所有元素无根据指定确定 p:lang(ar), *:lang(he) {direction: rtl;}
元素 块级元素 P, div, h1 行内元素 em, span 替换元素 img, input
框模型
块级元素水平格式化 margin-left + border-left + padding-left + width + margin-right + border-right + padding-right = father-element (width) 7 个属性可取绝对长度值除 border 外的 5 个属性可取百分数 ( 根据父元素 width 计算 ) 3 个属性还可以设置为 auto: margin-left, margin-right, width 其余必须设置为特定的值, 或者默认为 0
块级元素水平格式化 margin-left, margin-right 可以取负值, 其余只能取正值或为 0 若 7 个属性过分受限, 即加和大于或小于父元素的 width, 则 margin-right 强制转为 auto ( 对于从左向右读的语言 )
auto 值 width margin-left margin-right 效果 auto auto auto 两个外边距都为 0,width 会尽可能的宽 auto auto 居中 auto 若其余 6 个属性值设置得更宽, 块级元素会变得更高 auto 若其余 6 个属性值之和大于父元素 width,margin-right 为负数
margin
替换元素水平格式化 若 width 的值为 auto, 元素的宽度是内容的固有宽度 如果设置了 width, 但 height 值设为 auto, 则 height 值将随着 width 的变化成比例调整 除上述不同外, 其余和块级元素一样
块级元素垂直格式化 margin-top + border-top + padding-top + height + margin-bottom + border-bottom + padding-bottom = father-element (height) 7 个属性可取绝对长度值除 border 外的 5 个属性可取百分数 ( 根据父元素 height 计算 ) 3 个属性还可以设置为 auto: margin-top, margin-bottom, height 其余必须设置为特定的值, 或者默认为 0
合并垂直外边距 <ul> <li>leading up to the end of the list item, as well as the end of the list itself.</li> </ul> <h1>level-one heading (H1)</h1> ul {margin-bottom: 20px; } li {margin-top: 10px; margin-bottom: 10px; } h1 {margin-top: 28px; }
合并垂直外边距
行内元素基本术语 em box 内容区行内框行框 在字体中定义, 也称为字符框 (character box), 实际的字形可能比其 em box 更高或更矮 对于非替换元素, 内容区可以是元素中字符的 em box 组合在一起所构成的框, 也可以是由元素中字形所占的框对于替换元素, 内容区就是元素的固有高度加上可能的外边距 边框和内边距 对于非替换元素, 行内框高度刚等于 line-height 值对于替换元素, 行内框的高度等于内容区的高度 包含该行中出现的行内框的最高点和最低点的最小框
vertical-align top bottom text-top text-bottom middle super sub <percentage> 元素的行内框的顶端与包含该元素的行框顶端对齐 元素的行内框的底端与包含该元素的行框底端对齐 元素行内框的顶端与父元素的内容区的顶端对齐 元素行内框的底端与父元素的内容区的底端对齐 元素行内框的垂直中点与父元素基线上 0.5ex 处的一点对齐 元素的内容区和行内框上移, 上移的距离由用户代理设定 元素的内容区和行内框下移, 下移的距离由用户代理设定 元素的内容区和行内框上移或下移一定距离, 这个距离相对于元素的 line-height 进行计算
vertical-align: middle
vertical-align Same font-size and no line-height Same font-size and line-height Different font-size and no line-height Different font-size and line-height
line-height
line-height
确定行框高度步骤 Step 1: Step 2: (a) 确定各行内非替换元素和行内元素的所有文本的 font-size 值和 line-height 值, 将 line-height 减去 font-size 后除以 2, 将其一半分配到 em 框的顶部和底部 ; (b) 获取各替换元素的 height margin padding border 值, 并将它们相加 将非替换元素和行内元素的基线对齐, 对于替换元素, 要将其底边放在整行的基线之上 Step 3: 对指定 vertical-align 值的元素, 确定其相对于基线的垂直偏移量 Step 4: 获取所有行内框的位置, 计算行框高度 只需将基线与最高行内框之间的距离加上基线与最低行内框底端之间的距离
display 值初始值应用范围继承性计算值实例 none inline block inline-block list-item run-in table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption inherit inline 所有元素无根据指定确定 li {display: inline;} a {display: block;}
display
height 值 <length> <percentage> auto inherit 初始值应用范围继承性百分数计算值实例 auto 块级元素和替换元素无相对于包含块的 height 值计算绝对数值 p {height: 80%} div {height: 3em;}
margin 值初始值应用范围继承性百分数计算值说明实例 [ <length> <percentage> auto ]{1, 4} inherit 未定义所有元素无相对于包含块的 width 值计算绝对数值 margin: top right bottom left p {margin: 1em} div {margin: 1em 1px 2em 25%;} img {margin: 2em 3em 4px;}
margin 值复制模式
border-width 值初始值应用范围继承性计算值实例 thin medium thick medium 所有元素无绝对长度 h1 {border-width: thin;} div {border-width: 3px; }
border-style 值初始值应用范围继承性计算值实例 [ none hidden dotted dashed solid double groove ridge inset outset ] {1,4} inherit 未定义所有元素无根据指定确定 h1 {border-style: dotted;} div {border-style: dashed outset; }
border-style
border 值初始值应用范围继承性计算值实例 [ <border-width> <border-style> <border-color> ] inherit 边框颜色为元素本身的前景色, 宽度为 medium 所有元素无根据指定确定 h1 {border: thick silver solid;} div {border: 3px thin dashed purple; }
外边距内边距边框 margin padding border border-style border-width border-color margin-top, margin-right, margin-bottom, margin-left padding-top, padding-right, padding-bottom, padding-left border-top, border-right, border-bottom, border-left border-top-style, border-right-style, border-bottom-style, border-left-style border-top-width, border-right-width, border-bottom-width, border-left-width border-top-color, border-right-color, border-bottom-color, border-left-color
文件夹风格
蒙德里安风格
color 值初始值应用范围继承性计算值实例 <color> inherit 用户代理指定的值所有元素有根据指定确定 h1 {color: rgb(51, 102, 0);} div {color: #33CC66; }
background-color 值初始值应用范围继承性计算值实例 <color> transparent inherit transparent 所有元素无根据指定确定 p {background-color: rgb(51, 102, 0);} div {background-color: #33CC66; }
background-image 值初始值应用范围继承性计算值实例 <url> none inherit none 所有元素无根据指定确定 p {background-image: url(apple.gif);} body {background-image: none; }
background-image: inherit
background-image: inherit * {background-image: url(picture.gif);} body {background-image: url(picture.gif);} * {background-image; inherit;}
background-repeat 值初始值应用范围继承性计算值实例 repeat repeat-x repeat-y no-repeat inherit repeat 所有元素无根据指定确定 body {background-image: url(apple.gif); background-repeat: repeat-y;}
background-repeat repeat repeat-y repeat-x no-repeat
background-position 值初始值应用范围继承性百分数计算值实例 [ [<percentage> <length> left center right ] [<percentage> <length> top center bottom ]? ] [ [ left center right [ top center bottom ] ] inherit 0% 0% 块级元素和替换元素无相对于应用背景元素所占框计算绝对长度或根据指定确定 body {background-image: url(apple.gif); background-position: top right;}
位置属性值的等价关系 单个关键字 center top bottom right left 两个关键字 center center center top center bottom right center left center top left bottom right 百分数 50% 50% 50% 0% 50% 100% 100% 50% 0% 50% 0% 0% 100% 100%
background-position
background-position
background-attachment 值 scroll fixed inherit 初始值应用范围继承性计算值实例 scroll 所有元素无根据指定确定 body {background-image: url(apple.gif); background-position: center center; background-attachment: fixed;}
background-attachment
background 值初始值应用范围继承性计算值实例 [ <background-color> <background-image> <background-repeat> <background-position> <background-attachment> inherit 根据单个属性所有元素无根据单个属性规定 body {background-color: white; background-image: url(apple.gif); background-position: left top; background-repeat: repeat-y; background-attachment: fixed;}
float 值 left right none inherit 初始值应用范围继承性计算值实例 none 所有元素无根据指定确定 img {float: left; } div {float: right; width: 15em; }
float
浮动规则 浮动元素的左 ( 或右 ) 外边界不能超出其包含块的左 ( 或右内边界 ), 浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端更高
浮动规则 浮动元素的左 ( 或右 ) 外边界必须是源文档中之前出现的左浮动 ( 或右浮动 ) 元素的右 ( 或左 ) 外边界, 除非后出现浮动元素的顶端在先出现浮动元素的底端下面
浮动规则 左浮动元素的右外边界不会在其右边右浮动元素的左外边界的右边, 一个右浮动元素的左外边界不会在其左边任何左浮动元素右外边界的左边
浮动规则 浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高
浮动规则 左 ( 或右 ) 浮动元素的左边 ( 右边 ) 有另一个浮动元素, 前者的右外边界 ( 或左外边界 ) 不能在其包含块右 ( 或左 ) 边界的右边 ( 或左边 )
clear
clear 值 left right both none inherit 初始值应用范围继承性计算值实例 none 块级元素无根据指定确定 h1 {clear: left; } div {clear: both; }
浮动元素重叠 浮动元素的 margin 值设置成负值时, 会产生重叠的现象 ; 行内框与一个浮动元素重叠时, 其边框 背景和内容都在浮动元素之上显示 ; 块框与一个浮动元素重叠时, 其边框和背景在浮动元素之下显示, 而内容在浮动元素之上显示 ; 重叠行为与元素在文档中的顺序无关, 元素在浮动元素之前还是之后并不重要
浮动元素重叠
position 值 static relative absolute fixed inherit 初始值应用范围继承性计算值实例 static 所有元素无根据指定确定 body {position: relative;} p {position: absolute; top: 0; right: 25%; bottom: auto; left: 50%; }
top, right, bottom, left 值初始值应用范围继承性百分数计算值实例 <length> <percentage> auto inherit auto 定位元素 (position 值不是 static 的元素 ) 无相对于包含块的高度和宽度绝对数值或根据指定确定 p {position: absolute; top: 0; right: 25%; bottom: auto; left: 50%; }
position: relative em { position: relative; top: 1em; left: 1em; background: gray; color: blue; font-weight: 300; border: 1px solid blue;}
position: fixed div#header {position: fixed; top: 0; bottom: 80%; left: 20%; right: 0; background: gray;} div#main {position: absolute; top: 20%; bottom: 0; left: 20%; right: 0; } div#sidebar {position: fixed; top: 0; bottom: 0; left: 0; right: 80%;}
position: fixed div#header {position: fixed; top: 0; bottom: 80%; left: 20%; right: 0; background: gray;} div#main {position: absolute; top: 20%; bottom: 0; left: 20%; right: 0; } div#sidebar {position: fixed; top: 0; bottom: 0; left: 0; right: 80%;}
position: absolute
包含块 根元素包含块, 也称初始包含块 一般将 html 或 body 作为根元素, 用户代理会为根元素建立一个视窗大小的矩形初始包含块 对于一个非根元素, 若其 position 值是 relative 或 static, 包含块由最近的块级框 表格单元格或行内块祖先框的内容边界构成 对于一个非根元素, 若其 position 值是 absolute, 包含块则设置为最近的 position 值不是 static 的祖先元素 ( 如果没有祖先元素, 包含块定义为初始包含块 )
定位等式 width( 包含块 )= left( 定位元素 )+ margin-left( 定位元素 )+ border-left( 定位元素 )+ padding-left( 定位元素 )+ width( 定位元素 )+ padding-right( 定位元素 )+ border-right( 定位元素 )+ margin-right( 定位元素 )+ right( 定位元素 ) height( 包含块 )= top( 定位元素 )+ margin-top( 定位元素 )+ border-top( 定位元素 )+ padding-top( 定位元素 )+ height( 定位元素 )+ padding-bottom( 定位元素 )+ border-bottom( 定位元素 )+ margin-bottom( 定位元素 )+ bottom( 定位元素 )
水平定位规则 若定义的属性值因过分受限而无法满足等式, 则将忽略 right 值 ( 假设在从左向右读的语言中 ; 否则, 在从右向左读的语言中将忽略 left 值 ) 如果只有一个属性设置为 auto, 就会修改这个属性值来满足等式 如果 left width 和 right 都设置为 auto, 左边界置于其静态位置 ( 假设在从左向右读的语言中 ; 否则, 在从右向左读的语言中将右边界置于其静态位置 ) width 设置为正好能容纳定位元素
min-width, min-height, max-width, max-height 值初始值应用范围继承性百分数计算值实例 <length> <percentage> none inherit none 除了非替换元素和表元素以外的所有元素无相对于包含块的高度和宽度绝对数值或根据指定确定 p {position: absolute; top: 10%; right: 10%; bottom: auto; left: 50%; min-width: 15em; max-width: 25em; }
overflow 值 visible hidden scroll auto inherit 初始值应用范围继承性计算值实例 visible 块级元素和替换元素无根据指定确定 p {position: absolute; top: 0; left: 0; width: 25%; height: 7em; overflow: scroll; }
overflow p { overflow: scroll; } p { overflow: visible; }
clip 值初始值应用范围继承性计算值实例 rect (top, right, bottom, left) auto inherit auto 绝对定位元素无根据指定确定 p {position: absolute; top: 0; left: 0; width: 25%; height: 7em; clip: rect(0, auto, auto, 0); }
clip
visibility 值初始值应用范围继承性计算值 visible hidden collapse inherit visible 所有元素有根据指定确定 实例 p {visible: hidden; }
z-index 值 <integer> auto inherit 初始值应用范围继承性计算值 auto 定位元素无根据指定确定 实例 p {position: absolute; top: 0; left: 0; width: 20%; height: 10em; z-index: 8;}
z-index
z-index p#one {z-index: 10;} p#two {z-index: 7;} p#three {z-index: 1;} p#one b {z-index: -404;} p#two b {z-index: 36;} p#two em {z-index: -42;} p#three b {z-index: 23;} p#one 10 p#one b 10, -404 p#two b 7, 36 p#two 7 p#two em 7, -42 p#three b 1, 23 p#three 1
表的格式化层
border-collapse 值初始值应用范围继承性计算值实例 collapse separate inherit separate display 值为 table 或 inline-table 的元素有根据指定确定 table { border-collapse: collapse; }
border-collapse
border-spacing 值初始值应用范围继承性计算值说明实例 <length> <length>? inherit 0 display 值为 table 或 inline-table 的元素有绝对数值除非 border-collapse 值为 separate, 否则会忽略 table { border-spacing: 3px 5px; }
合并单元格边框规则 如果某个单元格边框的 border-style 的值为 hidden, 它会优于所 有其他单元格边框设置, 这个位置上的所有边框都隐藏 ; 宽边框优于窄边框 ; 如果边框宽度相同, 则边框样式的优先顺序如下 ( 从高到低 ): double, solid, dashed, dotted, ridge, outset, groove, inset; 如果边框样式和宽度都相同, 但颜色不同, 则按以下顺序确定优先级 ( 从高到低 ):cell, row, row group, column, column group, table; 如果合并边框来自相同类型的元素, 两个又有相同样式和宽度, 但颜色不同, 则颜色取最上最左边框的颜色 ( 在从左向右读的语言中 ; 而在从右向左读的语言中, 则取最上最右边框的颜色 ); 如果某个单元格边框的 border-style 的值为 none, 则它的优先级最低
合并单元格边框
List-style-type 值初始值应用范围继承性计算值实例 disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-greek lower-latin upper-latin armenian geogrian none inherit disc display 值为 list-item 的元素有根据指定确定 li {list-style-type: square;}
list-style-image 值初始值应用范围继承性计算值实例 <url> none inherit none display 值为 list-item 的元素有根据指定确定 li {list-style-image: url(ohio.gif); }
list-style-position 值初始值应用范围继承性计算值实例 inside outside inherit outside display 值为 list-item 的元素有根据指定确定 li {list-style-position: inside;}
List
list-style 值初始值应用范围继承性计算值实例 [ <list-style-type> <list-style-image> <list-style-position> ] inherit 相对于各个属性 display 值为 list-item 的元素有根据指定确定 li {list-style: url(ohio.gif) square inside;}
cursor 值初始值应用范围继承性计算值实例 [ [<url>,]* [ auto default pointer crosshair move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help progress ] ] inherit auto 所有元素有根据指定确定 a {cursor: url(hwe.cur);} p.tip {cursor: help;}
cursor
Any Question?