CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

HTMLドキュメントにCSSを含める

HTMLドキュメントにCSSを含めるには、CSSを内部に含めるか、インラインに含めるか、外部ファイルにリンクします。

構文

HTMLにCSSファイルを含めるための構文は次のとおりです

/*inline*/
<element style="/*declarations*/"></element>
/*internal*/
<head>
<style>
/*declarations*/
</style>
</head>
/*external*/
<head>
<link rel="stylesheet" href="#location">
</head>

例

次の例は、HTMLドキュメントでのCSSファイルのリンクを示しています

インラインCSS

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="font-family: Forte;">Demo text</p>
<p style="background-color: lightblue;">This is Demo text</p>
<img src="https://www.tutorialspoint.com/memcached/images/memcached.jpg" style="border: 3px groove orange;">
</body>
</html>

出力

これにより、次の出力が得られます-

HTMLドキュメントにCSSを含める

例

内部リンク

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: auto;
   padding: 15px;
   width: 33%;
   border: 2px solid;
   border-radius: 5%;
}
div > div {
   border-color: transparent;
   box-shadow: inset 0 0 6px red;
}
div > div > div {
   border-color: red;
}
</style>
</head>
<body>
<div>
<div></div>
<div>
<div></div>
</div>
<div></div>
</div>
</body>
</html>

出力

これにより、次の出力が得られます-

HTMLドキュメントにCSSを含める

例

外部リンク

CSSでは、外部のcssファイルを含めて、その中にcssスタイルを配置することもできます。以下の例に示すように、HTMLファイルからも同じことが参照できます-

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>Demo text</p>
<p>Demo text again</p>
</body>
</html>

出力

これにより、次の出力が得られます-

HTMLドキュメントにCSSを含める

以下はstyle.css-

です。 
p {
   text-decoration: overline;
   text-transform: capitalize;
}

  1. フレックスボックスを使用した高度なCSSレイアウト

    CSS3は、一般にFlexboxと呼ばれるレイアウトモードのFlexibleBoxを提供します。 Flexbox（フレキシブルボックス）はCSS3のレイアウトモードです。このモードを使用すると、複雑なアプリケーションやWebページのレイアウトを簡単に作成できます。コンテナ、フレックスアイテムなどが含まれます。コンテナには次のプロパティがあります- フレックス方向 フレックスラップ フレックスフロー justify-content 整列アイテム align-content 以下は、flexboxを使用した高度なCSSレイアウトのコードです- 例 &l

  2. 純粋なCSSによるスムーズなスクロール

    CSSのscroll-behaviorプロパティを使用すると、スクロールの動作を変更できます。 例 次の例は、CSSのscroll-behaviorプロパティを示しています。 <!DOCTYPE html> <html> <head> <style> html {    line-height: 200px;    margin: 30px;    text-align: center;    vertical-align: middle; } #parent {