层叠式样式表CSS
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
3、CSS样式的创建、编辑、应用、 删除
链接外部css样式表 新建css－标签table,定义在新建样式列表 文件－保存.css－ 修改个别属性 应用：“css样式”面板－“附加样式表”－ “链接”－…－“套用” 优点：凡是用此样式表的网页都随着更改。 补充：上面的“链接”，是只修改链接文本 的css样式，其他文本不变。
（4） Box（方框）
• Box面板主要设置对象(多数是图片)的大小、 边界、间距、高度、宽度、和漂浮方式等。 • 各属性的含义为： 浮动：设置图像是浮于页面左边距还是右边 距。 清除：指定是否可以在元素的某个侧边使用 分层。 填充：该选项组指定元素内容与元素边框之 间的距离（如果没有边框，则为边距）
（3） Block（区块）
• 文本对齐：决定文本如何在元素内对齐。 • 文字缩进：指定首行缩进的距离。 • 空格：决定元素中的白色间隔如何处理，选择 “正常”表示不使用白色间隔，选择“保留” 表示将文本用pre标记括起来，选择“不换行” 表示只有遇到br标记时，文本才可以重叠。 • 显示：选择一些可以显示的对象。
（3） Block（区块）
• Block面板主要是设置对象文本的文字间距、对 齐方式、上标、下标、排列方式、首行缩进等。 • 各属性的含义为： 单词间距：在文字之间添加空格。 字母间距：在文字之间添加空格，与单词间距不 同的是，字母间距可以覆盖由于页边距调整而 产生的字母之间的多于空格。 垂直对齐：指定元素的纵向对齐方式，通常都是 相对于上一级而言的。
为什么使用CSS
（1）对于网页页面较大的网页，我们可以 快速地进行批处理文件。 （2）CSS的一组样式可以被不同的对象调 用 （3）CSS的语法简单易懂 （4）CSS具有丰富的样式效果（如鼠标样 式、各种滤镜的效果）
CSS样式分类和样式的创建
• • • 层叠样式表CSS包含以下3种类型： ● 类 用户可以在文档的任何区域或文本中应用自 定义的层叠样式表，如果将自定义的层叠样式 表应用于一整段文字，那么会在相应的标签中 出现Class属性，该属性值即为自定义层叠样式 表名称。如果将自定义的层叠样式表应用于部 分文字上，那么会出现<Span>和<Span>标签， 并且包含有Class属性。 如下代码： .bg{background-image：url(bg.gif);} <body class="bg">
（7） Positioning（定位）
• 显示：设置层的初始显示条件。“继承”表示继 承父层的显示属性；“可见”表示显示层的内容， 而不管父层的显示属性；“隐藏”表示隐藏层的 内容，而不管父层的显示属性。 • Z轴：设置层的堆叠顺序。选中“自动”表示由系 统自动安排。 • 溢出：设置当层的内容超过层大小时的处理方式。 “可见”表示增加CSS层的大小，使其所有内容 都完全显示；“隐藏”表示保持CSS层的大小并 且剪辑任何超出层的内容，不提供滚动条。
3、CSS样式的创建、编辑、应用、 删除
内部css样式表的应用：去掉超链接下划线 新建css---选择器类型为“高级”，选择 器名称为“a”,仅对该文档－－在“a的css 样式定义”改“修饰”为“无” 改变超链接的颜色： 新建css---选择器类型为“高级”，选择 器名称为“a:hover”,仅对该文档－类型中 修改“颜色”
CSS样式分类和样式的创建
• 高级 为特殊的组合标签定义层叠样式表，使用ID 作为属性，以保证文档具有惟一可用的值。层 叠样式表选择符是一种特殊类型的样式。常用 的有4种，分别为： a:link、a:active、a:visited、a:hover ● a:link：设定正常状态下链接文字的样式 ● a:active：设定鼠标单击时链接的外观 ● a:visited：设定访问过的链接外观 ● a:hover：设定鼠标放置在链接文字之上时， 文字的外观
• • •
CSS样式分类和样式的创建
• 标签 我们可以针对某一个标签来定义层叠 样式表，也就是说定义的层叠样式表只应 用于选择的标签。例如我们为<body>和 </Body>标签定义了层叠样式表，那么所 有包含在 <Body>和</body>标签的内容 将遵循定义的层叠样式表。 如下代码： td{color:#000099;font-size:9pt}
（7） Positioning（定位）
• “滚动”表示在层中添加滚动条，不论内容 是否超过层的大小；“自动”表示使滚动 条仅在CSS层的内容超出层的边界时才出 现。 • 定位：该选项组用于设置层的位置和大小。 • 剪辑：该选项组用于设置层的可见部分。
（8） Extensions（扩展）
• 分页：打印时在样式所控制的对象之前或 者之后强行分页。 • 光标：当光标位于样式所控制的对象上时， 改变指针图像。 • 过滤器：对样式所控制的对象应用特殊效 果（包括模糊和反转）
4、设置CSS样式属性
• 在Dreamweaver4的CSS样式里包含了 W3C规范定义的所有CSS1的属性， Dreamweaver4把这些属性分为Type（类 型）、Background（背景）、Block（区 块）、Box（盒子或方框）、Border（边 框）、 List（列表）、Positioning（定位）、 Extensions（扩展）八个部分
（4） Box（方框）
• 全部相同：设置应用此属性元素的上、下、 左和右侧的填充属性。 • 边界：该选项组指定元素的边框与另一个 元素之间的间距（如果没有边框，则为填 充） • 全部相同：设置应用此属性元素的上、下、 左、右侧的边距属性。
（5） Border（边框）
Border面板可以设置对象边框的宽度、颜色及样式。 其常见属性为: • Width：设置元素边框的宽度。可以分别设定Top（上边宽）、Right （右边宽）、Bottom（下边宽）、Left（左边宽）的值。相对应的 CSS属性分别是”border; border-top; border-right; border-bottom; border-left”。Color：设置边框的颜色。你可以分别对每条边设置颜色。 相对应的CSS属性分别是”border-color; border-top-color; borderright-color; border-bottom-color; border-left-color”。 • 注意：我们可以通过设置不同的颜色做出亮边和暗边的效果，这样元 素看起来是立体的。 • Style：设置边框样式。可以设置为none（无边框）、dotted（点线）、 dashed（虚线）、solid（实线）、double（双线）、groove（凹 槽）、ridge（凸槽）、inset（凹边）、outset（凸边）等边框样式。 相对应的CSS属性是”border-style”。
2css的一组样式可以被不同的对象调3css的语法简单易懂4css具有丰富的样式效果如鼠标样式各种滤镜的效果csscss样式分类和样式分类和样式的创建样式的创建用户可以在文档的任何区域或文本中应用自定义的层叠样式表如果将自定义的层叠样式表应用于一整段文字那么会在相应的标签中出现class属性该属性值即为自定义层叠样式表名称
（7） Positioning（定位）
• Positioning面板就相当于对象放在一个层里 来定位，它相当于HTML的DIV标记。你可 以把定义看作为一个CSS定义的层 。 类型：设置浏览器应如何来定位层。“绝对” 表示根据“定位”选项组中的数值来确定 层的绝对位置。“相对”表示根据“定位” 选项组中的数值来确定层的相对位置。 “静态”表示将层旋转至文本所在的位置。
第8章 层叠式样式表
教学内容: 1、什么是CSS及为什么使用CSS？ 2、CSS的基本语法 3、CSS样式的创建、编辑、应用、删除 4、设置CSS样式属性 5、CSS的优先级顺序
1、什么是CSS及为什么使用CSS？
• CSS全称为Cascading Style Sheets，一般 称之为层叠式样式表，是用来控制网页对 象外观的一系列样式属性。 如字体、颜色、 填充、边距和字间距等。 • CSS是由WORLD WIDE WEB CONSORTIUM（全球广域网协会，简称 W3C）制定，到目前为止，CSS已经经历 了两代，即CSS1(IE3.0)和CSS2(IE5.0)。
3、CSS样式的创建、编辑、应用、 删除
应用CSS样式进行如下三步： • 定义样式类型 • 设定样式外观 • 应用样式 （1）创建CSS样式 （2）编辑CSS样式 （3）应用CSS样式 （4）删除CSS样式
3、CSS样式的创建、编辑、应用、 删除
创建类 “窗口”－“CSS样式”－右下角“新建 CSS样式”－选择“类”－设置“CSS样 式定义” 注意：如果创建的是类，则名称一定要以 “.”开头，例如.mystyle 应用css样式 例如：选择文本－右键－css样式－ mystyle
2、CSS的基本语法(2)
• Selector表示需要应用样式的内容；Property表示 由CSS标准定义的样式属性，value表示样式属性 的值。 • 其中： Selector的类型可以为： （1）HTML标记符；如<P><BODY><TABLE>等。 （2）用户定义的类class；如：.RED.GREEN等 （3）用户定义的ID；如#myid（使用#作为id的标 识） （4）虚类：对于超级链接<a></a>则使用虚类
• • • • •
CSS样式分类和样式的创建
无论是哪种类型的样式，创建基本上 要经过以下的步骤： 定义样式类型 设定样式外观 应用样式
• • •
2、CSS的基本语法(1)
• CSS的基本组成为：
selector{Property1：value1;property2:value2}
选择符
属性
属性值
• Background面板主要是对元素的背景进行设置， 包括背景颜色、背景图象、背景图象的控制。一 般是对BODY（页面）、TABLE（表格）、DIV （区域）的设置。 • 各属性的含义为： 背景颜色：设置元素的背景颜色。 背景图像：设置元素的背景图像。
（2） Background（背景）
重复：确定是否以及如何重复背景图像。“不重复”表示 不会重复显示图像。“重复”表示在横向和纵向上都重 复显示背景图像，直到对象背景被充满。“横向重复” 表示在横向上重复显示背景图像。“纵向”表示在纵向 上重复显示背景图像。 附件：确定背景图像是固定在它的原始位置还是随内容一 起滚动。例:层的溢出（背景图象是否随内容变化） 水平位置：在该下拉列表框中选择背景水平排列的方式。 垂直位置：在该下拉列表框中选择背景垂直排列的方式。
（1） Type（类型）
样式：默认设置为“正常” 变体：设置文本的小型大写字母变量。 行高：设置文本所在行的高度。选中“正常” 会自动计算字体大小的行高。 大小写：将所选内容中的每个单词的首字母大 写或将文本设置为全部大写或小写。 修饰：常规文本的默认设置是“无”，链接的 默认设置是“下划线”。
（2） Background（背景）
（1） Type（类型）
• Type （类型）面板主要是对文字的字体，大小，颜 色，效果等基本样式进行设置。设置时，我们只对 要改变的属性进行设置，没有必要改变的属性就空 着。 • 各属性的含义为： 字体：为样式设置字体。 大小：定义文本大小。 粗细：对字体应用特定或相对的粗体量。“正常”等 于400，“粗体”等于700。
• 注意：dotted（点线）、dashed（虚线）必须要IE5.5以 上或者MAC平台支持，否则效果为实线。
Байду номын сангаас
（6） List（列表）
List面板可以设置列表项样式、列表项图片、和位置。其 属性主要有: • ”类型”。可以设置的样式有：disc（实心圆）、circle （空心圆）、square（方块）、decimal（阿拉伯数字）、 lower-roman（小写罗马数字）、upper-roman（大写罗 马数字）、lower-alpha（小写英文字母）、upper-alpha （大写英文字母）、none（无项目符号）。 • 项目符号图像：设置列表项的图像。值为图象的URL地 址或路径。 相对应的CSS属性是”list-style-image”。 • 位置：设置列表项在文本内还是在文本外。Inside：列表 项目标记放置在文本以内，Outside：列表项目标记放置 在文本以外。相对应的CSS属性是”list-style-position”。