目录
一、CSS概述
1、CSS的作用
界面美化和布局控制；
2、什么是CSS
Cascading Style Sheets 层叠样式表
层叠：多个样式可以作用在同一个html标签上，同时生效；
3、CSS控制样式的好处
①功能强大；
②将内容展示与样式分离：降低耦合度（解耦），让分工协作更容易，提高开发效率；
4、CSS的使用方式
①内联样式（不推荐使用）——作用于当前标签
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS演示</title>
</head>
<body>
<!-- 内联样式 -->
<div style="color: aqua;">
Hello World!
</div>
</body>
</html>
②内部样式——作用于当前html文件
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS演示</title>
<!-- 内部样式 -->
<style type="text/css">
div{
color: aqua;
}
</style>
</head>
<body>
<div>
Hello World!
</div>
</body>
</html>
③外部样式——作用于多个html文件
css.css：
div{
color: aqua;
}css.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS演示</title>
<!-- 外部样式 -->
<link rel="stylesheet" type="text/css" href="css/css.css"/>
</head>
<body>
<div>
Hello World!
</div>
</body>
</html>
1、语法格式
选择器{
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
...
}选择器：筛选具有相似特征的元素；
属性：每一条属性用分号隔开，最后一条可以省略；
2、选择器
基本选择器：
①id选择器；
②元素选择器；
③类选择器；
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基本选择器演示</title>
<style type="text/css">
/* id选择器，id原则上唯一 */
#d1{
color: aqua;
}
/* 类选择器 */
.d2{
color: red;
}
/* 标签（元素）选择器 */
div{
font-size: 30px;
}
</style>
</head>
<body>
<div id="d1">
Hello ID;
</div>
<div class="d2">
Hello CLASS;
</div>
<div>
Hello DIV;
</div>
</body>
</html>
扩展选择器：
①*所有选择器，选择全部元素——语法：*{}
②并集选择器——语法：选择器1,选择器2{}
③子选择器——语法：选择器1.选择器2
④父选择器——语法：选择器1>选择器2
⑤属性选择器——语法：元素名称[属性名="属性值"]{}
⑥伪类选择器——语法：元素:状态
如<a>，状态：link：初始化状态；visited：被访问过的状态；active：正在访问状态；hover：鼠标悬浮状态；
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>扩展选择器演示</title>
<style type="text/css">
/* 子选择器 */
.c1 #son{
font-size: 30px;
}
/* 属性选择器 */
div[align="center"]{
color: #FF0000;
font-size: 50px;
}
/* 伪类选择器 */
a:link{
color: #FF0000;
}
a:visited{
color: #00FFFF;
}
a:active{
color: black;
font-style: inherit;
font-size: 30px;
}
a:hover{
color: green;
font-style: oblique;
font-size: 20px;
}
</style>
</head>
<body>
<div id="div1">
Hello!
</div>
<div class="c1" align="center">
<div id="son">
儿子！
</div>
Hello!
</div>
<div id="div3" align="center">
Hello!
</div>
<a href="#">这是连接</a>
</body>
</html>
1、文本、字体
2、背景
3、边框
4、尺寸
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS属性演示</title>
<style type="text/css">
#test{
/* 字体大小 */
font-size: 30px;
/* 字体颜色 */
color: #FF0000;
/* 文本对齐方式 */
text-align: center;
/* 行高 */
line-height: 50px;
/* 边框 */
border: 5px solid #00FFFF;
/* 背景-颜色-图片 */
background: #000000;
/* background: url(图片地址); */
/* 宽度 */
width: 300px;
/* 高度 */
height: 300px;
}
</style>
</head>
<body>
<div id="test">
Hello!
</div>
</body>
</html>
5、盒子模型
外边距：margin；
内边距：padding；
浮动：float；
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型演示</title>
<style type="text/css">
#zibo{
color: #ffffff;
width: 200px;
height: 200px;
background-color: #FF0000;
margin: 20px;
/* padding会影响盒子的大小 */
padding: 20px;
/* 使所设置的宽和高就是盒子最终的大小 */
box-sizing: border-box;
}
#zb{
width: 300px;
height: 300px;
background-color: #00FFFF;
box-sizing: border-box;
}
.c1{
/* 浮动 */
float: left;
}
.c2{
/* 浮动 */
float: left;
}
.c3{
/* 浮动 */
float: right;
}
</style>
</head>
<body>
<div id="zb">
<div id="zibo">
Hello!
</div>
</div>
<div class="c1">
哈哈
</div>
<div class="c2">
呵呵
</div>
<div class="c3">
嘿嘿
</div>
</body>
</html>