CSS设计模式:应用样式表

可以把样式放在3个地方:样式表、<style>和style。样式裹( stylesbeet)是一个独立的文件,可以通过<link>元素或者css的@import语句把它附加到某个HTML文档中。<style>是一个HTML元素,可以把它嵌在HTML文档中。style是一个属性,它可以嵌在任何HTML元素中。我建议把样式放在样式表里。这会减少HTML文档中的非内容成分,并且把所
有的样式放在独立的文件中也便于管理。我建议使用一个单词为样式表命名,并全部小写。这会令样式表的名字显得很简洁并容易记忆,还可平稳地运行在所有的操作系统中。我推荐你使用一个能描述样式表使用目的和作用域的

名字,
例如site.css、page.css.handheld.css、print.css等。样式表的标准扩展名为.css。标准的互联网媒介类型为text/css。我建议使用样式表的不同位置来控制它的作用域。如果一个样式表是修饰整个网站的,则应该把它放在网站的根目录下。如果样式表仅作用于某要想把样式表链到HTML文档中,需在HTMI文档中的(head>区域使用<link>元素,把样式表的URL赋给.link>元素的href属性。代码清单1-1显示的就是我在本书中使用的样式表链接。更多关于链接样式表的内容可查看第2章中的头部元素和条件样式表
设计模式。

代码清单1-1添加样式表。

<link rel:“stylesheet”href=“site.css” media=“all”type=“text/css” />

<link rel:“stylesheet”href=“page.css” media=“all”type=“text/css” />

<link rel:“stylesheet”href=“print.css” media=“print”type=“text/css” />

<!--[if lte IE 6]>

<link rel="stylesheet"href="ie6.css"media="all"type=“text/css” />

<![endifl-->

为了便于下载,你或许会在.style,元素中加上一些针对某个页面的样式,而不是把它们放在独立的专属此页面的样式表中。既然这些样式是专属于某个页面的,
那么把这些样式放在那个页面的头部就不会带来什么问题。
不过,我强烈建议大家不要使用HTMLiC素中的style属性,因为这将使代码维护起来非常困难.

时间: 2024-10-27 14:28:02

CSS设计模式:应用样式表的相关文章

CSS学习之样式表基础知识

css|样式表 什么是样式表  CSS是Cascading Style Sheet 的缩写.译作「层叠样式表单」.是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言.  如何将样式表加入您的网页  你可以用以下三种方式将样式表加入您的网页.而最接近目标的样式定义优先权越高.高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义. 链入外部样式表文件 (Linking to a Style Sheet) 你可以先建立外部样式表文件(.css),然后使用HTML的link对

[css]简明教程 样式表中的类

css|教程|样式表 类 为了对网页格式的定义更为精确,有必要让相同的选择符也能分类,并能按照不同的类别来进行不同的样式设计.基本格式如下: 选择符.类别名 {属性:值} 类别名将可以在HTML的标识符里引用: <标识符 class=类别名>网页内容标识符> 实例: <html> <head> <title>CSS例子</title> <style type="text/css"> <!-- p.Eng

[css] 简明教程 样式表的编辑和浏览

css|教程|样式表 CSS样式表编辑器 CSS是HTML语言的扩展,也是一种标记性语言,所以凡是可以用来编写HTML的编辑器都可以用来编写CSS. 不带格式的文本编辑器都支持对CSS的编辑,如:Windows自带的写字板和记事本,以及DOS下的EDIT.使用文本编辑器编写和修改CSS文档很方便.快捷,但前提是要记住所有的CSS标识,如果编写中出现语法错误,文本编辑器将不会提示.由此看来,文本编辑器比较适合编写小型的CSS文档或对CSS文档进行局部的修改.另外需要提醒注意的是,用文本编辑器编写的

[css]简明教程 样式表的书写格式

css|教程|样式表 一般来说,样式表的声明分为选择符(selector)和块{}(block),块里包含属性(properties)和属性的取值(value),基本格式如下: 选择符 {属性:值} 其它格式1: 选择符1,选择符2,选择符3 {属性1:值1:属性2:值2:属性3:值3} 有时候多个选择符将使用相同的设置,为了简化代码,我们可以一次性为它们设置样式,并在多个选择符之间加上","来分隔它们. 当有多个属性的时候,必须在两个属性之间用":"来分隔. 其它

CSS 循序渐进三样式“表”秀

不知道大家看完前面两篇以后是否对用style已经有了一点心得,其实前文所说的不过是样式表最基本的运用.笔者这里想问一问,读者们有没有感觉到html中所规定的那些标准形式的表格(table)和表单(form)样子过于呆板,而风格又时常与自己网页格格不入呢?而且,对于一个大信息量和交互式的网页而言,表格和表单是需要大量运用并且占有很重要的位置的.现在如果笔者告诉大家用样式表定制自己个人风格的表单和表格的话,您是否会兴奋得跳起来呢?其实,如果恰当的运用style,甚至可以做出比作图更好的效果来. 先给

GridView CSS的完整样式表

  .GridViewStyle   {         border-right: 2px solid white;       border-bottom: 2px solid white;       border-left: 2px solid white;       border-top: 2px solid white;       padding: 18px;       width:500px;       font-size:15px;  }   .GridViewHeade

串接样式表(CSS)来显示XML文件

css|xml|显示|样式表     在本章中,你将学习显示XML 文件于Microsoft Internet Explorer 5 中的第一种方法:串接样式表(CSS).串接样式表是一个包含安排XML 文件中元素相关指令的档案.因为你已经利用XML创造了自己的元素,浏览器并不知道如何适当地显示这些元素.建立串接样式表并将它链接到XML 文件中便是一种告诉浏览器如何显示文件中每个元素的方法.附加串接样式表的XML 文件可以直接在Internet Explorer 5 中被开启.你不需要使用HTM

在DreamWeaver中应用CSS样式表技巧两则

css|dreamweaver|技巧|样式表 一. 去除超级链接的下划线以及在超级链接上实现鼠标悬停变色: 在默认情况下,用DreamWeaver设计的网页中的超级链接都有下划线,看上去不大美观.要去除这些讨厌的下划线,很多报刊介绍的方法都是在HTML源代码中手工加入一段代码,其实在DreamWeave中很容易去除链接的下划线.首先在DreamWeaver的Document Windows中随便建立一个链接,你可以看到这个链接会有下划线.怎样去除这条下划线呢? 1.在点击菜单栏上的"Text&q

用CSS样式表缩写给你的网站加速

css|网站加速|样式表 Web网站可用性的关键指标是速度,更确切地说,是页面能以多快的速度出现在访问者的浏览器窗口里.影响速度的因素有很多种,包括Web服务器的速度.访问者的Internet连接情况,以及浏览器必须下载的文件大小.尽管你无法控制服务器和连接的速度,但是你可以控制构成网站Web页面的文件大小. 为了让网站能够更快,Web的建设者都会按常规地压缩和优化网站上的每一个图像文件,这常常使得为了将文件的大小减少几个百分点而牺牲了图像的质量.由于CSS样式表是纯文本文件,和图像相比相对较小