欢迎来到淘文阁 - 分享文档赚钱的网站! | 帮助中心 好文档才是您的得力助手!
淘文阁 - 分享文档赚钱的网站
全部分类
  • 研究报告>
  • 管理文献>
  • 标准材料>
  • 技术资料>
  • 教育专区>
  • 应用文书>
  • 生活休闲>
  • 考试试题>
  • pptx模板>
  • 工商注册>
  • 期刊短文>
  • 图片设计>
  • ImageVerifierCode 换一换

    CSS的基本语法和使用.ppt

    • 资源ID:3687346       资源大小:465.52KB        全文页数:32页
    • 资源格式: PPT        下载积分:10金币
    快捷下载 游客一键下载
    会员登录下载
    微信登录下载
    三方登录下载: 微信开放平台登录   QQ登录  
    二维码
    微信扫一扫登录
    下载资源需要10金币
    邮箱/手机:
    温馨提示:
    快捷下载时,用户名和密码都是您填写的邮箱或者手机号,方便查询和重复下载(系统自动生成)。
    如填写123,账号就是123,密码也是123。
    支付方式: 支付宝    微信支付   
    验证码:   换一换

     
    账号:
    密码:
    验证码:   换一换
      忘记密码?
        
    友情提示
    2、PDF文件下载后,可能会被浏览器默认打开,此种情况可以点击浏览器菜单,保存网页到桌面,就可以正常下载了。
    3、本站不支持迅雷下载,请使用电脑自带的IE浏览器,或者360浏览器、谷歌浏览器下载即可。
    4、本站资源下载后的文档和图纸-无水印,预览文档经过压缩,下载后原文更清晰。
    5、试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓。

    CSS的基本语法和使用.ppt

    第五章 C S S,网页设计与制作,课堂内容,第七章 CSS 第一节、CSS简介 一、什么是CSS 二、为什么要使用CSS 三、CSS的使用方法 四、CSS的基本语句结构 五、CSS的类型 第二节、CSS属性及滤镜 一、CSS的属性 二、CSS滤镜 三、CSS的声明 四、CSS的冲突 小结、本节内容学习方法,一、什么是CSS? CSS是Cascading Style Sheets(层叠样式表单)的简称。通常又称作样式表,是一种设计网页样式的工具。,实际操作篇 CSS层叠样式表,第一节 CSS简介,二、为什么要使用CSS? CSS样式可灵活、精确地控制网页外观,控制的内容包括布局、字体、颜色、背景和其它效果。 优点: 1、内容和形式分离。 网页前台只需要显示内容就行,形式上的美工交给CSS来处理。生成的HTML文件代码精简,更小打开更快。2、改版网站更简单容易了。 不用重新设计排版网页,甚至于不用动原网站的任何HTML和程序页面,只需要改动CSS文件就完成了所有改版。对于门户网站来说改版就像换件衣服一样简单容易。3、搜索引擎更友好,排名更容易靠前。,实际操作篇 CSS层叠样式表,三、常用的CSS使用方法 编辑工具:任何文本编辑工具 样式表使用方法一般有三种: 1)文档头部插入:适用于单个网页应用 2)行内插入:适用于页面中一、两个地方才用到CSS 3)外部链接样式文件:适用于多个网页都用到CSS,实际操作篇 CSS层叠样式表,1)文档头部插入 如:文档标题 请注意,这里将style对象的type属性设置为“text/css”,是允许不支持这类型的浏览器忽略样式表单。 具体请看操作演示,实际操作篇 CSS层叠样式表,2)行内插入 蓝色14号文字 这是采用的格式把样式写在html中的任意行内,这样比较方便灵活 具体请看操作演示,实际操作篇 CSS层叠样式表,3)外部链接样式文件 先建立外部样式表文件(.css),然后使用HTML的link对象。示例如下:文档标题 这种方法非常适宜同时定义多个文档。它能使多个文档同时使用相同的样式,从而减少了大量的冗余代码 具体看操作演示,实际操作篇 CSS层叠样式表,利用CSS面板创建外部CSS文件 1)选择新建CSS标签,弹出如下对话框,选择新建; 2)将CSS样式表命名、保存; 3)外部CSS文件创建好后,就可在HTML文档中,使用“LINGK”标签调用外部的CSS文件定义的样式了。,实际操作篇 CSS层叠样式表,四、CSS的基本语句结构 Selector property: value 参数说明: Selector :选择符property : 属性 value :属性值 属性和属性值之间用冒号(:)隔开。多个定义之间用分号(;)隔开 ,实际操作篇 CSS层叠样式表,五、 CSS的类型 CSS的类型有三种方式:类、ID、标签、复合内容 下面分别举例说明,实际操作篇 CSS层叠样式表,1、类方式 1)它可被任何 HTML tag 所应用 2)语法: .Classname property:value 3)引用: 以 的方法引用CSS样式 比如 .blueone color:blue Blue H2 Blue paragraph,实际操作篇 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)ID selector 其实跟独立 class selector 的功能一样. 而区别在于它们的语法和用法不同, 以及对于 Javascript 操纵 HTML 元素有帮助. 2)它的语法:#IDname property:value 假如我们有下面的定义: #yelowone color: yellow 我们可以运用这个定义到任何的有同样 ID 名字的 tag, 比如 #redone color: red 样式表 你可能觉得既然 ID selector 和独立 class selector 功能一 样, 为什么两者都存在呢. 有 ID 的 HTML 元素可以被 CSS-P 和 JavaScript 来操纵.,4、 复合内容(基于选择的内容) 1)若要定义同时影响两个或多个标签、类或 ID 的复合规则,请选择“复合内容”选项并输入用于复合规则的选择器。 2)语法:td, h1, p color: #939; 3)可定义链接的四种状态: Link表示超链接的文本在链接未被访问时的风格 ; Visited表示链接被访问过后的风格 ; Hover表示鼠标指向链接但未点击时的链接风格 Active表示鼠标点击链接时链接风格,实际操作篇 CSS层叠样式表,第二节 CSS的属性及滤镜 一、CSS属性介绍 1、类型属性 对文字的各项属性进行设置。,实际操作篇 CSS层叠样式表,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)在标签中引用green,在标签中引用red。 显示结果如下图:,实际操作篇 CSS层叠样式表,2、当HTML与CSS样式发生冲突时,浏览器按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.chm 4、多写多练,实际操作篇 CSS层叠样式表,作业: 1、制作期末作品,

    注意事项

    本文(CSS的基本语法和使用.ppt)为本站会员(小**)主动上传,淘文阁 - 分享文档赚钱的网站仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。 若此文所含内容侵犯了您的版权或隐私,请立即通知淘文阁 - 分享文档赚钱的网站(点击联系客服),我们立即给予删除!

    温馨提示:如果因为网速或其他原因下载失败请重新下载,重复下载不扣分。




    关于淘文阁 - 版权申诉 - 用户使用规则 - 积分规则 - 联系我们

    本站为文档C TO C交易模式,本站只提供存储空间、用户上传的文档直接被用户下载,本站只是中间服务平台,本站所有文档下载所得的收益归上传人(含作者)所有。本站仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。若文档所含内容侵犯了您的版权或隐私,请立即通知淘文阁网,我们立即给予删除!客服QQ:136780468 微信:18945177775 电话:18904686070

    工信部备案号:黑ICP备15003705号 © 2020-2023 www.taowenge.com 淘文阁 

    收起
    展开