TIL # 2021.10.13

18344 ワード
テキストリンク

Javascript # CSS


📝今日習った内容


もしあなたが昨日HTMLを勉強したら、今日はCSSを勉強しました.
CSSはウェブモデリングを行うツールと考えられる.
まず,CSSを適用するために3つの方法がある.
  • 外部でCSSファイルを作成して呼び出す方法
  • インライン方法
  • 内部スタイルを適用する方法
    • 外部でCSSファイルを作成して呼び出します.
    スタイルシートを作成するCSSファイルはHTMLファイルとは別に作成され、HTMLファイルから呼び出されます.
    呼び出しは、HTMLドキュメントの<head>要素に<link>要素を作成することによって外部CSSファイルを指定します.
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Modern CSS</title>
  <link rel="stylesheet" href="index.css" />
</head>
<body>
<header>This is the header.</header>
<div class="container">
  <nav>
    <h4>This is the navigation section.</h4>
    <ul>
      <li>Home</li>
      <li>Mac</li>
    </ul>
  </nav>
</div>
<footer>
</footer>
</body>
</html>
    CSSファイルの作成
    p {
    font-size : 13px;
}

span {
    color : red;
    font-size : 11px;
}
    インラインの適用方法
    ラベル内に<style>ラベルを使用してcssを記述します.
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Modern CSS</title>
</head>
<body>
<header>This is the header.</header>
<div class="container">
  <nav>
    <p style="font-size: 13px;">This is the pharagraph section.</p>
    <span style="color:red; font-size: 11px;">Hello</span>
    <ul>
      <li>Home</li>
      <li>Mac</li>
    </ul>
  </nav>
</div>
<footer>
</footer>
</body>
</html>
    内部スタイルの適用方法<head>タグ内で<style>タグを使用してcssを記述する.
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Modern CSS</title>
  <style>
    p{font-size: 13px;}
    span{color: red; font-size: 11px}
  </style>
</head>
<body>
<header>This is the header.</header>
<div class="container">
  <nav>
    <p>This is the pharagraph section.</p>
    <span>Hello</span>
    <ul>
      <li>Home</li>
      <li>Mac</li>
    </ul>
  </nav>
</div>
<footer>
</footer>
</body>
</html>
    #iOS POSOってなに？似ているValue Object・Entity・DTOと比べてみました
    HDFS(HDFS NFS Gateway)のマウント