選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*標籤選擇器 特點：標籤名叫什麼就寫什麼*/
span{
color: red;
}
h1{
color: red;
}
/*類名選擇器 特點：需要通過 . 引用，還可以一個標籤擁有多個類名，類名還可以重複*/
.zhangsan{
color: red;
}
.lisi{
color: blue;
}
.wangwu{
color: green;
}
.box{
font-size: 32px;
}
/*id選擇器 特點:是唯一的。一個頁面中不能出現重複Id名*/
#top{
font-size: 40px;
}
/*要遵守好代碼整齊的規則。*/
/*命名規則，不得使用系統關鍵字，保留字*/
/*不要純數字、中文等命名， 儘量使用英文字母來表示。*/
/*儘量不要使用標籤名作爲類名，比如 .p .h1 這是不合法的。*/
</style>
</head>
<body>
<div class="zhangsan box" id="left">hello word</div>
<div class="lisi box">hello word</div>
<div class="wangwu">hello word</div>
<p id="top">你好</p>
<span>你好</span>
<h1>你好</h1>
</body>
</html>
通配符選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*通配符選擇器*/
/*選擇頁面中所有的標籤*/
*{
color: red;
}
</style>
</head>
<body>
<div class="zhangsan box" id="left">hello word</div>
<div class="lisi box">hello word</div>
<div class="wangwu">hello word</div>
<p id="top">你好</p>
<span>你好</span>
<h1>你好</h1>
</body>
</html>
顏色表示方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
h1{
color: red;
/*第一種，用單詞去表示顏色*/
color: #DC4B3E;
/*第二種，16進制去表示*/
color: rgb(13,200,190);
/*第三種表示方式 取值範圍0~255*/
/*ctrl+Z是撤回*/
}
</style>
</head>
<body>
<h1>你好</h1>
</body>
</html>
元素行高以及文字左右居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 200px;
height: 100px;
border: 1px solid #000;
line-height:100px;
/*行高 當行高和高度保持一致時，可以讓裏面的單行文本上下居中*/
text-align: center;
/*文本左右居中*/
}
</style>
</head>
<body>
<div>你好</div>
</body>
</html>
文本縮進
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 500px;
height: 500px;
border: 1px solid #000;
font-size: 30px;
text-indent: 2em;
/*1個em = 一個字體的大小*/
}
</style>
</head>
<body>
<div>你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</div>
</body>
</html>
經過這兩次的學習可以做一些自己想做的東西下面我放幾個實例
根據下面圖片自己動手做一下
