div+css笔记.docx

My.css

.style1{

/*宽度*/

width:

400px;

height:

300px;/*一定要写一个分号*/

background-color:

silver;

border:

1pxsolidred;

margin-left:

400px;

margin-top:

250px;

padding-top:

20px;

padding-left:

40px;

}

网页设计的三个时期

①table网页设计

②table+css网页设计

③div+css网页设计

11讲初识css类选择器id选择器html选择器

css使用必要性1.可以很好的统一网站的显示风格.

css使用的基本语法

选择器{

属性1:

属性值;

属性2:

属性值;

….

}

Html文件:

--css部分可以单写一个文件，然后引入，也可以直接嵌入到该html文件-->

--span元素通常用于存放小块内容-->

栏目一

栏目二

栏目三

栏目四

栏目五

Css文件：

/*.s1用术语类选择器*/

.s1{

color:

blue;

font-size:

30px;

font-style:

italic;

text-decoration:

underline;

}

.s2{

color:

yellow;

font-size:

12px;

}

.s3{

color:

blue;

font-style:

italic;

}

.s4{

color:

green;

font-weight:

bold;

}

.s5{

color:

#9C3131;

}

Css必要性2可以使用滤镜

--如何把css直接嵌入到html文件（内联css）-->

a:

linkimg{

filter:

gray;

}

a:

hoverimg{

filter:

"";

}

Css中常用的四种选择器

1.类选择器（class选择器）

基本使用

.类选择器{

属性名:

属性值;

….

}

2.id选择器

基本使用

#id选择器{

属性名:

属性值;

….

}

案例:

/*id选择器的使用*/

#id1{

background-color:

silver;

font-size:

40px;

}

3.html元素选择器

某个html元素{

属性名:

属性值;

…

}

Table{

}

P{

}

Button{

}

//对html元素样式分类

P:

cls{

}

需求人员（技术+行业背景）

财务软件（php,c++）->用友[]

4.通配符选择器

☞css文件可以使用在各种文件（php,html,jsp,asp…）

*{

}

12讲通配符选择器父子选择器

1.通配符选择器

☞css文件可以使用在各种文件（php,html,jsp,asp…）

*{

}

案例:

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

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

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

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

这又该怎么实现呢?

[test.html]

a:

link{

color:

black;

text-decoration:

none;

font-size:

24px;

}

a:

hover{

text-decoration:

underline;

font-size:

40px;

color:

green;

}

a:

visited{

color:

red;

}

/*对同一中html元素分类*/

p.cls1{

color:

blue;

font-size:

30px;

}

p.cls2{

color:

red;

font-size:

20px;

}

通配符选取器

该选择器可以用到所有的html元素,但是其优先权最低

*{

属性名:

属性值;

….

}

☞四个选取器优先权

Id选择器>class选择器>html选择器>通配符选则器

了解->细节->深入了解->应用项目

选择器的细节问题!

1.父子选择器使用:

/*父子选择器*/

#id1span{

color:

red;

font-style:

italic;

}

☞上面选择器的含义是:

在id选择器为id1的子元素span的样式就是。

。

。

。

xxxxx

span1

span2

div1