香八方防骗子,香八方打击恶意诋毁骗子之css探索样式布局.ppt

探索样式布局篇 CSS CSS简介 它能做什么？ CSS语法结构 怎样将CSS应用到网页中？ CSS 简介 什么是CSS? CSS (Cascading Style Sheets) 层叠样式表 它能做些什么？ 使用CSS样式可以有效地对页面进行布局。 使用CSS样式可以对页面字体、颜色、背景和其他效果实现精确描述，同时对它们的修改和控制变得更加快捷。 可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的代码，那么整个站点的所有页面都会随之发生变动。 CSS可以支持多种设备,比如手机,PDA,打印机,电视机,游戏机等 目的：将表现与结构分离。 CSS 语法结构 CSS 语法由三部分构成：选择符、属性和值 Selector {Property:Value; color:red;} 选择符 属性 值 例： style type=“text/css” body { background-color:#cccccc;} /style 将CSS应用到网页中 1.行间样式表 行间样式表是指将CSS样式编码写在XHTML 标签之中。 如： body style=“background-color:#ccccc;” h1 style=“font-size:12px; color:#ff0000;”这是一个标题/h1 将CSS应用到网页中 2. 内部样式表 内部样式表作为页面中的一个单独部分，由style/style标签定位在head/head之中。 如： head style type=“text/css” body { background-color:#cccccc; } /style /head 将CSS应用到网页中 3.外部样式表 外部样式表是CSS应用中最好的一种形式，它将CSS样式代码单独放在一个外部文件中，再由网页进行调用。 如： style.css body { background-color:#cccccc; } head style type=“text/css” /style link rel=“stylesheet”type=“text/css” href=“style.css”/ /head CSS选择符 1.类型选择符 所谓类型选择符，指以网页中已有的标签名作为名称的选择符。 如 body {} h1 {} p {} 选择符 2.群组选择符 除了可以对单个标签进行样式指定外，还可以对一组标签进行相同的样式定义。 如： h1, h2, h3, p { font-size:12px; font-family:arial; } 使用逗号对选择符进行分隔。对页面中需要使用相同样式的地方，只需写一次样式。 选择符 3.包含选择符 当我们只打算对某个对象的子对象进行样式定义时，可以使用包含选择符。 如： h1 span { font-weight:bold; } 选择符 3.id 及 class 选择符 id 及 class 均是css 提供由用户自定义标签名称的选择符，用户可以使用选择符id及class 来对页面中的xhtml标签进行自定义名称，从而达到扩展xhtml标签及组合html标签的目的。 如：id 选择符 p id=“p1” 这是一个段落 /p #p1 { font-size:12px; font-weight:bold; } 选择符 如：class 选择符 p class=“p1” 这是一个段落 /p .p1 { font-size:12px; font-weight:bold; } 在网页中，每个id名称中只能使用一次，不得重复。 与id 不同，class 允许重复使用。比如页面中的多个元素，都可以使用同一个样式定义。 选择符 4.组合选择符 如： h1 .p1 {} 表示h1标签下的所有class为p1的标签。 #content h1 {} 表示id为content的标签下的所有h1标签。 选择符 5.伪类选择符 伪类可以看做是一种特殊的类选择符，是能被支持CSS的浏览器自动所识别的特殊选择符。它 的最大的用处就是可以对链接在不同状态下定义不同的样式效果。 a:link {color: #FF0000; tex