div+css学习笔记.docx
- 文档编号：6236550
- 上传时间：2023-05-09
- 格式：DOCX
- 页数：24
- 大小：300.94KB
div+css学习笔记.docx
《div+css学习笔记.docx》由会员分享，可在线阅读，更多相关《div+css学习笔记.docx（24页珍藏版）》请在冰点文库上搜索。
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网页设计
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…）
*{
}
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;
}
通过上面总结:
① 父子选择器可以有多级（但是在实际开发中不要过三层）
② 父子选择器有严格的层级关系
通过上面总结:
① 父子选择器可以有多级（但是在实际开发中不要过三层）
② 父子选择器有严格的层级关系
③ 父子选择器不局限于什么类型选择器
比如
#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">这是一个段落
行内元素和块元素可以转换
使用
Display:
inline表示使用行内元素方式显示
Display:
block表示使用块元素方式显示
Css文件之间的相互引用指令（mvc）
标准流和非标准流
流:
html元素在网页中显示的顺序.
标准流:
在html文件中，写在前面的元素在前面显示，写在后面的html元素在后面显示.
非标准流：
在html文件中，当某个元素脱离的标准流，那么它就处于非标准流
Css中的盒子模型
盒子模型的示意图:
盒子模型的经典案例:
Html文件:
DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""
http:
//www.w3.org/TR/html4/loose.dtd">
《篮球行进间单手低手投篮》教学设计.docx
