筆記整理3 -- CSS與HTML5 基礎知識與樣式
筆記整理3 -- CSS與HTML5 基礎知識與樣式
- CSS簡介
- CSS基本語法
- CSS定義
- 基本格式
- CSS分類
- 按選擇器分類
- 類選擇器（class）
- ID選擇器
- 標記選擇器
- 關聯選擇器
- 組合選擇器
- 偽類選擇器
- 按位置分類
- 內嵌樣式
- 行內樣式
- 外部樣式
- 鏈接外部樣式
- 導入外部樣式
- 鏈接樣式和導入樣式的==區別==
- 多個樣式的應用
- 樣式的優先級
- 強制優先級
- 樣式的繼承
- 權重疊加
- 例子：多個類樣式的應用
- 註釋
- HTML註釋
- CSS註釋
- HTML5 介紹
- 概念
- HTML5發展時間表
- 目前支持HTML5的瀏覽器
- HTML5的特點
- HTML5的變化
- HTML5聲明變化
- 標準的改變：語法鬆散
- 新增的結構標記
- 新增的三個屬性
- 新增的表單元素
- 新增的input元素
- select標籤
- datalist數據列表
- 插入音頻、視頻播放
- 音頻播放
- 視頻播放
- HTML5樣式新增
CSS簡介
CSS是Cascading Style Sheet（層疊樣式表）的縮寫。是用於控制網頁樣式並允許將樣式信息與網頁內容分離的一種標記性語言。
- 將網站分成兩個部分：表現和內容，表現由CSS來控制，內容由PHP從數據庫中讀取。
CSS基本語法
CSS定義
CSS定義是由三個部分構成：
- 選擇器
- 屬性
- 屬性的取值（value）
基本格式
標記：
- 樣式一般寫在標記之間
基本格式如下：
選擇器{屬性:值;}
- 一個選擇器中可以有多個屬性，每個屬性都有對應的值，屬性和值之間用:隔開，屬性和屬性之間用分號隔開。
CSS分類
按選擇器分類
類選擇器（class）
語法規則：
- 必須以.開頭
- 通過class屬性來調用
- 類樣式可以被多次調用
ID選擇器
語法規則：
- 必須以#開頭
- 通過元素的id屬性來調用
- ID樣式只能被調用一次
標記選擇器
直接選擇HTML標記。
- 後面跟多個字體，默認使用第一個字體，例如font-family:"黑體","隸書","微軟雅黑";默認使用黑體；
- 如果第一個沒有，就是用第二個…以此類推；
- 如果樣式中的字體客戶端一個都沒有，就用客戶端的默認字體，中文操作系統默認是宋體。
關聯選擇器
用空格表示其後代；
用>表示其子級；
例子：
- 表示p下面的所有b，b只要是p的後代即可；
- 表示p>b中b必須是p的子級；
- 注意有無空格的區別；
- 無空格：同時具備該條件
組合選擇器
作用：多個樣式使用相同的屬性
使用：用,分隔
偽類選擇器
偽類：類可以被多個元素訪問，有一個狀態，超鏈接a有4個狀態。
:link：表示正常鏈接時候的狀態。
:visited：表示已經點擊過的狀態。
:hover：表示當鼠標移上去時的狀態。
:active：表示當鼠標點下去時的狀態。
使用：偽類有四個狀態，可以省略其中的某個狀態；如果省略，就使用默認樣式；如果要寫這些狀態，就必須按照l(link)v(visited)h(hover)a(active)的順序。
- 如果在一個頁面上，一部分超鏈接是一種樣式，禮儀部分超鏈接是另一種樣式，可以使用偽類和類的組合（給超鏈接a設置class選擇器）。
- 例子：
按位置分類
內嵌樣式
內嵌樣式：在HTML頁面中以 結束，這裡面的樣式只能供本頁面使用。
行內樣式
行內樣式：通過元素的style屬性直接寫的樣式。
外部樣式
外部樣式：寫一個CSS文件，在需要使用CSS的頁面中鏈接或導入的方法來引用外部CSS。
- 可以將頁面公用的CSS寫道外部CSS中。
引用方法：鏈接和導入。
鏈接外部樣式
語法：
- rel表示鏈接的臉型，這個屬性不能省略，rel="stylesheet"表示鏈接的類型是樣式表。
- type="style/css"表示這個文件是css文本。
導入外部樣式
語法：@import tul('CSS的地址');
使用：如下
鏈接樣式和導入樣式的區別
鏈接樣式只能在HTML頁面中引入外部樣式；
導入樣式既可以在HTML中導入外部樣式也可以在樣式文件中導入外部樣式。
- 在HTML中導入CSS樣式的兩種方法：如下
- 在CSS頁面中引入外部樣式：如下
多個樣式的應用
樣式的優先級
- ID樣式 > class樣式 > 標記樣式
- 行內樣式 > 內嵌樣式 > 外部樣式
強制優先級
書寫：!important
- 注意：儘量避免使用。
樣式的繼承
子元素覆蓋和繼承父元素的樣式。
如果父元素有，子元素沒有，子元素繼承父親的樣式；
如果父元素有，子元素也有，子元素覆蓋父元素的樣式。
權重疊加
標籤樣式 < 類樣式 < id樣式 < 行內樣式 < important
1 < 10 < 100 < 1000 < 10000
根據權重的疊加，選擇權重最大的樣式進行顯示。
例子：多個類樣式的應用
以程序執行先後為優先級，後執行的將前面的覆蓋。
註釋
HTML註釋
語法：
CSS註釋
語法：/*CSS註釋*/
HTML5 介紹
概念
- 官方概念： HTML5草案的前身名為Web Application1.0，是作為下一代互聯網標準，用於取代HTML4與XHTML1的新一代標準版本，所以叫HTML5。它增加了網頁的標準、語義化與web表現性能，同時還增加了本地數據庫等web應用的功能。
- 廣義概念 ：HTML5代表瀏覽器端技術的一個發展階段，在這個階段，瀏覽器呈現技術得到了一個飛躍發展和廣泛支持，它包括：HTML5、CSS3、Javascript、API在內的一套技術組合。
HTML5發展時間表
目前支持HTML5的瀏覽器
HTML5的特點
- 更簡單
- 標籤語義化
- 語法更輕鬆
- 多設備跨平臺
- 自適應網頁
HTML5的變化
HTML5聲明變化
HTML5的文檔聲明：
HTML5的字符集聲明：
- 簡化了字符集的聲明
標準的改變：語法鬆散
- 不允許寫結束符的標籤
- area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr
- 可以省略結束符的標籤
- li、dt、dd、p、rpoptgroup、option、colgroup、thread、tbody、tfoot、tr、td、th
- 可以完全省略的標籤
- html、head、body、colgroup、tbody
- HTML5支持鬆散的語法極大地兼容了編程人員的不規範代碼，同時保證頁面效果不會改變。
- HTML5是向下兼容的。
新增的結構標記
HTML5最大的變化就是有了予以，以前的
僅僅表示盒子，沒有具體的語義。頭標籤
導航
側邊欄
文章標籤
腳標籤
章節
- 如果瀏覽器不識別這些標籤，全部當成div標籤。
新增的三個屬性
- required必填字段
- autofocus自動獲得焦點
- placeholder="默認顯示內容"
例子如下：
新增的表單元素
HTML5的表單元素可以不放在表單域中，可以通過id關聯起來，即給form定義id值，將表單元素的屬性form="對應表單的id"
例子如下：
新增的input元素
即 input 的type取值。
- email 輸入框-郵件
- url 輸入框-網址
- number 輸入框-僅數字
- range 可拖動進度條-表示範圍
- 屬性有min最小值、max最大值、value默認取值屬性有min最小值、max最大值、value默認取值
- color 顏色選擇框
- date 日期選擇框-年月日
- month 日期選擇框-年月
- week 日期選擇框-年周
- time 時間選擇框
- datetime-local 年月日時間選擇框
select標籤
在選擇第一項後，還需選擇下一項。
參考代碼如下：
1 2 3 4 5 6
datalist數據列表
給為輸入框input="text"提供下拉列表選項。
datalist參考代碼如下：
選項1 1 2 3
注意：將input 中設置 list取值為列表ID
插入音頻、視頻播放
音頻播放
標籤：
屬性 ：
- 音頻地址src 路徑取值
- 設置顯示控制面板controls
- 設置自動播放autoplay="autoplay"
- 如果不支持此音頻格式，則將顯示標籤內容；
- 在同一個設置多個音頻滿足如果不支持第一個音頻則播放下一個，可以將在audio標籤內容中增加source標籤（其中src屬性表明音頻地址），一個音頻設置一個source。
視頻播放
標籤：
屬性 ：
- 視頻地址src 路徑取值
- 設置顯示控制面板controls
- 設置自動播放autoplay="autoplay"
- 如果不支持此視頻格式，則將顯示標籤內容；
- 在同一個設置多個視頻滿足如果不支持第一個視頻則播放下一個，可以將在video標籤內容中增加source標籤（其中src屬性表明視頻地址），一個視頻設置一個source。
HTML5樣式新增
在後面的筆記中整理出。
收藏
舉報
