怎样使用css

《怎样使用css》由会员分享，可在线阅读，更多相关《怎样使用css（16页珍藏版）》请在金锄头文库上搜索。

1、怎样使用 CSS 如果你使用的是 Dreamweaver MX 2004 以上的版本，在定义文字字体、颜色、大小等属性 的时候，查看一下代码你会发现有这样的一部分在 head 区域：那么恭喜你，你已经使用了 CSS 设计网页。 那么除了这种调用 CSS 的方法外，还有别的吗？回答是“当然有了” ，下面是系统介绍 标记加注法(in-line)： 如果只有一个 HTML 标记需要设定样式，则可在该标记内，加上属性 style=“ “ 以个别修订样式。 页面内嵌法：外部调用法：双表法调用样式表： import url( css/style01.css ); 1. 基本语法 CSS 的定义是由三个部分

2、构成：选择符（selector） ，属性（properties）和属性的取值 （value） 。 基本格式如下： selector property: value （选择符 属性：值 ） 选择符是可以是多种形式，一般是你要定义样式的 HTML 标记，例如 BODY、P、TABLE，你可以通过此方法定义它的属性和值，属性和值要用冒号隔开： body color: black 选择符 body 是指页面主体部分，color 是控制文字颜色的属性，black 是颜色的值，此例的 效果是使页面中的文字为黑色。 如果属性的值是多个单词组成，必须在值上加引号，比如字体的名称经常是几个单词的组 合： p f

3、ont-family: “sans serif“ （定义段落字体为 sans serif ） 如果需要对一个选择符指定多个属性时，我们使用分号将所有的属性和值分开： p text-align: center; color: red （段落居中排列；并且段落中的文字为红色） 为了使你定义的样式表方便阅读，你可以采用分行的书写格式： p text-align: center; color: black; font-family: arial （段落排列居中，段落中文字为黑色，字体是 arial） 2. 选择符组 你可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式 重复定

4、义： h1, h2, h3, h4, h5, h6 color: green （这个组里包括所有的标题元素，每个标题元素的文字都为绿色） p, table font-size: 9pt （段落和表格里的文字尺寸为 9 号字） 效果完全等效于： p font-size: 9pt table font-size: 9pt 3. 类选择符 用类选择符你能够把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称 前面加一个点号。假如你想要两个不同的段落，一个段落向右对齐，一个段落居中，你可 以先定义两个类： p.right text-align: right p.center text-ali

5、gn: center 然后用不在不同的段落里，只要在 HTML 标记里加入你定义的 class 参数： 这个段落向右对齐的这个段落是居中排列的这个段落向右对齐的这个段落是居中排列的注意：类的名称可以是任意英文单词或以英文开头与数字的组合，一般以其功能和效果简 要命名。 类选择符还有一种用法，在选择符中省略 HTML 标记名，这样可以把几个不同的元素定义 成相同的样式： .center text-align: center （定义.center 的类选择符为文字居中排列） 这样的类可以被应用到任何元素上。下面我们使 h1 元素（标题 1）和 p 元素（段落）都归 为“center”类，这使两个元

6、素的样式都跟随“.center” 这个类选择符：这个标题是居中排列的这个段落也是居中排列的注意：这种省略 HTML 标记的类选择符是我们经后最常用的 CSS 方法，使用这种方法，我 们可以很方便的在任意元素上套用预先定义好的类样式。 4. ID 选择符 在 HTML 页面中 ID 参数指定了某个单一元素，ID 选择符是用来对这个单一元素定义单独的 样式。 ID 选择符的应用和类选择符类似，只要把 CLASS 换成 ID 即可。将上例中类用 ID 替代：这个段落向右对齐定义 ID 选择符要在 ID 名称前加上一个“#”号。和类选择符相同，定义 ID 选择符的属性 也有两种方法。下面这个例子，ID

7、 属性将匹配所有 id=“intro“ 的元素： #intro font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent （字体尺寸为默认尺寸的 110% ；粗体；蓝色；背景颜色透明） 下面这个例子，ID 属性只匹配 id=“intro“ 的段落元素： p#intro font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent 注意：ID 选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下

8、使用。 5. 包含选择符 可以单独对某种元素包含关系定义的样式表，元素 1 里包含元素 2 ，这种方式只对在元素 1 里的元素 2 定义，对单独的元素 1 或元素 2 无定义，例如： table a font-size: 12px 在表格内的链接改变了样式，文字大小为 12 象素，而表格外的链接的文字仍为默认大小。 6. 样式表的层叠性 层叠性就是继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包 含的其他元素。事实上，所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时 会把很多层嵌套的样式叠加在一起，除非另外更改。例如在 DIV 标记中嵌套 P 标记： div col

9、or: red; font-size:9pt 这个段落的文字为红色 9 号字（P 元素里的内容会继承 DIV 定义的属性） 注意：有些情况下内部选择符不继承周围选择符的值，但理论上这些都是特殊的。例如，上边界属性值是不会继承的，直觉上，一个段落不会同文档 BODY 一样的上边界值。 另外，当样式表继承遇到冲突时，总是以最后定义的样式为准。如果上例中定义了 P 的颜 色： div color: red; font-size:9pt p color: blue 这个段落的文字为蓝色 9 号字我们可以看到段落里的文字大小为 9 号字是继承 div 属性的，而 color 属性则依照最后定义 的。 不

10、同的选择符定义相同的元素时，要考虑到不同的选择符之间的优先级。ID 选择符，类选 择符和 HTML 标记选择符，因为 ID 选择符是最后加上元素上的，所以优先级最高，其次是 类选择符。如果想超越这三者之间的关系，可以用!important 提升样式表的优先权，例如： p color: #FF0000!important .blue color: #0000FF #id1 color: #FFFF00 我们同时对页面中的一个段落加上这三种样式，它最后会依照被!important 申明的 HTML 标记选择符样式为红色文字。如果去掉!important，则依照优先权最高的 ID 选择符为黄色 文字

11、。 7. 注释 你可以在 CSS 中插入注释来说明你代码的意思，注释有利于你或别人以后编辑和更改代码 时理解代码的含义。在浏览器中，注释是不显示的。CSS 注释以“/*“ 开头，以“*/“ 结尾， 如下： /* 定义段落样式表 */ p text-align: center; /* 文本居中排列 */ color: black; /* 文字为黑色 */ font-family: arial /* 字体为 arial */ /* 定义段落样式表 */ p text-align: center; /* 文本居中排列 */ color: black; /* 文字为黑色 */ font-family:

12、 arial /* 字体为 arial */ 前面我们了解了 CSS 的语法，但要想在浏览器中显示出效果，就要让浏览器识别并调用。 当浏览器读取样式表时，要依照文本格式来读，这里介绍四种在页面中插入样式表的方法： u链入外部样式表/u 、u 内部样式表/u、u导入外表样式表/u和u内嵌样式/u 。 1. 链入外部样式表 链入外部样式表是把样式表保存为一个样式表文件，然后在页面中用标记链接到这个 样式表文件，这个 标记必须放到页面的 区内，如下：上面这个例子表示浏览器从 mystyle.css 文件中以文档格式读出定义的样式表。rel=” stylesheet”是指在页面中使用这个外部的样式表。

13、type=”text/css”是指文件的类型是样 式表文本。href=”mystyle.css”是文件所在的位置。media 是选择媒体类型，这些媒体包 括：屏幕，纸张，语音合成设备，盲文阅读设备等。 一个外部样式表文件可以应用于多个页面。当你改变这个样式表文件时，所有页面的样式 都随之而改变。在制作大量相同样式页面的网站时，非常有用，不仅减少了重复的工作量， 而且有利于以后的修改、编辑，浏览时也减少了重复下载代码。 样式表文件可以用任何文本编辑器（例如：记事本）打开并编辑，一般样式表文件扩展名 为.css。内容是定义的样式表，不包含 HTML 标记，mystyle.css 这个文件的内容如下： hr color: sienna p margin-left: 20px body background-image: url(“images/back40.gif“) /*定义水平线的颜色为土黄；段落左边的空白边距为 20 象素；页面的背景图片为 images 目录下的 back40.gif 文件*/