01-02CSS层叠样式表(概述&和html结合的方式)
1. 每一个html标签中都有一个style样式属性和属性值,多个属性之间用分号隔开。该属性的值就是css代码。
2. 使用style标签的方式。
<style type=”text/css”> //写上css,会调用css的解析引擎
div//作用在div标签上
{
background-color:#06F;
color:#F00;
}
</style>
作用类似于把复用性代码高度部分抽取出来,提高代码的复用性。
当有多个页面呢,每个页面都有div呢?该如何处理呢?
3.干脆把代码弄成一个文件,让其余文件都与他关联。
<style type=”text/css”>
@import url(div.css); //这样就可以解决问题,只需要在每个页面加上这句就可以解决。
@import url(span.css);//想操作哪个标签,就单独弄一个css文件即可。当然有点麻烦,可以直接在一个css文件中导入多个css文件,可以节省工作量。
</style>
4.<link rel=”stylesheet ” href=”1.css” type=”text/css”/>
Rel是跟页面的关系,跟方式有区别,4是用html代码链接的,而3是css导入的。
03-CSS(基本选择器&优先级)---CSS的核心
就是CSS要作用的标签。
1. html标签名
2. Class选择器(类选择器,专门给css提供样式加载的一个属性。)不光可以对相同标签中对一部分标签进行设定,还可以对不同标签进行相同设定。
3. id选择器,用法跟class选择器一致。但是通常ID的取值在页面中是唯一的,因为该属性除了给css用,还可以被js使用。Id通常都是为了标识页面中的一些特定区域使用的。
优先级:style属性高于id选择器高于class选择器高于html标签选择器。
04-CSS(关联选择器&组合选择器)
Span b {//这就是关联选择器。仅仅对span下的b标签
Background-color:#09F;
Color:#FFF;
}
而组合选择器就是对多种选择器进行相同样式设定。
.haha ,div b{
Background-color:#09F;
Color:#FFF;
}
05-06CSS(伪元素选择器)
超链接的状态
1. 未访问//完全可以自己设定它的样式
a:link{
Background-color:.....
Color
Text-decoration
Font-size
}
2. 鼠标悬停
A:hover{
Background-color:
Color:
Font-size:
}
3. 点击效果
a:active{
}
4. 访问后效果
a:visited{
}
L V H A 一共4个效果
P-First-line段落中的第一行文本
Q-first-letter段落首字母设定
:focus 具有聚焦的
07-CSS(CSS样式的结合应用)(暂时先跳过)
08-CSS(CSS的盒子模型)
以前通过表格完成表格完成布局(html),现在通过CSS的话,DIV+CSS,页面由很多DIV组成,通过CSS的布局属性,就可以改变DIV的位置存放。后者比前者更为灵活。现在流行的是DIV+CSS。把数据放到盒子里面去,然后盒子的位置可以随便变化。
盒子模型:
边框:border
上border-up
下border-bottom
左border-left
右border-right
<div id=”div_1”>
第一个盒子11
</div>
<div id=”div_2”>
第二个盒子22
<div id=”div_3”>
第二个盒子33
</div>
内边距Padding:的顺序 上 右 下 左 (对应时针顺时针方向。)
外边距 margin 全部设置为0,为什么上部分还有距离呢?
那个距离是body的距离,需要将
Bogy{
Margin:opx;
}
![](https://i-blog.csdnimg.cn/blog_migrate/ed9bb424757fdf70dbf2027aa816e82c.png)
09-CSS(CSS的布局-漂浮)
Float(CSS的一个属性)需要作用到某一个选择器(标签)上面,若指定为该标签,那么后面的标签就会流向该标签的右边。。
None 不漂浮
Left 漂到右边 (不允许左边有浮动的)
Right 漂到左边 (不允许右边有浮动的)
Clear:left 可以撤销之前盒子的命令,不随别人的漂浮不动。
Clear:right
Clear:both
10-CSS(CSS的布局-定位)
Static:默认值。无特殊定位,对象遵循html定位规则。
Absolute(绝对定位):从文档流中脱离,在空中。想在哪就在哪,通过上下左右边距进行设定。不存在相互覆盖的问题了。想怎么设置就怎么设置了。(这也就是图片在网页中飞动的原理。)
Fixed:不支持
Relative:对象不可层叠。不出文档流,就是你上面的过来了,也不让你覆盖。我就是一直占着位置。
11-CSS(CSS的布局-图文混排)
<body>
<div id=”imgtext”>
<div id=”img”><img src=”9.bmp”/></div>
<div id=”text”>
这是一个美女,说明文字。
</div>
</div>
</body >
文字:左漂或者右漂都可以解决。
12-CSS(CSS的布局-图像签名)--应用