韩顺平div+css笔记.docx
- 文档编号:27580910
- 上传时间:2023-07-03
- 格式:DOCX
- 页数:23
- 大小:1,012.88KB
韩顺平div+css笔记.docx
《韩顺平div+css笔记.docx》由会员分享,可在线阅读,更多相关《韩顺平div+css笔记.docx(23页珍藏版)》请在冰豆网上搜索。
韩顺平div+css笔记
div+css详解
◆div+css的介绍
div是用于存放html元素,文字,图片,视频的元素
css是层叠样式表,用于指定div中的内容的样式
原理图:
div+css的快速体验案例:
test.html:
DOCTYPEHTMLPUBLIC"-//w3c//DTDHTML4.0Transitional//EN">
1 | 2 | 3 | 4 | 5 |
1 | 2 | 3 | 4 | 5 |
1 | 2 | 3 | 4 | 5 |
1 | 2 | 3 | 4 | 5 |
1 | 2 | 3 | 4 | 5 |
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文件:
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)块元素
块元素一般都从新行开始,可以容纳文本,其它内敛元素和其它块元素,即使内容不能占满一行,块元素也要把正行占满,常见块元素
特点:
不管内容有多少,都要换行,同时占满整行,块元素可以放文本,行内元素,块元素。
(3)一些css属性对行内元素不生效,比如margin,left,right,width,height,建议尽可能使用块元素定位。
(与浏览器类版本和类型有关)
.s1{
background-color:
silver;
font-size:
20px;
}
.s2{
background-color:
skyblue;
font-size:
30px;
font-style:
italic;
}
(4)块元素和行内元素的转换
如果我们希望一个元素按照块元素的方式显示,则:
display:
block;
block;”class=”s2”>abc 如果我们希望一个元素按照行内元素的方式显示,则: display: inline; inline;”class=”s2”>hello
css核心内容—流
1.标准流/非标准流
标准流:
在网页布局中,写在前面的元素出现在前面,写在后面的元素,显示在后面,这是默认的布局方式,也成标准流。
非标准流:
在实际网页布局中,我们可能需要使用非标准流的方式来布局(让某个元素脱离它本身的位置)。
2.css盒子模型
盒子模型的原理图
细节说明:
(1)html元素都可以看成一个盒子
(2)盒子模型的参照物不一样,则使用的css属性不一样,比如从div1的角度看,是margin-right,从div2的角度看,则是margin-left
(3)如果不希望破坏整个外观,则尽量使用margin布局,因为padding可能会改变盒子的大小(相当于这个盒子有弹性),margin如果过大,盒子内容被挤到盒子外边去,但是盒子本身没有变化
3.案例:
BoxDemo.html:
DOCTYPEHTMLPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
--