|
|
1.什么是CSS CSS(Cascading Style Sheet,层叠样式表)是一种格式化网页的标准方式,它扩展了 HTML 的功能,使网页设计者能够以更有效的方式设置网页格式。 具体说,CSS是一组样式,样式中的属性在HTML元素中依次出现,并且显示在浏览器中。 样式可以定义在HTML文档的标志(TAG)里,也可以在外部附加文档作为外加文档,此时,一个样式表可以用于多个页面,甚至整个站点,因此,具有更好的易用性和扩展性.
1)将结构和格式分离. HTML语言定义网页结构和各要素功能,而CSS将定义结构和格式的部分分离,使我们对页面的布局施加更多的控制。HTML仍然可以保持简明;CSS独立出来从另一个角度控制页面外观。 2)以前所未有的能力控制页面布局.
3)制作体积更小,下载更快的网页. 样式表是简单的文本,像HTML那样,它不需要图像,不需要执行程序,不需要插件。体积的代码,减少图像用量,从而减小文件尺寸。 4)将许多网页同时更新,比以前更快更容易. 没有CSS时,要想更新整个站点中所有主体文本的字体,必须要一页一页地修改.利用CSS就可以将站点上所有的网页都指向单一的一个CSS文件,只要修改CSS文件中某一行,那么整个站点都会随之发生变动. 5)浏览器将成为更友好的界面. CSS的代码有很好的兼容性, 如果用户丢失了某个插件时不会发生中断,或者使用旧版本的浏览器时代码不会出现杂乱无章的情况,只要是可以识别串接样式表的浏览器就可以应用它.
|
|
1)自定义CSS 我们可以在文档的任何区域或者文本中应用自定义的CSS,如将自定义的CSS应用于一段文字,那么会在相应标记中出现”Class”属性,它的属性值即为自定义的css名称. 如果将自定义的CSS用于部分文字上,那么会出现<span>和</span>标记,并且在其中包含”class”属性,如下代码: .bg{ background-image: url(bg.gif);} <body class=“bg”> 2)重定义标记的CSS 我们可以针对某一个HTML标记来定义CSS,也就是说定义的CSS将应用于选择的标记,例如我们为<body></body>标记定义了CSS,那么包含在<body></body>标记中的内容都将遵循定义的CSS.如: body { color:#000099; font-sise:9pt} 3)CSS选择符 CSS选择符为特殊的组合标记定义CSS,使用id作为属性,以保证文档具有唯一可用的值。css选择符是一种特殊类型的样式,常用的4种是:
如下面的代码: a:link { color:#ff3366; font-family:”宋体”;text-decoration:none;} a:hover{ color:#ff6600; font-family: ”宋体”;text-decoration:none} a:visited {font-family:”宋体”; color:#ff3366; text-decoration:none}
|
|
方式一: 内联样式表(Inline Styles) 内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性,格式如: <标记符 style=“属性1:值1;属性2:值2;…” > 这种写法主要在标记中引用,比如要让H3标记中的字体大小为10pt,以红色显示,可以写成 <h3 style=“font-sise:10pt; font-color:red”> 这种写法虽然直观,但是无法体现出层叠样式表的优势,因此不推荐使用 优点:可修饰单独的标记符 缺点:没有发挥CSS统一设置格式的优势 方式二: 内部样式块对象 (Embedding a Style Block 在HTML文档的<HTML>和<BODY>标记之间插入一个<STYLE>...</STYLE>块对象。如: <STYLE TYPE=“TEXT/CSS”> H1 { font-size:x-large; color:red } H2 { font-sise: large; color:blue } </STYLE> 上面代码定义了<H1><H2>标记使用的字号和颜色. 其中<STYLE></STYLE>之间是样式的内容;TYPE 一项使用的是TEXT中的CSS写的代码;{ }前面是样式的类型和名称,{ }中的是样式的属性.
<html> 请注意,这里将style对象的type属性设置为"text/css",是允许不支持这类型的浏览器忽略样式表单。 优点:有利于统一设置单个网页的格式 缺点:不便统一设置多个网页的格式 方式三: 链入外部样式表文件 (Linking to a Style Sheet) 先建立外部样式表文件(.css),然后使用HTML的link对象。如下: <LINK rel=“stylesheet” type=“text/css” href=“stylesheet.css”> CSS的定义既可以是在文档内部,也可以单独成文件,上面的代码就是将CSS样式链接到外部的style.css文件. 优点:可设置多个网页的统一格式,常用于网站
颜色英文名 red 将两个或更多的 CSS 样式应用于同一文本时,这些样式可能发生冲突并产生意外的结果。浏览器根据以下规则应用样式属性:
总结:“就近优先”原则 在下面的示例中,为 h1 定义的样式可以指定所有 h1 段落的字体、大小和颜色,但应用于该段落的自定义 CSS 样式 .Blue 将取代 H1 样式中的颜色设置。另一个自定义 CSS 样式 .Red 将取代 .Blue,因为它位于 .Blue 样式的内部。
|
版权声明:未标注转载均为本站原创,转载时请以链接形式注明文章出处。如有侵权、不妥之处,请联系站长删除。敬请谅解!
常见资源合集和破解 fmvvvteih...