css样式定义简介.pptVIP

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;由两个主要的部分构成：选择器，以及一条或多条声明。 ;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 文档中出现一次。 ;类选择器;属性选择器;派生选择器;你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。 h1,h2,h3,h4,h5,h6 { color: green; } ;根据 CSS，子元素从父元素继承属性。 body { font-family: Verdana, sans-serif; } 所有 body 的子元素都应该显示 Verdana 字体，子元素的子元素也一样。;如果你不希望 “Verdana, sans-serif” 字体被所有的子元素继承，又该怎么做呢？比方说，你希望段落的字体是 Times。没问题。创建一个针对 p 的特殊规则，这样它就会摆脱父元素的规则： p { font-family: Times, Times New Roman, serif; }