1. 首頁 > 生活 > >

html字體樣式代碼大全 html字體風格代碼

小知識



文章插圖
html字體樣式代碼大全 html字體風格代碼

文章插圖
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）
基本格式
標記：<style type=”text/css”></style>
樣式一般寫在<head>標記之間
基本格式如下：
選擇器{屬性:值;}
一個選擇器中可以有多個屬性，每個屬性都有對應的值，屬性和值之間用:隔開，屬性和屬性之間用分號隔開 。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>開頭，</style>結束，這里面的樣式只能供本頁面使用 。
行內樣式
行內樣式：通過元素的style屬性直接寫的樣式 。
外部樣式
外部樣式：寫一個CSS文件，在需要使用CSS的頁面中鏈接或導入的方法來引用外部CSS 。
可以將頁面公用的CSS寫道外部CSS中 。
引用方法：鏈接和導入 。
鏈接外部樣式
語法：<link rel=”stylesheet” type=”text/css” href=http://www.mnbkw.com/jxjc/188508/”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注釋
語法： <!–HTML注釋–>
CSS注釋
語法：/*CSS注釋*/
HTML5 介紹
概念
官方概念： HTML5草案的前身名為Web Application1.0，是作為下一代互聯網標準，用于取代HTML4與XHTML1的新一代標準版本，所以叫HTML5 。它增加了網頁的標準、語義化與web表現性能，同時還增加了本地數據庫等web應用的功能 。廣義概念：HTML5代表瀏覽器端技術的一個發展階段，在這個階段，瀏覽器呈現技術得到了一個飛躍發展和廣泛支持，它包括：HTML5、CSS3、Javascript、API在內的一套技術組合 。
HTML5發展時間表
目前支持HTML5的瀏覽器
HTML5的特點
更簡單標簽語義化語法更輕松多設備跨平臺自適應網頁HTML5的變化
HTML5聲明變化
HTML5的文檔聲明：<!document html>
HTML5的字符集聲明：<meta charset=”utf-8″>
簡化了字符集的聲明
標準的改變：語法松散
不允許寫結束符的標簽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、tbodyHTML5支持松散的語法極大地兼容了編程人員的不規范代碼，同時保證頁面效果不會改變 。HTML5是向下兼容的 。
新增的結構標記
HTML5最大的變化就是有了予以，以前的<div>、<sapn>僅僅表示盒子，沒有具體的語義 。
<header> 頭標簽
<nav> 導航
<aside> 側邊欄
<article> 文章標簽
<footer> 腳標簽
<section> 章節
如果瀏覽器不識別這些標簽，全部當成div標簽 。
新增的三個屬性
required必填字段autofocus自動獲得焦點placeholder=”默認顯示內容”
例子如下：
新增的表單元素
HTML5的表單元素可以不放在表單域中，可以通過id關聯起來，即給form定義id值，將表單元素的屬性form=”對應表單的id”
例子如下：
新增的input元素
【html字體樣式代碼大全 html字體風格代碼】即 input 的type取值 。
email 輸入框-郵件url 輸入框-網址number 輸入框-僅數字range 可拖動進度條-表示范圍屬性有min最小值、max最大值、value默認取值屬性有min最小值、max最大值、value默認取值color 顏色選擇框date 日期選擇框-年月日month 日期選擇框-年月week 日期選擇框-年周time 時間選擇框datetime-local 年月日時間選擇框
select標簽
在選擇第一項后，還需選擇下一項 。
參考代碼如下：
<select><optgroup lable="第一個選項的內容1"><option>第二個選項的內容1</option><option>第二個選項的內容2</option></optgroup></select>123456datalist數據列表
給為輸入框input=”text”提供下拉列表選項 。
datalist參考代碼如下：
<datalist id="列表ID"><option>選項1</option></datalist>123注意：將input 中設置 list取值為列表ID
插入音頻、視頻播放
音頻播放
標簽：<audio></audio>
屬性 ：
音頻地址src 路徑取值設置顯示控制面板controls設置自動播放autoplay=”autoplay”如果不支持此音頻格式，則將顯示標簽內容；在同一個設置多個音頻滿足如果不支持第一個音頻則播放下一個，可以將在audio標簽內容中增加source標簽（其中src屬性表明音頻地址），一個音頻設置一個source 。
視頻播放
標簽：<video></video>
屬性 ：
視頻地址src 路徑取值設置顯示控制面板controls設置自動播放autoplay=”autoplay”如果不支持此視頻格式，則將顯示標簽內容；在同一個設置多個視頻滿足如果不支持第一個視頻則播放下一個，可以將在video標簽內容中增加source標簽（其中src屬性表明視頻地址），一個視頻設置一個source 。HTML5樣式新增
在后面的筆記中整理出 。