首页 > 资料专栏 > 经营 > 运营治理 > 员工培训 > Css及div经典培训教材PPT_98页

Css及div经典培训教材PPT_98页

智盛咨询
V 实名认证
内容提供者
热门搜索
培训教材
资料大小:1230KB(压缩后)
文档格式:PPT
资料语言:中文版/英文版/日文版
解压密码:m448
更新时间:2018/10/17(发布于辽宁)
阅读:2
类型:金牌资料
积分:--
推荐:升级会员

   点此下载 ==>> 点击下载文档


文本描述
样式表 统一网站风格、制作基本特效主要内容 一、样式表(CSS)的基本概念 二、CSS与HTML文档的结合方法 三、CSS属性的理解与应用 四、CSS样式的单位 五、CSS样式在网页中的应用 六、CSS的高级应用一、CSS的基本概念 1、编写CSS样式的方法 使用CSS编辑器 如Dreamweaver、Frontpage等都会自带CSS编辑器。 使用超文本编辑器 如Dreamweaver、Frontpage等超文本编辑器均可编辑样式表; 记事本一、CSS的基本概念 2、基本语法 选择符{属性: 值} 选择符{属性1: 值1; 属性2: 值2 ;……} 单一选择符的复合样式声明应该用“;”隔开,为便于阅读也可以分行写 几乎所有的HTML标记符形式都可以作为选择符 <HEAD <TITLECSS例子</TITLE <STYLE TYPE=“text/css” H1{ font-size:x-large; color:red} H2{ font-size:large; color:blue} </STYLE </HEAD 5-1.htm H1{ font-size:x-large; color:red} H2{ font-size:large; color:blue}一、CSS的基本概念 3、CSS样式的组合、继承和关联性 样式的组合:把具有相同声明定义的选择符组合在一起,并用逗号隔开。 -例如:段落元素p、单元格元素td和类c1可以使用相同样式: p,td,.c1{font-size:12pt;font-family:黑体;color:red} 5-2.htm一、CSS的基本概念 样式的继承:若子元素未定义,则它将继承上级元素的样式的定义。但存在少数属性不能继承,见P119 <HEAD <TITLECSS例子</TITLE <style <!-- p{color:red;font-size:20px;font-family:华文仿宋, Comic Sans MS} b{text-decoration:underline} -- </style </HEAD 5-3.htm一、CSS的基本概念 样式表的关联性: 样式表的关联性指在某些样式定义中,可以定义某样式仅在某个特定元素范围内才有效。。 例如: p b{font-size:12pt;font-family:黑体;color:red} b元素仅在p元素作用范围内会套用上述的样式设定。 而在其他地方不具有这些属性 5-4.htm一、CSS的基本概念 4、注释 CSS文字的注释形式与C语言类似。 p{font-size:12pt} /*P标签的样式定义*/一、CSS的基本概念 5、选择符 样式表的基本语法形式: selector{property1:value1;property2:value2;…} 需要应用的样式的内容 样式的属性 样式的属性的值 Select的五种合法的类别:HTML标记符、用户定义的类Class、用户定义的ID、虚类和虚元素 P119选择符的类别 HTML标记符 应用比较多,注意继承性、组合性和关联性(P119)的应用。 用户定义的类选择符 可以使用任何名称命名类。 <body里所有的元素都可以定义“类”。 语法如下: selector.classname{property1:value1;property2:value2;…} .classname{property1:value1;property2:value2;…} 例5-5.htm 1、 两种定义形式的区别? 2、在标签中使用类选择符样式的使用方式如何?选择符的类别 ID选择符 应用的形式基本与类选择符类似,定义时用“#”替代”.”。 因此应用时一般选取其中的一种。见P120例子。 虚类和虚元素 在html的页面元素中没有这种属性,故称其为虚类,仅在IE5.0以上的浏览器版本才支持虚类选择符。 语法如下: 页面元素名:元素虚属性名{样式表内容}a:link {color: #000000} a:visited {color: #cccccc} a:hover {color: #000000; font-style:italic} a:active {color: #aaaaaa} :link {color: #000000} :visited {color: #cccccc} :hover {color: #000000; font-style:italic} :active {color: #aaaaaa} 例5-6.htm 。。。以上简介无排版格式,详细内容请下载查看