复旦大学：《Web应用基础》教学课件_Chapter 4 HTML & CSS

web应用基砒

Web应用基础

HTML D HTML: logical structure

HTML ‡ HTML: logical structure

HTML html head body frameset title meta base d hn table ol/ul frame dIv span p tr li g src <button type

HTML html head body frameset title meta base p div hn frame div span p table ol/ul tr td li

CSS 口Css: presentation

CSS ‡ CSS: presentation

Selector and declaration Declaration block Selector Declaration Declaration h1 color: red; background: yellow; Attribute value

Selector and Declaration h1 { color: red; background: yellow; } Selector Declaration Declaration Attribute Value Declaration block

Selector 类型特征符号 实例 元素选择器 h1, h2 font: medium Arial; 1 类选择器 p warning font-style: italic; color: blue; 1 D选择器 # #lead-head color: red; background yellow; 3 属性选择器[] a [href*="fudan. edu. cn"]color: maroon, 1 后代选择器空格+>tabe*td{ color:bue;} 伪类选择器 a: visited: hover color: gray

Selector 伪类选择器 : a:visited:hover {color: gray;} table * td {color: blue;} a [href*="fudan.edu.cn"] {color: maroon;} #lead-head {color: red; background: yellow;} p.warning {font-style: italic; color: blue;} h1, h2 {font: medium Arial;} 实例 属性选择器 [ ] 后代选择器 空格 + > ID选择器 # 类选择器 . 元素选择器 , 类型 特征符号

特殊性 内联样式 1,0,0,0 ID选择器 0,1,0,0 类/属性/伪类选择器 0,0,1,0 元素/后代选择器伪元素 0,0,0,1 结合符通配符HTML属性 0,0,0,0 继承 None

特殊性 内联样式 ID选择器 类/属性/伪类选择器 元素/后代选择器 伪元素 结合符 通配符 HTML属性 继承 1, 0, 0, 0 0, 1, 0, 0 0, 0, 1, 0 0, 0, 0, 1 0, 0, 0, 0 None

声明来源的优先级 用户的重要性声明 创作人员的重要性声明 创作人员的一般性声明 用户的一般性声明 用户代理声明浏览器用户首选项) 低

声明来源的优先级 用户的重要性声明 创作人员的重要性声明 创作人员的一般性声明 用户的一般性声明 用户代理声明 (浏览器用户首选项 ) 高 低

CSS All Together a Font and text 口 Color and Background 口 Box and border 口 Float and position 口Tab| e and list

CSS All Together ‡ Font and Text ‡ Color and Background ‡ Box and Border ‡ Float and Position ‡ Table and List

font font-family Palatino Linotype Monotype corsiva font-weight font-weight font-weight font-size font-size font-size font-style font-style font-style font: italic 500 2em arial

font font-family font-weight font-size font-style font: italic 500 2em Arial;