css样式恶定义介绍.ppt

* CSS样式定义 为什么使用样式？ 1.样式解决了一个普遍的问题 HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。 2.样式表极大地提高了工作效率 通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。 样式定义的三种方式 1.内联样式（在 HTML 元素内部） 2.内部样式表（位于 head 标签内部 3.外部样式表（Link引入） 1.内联样式 （在 HTML 元素内部） div style=“width:100px;height:100px;background:#eee;”/div 2.内部样式表 （位于 head 标签内部） head style type=text/css div{width:253px;background:#C30431;padding-bottom:30px;} p{padding:0 20px;} a{display:block;height:34px; color:#fff;border:dashed 1px #E67A92;} /style /head 3.外部样式表 （Link引入） link rel=stylesheet type=text/css href=“css/style.css 由两个主要的部分构成：选择器，以及一条或多条声明。 CSS规则 selector {declaration1; declaration2; ... declarationN } h1 {color:red; font-size:14px; text-align: center; } —— —— 选择器 ———————— —— 声明 —— —— 属性 值 Css选择器 如果要定义不止一个声明，则需要用分号将每个声明分开。最后一条规则是可以不加分号的，但是这里建议加分号。 p {text-align:center; color:red;} 标签选择器 你应该在每行只描述一个属性，这样可以增强样式定义的可读性，就像这样： p { text-align: center; color: black; font-family: arial; } id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式： p id=red这个段落是红色。/p p id=green这个段落是绿色。/p id 选择器以 “#” 来定义： #red { color:red; } #green { color:green; } 注意：id 属性只能在每个 HTML 文档中出现一次。 id 选择器 类选择器 在 CSS 中，类选择器以一个点号显示： .center {text-align: center} 在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。 在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 “.center” 选择器中的规则。 h1 class=center This heading will be center-aligned /h1 p class=center This paragraph will also be center-aligned. /p 注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。 属性选择器 可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。 下面的例子为带有 title 属性的所有元素设置样式： [title] { color:red; } 属性选择器在为不带有 class 或 id 的表单设置样式时特别有用： input[type=text] { width:150px; display:block; margin-bottom:10px; background-color:yellow; } 派生选择器 派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。 比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器： li strong { font-style: italic; font-weight: normal;