传智播客韩顺平轻松搞定网页设计divcss

《传智播客韩顺平轻松搞定网页设计divcss》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、北京传智播客教育www.itcast.cn轻松搞定网页设计之div+css讲师：韩顺平email:hanshunping@tsinghua.comqq:2317702760内容介绍1.初识css2.块级元素和行内元素3.css核心内容3.1标准流3.2盒子模型3.3浮动3.4定位4.css综合案例4.1盒子模型经典案例4.2仿sohu首页面布局学习目标掌握css的基本用法掌握css的四种选择器用法初始css–使用css的必要性■请看一个问题案例[HtmlPage1.htm]这是一个栏目风格不同的页面,如果,我希望统一设置它们的样式该怎么办?初始css–使用css的必要性■解决

2、之道-css对案例[HtmlPage1.htm]，进行改造，使用css来统一设置所有栏目的样式。初始css–使用css的必要性■请再思考一个问题汶川大地震时,所有的网站的图片,都变成黑白的了,这个是怎么实现的呢?案例[HTMLPage2.htm]这里用到了滤镜技术.css的三种选择器■选择器选择器是css中非常重要的概念.css中有四种不同的选择器①类选择器，又叫class选择器②id选择器③html元素选择器④通配符选择器简单的说,选择器就是在css中创建，而在网页页面(html,jsp,php,asp.net)中使用。css的三种选择器■类选择器.类选择器名{属性名:属性

3、值;…}我们在HtmlPage1.html就使用到了类选择器,这里再给大家举一个例子:[HTMLPage.htm]css的三种选择器■id选择器我们在[HTMLPage.htm]中给大家演示id选择器的用法:如图:#id选择器名{属性名:属性值;}css的三种选择器■html选择器我们在[HTMLPage.htm]中给大家演示html选择器的用法:如图:如果我们希望网页中默认字体是橙色，我们应当怎么处理。html元素名称{属性名:属性值;}再比如，我们希望所有的超链接(1)默认样式是黑色，24px,没有下划线(2)当鼠标移动到超链接时，自动出现下划线(3)点击后,超链接变成红

4、色。这又该怎么实现呢?[test.html]css的三种选择器■通配符选择器如果希望所有的元素都符合某一种样式，可以使用通配符选择器。*{margin:0;padding:0}可以让所有html元素的外边距和内边距都默认为0，有时特别有用。css的三种选择器■选择器深入探讨我前面讲的都非常简单,实际上css的选择器使用还有很多您需要注意的地方，如果不注意根本就不能驾驭css①父子选择器请大家看一个图:[HTMLPage.htm]如果希望特别强调非常两个字,该如何处理?方案:a.id选择器b.class选择器c.父子选择器css的三种选择器■选择器深入探讨①父子选择器类选择器和

5、id选择器都可以有父子选择器.*父子选择器可以扩展的....css的三种选择器■选择器深入探讨②一个元素可以同时有id选择器和类选择器请看一个案例:要实现新闻1和其它的新闻样式不一样,这怎么实现?css的三种选择器■选择器深入探讨③一个元素可以同时有id选择器和类选择器当id选择器和类选择器发生冲突时,id选择器优先级高于类选择器.优先级:id选择器>类选择器比如:id选择器指定字体为红色,而类选择器指定字体和蓝色，则页面显示红色.css的三种选择器■选择器深入探讨④一个元素最多有一个id选择器,但是可以有多个类选择器请看一个案例:要实现新闻3有下划线并是斜体该怎么实现?方案

6、:a.id选择器b.类选择器☞当一个元素被多个类选择器修饰时，它们用空格隔开..css的三种选择器■选择器深入探讨⑤一个元素最多有一个id选择器,但是可以有多个类选择器，当类选择器发生冲突的时候，又以哪个为准呢?我们用一个案例来说明.css的三种选择器■选择器深入探讨⑥当一个元素被id选择器,类选择器,html选择器同时限定时，优先级是:id选择器>类选择器>html选择器>通配符选择器.css的三种选择器■选择器深入探讨⑦在css文件中，如果有多个类/id选择器它们都有相同的部分，我们可以把相同的css样式放在一起,见案例。案例:my.css/*招生广告*/.ad_stu{

7、width:136px;height:196px;background-color:#FC7E8C;margin:5px005px;float:left;}/*广告2*/.ad_2{background:#7CF574;height:196px;width:457px;float:left;margin:5px006px;}/*房地产广告*/.ad_house{background:#7CF574;height:196px;width:152px;float:left;margin:5px006px;}