1. CSS简介
1.1 什么是CSS呢?
CSS(Cascading Style Sheets)是层叠样式表用来定义网页的显示效果。可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页显示效果的功能。简单一句话:CSS将网页内容和样式进行分离,提高了显示功能。
1.2 css和html的结合方式
共有4种结合方式:
1)在每个html标签上面都有一个属性style,把css和html结合起来。
<div style="background-color:red;color:green">
演示:
<html>
<head>
<title></title>
</head>
<body>
<!-- 背景颜色设为红色,字体颜色设为绿色 -->
<div style="background-color:red;color:green">
年轻宦官叹息一声,“希望只是分胜负而不是分生死吧。”
</div>
</body>
</html>
2)使用html的一个标签<style>实现,必须要写在头标签里
<style type="text/css>
css代码;
</style>
演示:
<html>
<head>
<title></title>
<!-- 设置div标签里背景颜色设为蓝色,字体颜色设为红色 -->
<style type="text/css">
div{
background-color:blue;
color:red;
}
</style>
</head>
<body>
<div>
徐凤年感慨道:“其实很羡慕那些既愿讲理又能顺意的人。”
</div>
</body>
</html>
3)在style标签里面使用语句
@import url(css的文件路径)
演示:
html:
<html>
<head>
<title></title>
<style type="text/css">
@import url(div.css);
</style>
</head>
<body>
<div>
徐凤年感慨道:“其实很羡慕那些既愿讲理又能顺意的人。”
</div>
</body>
</html>
在当前目录下建一个div.css文件
div {
background-color:yellow;
color:black;
}
4)使用头标签link,引入外部css文件
格式:<link rel="stylesheet" type="text/css" href="css的文件路径"/>
演示:
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="div.css"/>
</head>
<body>
<div>
徐凤年感慨道:“其实很羡慕那些既愿讲理又能顺意的人。”
</div>
</body>
</html>
第三种方式在有的浏览器不起作用,所以一般使用第四种方式。
2. css的优先级和选择器
2.1 css的优先级
从上到下,从外到内,优先级由低到高。也就是说后加载的优先级高。
演示:
<html>
<head>
<style type="text/css">
div{
background-color:gray;
color:white;
}
</style>
</head>
<body>
<div style="background-color:red;color:green">
徐凤年感慨道:“其实很羡慕那些既愿讲理又能顺意的人。”
</div>
<div>
年轻宦官笑道:“当真有这样的人物?”
</div>
</body>
</html>
2.2 css的选择器
上面代码中的div{... }就是一个选择器,其作用是对一些标签里的数据进行操作。其格式为:
选择器名称 { 属性名:属性值; 属性名:属性值; ...}
2.2.1 基本选择器
1. 标签选择器
使用标签名作为选择器的名称,例如上面的div选择器。
演示:
<html>
<head>
<style type="text/css">
div{
background-color:red;
}
p{
background-color:green;
}
</style>
</head>
<body>
<div>徐凤年感慨道:“其实很羡慕那些既愿讲理又能顺意的人。” </div>
<p>年轻宦官笑道:“当真有这样的人物?”</p>
</body>
</html>
2. class选择器
每个html标签都有一个属性class,例如:<div class="one">徐</div>
演示:
<html>
<head>
<style type="text/css">
/*div.one{
background-color:orange;
}
p.one{
background-color:orange;
}*/
/*由于div标签和p标签的class属性都为one,且要定义的背景色也相同
所以可以简写为.one选择器*/
.one{
background-color:orange;
}
</style>
</head>
<body>
<div class="one">徐凤年感慨道:“其实很羡慕那些既愿讲理又能顺意的人。” </div>
<p class="one">年轻宦官笑道:“当真有这样的人物?”</p>
</body>
</html>
3. id选择器
每个html标签都有一个属性id,例如:<div id="one">徐</div>
演示:
<html>
<head>
<style type="text/css">
/*div#one{
background-color:gray;
}
p#one{
background-color:gray;
}*/
#one{
background-color:gray;
}
</style>
</head>
<body>
<div id="one">徐凤年感慨道:“其实很羡慕那些既愿讲理又能顺意的人。” </div>
<p id="one">年轻宦官笑道:“当真有这样的人物?”</p>
</body>
</html>
4. 基本选择器的优先级
style>id选择器>class选择器>标签选择器
证明:
2.2.2 css的扩展选择器
1. 关联选择器
假如有这么一个语句:<div><p>aaa</p></div>,想要设置div标签里的p标签的样式。
演示:
<html>
<head>
<!-- 只设置div标签里面的p标签的样式 -->
<style type="text/css">
div p{
background-color:green;
}
</style>
</head>
<body>
<div><p>CSS扩展选择器</p></div>
<p>CSS和HTML的结合</p>
</body>
</html>
2. 组合选择器
假如想把<div>标签和<p>标签里的内容设置成相同的样式,可以考虑使用组合选择器。
演示:
<html>
<head>
<!-- 同时设置div和p标签里内容的样式 -->
<style type="text/css">
div,p{
background-color:orange;
}
</style>
</head>
<body>
<div>CSS扩展选择器</div>
<p>CSS和HTML的结合</p>
</body>
</html>
3. 伪(类)元素选择器
css提供了一些定义好的样式,可以拿来使用。比如超链接,超链接有四种状态:原始状态(:link),鼠标放上去的状态(:hover)、点击的时候(:active)、点击之后 (:visited)
演示:
<html>
<head>
<!-- 同时设置div和p标签里内容的样式 -->
<style type="text/css">
/*原始状态*/
a:link{
background-color:green;
}
/*悬停状态*/
a:hover{
background-color:blue;
}
/*点击状态*/
a:active{
background-color:gray;
}
/*点击之后的状态*/
a:visited{
background-color:orange;
}
</style>
</head>
<body>
<a href="http://localhost" target="_blank">本地主机</a>
</body>
</html>
原始状态:
悬停状态:
点击状态:
点击之后的状态:
3. css的布局
3.1 css的布局的漂浮
属性float
left:文本流向对象的左边
right:文本流向对象的右边
3.2 css的布局的定位
position
absolute:将对象从文档中脱出,使得该对象在空中漂浮着,可以使用left、right、top、bottom等属性对其进行决定定位。
relative:不会把对象从文档中脱出,但将依据left、right、top、bottom等属性在正常文档中偏移位置。
演示absolute:
<html>
<head>
<style type="text/css">
div{
width:200px;
height:150px;
border:2px solid blue;
}
#div51{
background-color:red;
position:absolute;
top:50px;
left:80px;
}
#div52{
width:250px;
height:150px;
background-color:green;
}
#div53{
background-color:orange;
}
</style>
</head>
<body>
<div id=div51>AAAAAAAAAAAAA</div>
<div id=div52>BBBBBBBBBBBBB</div>
<div id=div53>CCCCCCCCCCCCC</div>
</body>
</html>
演示relative:
<html>
<head>
<style type="text/css">
div{
width:200px;
height:150px;
border:2px solid blue;
}
#div51{
background-color:red;
position:relative;
top:50px;
left:80px;
}
#div52{
background-color:green;
}
#div53{
background-color:orange;
}
</style>
</head>
<body>
<div id=div51>AAAAAAAAAAAAA</div>
<div id=div52>BBBBBBBBBBBBB</div>
<div id=div53>CCCCCCCCCCCCC</div>
</body>
</html>
4. 练习
4.1 图文混排
图片和文字在一起显示
<html>
<head>
<style type="text/css">
#imgtext11{
width:400px;
height:320x;
border:2px dashed orange;
}
#img11{
float:left;
}
#text11{
color:green;
}
</style>
</head>
<body>
<div id="imgtext11">
<div id="img11"><img src="sq1.jpg" width="250" height="200" /></div>
<div id="text11">相信自己是一种信念,它不是繁花如梦似锦,却如青松雪压不倒。正因为有了这样的信念,我们才会坚持到底,自信永远。
听取意见是一种气度,它不是高天辽阔无际,却如大海容纳百川。正因为有了这样的气度,我们才会集思广益,从善如流。
不是吗?相信自己不意味固执己见;听取意见也不代表亦步亦趋。
唐太宗自由治理国家的雄才大略,他不怀疑自己的才能,但同时也接纳了魏征的“十思”,而不必“劳神苦思,代百司之职役”。
齐王也有管四方,理朝政的能耐,他也不会怀疑自己的才能,但他同时也接受了邹忌的“纳谏”,而使“燕、赵、韩、魏皆朝于齐”。
</div>
</div>
</body>
</html>
4.2 图像签名
在图片上显示文字
<html>
<head>
<style type="text/css">
#text{
position:absolute;
top:15px;
left:15px;
color:orange;
}
</style>
</head>
<body>
<div id=img><img src="sq2.jpg" width="300" height="280"/></div>
<div id=text>人需要相信自己!</div>
</body>
</html>