CSS简介
CSS：层叠样式表用来定义网页的显示效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。简单总结：css将网页内容和显示样式进行分离，提高了显示功能
CSS和html的结合方式（四种）
1.在每个html标签上面都有一个属性style，把css和html结合在一起
<div style="background-color:red;color:green;">
属性background-color是背景颜色，属性color是字体颜色。属性之间用；隔开
<meta charset="utf-8">
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<div style="background-color:red;color:green;">好好学习，天天向上！</div>
</body>
</html>
<style type="text/css">
css代码；
</style>
<meta charset="utf-8">
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
div{ //注意此部分，改变背景颜色和字体颜色需要用div框起来
background-color:blue;
color:red;
}
</style>
</head>
<body>
<div>好好学习，天天向上！</div>
</body>
</html>
3.在style标签里面使用语句@Import url（css文件路径）;。第一步需要创建一个 css文件
此方式有缺点：在某些浏览器下不起作用，一般不用
创建的div.css文件
/*
div
*/
div{
background-color:yellow;
color:blue;
}
<meta charset="utf-8">
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
@import url(div.css);
</style>
</head>
<body>
<div>好好学习，天天向上！</div>
</body>
</html>
4.使用头标签link，引入外部css文件。第一步需要创建一个 css文件。（这种方式用的最多）
<link rel="stylesheet" type="text/css" href="css文件路径"/>
stylesheet:表示引入的是一个样式表
text/css：表示写入的是css代码
<meta charset="utf-8">
<html>
<head>
<title>HTML示例</title>
<link rel="stylesheet" type="text/css" href="div.css"/>`
</head>
<body>
<div>好好学习，天天向上！</div>
</body>
</html>
CSS优先级
优先级（一般情况）：由上到下，由外到内，优先级由低到高。也就是后加载的优先级高
<meta charset="utf-8">
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
div{
background-color:blue;
color:red;
}
</style>
</head>
<body>
//相对于上面的div，这里的div是后加载的
<div style="background-color:white;color:green;">好好学习，天天向上！</div>
<div>爱学习，爱生活！</div>
</body>
</html>
结果：
好好学习，天天向上：白背景，绿字体
爱学习，爱生活：蓝背景，红字体
格式：选择器名称{属性名：属性值；属性名：属性值；…}
例:
div{
background-color:blue;
color:red;
}
CSS的基本选择器（三种）
标签选择器：
使用标签名作为选择器名称，例如上面提到的div标签
<meta charset="utf-8">
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
div{
background-color:blue;
color:black;
}
p{
background-color:red;
color:black;
}
</style>
</head>
<body>
<div>好好学习，天天向上！</div>
<p>爱生活，爱学习！</p>
</body>
</html>
类选择器（class选择器）：
每个html标签都有一个属性class
例：<div class="class名称></div>
<meta charset="utf-8">
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
/*
div.haha{
background:yellow;
color:black;
}
p.haha{
background:yellow;
color:black;
}
*/
.haha{ //当class名称都相同是，可以直接这样写
background:yellow;
}
</style>
</head>
<body>
<div class="haha">好好学习，天天向上！</div>
<p class="haha">爱生活，爱学习！</p>
</body>
</html>
id选择器：
每个html标签上面都有一个属性id
例：<div id="hehe">数据内容</div>
<meta charset="utf-8">
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
/*
div#hehe{
background:red;
}
p#hehe{
background:red;
}
*/
#hehe{
background:red;
}
</style>
</head>
<body>
<div id="hehe">好好学习，天天向上！</div>
<p id="hehe">爱生活，爱学习！</p>
</body>
</html>
优先级：
style>id选择器>class选择器>标签选择器
CSS的扩展选择器（后续补充）
1.关联选择器
设置嵌套标签样式
<meta charset="utf-8">
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
div p{ //这里按照顺序写，div在外，p在里，中间用空格隔开。表示只改变‘CSS扩展选择器’背景颜色
background:green;
}
</style>
</head>
<body>
<div><p>CSS的扩展选择器</p></div>
<p>sadfadfadfadf</p>
</body>
</html>
把不同标签设置成相同样式
把div和p标签设置成相同样式
<meta charset="utf-8">
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
div,p{ //用逗号隔开
background:orange;
}
</style>
</head>
<body>
<div>adfadfadsfdasfa</div>
<p>erwrw3eer</p>
</body>
</html>
3.伪元素选择器
CSS里提供了一些定义好的样式，可以拿过来使用
举例：超链接的状态。
原始状态（：link），鼠标放上去的状态(:hover)，点击(:active)，点击之后(:visited)
<meta charset="utf-8">
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
/*原始状态*/
a:link{
background-color:black;
}
/*悬停状态*/
a:hover{
background-color:red;
}
/*点击状态*/
a:active{
background-color:blue;
}
/*点击之后的状态*/
a:visited{
background-color:gray;
}
</style>
</head>
<body>
<a href="http://www.sina1.com.cn" target="_blank">css概述和与html的结合方式超链接一</a>
</body>
</html>
CSS的盒子模型
在进行布局之前需要把数据封装到一块一块的区域内（div）
-边框
border:统一设置
上：border-top
下：border-bottom
左：border-left
右：border-right
边框的属性：
（1）边框颜色 border-color
（2）边框宽度 border-width
（3）边框的格式 border-style
边框格式属性：solid——单实线
dashed——虚线
dotted——点
double——双实线
边框的四条边可分别使用：top right bottom left 指定
例如：指定右边框的颜色可用 border-right-color：颜色; 指定
简写的方法：
（1）设置颜色简写的方法：border-color：颜色1 颜色2 颜色3 颜色4；
注：若有一边颜色没有设置，则会自动补为对边的颜色
（2）设置边框宽度简写的方法：border-width：宽度1 宽度2 宽度3 宽度4；
注：若有一边宽度没有设置，则会自动补为对边的宽度
（3）设置边框格式的简写方法：border-style：格式1 格式2 格式3 格式4；
注：若有一边边框格式没有设置，则会自动补为对边的格式
注：简写的默认顺序为 top right bottom left
<meta charset="utf-8">
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
/*px是单位，和cm差不多*/
#div12 {
border-right:2px solid yellow;
}
div{
width:200px;
height；400px;
border:2px dashed blue;
</style>
</head>
<body>
<div id="div11">aaaaaa</div>
<div id="div12">bbbbbb</div>
<div id="div13">cccccc</div>
</body>
</html>
内边距：
使用padding统一设置，也可以分别设置上下左右四个内边距
<meta charset="utf-8">
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
#div22{
padding:20px;
}
#div23{
padding-left:30px;
}
div{
width:200px;
height；100px;
border:2px solid blue;
</style>
</head>
<body>
<div id="div21">aaaaaa</div>
<div id="div22">bbbbbbbbbbbbbbb</div>
<div id="div23">cccccc</div>
</body>
</html>
外边距：
使用margin统一设置，也可以分别设置上下左右四个外边框
CSS的布局的漂浮（了解即可）
float:属性值
left：文本流向对象的右边
right：文本流向对象的左边
<meta charset="utf-8">
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
div{
width:200px;
height:150px;
border:2px solid blue;
}
#div41{
float:right;
}
</style>
</head>
<body>
<div id="div41">aaaaaa</div>
<div id="div42">bbbbbb</div>
<div id="div43">cccccc</div>
</body>
</html>
CSS布局定位属性
postion属性值：
absolute：将对象从文档流中拖出
可以是top、bottom等属性进行定位
relative：不会吧对象从文档流中拖出
可以使用top、bottom等属性进行定位
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
