CSS扫盲尚硅谷封捷.pdf

“玩转”Java 系列 ————————————————————————————— CSS 层叠样式表 1 CSS 代码写在哪？ 1.1 内联样式表：HTML 标签内 p style=color:blue;落霞与孤鹜齐飞，秋水共长天一色/p 1.2 内部样式表：head 标签内，title 标签后面 style type=text/css p { font-size: 80px; } /style 1.3 外部样式表：独立的CSS 文件中 p { border-style: solid; border-width: 1px; border-color: black; text-align: center; } 使用link 标签引入到当前文档中 link rel=stylesheet type=text/css href=css/style.css / 2 CSS 基本语法 2.1 CSS 语法由三部分构成：选择器、属性和值：selector {property: value} 3 CSS 选择器：根据id 值定位HTML 元素 3.1 id 选择器 ul li普通列表项/li li普通列表项/li li普通列表项/li li id=tuHao土豪列表项/li li普通列表项/li /ul #tuHao { font-size: 50px; } 1 【更多Java –Android 资料下载，可访问尚硅谷（中国）官网 下载区】 “玩转”Java 系列 ————————————————————————————— 3.2 类选择器：如果想将一组元素设定为相同的样式，可为它们设置相同的class 属性 值，再通过CSS 类选择器指定相同的样式 ul li普通列表项/li li普通列表项/li li普通列表项/li li class=special特殊列表项/li li class=special特殊列表项/li li class=special特殊列表项/li li普通列表项/li li普通列表项/li /ul .special { font-size: 50px; } 3.3 选择器分组：不同的元素使用相同的样式时，可以使用“，”隔开，表示并列关系 h1标题1/h1 h2标题2/h2 h3标题3/h3 h4标题4/h4 h5标题5/h5 h6标题6/h6 h2,h3 { border-style: solid; 2 【更多Java –Android 资料下载，可访问尚硅谷（中国）官网 下载区】 “玩转”Java 系列 ————————————————————————————— border-width: 1px;