intro-to-css.pptVIP

Content Formatting CSS = Cascading Style Sheet 层叠样式表 HTML provides the content structure CSS provides rich formatting layout Limitations of HTML Rigid and not flexible e.g. To format text of heading h1 you need font h1标题/h1 h1font color = ”blue”标题/font/h1 Limitations of HTML What happens when you have a lot of h1 tags? h1标题/h1 h1标题/h1 h1标题/h1 h1标题/h1 h1标题/h1 h1标题/h1 h1标题/h1 h1标题/h1 h1标题/h1 Limitations of HTML Results: h1font color = ”blue”标题/font/h1 h1font color = ”blue”标题/font/h1 h1font color = ”blue”标题/font/h1 h1font color = ”blue”标题/font/h1 h1font color = ”blue”标题/font/h1 h1font color = ”blue”标题/font/h1 h1font color = ”blue”标题/font/h1 h1font color = ”blue”标题/font/h1 h1font color = ”blue”标题/font/h1 What if... I could tell the browser ONCE that I want all h1 to use blue fonts. Would this be great? 好不好？ html head meta http-equiv=Content-Type content=text/html;charset=UTF-8; / style type=text/css H1 { color: blue; } /style /head body h1标题1/h1 h1标题2/h1 h1标题3/h1 h1标题4/h1 h1标题5/h1 /body /html style H1 { color: blue; font-size: 30px; font-family: arial; text-align: right; text-decoration: underline; background-color: yellow; } /style More style... Selector { property: value; property2: value2; } 选择器 属性 值 属性2 值2 P { color: red; align: justify; } P { color: red; align: justify; } Basic Syntax (语法） P,H1,H2 { color: red; align: justify; } p,h1,h2 { color: red; align: justify; } Grouping selectors (选择器分组） color（文本颜色） line-height（行高） letter-spacing（字符间距） text-align（对齐元素中的文本） - left, right, center, justify text-decoration（向文本添加修饰） - none, underline, overline, line-through text-indent（缩进元素中文本的首行） word-spacing（字间距） Text (文本）Properties font-family（字体系列） font-size（字体尺寸） font-style（字体风格） - normal, italic, oblique font-weight （设置） - normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 Font (字本）Properties background-attachment（背景图像是否固定或者随着页面的其