第4章编辑css样式,第4章 使用CSS样式.ppt
第4章 使用CSS样式 4.1 学习任务:认识CSS样式表 4.2 学习任务:CSS规则的定义和创建 4.3 学习任务:在网页文档中使用CSS样式 4.4 上机实训——用CSS美化网页 4.1 学习任务:认识CSS样式表 4.1.1 CSS的基本概念 4.1.2 CSS样式的引用 4.1.1 CSS的基本概念 早期的网页一般是由HTML标签控制的文本网页,随着Web的流行与发展,漂亮的外观变得越来越重要。一方面HTML在控制页面格式和外观上越来越力不从心;另一方面HTML标签中充斥了大量的对外观属性的定义,网页要表现的“内容”与如何“表现”内容混杂在一起,HTML代码变得越来越繁杂,大量的标签堆积在一起,难以阅读和理解。 1996年W3C(万维网联盟)提出了CSS技术规范,它以HTML语言为基础,提供了丰富的样式。应用了CSS样式的网页,将样式外观设置从HTML文档中分离出来,使代码清晰、容易维护。CSS一经引入即得到了广泛应用。 CSS是Cascading Style Sheets的缩写,又称层叠样式表或级联样式表,主要用于对网页中的文本或某一区块的布局、字体、颜色、背景和特效等进行精确控制。 4.1.2 CSS样式的引用 CSS样式既可以定义在外部CSS样式表文件中,也可以定义在HTML文档中。外部CSS样式表是专门保存CSS样式的文件,其文件名后缀为“.css”,可以用记事本等编辑软件打开、查看、编辑和创建。内部CSS样式表是将CSS样式定义在HTML文档中,根据定义位置的不同,分为内嵌样式和内联样式。 1.内联样式 “内联样式”方式直接将CSS样式嵌套在特定的HTML标签中。具体方法:选中需要添加样式的对象,在CSS“属性”面板中,“目标规则”设定为“新内联样式”,然后根据需要设置其它的属性。由于网页要表现的内容和内容要表现的样式混杂在一起,因此,这种方式不建议使用。 2.内嵌样式 “内嵌样式”方式将CSS样式嵌套在HTML文档的
标签内。具体方法: 1)选中一段内容,在CSS“属性”面板中,“目标规则”选为“新CSS规则”,单击【编辑规则】按钮,在“新建CSS规则”对话框中,“选择器类型”选择“ID”,在“选择器名称”输入框中输入“p1”,在“规则定义”列表框中选择“(仅限该文档)”,如图4-1所示。 2)单击【确定】按钮,打开“#p1的CSS规则定义”对话框,设置“Font-family”为宋体,“Font-size”为18px,“Color”为#F00,如图4-2所示,单击【确定】按钮完成设置。 “#p1的CSS规则定义”对话框中8类属性含义,将在4.3.3中作详细介绍。 3)选中另一段内容,重复上面的操作,区别是在“新建CSS规则”的“选择器名称”输入框中输入“p2”。从图4-3可见,标签之间即为定义的CSS样式,实现了“内容”与“表现”的分离。p1、p2是为第一段
标签和第二段
标签设置的唯一的标识号(ID)。
标签中不再有CSS样式的定义,而是通过p1、p2来引用相应的样式定义。 3.外部样式表 “外部样式表”方式将CSS样式存储在外部样式表文件中。具体方法: 1)选中元素,在CSS“属性”面板中,“目标规则”选定为“新CSS规则”,单击【编辑规则】按钮,打开“新建CSS规则”对话框。在“选择器类型”下拉列表框中选择“ID”,在“选择器名称”输入框中输入“p1”,在“规则定义”下拉列表框中选择“新建样式表文件”。 2)单击【确定】按钮,弹出“将样式表文件另存为”对话框,如图4-4所示。在“文件名”输入框中输入“example”,Dreamweaver将自动为输入的文件名添加“.css”扩展名。 3)单击【保存】按钮,打开“#p1的CSS规则定义”对话框,从中设置Font-family、Font-size、Color等属性,单击【确定】按钮完成设置。 “外部样式表”方式是将CSS样式存储在外部的CSS文件中,例如:example.css。在HTML文档的
标签内,Dreamweaver将自动嵌入链接语句,其中“href”属性指定了外部CSS文件的名称,“type”属性指明了引用文件的类型为CSS文件,如图4-5所示。 需要修改网页内容的显示效果时,只需对外部样式表中的相关内容属性进行修改即可,网页中的HTML文档不需做任何修改。 通过以上3种方式的比较可以发现,使用CSS外部样式表,实现了“内容”与“表现”的完全分离,可以一次对若干个文档的样式进行控制,当CSS样式更新
第4章编辑css样式,第4章 使用CSS样式.ppt相关推荐
- 网页制作 css样式,网页设计与制作-CSS样式.ppt
网页设计与制作-CSS样式 第四章CSS样式 4.1 CSS样式的定义和使用 4.1.1什么是CSS CSS(Cascading Style Sheet,层叠样式表)是一种格式化网页的标准方式,它扩展 ...
- html5中插入样式表方法,如何插入css样式?
如何插入css样式?下面本篇文章就来给大家介绍一下插入css样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 准备 1.首先准备一个html文件:test.html,不建议 ...
- css样式压缩了怎么还原,CSS代码的压缩方法
原标题:CSS代码的压缩方法 在建站的时候,很多网站都对他们的代码进行压缩,今天主要来讲解下CSS代码的压缩,压缩后的CSS代码所占用字节数会减少,要是访问量比较小的网站看不出明显的区别,比较大型的网 ...
- 第四章css总结,第四章CSS层叠样式表分析.doc
第四章CSS层叠样式表分析 第章CSS层叠样式表CSS的" " color=" ">这样的标签以及与标签搭配的显示属性(如"background ...
- 【同花顺公式编辑教程】第1章 编辑器环境
目录 1.1.打开公式编辑器 1.2.新建自定义指标 1.2.1.设置指标名字与密码 1.2.2.指标参数设置 [提示]下期内容 1.1.打开公式编辑器 第一步:打开任意周期k线图,左下角的[ ...
- CSS基础(基础选择器+字体文本相关样式)
文章目录 目录 前言 一.css的语法规则 二.css引入方式 三.基础选择器 四.字体和文本样式 字体样式 文本样式 line-height行高 前言 层叠样式表(Cascading Style S ...
- 用于设定表格样式的附加css,css设置表格与能表单样式.ppt
css设置表格与能表单样式 第6章 CSS设置表格与表单样式 学习目标 什么是表格模型 对数据表格应用样式. 创建简单和复杂的表单布局 对各种表单元素应用样式. 掌握CSS中用列表制作各种菜单的方法. ...
- html+css+布局从入门到精通,CSS+DIV网页样式布局实战从入门到精通 中文pdf扫描版[48MB]...
CSS+DIV网页样式布局实战从入门到精通通过精选案例引导读者深入学习,系统地介绍了利用CSS和DIV进行网页样式布局的相关知识和操作方法. 全书共21章.第1-5章主要介绍网页样式布局的基础知识,包 ...
- html+css基础入门教程标记语言——打印样式
讨论了几种为文档应用CSS的方法,这一章是要研究打印样式,指定特别用来打印页面的CSS规则.只要几条CSS规则,就能确保结构化标记内容打印到纸上的效果与屏幕上显示的一样好看. 网页教学网 首先来看看m ...
最新文章
- 嵌入式驱动之阻塞操作、非阻塞操作
- html标题标签最大值是多少,css – 样式HTML5进度标记,达到了它的最大值
- 无人化运维离我们有多远?阿里智能化运帷平台深度揭秘
- GSON 循环引用的对象转为 JSON 造成栈溢出
- 高特权级代码段转向低特权级代码段(利用 ret(retf) 指令实现 jmp from ring0 to ring3)
- 奇怪的 Markdown / LaTeX 笔记
- python怎样创建项目_如何建立一个完美的 Python 项目
- 如何选择合适的BI工具
- python深拷贝和浅拷贝学习
- 终极算法-机器学习和人工智能如何重塑世界:电子书
- Linux服务器 屏蔽国外IP访问及简单的防CC攻击拦截
- Windows如何ping端口
- STK11.2 计算卫星A关于卫星B的相对位置 (三维和二维)
- 这样 PDF 的技术简历,HR根本不想看,谈何到面试官手中?
- STM32开发笔记106:解决ST-LINK的Old ST-LINK firmware/ST-LINK already usde问题
- 让味蕾动起来的蛋糕甜点
- 【OI生涯】我学OI是为了什么?
- Thrift 在Windows环境下的编译与简单C++应用
- CDA数据分析师视频教程全套零基础入门excel考试教学课程2022
- 【HTML基础】HTML的基本结构