1.css简介
css:层叠样式表;将网页内容和显示样式进行分离,能让页面显示效果更好。
2.css和html的结合方式(四种结合方式)
(1)在每个html标签上面都有一个属性style,把css和html结合 注:属性名称与使用名之间用“:”隔开,属性与属性之间用”;“隔开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一个网页</title>
</head>
<body>
<div style="background-color:red;color:green;">想表达的内容</div>
</body>
</html>
(2)使用html的一个标签实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一个网页</title>
<style type="text/css">
div{
background-color:red;
color:green;
}
</style>
</head>
<body>
<div>想表达的内容</div>
</body>
</html>
(3)在style标签里面使用语句
@import url(css文件的路径)
-第一步:创建一个css文件
-第二步:在css文件中书写对div的操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一个网页</title>
<style type="text/css">
{
@import url(div.css)
}
</style>
</head>
<body>
<div>想表达的内容</div>
</body>
</html>
/*CSS文件*/
div{
background-color:red;
color:green;
}
(4)使用头标签link,引入外部css文件
-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一个网页</title>
<link rel="stylesheet" type="text/css" href="css文件的路径"/>
</head>
<body>
<div>想表达的内容</div>
</body>
</html>
/*CSS文件*/
div{
background-color:red;
color:green;
}
注意:第三种结合方式在某些老版本浏览器不起作用,一般使用第四种结合方式。
3.css的基本选择器
选择器:要对哪个标签里面的数据进行操作哦,那个标签即为选择器
(1)标签选择器
使用标签名作为选择器的名称
(2) class(类)选择器
每个html标签都有一个属性 class .名称
例1:你只想改变其中一个div的属性而不改变另一个:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一个网页</title>
<style type="text/css">
div.aaa{
background-color:red;
color:green;
}
</style>
</head>
<body>
<div calss="aaa">想表达的内容</div>
<div>想表达的内容</div>
</body>
</html>
例2 div与p的class相同并且这两个背景颜色、字体颜色等相同,此时可简写为:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一个网页</title>
<style type="text/css">
.aaa{
background-color:red;
color:green;
}
</style>
</head>
<body>
<div calss="aaa">想表达的内容</div>
<p class="aaa">想表达的内容</p>
</body>
</html>
(3)id选择器
#名称
每个html标签上面都有一个属性id,用法与class类似,不同之处在于div.aaa要0改成div#aaa,.aaa改成#aaa
PS:优先级:style>id选择器>class选择器>标签选择器
4.CSS扩展选择器
(1)关联选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css演示</title>
<style>
/*此时我想只改变div标签里的p标签的属性*/
div p{
background-color: red;
}
</style>
</head>
<body>
<div><p>关联选择器</p></div>
<p>aaaaaaaaaaaaaaaaaaaa</p>
</body>
</html>
(2)组合选择器
把不同的标签设置成相同的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css组合选择器演示</title>
<style>
/*此时我想同时让div和p标签的属性改变*/
div,p{
background-color: red;
}
</style>
</head>
<body>
<div>组合选择器</div>
<p>aaaaaaaaaaaaaaaaaaaa</p>
</body>
</html>
(3)伪元素选择器
css里面定义好的样式,可直接使用,具体查css使用手册
5.css的盒子模型
网页布局现在基本都是div+css来布局
(1)边框
*border(统一设置,下面为分开设置):
**上:border-top
**下:border-buttom
**左:border-left
**右:border-right
(2)内边距
**padding(可统一设置,也可分开设置)
上:padding-top 下:…(同上)
(3)外边距
*margin(可统一设置,也可分开设置)
**上:margin-top 下:…(同上)
6.css的布局定位属性
position
**属性值
-absolute:将对象从文档流拖出去,后面对象补充上去,可使用top、bottom、left、right等属性进行定位
-relative:不会把对象从文档流拖出去,可使用top、bottom、left、right等属性进行定位