1.初识css

2.块级元素和行内元素

3.css核心内容

 3.1 标准流

 3.2 盒子模型

 3.3 浮动

 3.4 定位

4.css综合案例

 4.1 盒子模型经典案例

 4.2 仿sohu首页面布局

 4.3 可爱屋网站首页面

掌握css的基本用法

掌握css的四种选择器用法

请看一个问题

 案例[HtmlPage1.htm]

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

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

该怎么办?

解决之道-css

 对案例[HtmlPage1.htm]，进行

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

的样式。 

请再思考一个问题

  汶川大地震时,所有的网站的图片,都变成黑白的了,这个是怎么实

现的呢?

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

选择器  

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

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

   ②id选择器

   ③html元素选择器

   ④通配符选择器

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

,asp.net)中使用。

类选择器 

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

个例子:  [HTMLPage.htm]

通配符选择器

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

选择器深入探讨

  我前面讲的都非常简单,实际上css的选择器使用还有很多您需要注意的

地方，如果不注意根本就不能驾驭css

    ①父子选择器

    请大家看一个图:  [HTMLPage.htm]   

     如果希望特别强调非常两个字,该

     如何处理?方案:

     a.id选择器

     b.class选择器

     c.父子选择器

选择器深入探讨

  ①父子选择器

     类选择器和id选择器都可以有父子选择器.

选择器深入探讨

  ②一个元素可以同时有id选择器和类选择器

   请看一个案例:

                  要实现新闻1 和其它的新闻

                  样式不 一样,这怎么实现

选择器深入探讨

  ③一个元素可以同时有id选择器和类选择器

   当id选择器和类选择器发生冲突时,id选择器优先级 高于类选择

器.

 

   优先级: id选择器 > 类选择器

   比如: id选择器指定字体为红色,而类选择器指定字体和蓝色，则

页面显示红色.

选择器深入探讨

  ④一个元素最多有一个id选择器,但是可以有多个类选择器

   请看一个案例:

              要实现新闻3 有下划线并是斜体该

            怎么实现?

            方案: a.id选择器 b.类选择器

☞ 当一个元素被多个类选择器修饰时，它们用空格隔开..

选择器深入探讨

    ⑤一个元素最多有一个id选择器,但是可以有多个类选择器，当类

选择器发生冲突的时候，又以哪个为准呢? 我们用一个案例来说明.

选择器深入探讨

  ⑥当一个元素被id选择器,类选择器,html选择器同时限定时，优先

级是: id选择器>类选择器>html选择器>通配符选择器.

选择器深入探讨

  ⑦在css文件中，如果有多个类/id选择器它们都有相同的部分，我

们可以把相同的css样式放在一起,见案例。

教程需要搭配视频观看，请下载。