韩顺平div+css笔记.docx

my.css中指定：

.style1{

width:

300px;

height:

200px;

border:

1pxsolidred;

margin:

100px0px0px200px;

}

.style1table{

border:

1pxsolidblack;

width:

298px;

height:

190px;

}

.style1tabletd{

border:

1pxsolidblack;

text-align:

center;

}

30px;color:

blue;">栏目一

从使用span元素我们可以看到，css的基本语法

<元素名style=”属性名：

属性值；属性名：

属性值2；”/>

元素可以是html的任意元素：

属性名：

属性值要参考w3c组织给出的参考文档

◆使用css可以统一网站的风格

css分类：

外部css内部css

DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">

---->

.style1{

font-size:

20px;

color:

red;

font-weight:

bold;

font-style:

italic;

}

栏目一

栏目二

栏目三

栏目二

栏目三

使用滤镜

/*使用滤镜将图片变成黑白色*/

img{

filter:

gray;

}

/*使用滤镜*/

a:

linkimg{

filter:

gray;

}

a:

hoverimg{

filter:

"";

}

---->

1．类选择器的基本语法:

.类选择器名{

属性名:

属性值;

…

}

.style1{

font-weight:

bold;

font-size:

20px;

background-color:

pink;

}

新闻一

新闻二

新闻三

新闻四

新闻五

2．id选择器

基本语法：

#id选择器名{

属性名：

属性值；

}

案例：

#style2{

font-size:

30px;

background-color:

skyblue;

}

在html文件中如果要引用id选择器，则

<元素id=‘id选择器的名称’>

这是一则重要的新闻

3．Html选择器

/*html选择器body（button,input,form...）*/

body{

color:

silver;

}

结论：

当一个元素同时被id选择器类选择器html选择器修饰时，优先级为：

id选择器>类选择器>html选择器>通配符选择器

这是一则重要的新闻

案例：

假设，我们希望所有的超链接

（1）默认样式是黑色，24px，没有下划线

（2）当鼠标移动到超链接时，自动出现下划线

（3）点击后，超链接变成红色。

my.css文件

a:

link{

color:

black;

font-size:

24px;

text-decoration:

none;

}

a:

hover{

text-decoration:

underline;

}

a:

visited{

color:

red;

}

html文件：

XX首页

搜狐首页

4．通配符选择器

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

/*使用通配符选择器，对外边距和内边距清零*/

*{

/*margin:

0px;*/

margin:

10px0px0px10px;/*如果margin给出四个值，则表示上，右，下，左*/

margin:

10px0px0px;/*如果margin给出三个值，第一个用于上，第二个用于（左，右），第三个用于下*/

padding:

0px;/*padding规则和margin一样*/

}

5．父子选择器

针对：

这是一则非常重要的新闻

my.css添加一个父子选择器

/*父子选择器*/

#style2span{

font-style:

italic;

color:

red;

}

注意：

（1）子选择器标签必须是html可以识别的标记

（2）父子选择器可以有多级

（3）父子选择器可以适用于id选择器和class选择器

（4）如果一个元素被id选择器和class选择器同时修饰时，id选择器的优先级>class选择器

（5）一个元素最多有一个id选择器，但是可以有多个类选择器

例

希望新闻三下划线，同时斜体

my.css中添加

.style1{

font-weight:

bold;

font-size:

20px;

background-color:

pink;

color:

black;

}

.style3{

font-style:

italic;

color:

green;

text-decoration:

underline;

}

Html文件中如何使用多个class选择器：

新闻三

a．在引用多个class选择器的时候，用空格隔开

b．当class选择器发生冲突时，在css文件中，以最后出现的class选择器样式为准

（6）在css文件中，如果有多个类/id选择器，它们都有相同的部分，我们可以把相同的css样式放在一起，间案例：

案例：

my.css

/*招生广告*/

.ad_stu{

width:

136px;

height:

196px;

background-color:

#FC7E8C;

margin:

5px005px;

float:

left

}

/*广告2*/

.ad_2{

width:

457px;

height:

196px;

background-color:

#7CF574;

margin:

5px006px;

float:

left

}

/*房地产广告*/

.ad_house{

width:

152px;

height:

196px;

background-color:

#7CF574;

margin:

5px005px;

float:

left

}

在有些css中，我们可以把多个class选择器，id选择器，html选择器，共同的部分提取出来，写在一起，这样的好处是可以简化css文件

我们可以把上面的css文件改写成：

/*招生广告*/

.ad_stu{

width:

136px;

background-color:

#FC7E8C;

margin:

5px005px;

}

/*广告2*/

.ad_2{

width:

457px;

background-color:

#7CF574;

margin:

5px006px;

}

/*房地产广告*/

.ad_house{

height:

196px;

background-color:

#7CF574;

margin:

5px005px;

}

.ad_stu,.ad_2,.ad_house{

width:

152px;

float:

left

}

6．块元素和行内元素

（1）行内元素，又叫内联元素

内联元素只能容纳文本或者其他内联元素，常见内联元素

特点是：

只占内容的宽度，默认不换行，行内元素一般放文本或者其它的行内元素。

（2）块元素

块元素一般都从新行开始，可以容纳文本，其它内敛元素和其它块元素，即使内容不能占满一行，块元素也要把正行占满，常见块元素

块元素2