版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
第五章CSS《网页设计与制作》1.课堂内容第七章CSS第一节、CSS简介一、什么是CSS
二、为什么要使用CSS
三、CSS的使用方法四、CSS的基本语句结构五、CSS的类型
第二节、CSS属性及滤镜
一、CSS的属性
二、CSS滤镜三、CSS的声明四、CSS的冲突小结、本节内容学习方法2.一、什么是CSS？
CSS是CascadingStyleSheets（层叠样式表单）的简称。通常又称作样式表，是一种设计网页样式的工具。实际操作篇
CSS层叠样式表第一节CSS简介3.二、为什么要使用CSS？
CSS样式可灵活、精确地控制网页外观，控制的内容包括布局、字体、颜色、背景和其它效果。优点：
1、内容和形式分离。
网页前台只需要显示内容就行，形式上的美工交给CSS来处理。生成的HTML文件代码精简，更小打开更快。
2、改版网站更简单容易了。
不用重新设计排版网页，甚至于不用动原网站的任何HTML和程序页面，只需要改动CSS文件就完成了所有改版。对于门户网站来说改版就像换件衣服一样简单容易。
3、搜索引擎更友好，排名更容易靠前。
实际操作篇
CSS层叠样式表4.三、常用的CSS使用方法
编辑工具：任何文本编辑工具样式表使用方法一般有三种：
1）文档头部插入：适用于单个网页应用2）行内插入：适用于页面中一、两个地方才用到CSS3）外部链接样式文件：适用于多个网页都用到CSS
实际操作篇
CSS层叠样式表5.
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层叠样式表6.2）行内插入
<pstyle=“font-size：14pt；color：blue”>蓝色14号文字</p>
这是采用<Style=“”>的格式把样式写在html中的任意行内，这样比较方便灵活具体请看操作演示实际操作篇
CSS层叠样式表7.3）外部链接样式文件先建立外部样式表文件（.css），然后使用HTML的link对象。示例如下：
<head>
<title>文档标题</title>
<linkrel=stylesheethref="/dhtmlet.css"type="text/css">
</head>这种方法非常适宜同时定义多个文档。它能使多个文档同时使用相同的样式，从而减少了大量的冗余代码具体看操作演示实际操作篇
CSS层叠样式表8.利用CSS面板创建外部CSS文件1）选择新建CSS标签，弹出如下对话框，选择新建；2）将CSS样式表命名、保存；3）外部CSS文件创建好后，就可在HTML文档中，使用“LINGK”标签调用外部的CSS文件定义的样式了。
实际操作篇
CSS层叠样式表9.四、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层叠样式表10.五、CSS的类型CSS的类型有三种方式：类、ID、标签、复合内容
下面分别举例说明实际操作篇
CSS层叠样式表11.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层叠样式表12.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层叠样式表13.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来操纵.14.4、复合内容（基于选择的内容）
1）若要定义同时影响两个或多个标签、类或ID的复合规则，请选择“复合内容”选项并输入用于复合规则的选择器。
2）语法：td,h1,p{color:#939;｝
3）可定义链接的四种状态：
Link－表示超链接的文本在链接未被访问时的风格
；
Visited－表示链接被访问过后的风格
；
Hover－表示鼠标指向链接但未点击时的链接风格
Active－表示鼠标点击链接时链接风格
实际操作篇
CSS层叠样式表15.实际操作篇
CSS层叠样式表第二节CSS的属性及滤镜一、CSS属性介绍1、类型属性对文字的各项属性进行设置。
16.2、背景属性：
实际操作篇
CSS层叠样式表17.3、区块属性区块指的就是网页中的文本、图像、层等网页元素。这个属性主要用于控制区块中的内容的间距、对齐方式、文字缩进等等实际操作篇
CSS层叠样式表18.4、容器属性
CSS的容器属性包括边距、填充距、边框和宽度、高度、浮动、清除等属性。CSS将网页中所有的块元素都看作是包含在一个盒子（BOX）中实际操作篇
CSS层叠样式表19.边距属性填充距属性20.边框属性21.图文混排22.5、定位属性主要是在页面的布局和控制上进行定义
实际操作篇
CSS层叠样式表23.6、css对扩展的定义
扩展分类包含两个部分。一个是分页符，是为了打印的页面设置分页符用的。
视觉效果是为网页中的元素添加特殊的效果用的。光标：可以指定在某个元素上要使用的光标形状。滤镜：这是一个很奇妙的参数，共包括16种滤镜，用这些滤镜，甚至可以替代photoshop的一部分功能。24.二、CSS滤镜
Alpha滤镜
Blur滤镜
Chroma滤镜
Dropshadow滤镜
FlipH、FlipV滤镜
Glow滤镜
Gray滤镜
Invert滤镜
Light滤镜
Mask滤镜
Shawdow滤镜
Wave滤镜
X-ray滤镜
实际操作篇
CSS层叠样式表25.四、CSS的冲突处理规则：
1、当两个CSS样式发生冲突时，浏览器按照与文本关系近的CSS样式来显示；
1）分别创建.red和.green两个CSS样式：实际操作篇
CSS层叠样式表26.
2）在标签<P>中引用green，在标签<span>中引用red。显示结果如下图：
实际操作篇
CSS层叠样式表27.
2、当HTML与CSS样式发生冲突时，浏览器按CSS样式中定义的属性来显示。
1）先在<p>和<p/>间用HTML的<fontcolor=“#0000ff”>..</font>定义文字为蓝色；
实际操作篇
CSS层叠样式表28.
2）再在font之后调用Class=“red”:<fontclass=“red”color=“#0000ff”>，文字显示为红色.。
实际操作篇
CSS层叠样式表29.3、CSS的优先级
三种用法可以混用，且不会造成混乱。三种CSS的执行优先级是：行内插入式头部方式
外部链接样式文件实际操作篇
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2026上海政法学院招聘1人（第二批）建设考试参考题库及答案解析
- 2026湖北武汉市汉口学院航空与智能制造学院院长招聘1人建设考试参考试题及答案解析
- 2026河北雄安人才服务有限公司招聘投资审计专业技术人员3人建设考试参考题库及答案解析
- 中泰证券2026届春季校园招聘建设考试参考题库及答案解析
- 2026浙江宁波市文化馆招聘编外人员1人建设笔试备考试题及答案解析
- 2026江西丰城建工集团招聘安全员、材料员12人建设笔试参考题库及答案解析
- 2026福建三明市教育局华东师范大学附属三明中学招聘专业技术人员7人（福建师范大学专场）建设考试备考题库及答案解析
- 2026河南郑州高新区外国语实验小学意杨校区教师招聘建设考试参考试题及答案解析
- 2026云南安宁化工厂有限公司校园招聘5人建设笔试模拟试题及答案解析
- 2026年上海市吴泾中学度编外及实习教师招聘建设考试备考试题及答案解析
- 河南08定额及综合解释
- DB2201T49-2023站用储气瓶组定期检验规范
- 第2章 Spring Boot核心配置与注解
- 船舶能耗填写范本
- 乐理的基础知识
- 现当代诗歌发展脉络精讲课件
- 网络传播法规（自考14339）复习必备题库（含答案）
- 2023年考研考博-考博英语-中国海洋大学考试历年真题摘选含答案解析
- 中考语文名著阅读-艾青诗选及水浒传
- JJF 1793-2020海水营养盐测量仪校准规范
- GB/T 4851-2014胶粘带持粘性的试验方法
评论
0/150
提交评论