Learn_CSS_CLS2_tryCSS

for Learning book demo use

by Loki Jiang

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <!DOCTYPE html>
  <html>

  <head>
    <meta charset="UTF-8" />
    <title>我的第一個網頁</title>
  </head>

  <body>
    <h1 id="top"><em>網頁前端技術</em></h1>
    <p>
      這是我在職訓期間所要學習的前端技術，每項技術都有它負責的工作，學習網頁最重要的是<strong>技術觀念</strong>，不需要去背記全部的標籤、屬性、值，常使用自然會記起，
      遇到不懂或是忘記的標籤，使用網路資源 Google 或前往
      <a href="http://www.runoob.com/" target="_blank">菜鳥教程</a>
      查詢，一定要自己去嘗試，才能產生自己的想法。
    </p>
    <ul>
      <li><a href="#html">HTML</a></li>
      <li><a href="#css">CSS</a></li>
      <li><a href="#js">Javascript</a></li>
      <li><a href="#jq">JQuery</a></li>
      <li><a href="#bs">Bootstrap</a></li>
    </ul>

    <hr />

    <img src="https://imgur.com/VCHx7bt.png" width="150" alt="html" title="html" id="html" />
    <h2>HTML-負責架構、內容</h2>
    <p>
      超文本標記語言（英語：HyperText Markup
      Language，簡稱：HTML）是一種用於建立網頁的標準標記語言。HTML
      是一種基礎技術，常與 CSS、JavaScript
      一起被眾多網站用於設計賞心悅目的網頁、網頁應用程式以及行動應用程式的使用者介面。網頁瀏覽器可以讀取
      HTML 檔案，並將其彩現成視覺化網頁。HTML
      描述了一個網站的結構語意隨著線索的呈現，使之成為一種標記語言而非程式語言。
    </p>

    <h3>基礎結構：</h3>
    <pre><code>
    &lt;html&gt;
      &lt;head&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
  
      &lt;/body&gt;
    &lt;/html&gt;
    </code></pre>

    <h3>標籤特性：</h3>
    <ol>
      <li>標籤不分大小寫，但請用小寫。</li>
      <li>"<>" 開頭，"
          < />" 結尾。</li>
      <!--雖然Chrome聰明讀出你的文字，但這裡應該使用實體化符號-->
      <li>標籤具有屬性與值的特性。</li>
      <li>標籤標記內容，產生語義，組成了結構。</li>
    </ol>
    <a href="#top"><strong>回頂端</strong></a>

    <hr />

    <img src="https://i.imgur.com/XDcJWRp.png" width="150" alt="css" title="css" id="css" />
    <h2>CSS-負責外觀、樣式</h2>
    <p>
      層疊樣式表（英語：Cascading Style
      Sheets，簡寫CSS），又稱串樣式列表、級聯樣式表、串接樣式表、階層式樣式表，一種用來為結構化文件（如
      HTML 文件或 XML 應用）添加樣式（字型、間距和顏色等）的電腦語言，由 W3C
      定義和維護。目前最新版本是 CSS2.1，為 W3C...

CSS

body {
  font-family: 'Microsoft JhengHei';
}

h1 {
  font-size: 40px;
}

h1 em {
  font-style: normal;
}

h2 {
  color: dodgerblue;
}

a:link {
  color: darkorange;
  text-decoration: none;
}

a:visited {
  color: darkgray;
}

a:hover {
  color: darkslateblue;
  text-decoration: underline;
}

a:active {
  color: dodgerblue;
}

p {
  line-height: 1.5;
  text-indent: 2rem;
}

strong {
  color: red;
}
p:first-letter {
  font-size: 20px;
  font-weight: bolder;
}

.center {
  text-align: center;
}

table {
  border-collapse: collapse;
  /* 讓邊框合併為單一邊框 */
  margin: auto;
}