的基本语法和使用_第1页
的基本语法和使用_第2页
的基本语法和使用_第3页
的基本语法和使用_第4页
的基本语法和使用_第5页
已阅读5页，还剩26页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

的基本语法和使用演示文稿目前一页\总数三十一页\编于二点的基本语法和使用目前二页\总数三十一页\编于二点课堂内容第七章CSS第一节、CSS简介一、什么是CSS

二、为什么要使用CSS

三、CSS的使用方法四、CSS的基本语句结构五、CSS的类型

第二节、CSS属性及滤镜

一、CSS的属性

二、CSS滤镜三、CSS的声明四、CSS的冲突小结、本节内容学习方法目前三页\总数三十一页\编于二点一、什么是CSS？

CSS是CascadingStyleSheets（层叠样式表单）的简称。通常又称作样式表，是一种设计网页样式的工具。实际操作篇

CSS层叠样式表第一节CSS简介目前四页\总数三十一页\编于二点二、为什么要使用CSS？

CSS样式可灵活、精确地控制网页外观，控制的内容包括布局、字体、颜色、背景和其它效果。优点：

1、内容和形式分离。

网页前台只需要显示内容就行，形式上的美工交给CSS来处理。生成的HTML文件代码精简，更小打开更快。

2、改版网站更简单容易了。

不用重新设计排版网页，甚至于不用动原网站的任何HTML和程序页面，只需要改动CSS文件就完成了所有改版。对于门户网站来说改版就像换件衣服一样简单容易。

3、搜索引擎更友好，排名更容易靠前。

实际操作篇

CSS层叠样式表目前五页\总数三十一页\编于二点三、常用的CSS使用方法

编辑工具：任何文本编辑工具样式表使用方法一般有三种：

1）文档头部插入：适用于单个网页应用2）行内插入：适用于页面中一、两个地方才用到CSS3）外部链接样式文件：适用于多个网页都用到CSS

实际操作篇

CSS层叠样式表目前六页\总数三十一页\编于二点

1）文档头部插入<styletype=“text/css”>……</style>

如：<html>

<head>

<title>文档标题</title>

<styletype=“text/css”>

<!--

body{font:10pt“Arial”}

h1{font:15pt/17pt“Arial”;font-weight:bold;color:maroon}

h2{font:13pt/15pt“Arial”;font-weight:bold;color:blue}

p{font:10pt/12pt“Arial”;color:black}

-->

</style>

</head>

<body>请注意，这里将style对象的type属性设置为“text/css”，是允许不支持这类型的浏览器忽略样式表单。

具体请看操作演示实际操作篇

CSS层叠样式表目前七页\总数三十一页\编于二点2）行内插入

<pstyle=“font-size：14pt；color：blue”>蓝色14号文字</p>

这是采用<Style=“”>的格式把样式写在html中的任意行内，这样比较方便灵活具体请看操作演示实际操作篇

CSS层叠样式表目前八页\总数三十一页\编于二点3）外部链接样式文件先建立外部样式表文件（.css），然后使用HTML的link对象。示例如下：

<head>

<title>文档标题</title>

<linkrel=stylesheethref="/dhtmlet.css"type="text/css">

</head>这种方法非常适宜同时定义多个文档。它能使多个文档同时使用相同的样式，从而减少了大量的冗余代码具体看操作演示实际操作篇

CSS层叠样式表目前九页\总数三十一页\编于二点利用CSS面板创建外部CSS文件1）选择新建CSS标签，弹出如下对话框，选择新建；2）将CSS样式表命名、保存；3）外部CSS文件创建好后，就可在HTML文档中，使用“LINGK”标签调用外部的CSS文件定义的样式了。

实际操作篇

CSS层叠样式表目前十页\总数三十一页\编于二点四、CSS的基本语句结构

Selector{property:value}

参数说明：

Selector

：选择符

property:属性value

：属性值

属性和属性值之间用冒号(:)隔开。多个定义之间用分号(;)隔开

<styletype="text/css">

<!--

body{font:10pt"Arial"}

h1{font:15pt"Arial";font-weight:bold;color:maroon}

p{font:10pt"Arial";color:black}

-->

</style>实际操作篇

CSS层叠样式表目前十一页\总数三十一页\编于二点五、CSS的类型CSS的类型有三种方式：类、ID、标签、复合内容

下面分别举例说明实际操作篇

CSS层叠样式表目前十二页\总数三十一页\编于二点1、类方式

1）它可被任何HTMLtag所应用

2）语法：.Classname{property:value}

3）引用：以<Pclass=“m”>的方法引用CSS样式比如<style>.blueone{color:blue}</style><H2class="blueone">BlueH2</H2><Pclass="blueone">Blueparagraph</P>

实际操作篇

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层叠样式表目前十四页\总数三十一页\编于二点3、ID方式1）IDselector其实跟独立classselector的功能一样.而区别在于它们的语法和用法不同,以及对于Javascript操纵HTML元素有帮助.

2）它的语法：#IDname{property:value}

假如我们有下面的定义：#yelowone{color:yellow}我们可以运用这个定义到任何的有同样ID名字的tag,比如<style>#redone{color:red}</style><PID=“redone”>样式表</P>

你可能觉得既然IDselector和独立classselector功能一样,为什么两者都存在呢.有ID的HTML元素可以被CSS-P和JavaScript来操纵.目前十五页\总数三十一页\编于二点4、复合内容（基于选择的内容）

1）若要定义同时影响两个或多个标签、类或ID的复合规则，请选择“复合内容”选项并输入用于复合规则的选择器。

2）语法：td,h1,p{color:#939;｝

3）可定义链接的四种状态：

Link－表示超链接的文本在链接未被访问时的风格

；

Visited－表示链接被访问过后的风格

；

Hover－表示鼠标指向链接但未点击时的链接风格

Active－表示鼠标点击链接时链接风格

实际操作篇

CSS层叠样式表目前十六页\总数三十一页\编于二点实际操作篇

CSS层叠样式表第二节CSS的属性及滤镜一、CSS属性介绍1、类型属性对文字的各项属性进行设置。

目前十七页\总数三十一页\编于二点2、背景属性：

实际操作篇

CSS层叠样式表目前十八页\总数三十一页\编于二点3、区块属性区块指的就是网页中的文本、图像、层等网页元素。这个属性主要用于控制区块中的内容的间距、对齐方式、文字缩进等等实际操作篇

CSS层叠样式表目前十九页\总数三十一页\编于二点4、容器属性

CSS的容器属性包括边距、填充距、边框和宽度、高度、浮动、清除等属性。CSS将网页中所有的块元素都看作是包含在一个盒子（BOX）中实际操作篇

CSS层叠样式表目前二十页\总数三十一页\编于二点边距属性填充距属性目前二十一页\总数三十一页\编于二点边框属性目前二十二页\总数三十一页\编于二点图文混排目前二十三页\总数三十一页\编于二点5、定位属性主要是在页面的布局和控制上进行定义

实际操作篇

CSS层叠样式表目前二十四页\总数三十一页\编于二点6、css对扩展的定义

扩展分类包含两个部分。一个是分页符，是为了打印的页面设置分页符用的。

视觉效果是为网页中的元素添加特殊的效果用的。光标：可以指定在某个元素上要使用的光标形状。滤镜：这是一个很奇妙的参数，共包括16种滤镜，用这些滤镜，甚至可以替代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）在标签<P>中引用green，在标签<span>中引用red。显示结果如下图：

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论