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簡(jiǎn)寫屬性在一個(gè)聲明中設(shè)置所有外邊距屬性。該屬性可以有1到4個(gè)值。
margin:10px 5px 15px 20px;
上邊距是 10px
右邊距是 5px
下邊距是 15px
左邊距是 20px
padding 簡(jiǎn)寫屬性在一個(gè)聲明中設(shè)置所有填充屬性。該屬性可以有1到4個(gè)值。
padding:10px 5px 15px 20px;
上填充是 10px
右填充是 5px
下填充是 15px
左填充是 20px
注：如果都沒有寫到4個(gè)參數(shù)默認(rèn)是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>測(cè)試</div>
</body>
</html>這樣運(yùn)行完，字在div的左上角 如何讓字到中間呢，其實(shí)也很簡(jiǎn)單
在div的css 中加入倆句樣式即可
text-align: center;
line-height: 150px;
