與其寫一些理論的東西，到不如直接用代碼來實踐，代碼都是試出來的。
建議拿下面的代碼直接去運行，邊調試邊學習
字體、字號、背景、顏色、選擇器、級聯、盒子、位置、浮動
<!DOCTYPE html>
<html>
<head>
<title>玩轉CSS</title>
</head>
<body style="color: green;background:white">
會員
<strong style="font-size: medium;font-family: 隸書;">飛得高</strong><br>
<p><strong style="font-weight: 200;font-size: 3em;font-family: 楷體">飛得高</strong><br></p>
<strong style="font-size: 30px;">摔得慘</strong><br>
<strong style="font-size: large;">飛得高</strong>
<h1 style="color: red;background: black">
黑科技
</h1>
<span style="font:30px 楷體">放暑假</span><br>
<span style="font:30px 楷體;line-height: 4.3">放寒假</span>
<div style="text-align: center;background: black;color:red;border: 5px solid #365423">睡覺</div>
</body>
</html>
優先級：內聯 > id > 類 > 元素 > universal > 瀏覽器默認
<!DOCTYPE html>
<html>
<head>
<title>玩轉CSS</title>
<link rel="stylesheet" type="text/css" href="1.css"><!--外掛-->
<style type="text/css">
a:link{color: blue}
body{
text-align: center;
}
h1[title=aaa],h2{
color: red;
font-style: italic;
font-size: large;
font-family: 隸書;
}
#123{
letter-spacing: 0.3em;
background:cyan;
font-family: 楷體;
}
.p{
color: blue;
font-style: normal;
font-size: large;
font-family: 楷體
}
</style>
</head>
<body >
<h1>奮鬥</h1>
<h1 title="aaa">搜客</h1>
<h2>前進</h2>
<div class="p">過一會</div>
<p id="123">睡覺</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>玩轉CSS</title>
<style type="text/css">
body{
text-align: center;
}
h1{
color: red;
font-style: italic;
font-size: 130%;
font-family: 隸書;
}
p{
border-style: double;
border-top-width: 10px;
border-left-width: 20px;
border-right-width:20px;
border-bottom-width: 20px;
border-color: lime;
padding: 5px 5px 5px 5px;
margin: 12px 12px 12px 12px;
}
#lg{
position: relative;
background-color: lightgreen;
}
span{
top: 10px;
border:2px solid black;
}
div{
background-color: lightblue;
}
</style>
</head>
<body >
<h1>奮鬥</h1>
<h2>前進</h2>
<p>黑科技</p>
<div style="border-color: lime;">飛蛇</div>
<div>
<span>牀前明月光</span><br>
<span id="lg">疑是地上霜</span><br>
<span>舉頭望明月</span><br>
<span>低頭思故鄉</span>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{
width: 96px;
height: 96px;
border:2px solid black;
font-size: 88px;
font-family: 楷體;
position: relative;
}
.ji{
background-color: white;
color: black;
}
.ou{
background-color: black;
color: white;
}
#er{
left: 100px;
}
#si{
left: 200px;
bottom: 100px;
}
</style>
</head>
<body >
<div class="ji" id="yi">一</div>
<div class="ou" id="er">二</div>
<div class="ji" id="san">三</div>
<div class="ou" id="si">四</div>
<div class="ji" id="wu">五</div>
<div class="ou" id="liu">六</div>
<div class="ji" id="qi">七</div>
<div class="ou" id="ba">八</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p{
background-color: lightyellow;
margin-left: 30px;
margin-right: 50px;
}
img{
vertical-align: middle;
float: left;
}
</style>
</head>
<body>
<img src="1.jpg">
<p>牀前明月光</p><br>
<p>疑是地上霜</p><br>
<p>舉頭望明月</p><br>
<p>低頭思故鄉</p>
</body>
</html>