第4章_CSS快速入门

第4章CSS快速入门 精美的网页离不开CSS技术 使用CSS技术 可以有效地对页面的布局 字体 颜色 背景和其他效果实现更加精确的控制 CSS样式的全名为CascadingStyleSheet 层叠样式表 它可以定义HTML标签 按列表的语法将许多文字 图片 表格 表单 图层等设计加以格式设定 在HTML语法中 常常需要使用到一些设定颜色 字体大小或框线粗细之类的标签 而CSS在开始制作网页时就将这些设定做好 不需要在制作网页文档时再反复写入同样的标签 4 1CSS概述 4 1 1CSS的概念与优点CSS样式是CascadingStyleSheets 层叠样式表 的简称 也可以称为 级联样式表 它是一种网页制作的新技术 利用它可以对网页中的文本进行精确的格式化控制 CSS 是用来控制一个网页文档中的某文本区域外观的一组格式属性 使用CSS能够简化网页代码 加快下载速度 减少上传的代码数量 从而可以避免重复操作 CSS样式表是对HTML语法的一次重大革新 它位于文档的区 作用范围由CLASS或其他任何符合CSS规范的文本来设置 对于其他现有的文档 只要其中的CSS样式符合规范 Dreamweaver就能识别它们 4 1 2CSS的基本语法 CSS样式规则由两部分组成 选择器和声明块 选择器是标识已设置格式元素的术语 如p h1 类名称或ID等 声明块则用于定义样式的属性 CSS的基本语法如下 选择器 属性 属性值 或者 选择器 属性1 属性值1 属性2 属性值2 例 p font size 14px color red font family 宋体 4 1 3CSS样式面板 要创建样式表 可以在 CSS样式 面板中创建 CSS常用的类型有外部样式表和内部样式表两种 行内样式表 内联式样式表 是一种特殊的内部样式表 4 2CSS样式表类型 内部样式表 嵌入式样式表 CSS写在与之间 并且用与标签进行声明 例 欢迎使用CSS样式表body font size 28px font style normal line height 200 color FF3300 text decoration underline CSS样式使用样例 请认真学习 行内样式表 内联式样式表 直接对XHTML的标签使用style属性 并将CSS代码直接写在其中 一种特殊的内部样式表 如 一个简单网页各位晚上好 大家辛苦了 外部样式表 外部链接式 CSS样式代码单独编写在一个独立的样式文件中 由网页进行调用 欢迎使用CSS样式表CSS样式使用样例 请认真学习 欢迎使用CSS样式表 importurl style css CSS样式使用样例 请认真学习 1 标签选择器HTML中的所有标签均可作为标签选择器语法格式 HTML标签 属性1 属性值 属性2 属性值 4 3CSS选择器类型 2 类选择器能够把相同的元素分类定义成不同的样式语法格式 类名 属性1 属性值 属性2 属性值 引用方式 在CSS中 类选择器以一个点号显示 无标题文档 text font family 宋体 font size 36px font style italic color 0F0 text decoration underline 代写寒暑假作业帮忙介绍帮忙冒充家长 3 ID选择器在HTML页面中ID参数指定了某一个元素 ID选择器用来对这一单一元素定义单独的样式 语法格式 ID名 属性1 属性值 属性2 属性值 引用方式 id选择器以 来定义 无标题文档 text1 font family 华文行楷 font size xx large font weight 100 color F00 text decoration overline 代写寒暑假作业帮忙介绍帮忙冒充家长 4 复合选择器若要定义影响多个标签 类或ID的复合规则 则可选择 复合内容 选择器 如输入divp 则DIV标签内的所有p元素都将受此规则影响 复合选择器就是两个或多个基本选择器 通过不同方式连接而成的选择器 复合选择器就是两个或多个基本选择器 通过不同方式连接而成的选择器 主要包括 交集 选择器 并集 选择器 后代 选择器 交集选择器 交集 复合选择器是由两个选择器直接连接构成 其结果是选中二者各自元素范围的交集 其中第一个必须是标记选择器 第二个必须是类别选择器或者ID选择器 这两个选择器之间不能有空格 必须连续书写 如p text color red font size 23px p color blue p special color red special color green 普通段落文本普通标题文本指定了 special类别的段落文本指定了 special类别的标题文本 并集选择器 同时选中各个基本选择器所选择的范围 任何形式的选择器都可以 并集选择器是多个选择器通过逗号连接而成的 格式如h1 h2 h3 color red font size 23px 后代选择器 把外层的标记写在前面 内层的标记写在后面 之间用空格分隔 当标记发生嵌套时 内层的标记就成为外层标记的后代了例如 aaa font size 28px aaaspan color red 文字文字 可以将定义的CSS样式 应用于文档的某个部分 完成文本的格式化 具体方法如下 方法一 利用CSS样式面板 选中要应用CSS样式的对象 右击该面板中相应的样式名称 在弹出的快捷菜单中 选择 套用 方法二 利用 属性 栏1 选中要应用CSS样式的文本对象 在其属性栏的 规则 下拉列表框中选择需要的CSS样式名称 2 选中要应用CSS样式的图像等对象 在其属性栏的 类 下拉列表框中选择需要的CSS样式名称 4 4定义 设置CSS的属性 类型属性背景属性区块属性方框属性边框属性列表属性定位属性扩展属性 类型属性 定义文本基本属性背景属性 网页的背景 网页元素的背景颜色区块属性 段落的间距和对齐属性方框属性 方框的宽 高 浮动方式 填充和边界边框属性 元素周围边框的属性列表属性 列表标签定义列表属性定位属性 设置 层 属性扩展属性 分页 光标等 给字体指定粗体字的磅值 选取字体的变种选small caps时 此样式区域内所有字母大写 Text transform 将选区中每个单词的第一个字母转为大写 或者令单词全部大写或全部小写 参数 capitalize 单词首字母大写 uppercase 转换成大写 lowercase 转换成小写 none 不转换 下划线上划线中划线闪烁效果 固定背景图像或者跟随内容滚动 指定背景图像的水平位置 指定背景图像的垂直位置 设置元素的背景图像 设置元素的背景色 确定背景图像是否以及如何重复 设置单词之间的间距 设置字符之间的间距 指定元素的垂直对齐方式 设置文本的排列方式 设置文本第一行的缩进值 设置如何处理元素内的空白符 设置是否及如何显示元素 内容宽度 内容高度 浮动方式 清除浮动 定义元素内容与其边框的空距 定义元素的边框与其他元素之间的距离 边框面板可以设置对象边框的宽度 颜色及样式 设置元素边的宽度 设置边框样式none 无边框 dotted 点线 dashed 虚线 solid 实线 double 双线 groove 凹槽 ridge 凸槽 inset 凹边 outset 凸边 设置边框的颜色 列表面板可以设置列表项样式 列表项图片 和位置 设置列表项所使用的预设标记 可以设置的样式有 disc 实心圆 circle 空心圆 square 方块 decimal 阿拉伯数字 设置列表项的图像 值为图象的URL地址或路径 设置列表项在文本内还是在文本外 Inside 列表项目标记放置在文本以内 Outside 列表项目标记放置在文本以外 设定对象的定位方式 设定对象定位层的最初显示状态 设置对象定位层的位置和大小 定义定位