HTML+CSS 輕鬆入門CSS 基礎知識
下面我們開始講解css 的基礎知識：
在講基礎知識前，我們要知道css中的註解怎麼寫
/*註解內容*/
字體：font
對字體我們有哪些操作：
字體顏色 color 字體大小 size 字體樣式 斜font-family font-style 字體粗細 font-weight 下劃線 text-decoration 行高line-height
通過實例我們來講解：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
font-size: 20px; /*字体大小*/
color: red; /*字体颜色*/
font-weight: bold; /*字体粗细*/
font-style: oblique;
/*italic:斜体。对于没有斜体变量的特殊字体，将应用 oblique
normal:默认值。正常的字体
oblique倾斜的字体
*/
text-decoration:none; /*none : 默认值。无装饰
blink : 闪烁
underline : 下划线
line-through : 贯穿线
overline : 上划线
*/
font-family:隶书; /*什么样的字体。宋体，隶书等*/
}
</style>
</head>
<body>
中华名族伟大复兴
</body>
</html>文字text
文字對齊 text-align
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
text-align:center;
}
</style>
</head>
<body>
中华名族伟大复兴
</body>
</html>背景background
背景顏色background-color 背景圖片background-image
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
background-color:red;
background-image:url("1.jpg");
}
</style>
</head>
<body>
中华名族伟大复兴
</body>
</html>尺寸
#width高度height
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
background-color: red;
width: 100px;
height:100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>margin 與padding
margin簡寫屬性在一個宣告中設定所有外邊距屬性。該屬性可以有1到4個值。
margin:10px 5px 15px 20px;
上邊距是10pxo
## 上邊距為10pxo## 上邊界
# 下邊距是15px 左距是20pxpadding 簡寫屬性在一個宣告中設定所有填入屬性。該屬性可以有1到4個值。 padding:10px 5px 15px 20px; 上填入是10px #10px #10px #10px #10px ” 左填充是20px註：如果都沒有寫到4個參數預設是0px
邊框border#給邊框設定粗細，並且有顏色border:1px solid red; 邊框線是1個像素的實線，線是紅色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
div{
margin-left:50px;
margin-top:50px;
background-color:#ccc;
width:150px;
height:150px;
border:1px solid red;
}
</style>
</head>
<body>
<div>测试</div>
</body>
</html>這樣運行完，字在div的左上角 如何讓字到中間呢，其實也很簡單在div的css 中加入兩個句子樣式即可text-align: center;
line-height: 150px;
