欢迎来到天天文库
浏览记录
ID:48061333
大小:2.15 MB
页数:97页
时间:2020-01-13
《CSS+DIV_教程.ppt》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库。
1、第五章样式表统一网站风格、制作基本特效主要内容一、样式表(CSS)的基本概念二、CSS与HTML文档的结合方法三、CSS属性的理解与应用四、CSS样式的单位五、CSS样式在网页中的应用六、CSS的高级应用2CSS样式表一、CSS的基本概念1、编写CSS样式的方法使用CSS编辑器如Dreamweaver、Frontpage等都会自带CSS编辑器。使用超文本编辑器如Dreamweaver、Frontpage等超文本编辑器均可编辑样式表;记事本3CSS样式表一、CSS的基本概念2、基本语法选择符{属性:值}选择符{属性1:值1;属性2:值2;……}单一选择符的复合样式声明应该用“;
2、”隔开,为便于阅读也可以分行写。几乎所有的HTML标记符形式都可以作为选择符。
3、号隔开。-例如:段落元素p、单元格元素td和类c1可以使用相同样式:p,td,.c1{font-size:12pt;font-family:黑体;color:red}5-2.htm5CSS样式表一、CSS的基本概念样式的继承:若子元素未定义,则它将继承上级元素的样式的定义。但存在少数属性不能继承,见P119。
4、HEAD>5-3.htm6CSS样式表一、CSS的基本概念样式表的关联性:样式表的关联性指在某些样式定义中,可以定义某样式仅在某个特定元素范围内才有效。。例如:pb{font-size:12pt;font-family:黑体;color:red}b元素仅在p元素作用范围内会套用上述的样式设定。而在其他地方不具有这些属性。5-4.htm7CSS样式表一、CSS的基本概念4、注释CSS文字的注释形式与C语言类似。p{font-size:12pt}/*P标签的样式定义*/8CSS样式表一、CSS的基本概念5、选择符样式表的基本语法形式:selector{property1:va
5、lue1;property2:value2;…}需要应用的样式的内容样式的属性样式的属性的值Select的五种合法的类别:HTML标记符、用户定义的类Class、用户定义的ID、虚类和虚元素P1199CSS样式表选择符的类别HTML标记符应用比较多,注意继承性、组合性和关联性(P119)的应用。用户定义的类选择符可以使用任何名称命名类。
6、2;…}例5-5.htm1、两种定义形式的区别?2、在标签中使用类选择符样式的使用方式如何?10CSS样式表选择符的类别ID选择符应用的形式基本与类选择符类似,定义时用“#”替代”.”。因此应用时一般选取其中的一种。见P120例子。虚类和虚元素在html的页面元素中没有这种属性,故称其为虚类,仅在IE5.0以上的浏览器版本才支持虚类选择符。语法如下:页面元素名:元素虚属性名{样式表内容}11CSS样式表a:link{color:#000000}a:visited{color:#cccccc}a:hover{color:#000000;font-style:italic}a:a
7、ctive{color:#aaaaaa}:link{color:#000000}:visited{color:#cccccc}:hover{color:#000000;font-style:italic}:active{color:#aaaaaa}例5-6.htm12CSS样式表二、CSS与HTML文档的结合方法HTML与样式表有多种结合方法内联样式:在
此文档下载收益归作者所有