《CSS的基本语法和使用》由会员分享，可在线阅读，更多相关《CSS的基本语法和使用（32页珍藏版）》请在金锄头文库上搜索。
1、第五章CSS 网页设计与制作 课堂内容 第七章CSS第一节 CSS简介一 什么是CSS二 为什么要使用CSS三 CSS的使用方法四 CSS的基本语句结构五 CSS的类型第二节 CSS属性及滤镜一 CSS的属性二 CSS滤镜三 CSS的声明四 CSS的冲突小结 本节内容学习方法 一 什么是CSS CSS是CascadingStyleSheets 层叠样式表单 的简称 通常又称作样式表 是一种设计网页样式的工具 实际操作篇CSS层叠样式表 第一节CSS简介 二 为什么要使用CSS CSS样式可灵活 精确地控制网页外观 控制的内容包括布局 字体 颜色 背景和其它效果 优点 1 内容和形式分离 网页前
2、台只需要显示内容就行 形式上的美工交给CSS来处理 生成的HTML文件代码精简 更小打开更快 2 改版网站更简单容易了 不用重新设计排版网页 甚至于不用动原网站的任何HTML和程序页面 只需要改动CSS文件就完成了所有改版 对于门户网站来说改版就像换件衣服一样简单容易 3 搜索引擎更友好 排名更容易靠前 实际操作篇CSS层叠样式表 三 常用的CSS使用方法编辑工具 任何文本编辑工具样式表使用方法一般有三种 1 文档头部插入 适用于单个网页应用2 行内插入 适用于页面中一 两个地方才用到CSS3 外部链接样式文件 适用于多个网页都用到CSS 实际操作篇CSS层叠样式表 1 文档头部插入 如 文档
3、标题请注意 这里将style对象的type属性设置为 text css 是允许不支持这类型的浏览器忽略样式表单 具体请看操作演示 实际操作篇CSS层叠样式表 2 行内插入蓝色14号文字这是采用的格式把样式写在html中的任意行内 这样比较方便灵活具体请看操作演示 实际操作篇CSS层叠样式表 3 外部链接样式文件先建立外部样式表文件 css 然后使用HTML的link对象 示例如下 文档标题这种方法非常适宜同时定义多个文档 它能使多个文档同时使用相同的样式 从而减少了大量的冗余代码具体看操作演示 实际操作篇CSS层叠样式表 利用CSS面板创建外部CSS文件1 选择新建CSS标签 弹出如下对话框
4、选择新建 2 将CSS样式表命名 保存 3 外部CSS文件创建好后 就可在HTML文档中 使用 LINGK 标签调用外部的CSS文件定义的样式了 实际操作篇CSS层叠样式表 四 CSS的基本语句结构Selector property value 参数说明 Selector 选择符property 属性value 属性值属性和属性值之间用冒号 隔开 多个定义之间用分号 隔开 实际操作篇CSS层叠样式表 五 CSS的类型CSS的类型有三种方式 类 ID 标签 复合内容下面分别举例说明 实际操作篇CSS层叠样式表 1 类方式1 它可被任何HTMLtag所应用2 语法 Classname proper
5、ty value 3 引用 以的方法引用CSS样式比如 blueone color blue BlueH2Blueparagraph 实际操作篇CSS层叠样式表 2 标签方式1 重新定义HTML的tags 比如P DIV TD等 如你用CSS定义了它们 在整页中 这个Tag的性质就按照你的定义来显示了 2 语法 tag property value 比如我们想叫TD的颜色是红的TD color red 这里还要告诉你CSS的一个特点 它可定义好几个selector在一个rule里 比如H1 H2 TD color red 这个定义就能让所有的H1 H2 和TD的颜色都为红色 实际操作篇CSS层
6、叠样式表 3 ID方式1 IDselector其实跟独立classselector的功能一样 而区别在于它们的语法和用法不同 以及对于Javascript操纵HTML元素有帮助 2 它的语法 IDname property value 假如我们有下面的定义 yelowone color yellow 我们可以运用这个定义到任何的有同样ID名字的tag 比如 redone color red 样式表你可能觉得既然IDselector和独立classselector功能一样 为什么两者都存在呢 有ID的HTML元素可以被CSS P和JavaScript来操纵 4 复合内容 基于选择的内容 1 若要
7、定义同时影响两个或多个标签 类或ID的复合规则 请选择 复合内容 选项并输入用于复合规则的选择器 2 语法 td h1 p color 939 3 可定义链接的四种状态 Link 表示超链接的文本在链接未被访问时的风格 Visited 表示链接被访问过后的风格 Hover 表示鼠标指向链接但未点击时的链接风格Active 表示鼠标点击链接时链接风格 实际操作篇CSS层叠样式表 第二节CSS的属性及滤镜一 CSS属性介绍1 类型属性对文字的各项属性进行设置 实际操作篇CSS层叠样式表 2 背景属性 实际操作篇CSS层叠样式表 3 区块属性区块指的就是网页中的文本 图像 层等网页元素 这个属性主要
8、用于控制区块中的内容的间距 对齐方式 文字缩进等等 实际操作篇CSS层叠样式表 4 容器属性CSS的容器属性包括边距 填充距 边框和宽度 高度 浮动 清除等属性 CSS将网页中所有的块元素都看作是包含在一个盒子 BOX 中 实际操作篇CSS层叠样式表 边距属性 填充距属性 边框属性 图文混排 5 定位属性主要是在页面的布局和控制上进行定义 实际操作篇CSS层叠样式表 6 css对扩展的定义扩展分类包含两个部分 一个是分页符 是为了打印的页面设置分页符用的 视觉效果是为网页中的元素添加特殊的效果用的 光标 可以指定在某个元素上要使用的光标形状 滤镜 这是一个很奇妙的参数 共包括16种滤镜 用这些
9、滤镜 甚至可以替代photoshop的一部分功能 二 CSS滤镜Alpha滤镜Blur滤镜Chroma滤镜Dropshadow滤镜FlipH FlipV滤镜Glow滤镜Gray滤镜Invert滤镜Light滤镜Mask滤镜Shawdow滤镜Wave滤镜X ray滤镜 实际操作篇CSS层叠样式表 四 CSS的冲突处理规则 1 当两个CSS样式发生冲突时 浏览器按照与文本关系近的CSS样式来显示 1 分别创建 red和 green两个CSS样式 实际操作篇CSS层叠样式表 2 在标签中引用green 在标签中引用red 显示结果如下图 实际操作篇CSS层叠样式表 2 当HTML与CSS样式发生冲突
10、时 浏览器按CSS样式中定义的属性来显示 1 先在和间用HTML的 定义文字为蓝色 实际操作篇CSS层叠样式表 2 再在font之后调用Class red 文字显示为红色 实际操作篇CSS层叠样式表 3 CSS的优先级三种用法可以混用 且不会造成混乱 三种CSS的执行优先级是 行内插入式头部方式外部链接样式文件 实际操作篇CSS层叠样式表 小结 本节学习方法 1 学习方式看别人的代码是一个非常好的学习方式以淘宝网站为例 分析他的CSS代码 具体研究如下 2 练习方式在了解了基础知识后 尝试编写一些简单的代码 遇到问题借助google搜索和 蓝色经典 等经典论坛3 一本手册css2 0手册下载地址 http www w3cn org resource down 2004 css20 chm4 多写多练 实际操作篇CSS层叠样式表 作业 1 制作期末作品
