预览加载中，请您耐心等待几秒...

css样式表学习手册.doc

预览
1/7
2/7
3/7
4/7
5/7
6/7
7/7

在线预览结束，喜欢就下载吧，查找使用更方便

下载提示 文本预览

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

Css学习 CSS就是CascadingStyleSheets，中文翻译为“层叠样式表”，简称样式表，它是一种制作网页的新技术。 样式表文件可以用任何文本编辑器（例如：记事本）打开并编辑，一般样式表文件扩展名为.css 一、如何在网页中插入CSS在页面中插入样式表的方法：链入外部样式表、内部样式表、导入外表样式表和内嵌样式。1.链入外部样式表链入外部样式表是把样式表保存为一个样式表文件，然后在页面中用<link>标记链接到这个样式表文件，这个<link>标记必须放到页面的<head>区内，如下：<head><linkrel="stylesheet"type="text/css"href="./mystyle.css"media=”screen”> media=”print”</head>上面表示浏览器从mystyle.css文件中以文档格式读出定义的样式表。rel=”stylesheet”指的是这个LINK和其href之间的关联，这里指出这个href文件是样式表文件。type=”text/css”是指文件的类型是样式表文本。href=”mystyle.css”是文件所在的位置。内容是定义的样式表如：body{background-image:url("images/back40.gif")}2.内部样式表内部样式表是把样式表放到页面的<head>区里，这些定义的样式就应用到页面中了，样式表是用<style>标记插入的，从下例中可以看出<style>标记的用法：<head> <styletype="text/css"> <!--hr{color:sienna}p{margin-left:20px}body{background-image:url("images/back40.gif")}--> </style> </head>注意：有些低版本的浏览器不能识别style标记，这意味着低版本的浏览器会忽略style标记里的内容，并把style标记里的内容以文本直接显示到页面上。为了避免这样的情况发生，我们用加HTML注释的方式（<!--注释-->）隐藏内容而不让它显示：3.导入外部样式表导入外部样式表是指在内部样式表的<style>里导入一个外部样式表，导入时用@import， 实例： <head><styletype=”text/css”><!--@import“mystyle.css”/*这里可以写其他样式表的声明*/ --></style> </head> 方法和链入样式表的方法很相似，但导入外部样式表输入方式更有优势。实质上它相当于存在内部样式表中的。注意：导入外部样式表必须在样式表的开始部分，在其他内部样式表上面。4.内嵌样式内嵌样式是混合在HTML标记里使用的，可以很简单的对某个元素单独定义样式。内嵌样式的使用是直接将在HTML标记里加入style参数。而style参数的内容就是CSS的属性和值，如下例：<pstyle="color:sienna;margin-left:20px">这是一个段落</p> 在style参数后面的引号里的内容相当于在样式表大括号里的内容。style参数可以应用于任意BODY内的元素（包括BODY本事），除了BASEFONT、PARAM和SCRIPT。 二、语法1.基本语法CSS的定义是由三个部分构成：选择符（selector），属性（properties）和属性的取值（value）。基本格式如下：selector{property:value}（选择符{属性：值}）选择符是可以是多种形式，一般是你要定义样式的HTML标记，例如BODY、P、TABLE……， 如果需要对一个选择符指定多个属性时，我们使用分号将所有的属性和值分开： selector{property1:value1;property2:value2}（选择符{属性1：值2;属性1：值2}） 2、选择符类型 HTML标记选择符/标签选择符 对于你要定义样式的HTML标记，例如BODY、P、TABLE……，你可以通过此方法定义它的属性和值，属性和值要用冒号隔开：body{color:black} ID选择符在HTML页面中ID参数指定了某个单一元素，ID选择符是用来对这个单一元素定义单独的样式。ID选择符的应用和类选择符类似，在html标签中使用id参数： <pid="intro">这个段落向右对齐</p> 定义ID选择符要在ID名称前加上一个“#”号。定义ID选择符的属性有两种方法。 下面实例，ID属性将匹配所有id="intro"的元素： #intro{font-size:110%;font-weight:bold;color:#0000ff;background-color:transparent