體驗CSS

CSS起源

• web的衰落：在 web 早期（1990-1993）,html是一個很侷限的語言。幾乎徹底由用於描述段落，超連接，列表和標題的結構化元素組成。隨着萬維網的出現（用戶交互體驗的增強），對 html 的要求愈來愈大，人們迫切須要 html 增長新的元素，去完成一個特定的功能
• 迫於壓力，html 開始出現<font>，<i> , <s>等標籤。可是 html 是一種描述結構的語言，也開始描述外在表現了。幾年以後這種隨便的作法暴露出嚴重的問題：1：因爲 html 既寫結構又寫樣式，致使頁面缺少結構性，下降了網頁的可訪問性。2：頁面維護愈來愈困難
• 當 html 中存斥着的表現標記問題，W3C 並無忽視。在1995年，W3C 開始發佈一種正在進行的計劃（work-in-prrgress） 稱之爲CSS
• 與 html 相比，CSS支持更豐富的文檔外觀，CSS能夠爲任何元素的文本和背景設置顏色；容許在任何元素外圍設置邊框；容許改變文本的大小，裝飾（以下劃線），間隔，甚至能夠肯定是否顯示文本。

體驗CSS

• 用HTML完成

• 哪一個標籤有哪一個屬性難以記憶

• 需求變動影響較大（例如像修改爲功法則如下的文字顏色須要修改 4 個地方）

  <h1 align="center">
      <font face="微軟雅黑" color="red">成功法則</font>
  </h1>
  <p align="center">
      <font face="微軟雅黑" color="blue" size="5">遲到毀一輩子</font>
  </p>
  <p align="center">
      <font face="微軟雅黑" color="blue" size="5">早退窮三代</font>
  </p>
  <p align="center">
      <font face="微軟雅黑" color="blue" size="5">按時上下班</font>
  </p>
  <p align="center">
      <font face="微軟雅黑" color="blue" size="5">必成高富帥</font>
  </p>

• 用HTML+CSS完成

• 不用記憶哪些屬性屬於哪一個標籤

• 當需求變動時咱們不須要修改大量的代碼就能夠知足需求

• 在前端開發中CSS只有一個做用，就是用來修改樣式

  <style type="text/css">
      h1 {
          text-align: center;
          color: red;
          font-family: "微軟雅黑";
      }
      p {
          text-align: center;
          color: blue;
          font-size: 20px;
      }
  </style>
  
  <h1>成功法則</h1>
  <p>遲到毀一輩子</p>
  <p>早退窮三代</p>
  <p>按時上下班</p>
  <p>必成高富帥</p>

CSS格式

• 格式

  <style type="text/css">
      標籤名稱 {
          屬性名稱: 屬性對應的值;
          ...
      }
  </style>

• 注意點：

  • style 標籤必須寫在 head 標籤的開始標籤和結束標籤之間（也就是必須和 title 標籤是兄弟關係）
  • style 標籤中的 type 屬性其實能夠不用寫，默認就是type="text/css"
  • 設置樣式時必須按照固定的格式來設置：key: value;其中:不能省略，分號大多數狀況下也不能省略（當有多個屬性時，最後一個能夠省略）