ここからは CSS の基礎知識について説明していきます:
基礎知識を説明する前に、CSS でのコメントの書き方を知っておく必要があります
/*コメント内容*/
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; /*字体粗细*/
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
テキストの配置 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>背景の背景
背景の色 背景の色 背景画像の背景-画像
<!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>サイズ
幅高さ高さ
<!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つのステートメントですべてのmarginプロパティを設定します。この属性には 1 ～ 4 の値を指定できます。
margin:10px 5px 15px 20px;
上のマージンは 10px です
左のマージンは 20px です
padding の短縮プロパティは、1 つのステートメント属性ですべてのパディングを設定します。この属性には 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 つの文を追加するだけです。次のセクション
