网页设计CSS核心教程.pdfVIP

主讲韩顺平

内容介绍

1.初识css

2.块级元素和行内元素

3.css内容

1.流

2.盒子模型

3.浮动

4.定位

4.css综合案例

1.盒子模型经典案例

2.仿sohu首页面布局

主讲韩顺平

学习目标

①掌握css的基本用法

②掌握用法

主讲韩顺平

初始css–使用css的必要性

■请看一个问题

案例[HtmlPage1.htm]

这是一个栏目风格不同的页面,

如果,我希望统一设置它们的样式

该?

主讲韩顺平

初始css–使用css的必要性

■解决之道-css

对案例[HtmlPage1.htm]，进行改

造，使用css来统一设置所有栏目的

样式。

主讲韩顺平

初始css–使用css的必要性

■请再思考一个问题

汶川震时,所有的的,都变成黑白的了,这个是怎么实

现的呢?

案例[HTMLPage2.htm]这里用到了滤镜技术.

■选择器

选择器是css中非常重要的概念.css中有三种不同的选择器

①类选择器，又叫class选择器

②id选择器

③html元素选择器

④通配符选择器

简单的说,选择器就是在css中创建，而在网页页面(html,jsp,php

)中使用。

主讲韩顺平

■类选择器

我们在HtmlPage1.html就使用到了类选择器,这里再给大家举一

个例子:[HTMLPage.htm]

.类选择器名{

属性名:属性值;

…

}

主讲韩顺平

■id选择器

我们在[HTMLPage.htm]中给大家演示id选择器的用法:如图:

#id选择器名{

属性名:属性值;

}

主讲韩顺平

■html选择器

我们在[HTMLPage.htm]中给大家演示html选择器的用法:如图:

如果我们希望网页中默认字体是橙色，我们应当怎么处理。

html元素名称{

属性名:属性值;

}

再比如，我们希望所有的超

(1)默认样式是黑色，24px,没有下划线

(2)当鼠标移动到超时，自动出现下划线

(3)点击后,超变成红色。这又该怎么实现呢?[test.html]

主讲韩顺平

■通配符选择器

如果希望所有的元素都符合某一种样式，可以使用通配符选择器。

*{margin:0;padding:0}