一、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>
二、CSS選擇器
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>
三、CSS常用屬性
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>