DHTML动态网页设计 教学课件 作者 王愉 CSS__I.ppt

《DHTML动态网页设计 教学课件 作者 王愉 CSS__I.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、CSS基础Ι1.1CSS样式表概述1996年初诞生了层叠样式表CSS技术。CSS是层叠样式表CascadingStyleSheet是用于实现对布局、字体、颜色、背景和其它网页效果实现更加精确的控制，其主旨就是将显示内容和显示的样式定义分离。CSS样式表既可以定义在HTML文档内部，也可以作为附加文档定义在文档外部。一个样式表可以作用于多个页面，甚至整个站点，一个HTML文件也可以引用多个CSS样式表中的样式定义。因此，样式表具有更好的易用性和扩展性。1.1.1将样式表加入网页的方法1.外部链接样式文件(Linkedstyles)基本格式：

2、l="stylesheet"href="stylesfile.css"type="text/css">说明：先建立外部样式表文件（.css），然后使用HTML的link对象进行链接。h1{color:green;font-family:impact}p{background:yellow;font-family:courier}然后，在内使用标记：2.内部常规定义样式(Embeddedstyles)基本格式：

3、etype="text/css">Eg:3.内联在线定义样式(InlineStyles)基本格式：说明：内联定义即在对象的标记内，使用对象的style属性定义适用的样式表属性

4、。Eg:1.1.2样式冲突解决浏览器通过“继承”与“覆盖”原则来解决样式冲突问题。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义，而通常最接近目标的样式定义优先权越高。样式表优先级一般原则：内联在线定义样式（Inlinestyles）的优先级最高缺省浏览器样式（Defaultbrowserstyles）的优先级最低当内部常规定义样式（Embeddedstyles）与外部链接样式（Linkedstyles）同时存在，接近目标的样

5、式优先权高。”就近”原则Eg:p{font-family:Times;color:red;}I{font-family:Impact}

IthinkGardenisDavid'sbestnovel.

6、对象。可以是(X)HTML标记、自定义的id或者class对象。property :样式属性，如：大小、颜色、定位、边框等。value :样式属性值，常见形式有一定范围的可选值或带有单位的数值。eg：P{background:yellow;font-family:courier}2.注释利用/*……*/为代码加上注释。eg：P.first{color:green}/*greenforthefirstparagraphofeverypage*/3.CSS选择符的命名规则（1）区分大小写在XHTML中，CSS的id及class选择符名称是区分大小写的，eg

7、：id="nav"不同于id="Nav"（2）采用合法字符命名必须以英文字母开始，后接字母、数字、下划线等（3）使用具有一定语义的字母组合（4）制定统一的命名规则例如：“变量类型_变量名”方式命名网站元素list列表homepage首页content内容nav导航search搜索head头部foot底部menu菜单1.2.2CSS的选择符1．标记选择符（TagSelectors）基本格式：Tag{property:value}Eg:p{font-family:Arial;font-size:20px;color:#800080;word-spacing

8、:8px;}2.类选择符（ClassSelectors）基本格式：.Classname{pro