HTML+CSS CSS の基礎知識があれば簡単に始められます

ここからは 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 つの文を追加するだけです。

学び続ける

新しいファイル

<!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>

提出するリセットコード

自動運転