HTML+CSS 輕鬆入門CSS 基礎(chǔ)知識(shí)
下面我們開始講解css 的基礎(chǔ)知識(shí)：
在講基礎(chǔ)知識(shí)前，我們要知道css中的註解怎麼寫
/*註解內(nèi)容*/
字體：font
對(duì)字體我們有哪些操作：
字體顏色? ?color ? ? ?字體大小? ?size ? ? ? 字體樣式 斜font-family font-style ? ?字體粗細(xì)?font-weight ? ? 下劃線?text-decoration ? 行高line-height
通過實(shí)例我們來講解：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
font-size: 20px; /*字體大小*/
color: red; /*字體顏色*/
font-weight: bold; /*字體粗細(xì)*/
font-style: oblique;
/*italic:斜體。對(duì)于沒有斜體變量的特殊字體，將應(yīng)用 oblique
normal:默認(rèn)值。正常的字體
oblique傾斜的字體
*/
text-decoration:none; /*none : 默認(rèn)值。無裝飾
blink : 閃爍
underline : 下劃線
line-through : 貫穿線
overline : 上劃線
*/
font-family:隸書; /*什么樣的字體。宋體，隸書等*/
}
</style>
</head>
<body>
中華名族偉大復(fù)興
</body>
</html>文字text
文字對(duì)齊?text-align
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
text-align:center;
}
</style>
</head>
<body>
中華名族偉大復(fù)興
</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>
中華名族偉大復(fù)興
</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簡寫屬性在一個(gè)宣告中設(shè)定所有外邊距屬性。該屬性可以有1到4個(gè)值。
margin:10px 5px 15px 20px;
????????上邊距是10pxo
##??????上邊距為10pxo##??????上邊界
#????????下邊距是15px????????左距是20pxpadding 簡寫屬性在一個(gè)宣告中設(shè)定所有填入屬性。該屬性可以有1到4個(gè)值。 padding:10px 5px 15px 20px;????????上填入是10px???????#10px???????#10px???????#10px???????#10px???”???????左填充是20px註：如果都沒有寫到4個(gè)參數(shù)預(yù)設(shè)是0px
邊框border#給邊框設(shè)定粗細(xì)，並且有顏色border:1px solid red; ? 邊框線是1個(gè)像素的實(shí)線，線是紅色
<!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>這樣運(yùn)行完，字在div的左上角?如何讓字到中間呢，其實(shí)也很簡單在div的css 中加入兩個(gè)句子樣式即可text-align: center;
line-height: 150px;
