div+css笔记.docx
- 文档编号：2946535
- 上传时间：2022-11-16
- 格式：DOCX
- 页数：24
- 大小：301.20KB
div+css笔记.docx
《div+css笔记.docx》由会员分享，可在线阅读，更多相关《div+css笔记.docx（24页珍藏版）》请在冰豆网上搜索。
div+css笔记
10讲div+css开山篇
Div+css是什么?
Div+css是一种目前比较流行的网页布局技术
Div来存放需要显示的数据（文字，图表..）,css就是用来指定怎样显示，从而做到数据和显示相互的效果
原理图如下：
有时后，我们也可能把css直接嵌入到html文件中，这种方式称为内联css
基本语法:
我们可以简单的这样理解div+css:
div是用于存放内容（文字,图片,元素）的容器。
css是用于指定放在div中的内容如何显示,包括这些内容的位置和外观.
快速入门案例（体验案例）
Demo.html
--引入我们的css-->
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
X
xx
#id1spanspan{
color:
green;
}
#id1spanspana{
color:
blue;
}
通过上面总结:
①父子选择器可以有多级（但是在实际开发中不要过三层）
②父子选择器有严格的层级关系
13讲选择器使用细节块元素和行内元素盒子模型盒子模型经典应用①
通过上面总结:
①父子选择器可以有多级（但是在实际开发中不要过三层）
②父子选择器有严格的层级关系
③父子选择器不局限于什么类型选择器
比如
#idspanspan
.s1#idspan
div#id.s2
1.一个元素可以同时有id选择器和class选择器
案例:
2.一个元素最多有一个id选择器，但是可以有多个类选择器
使用方法如下:
<元素class=”类选择器1类选择器2”/>
Html部分
Css部分:
/*给新闻三再配置一个class选择器*/
.cls1{
font-style:
italic;
text-decoration:
underline;
color:
blue;
background-color:
silver;
}
.s1{
background-color:
pink;
font-weight:
bold;
font-size:
16px;
color:
black;
}
特别注意:
当两个类选择器发生冲突了，则以写在css文件中的后面的那个类选择器为准！
3.我们可以把某个css文件中的选择器共有的部分，独立出来写一份比如:
.ad_stu{
width:
136px;
height:
196px;
background-color:
#FC7E8C;
margin:
5px006px;
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;
}
//上面的css可以写成:
/*招生广告*/
.ad_stu{
width:
136px;
background-color:
#FC7E8C;
}
/*广告2*/
.ad_2{
background:
#7CF574;
width:
457px;
}
/*房地产广告*/
.ad_house{
background:
#7CF574;
width:
152px;
}
.ad_stu,.ad_2,.ad_house{
height:
196px;
float:
left;
margin:
5px006px;
}
4.说明css文件本身也会被浏览器从服务器下载到本地，才能显示效果.
行内元素和块元素
快速入门案例:
从案例我们看出，行内元素它只占能显示自己内容的宽度，而且他不会占据整行
块元素它不管自己的内容有多少，会占据整行，而且会换行显示
常见块元素有
silver">这是
转基因粮食的危害资料摘编Word下载.docx
