、、
、、等控制标记虽然可以将数据格式化,但能做到的格式化有限,而CSS正好弥补了这个不足。 CSS属于较新技术,故IE3.0版本以上支持,Netscapt Navigator 4.0版以上支持。此外,不同浏览器显示的结果可能有不同。 一、如何链接HTML文件与层叠样式表 它有4种方法: ●在HTML文件的区块嵌入层叠样式表的定义。 ●将层叠样式表定义在单独的文本文件,然后将之导入或链接至 HTML文件。 ●在HTML文件的标签属性style中加入样式定义 ●在HTML文件中套用样式类别。 1.在HTML文件的区块嵌入层叠样式表的定义 无标题文档 2.将层叠样式表导入或链接至HTML文件 只有IE浏览器支持。先看下面导入样式表: 样式表2 将样式表定义在独立的文本文件body.css中,然后嵌入HTML文件。这个样式表所定义的字体为宋体、大小为30点、颜色为Blue。 其BODY.CSS文件内容: BODY { font-family: "宋体"; font-size=30; color:blue } 再看链接样式表: 样式表3 将样式表定义在独立的文本文件body.css中,然后链接至HTML 文件。这个样式表所定义的字体为宋体、大小为30点、颜色为Blue。 3.在HTML文件中套用样式类别 您也可以在样式表文件中定义不同的样式类别(Style Class),然后在HTML文件中套用不同的样式类别。 样式表4 标签之中。 例如: 通常是将整个的 结构写在网页的 部份之中。这种用法的优点就是在於整篇文件的统一性,只要是有声明的的元件即会套用该样式规则。缺点就是在个别元件的灵活度不足。 三、使用 LINK标签:将样式规则写在.css的样式档案中,再以标签引入。 假设我们把样式规则存成一个example.css的档案,我们只要在网页中加入 即可套用该样式档案中所制定好的样式了。通常是将LINK标签写在网页的 部份之中。这种用法的优点就是在於可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即可。缺点也是在个别文件或元件的灵活度不足。 四、使用@import引入:跟LINK用法很像,但必放在 中。
《网页设计与制作》教案-第10讲 布局技术之二—Div+CSS(二)
第10讲布局技术之二—Div+CSS(二) 1.1教学目标: ◆知识目标 1.理解CSS盒子模式。 2.掌握CSS规则设置方法。 ◆技能目标 能够理解Div+CSS所体现的表现和内容相分离特性。 ◆品质目标 培养学生认真细致、踏实进取的精神 1.2教学重点: 1.掌握CSS规则设置方法 1.3 教学难点 理解CSS规则的作用。 1.4教学方法:讲练结合,任务驱动、分子任务操练 1.5课时安排:2课时 1.6教学对象分析: 这个班学生具有基本专业技能,不仅仅是要教会他们方法,最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力,在保证全班同学教学进度一致的情况上,培养学生较好的专业基础与创新创作意识。 1.7教学过程: 一、CSS样式基本操作 1.样式表的操作途径 我们可以通过三种途径来创建、编辑CSS样式。 从主菜单选择“窗口/CSS样式”即可打开样式面板,如图3-35所示。 图3-35 CSS样式面板 在CSS样式面板的右下角有四个功能按钮,分别为: ●附加样式表:用于打开“链接外部样式表”对话框,选择要链接到或导入到当前文档中的外部样式表。 ●新建CSS样式:打开“新建CSS 样式”对话框,创建新样式。 ●编辑样式表:打开“CSS 样式定义”对话框。编辑当前文档或外部样式表中的任何样式。
删除CSS样式:删除“CSS 样式”面板中的所选样式,并从应用该样式的所有元素中删除格式。 单击CSS样式面板右上角的菜单按钮,可以显示如图3-36所示的面板菜单。通过该菜单,可以完成对CSS样式面板的大部分控制。在CSS样式面板的列表区域中单击鼠标右键,也可以打开同样的菜单。 图3-36 面板菜单 从主菜单选择“文本/CSS样式”命令,选择“新建”也可启动“新建样式表”对话框,如图3-37所示。 在页面空白处单击鼠标右键,在弹出的菜单中一样可以启动“新建样式表”对话框,如图3-38所示。 不管如何启动上述几个样式菜单或面板,他们都包含相同的几个命令:新建样式表、编辑样式表、链接样式表和导出样式表。
创建CSS样式表的三种方式
海文国际https://www.360docs.net/doc/1210891914.html, 创建CSS样式表的三种方式 本章主要探讨HTML5 中CSS(层叠样式表),它是用来对HTML 文档外观的表现形式进行排版和格式化。 使用CSS CSS 样式由一条或多条以分号隔开的样式声明组成。每条声明的样式包含着一个CSS属性和属性值。
这是一段文本 解释:style 是行内样式属性。color 是颜色属性,red 是颜色属性值;font-size是字体大小属性,50px 是字体大小属性值。 三种方式 创建CSS 样式表有三种方式: 1.元素内嵌样式; 2.文档内嵌样式; 3.外部引入样式。 1.元素内嵌样式
这是一段文本 解释:即在当前元素使用style 属性的声明方式。 2.文档内嵌样式 这是一段文本 解释:在
元素之间创建 定义css,body中引用;外部样式,css放在一个外部文件中,head 中用加载,body中引用和内部样式使用方法相同。 再来点基础的,css定义有三种:直接标签定义如,p{具体风格代码} 效果范围是body 中所有的p标签;根据ID号定义,#p1{具体风格代码} 效果范围是body中id="p1" 的标签;自定义,.p1{具体风格代码} body中标签以class="p1" 进行引用; 一、 CSS的语法是比较灵活的,比如可以同时定义两个css 名使用同一种风格,中间以逗号分隔,如:. .p1,.p2{具体风格代码} 或 .p1,#p2,p{具体风格代码} ,意思为,自定义的p1风格,id号为p2的风格, 标签的风格。 二、 接上,也可以 .p1,.p2{具体风格代码} ; .p2{具体风格代码} ; 好处是把自定义p1和p2相同的部分放在 .p1,.p2{具体风格代码} ; 不同部 分 .p2再定义。 三、 前面自定义好的风格,在引用时class="自定义风格" ,也给了我们充分的灵活,可以引用多个自定义风格,以空格间隔,如: .p1{具体风格代码} ; .p2{具体风格代码}; 引用时效果为同时引用两种风格。 四、 由于css的语法是,定义再引用,所以css 和html 中要一一对应,所以要取名->定义风格->用名字引用,带来很多的工作量,特别是一些div又嵌套很多层DIV的时候就要取很多的名字,这时css也给我们提供了好的解决方法,父标签定义的名字,在子标签定义的时候用标签名就可以了,如:
在父div 下的元素,定义css都可借助父div的名字 如,子div定义风格时可写 .d1 div{具体风格代码} 如,定义里面的li标签风格,可写d1 div li{具体风格代码} 也可d1 li{具体风格代码} 如,定义里面的a标签风格,可写d1 div li a{具体风格代码} 也可d1 li a{具体风格代码} 也可d1 a{具体风格代码} 掌握以上四种css方法,在开发之初,合理规划css 的定义,可以减少很多工作量。