HTML+CSS CSS の基礎(chǔ)知識があれば簡単に始められます
ここからは CSS の基礎(chǔ)知識について説明していきます:
基礎(chǔ)知識を説明する前に、CSS でのコメントの書き方を知っておく必要があります
/*コメント內(nèi)容*/
Font: font
フォントがあります どのような操作:
フォントの色 フォント サイズ サイズ フォント スタイル font-family イタリック font-style font-weight 下線 text-decoration 行の高さ
例を通して説明しましょう:
<!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:斜體。對于沒有斜體變量的特殊字體，將應(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 text
テキストの配置 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>背景の背景
背景の色 背景の色 背景畫像の背景-畫像
<!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>サイズ
幅高さ高さ
<!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の省略表現(xiàn)プロパティは、1つのステートメントですべてのmarginプロパティを設(shè)定します。この屬性には 1 ～ 4 の値を指定できます。
margin:10px 5px 15px 20px;
上のマージンは 10px です
左のマージンは 20px です
padding の短縮プロパティは、1 つのステートメント屬性ですべてのパディングを設(shè)定します。この屬性には 1 ～ 4 の値を指定できます。
パディング:10px 5px 15px 20px; out out out out out of to x
注: 4 つのパラメーターがいずれも書き込まれていない場合、デフォルトは 0px
border
境界線の太さと色
border: 1px 実線の赤、境界線は 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 に 2 つの文を追加するだけです。
