css層疊樣式表
字型樣式屬性
font-size:字型大小大小
頁中普遍使用14px+。
盡量使用偶數的數字字型大小。ie6等老式瀏覽器支援奇數會有bug。
font-family:字型
中文字型需要加引號,英文則不需要
如果字型名中包含空格、#、$等符號,則該字型必須加英文狀態下的單引號或雙引號
盡量使用系統預設字型,保證在任何使用者的瀏覽器中都能正確顯示。
p複製**
css unicode字型
在 css 中設定字型名稱,直接寫中文是可以的。但是在檔案編碼(gb2312、utf-8 等)不匹配時會產生亂碼的錯誤。xp 系統不支援 類似微軟雅黑的中文。
方案一: 你可以使用英文來替代。 比如 font-family:"microsoft yahei"。
方案二: 在 css 直接使用 unicode 編碼來寫字型名稱可以避免這些錯誤。使用 unicode 寫中文字型名稱,瀏覽器是可以正確的解析的。
注:可以通過escape() 來測試屬於什麼字型
複製**字型名稱
英文名稱
unicode 編碼
宋體simsun
\5b8b\4f53
新宋體nsimsun
\65b0\5b8b\4f53
黑體simhei
\9ed1\4f53
微軟雅黑
microsoft yahei
\5fae\8f6f\96c5\9ed1
楷體_gb2312
kaiti_gb2312
\6977\4f53_gb2312
隸書lisu
\96b6\4e66
幼園youyuan
\5e7c\5706
華文細黑
stxihei
\534e\6587\7ec6\9ed1
細明體mingliu
\7ec6\660e\4f53
新細明體
pmingliu
\65b0\7ec6\660e\4f53
font-weight:字型粗細
font-weight屬性用於定義字型的粗細,其可用屬性值:normal、bold、bolder、lighter、100~900(100的整數倍)。
注:數字 400 等價於 normal,而 700 等價於 bold。 但是我們更喜歡用數字來表示。
複製**
font:綜合設定字型樣式
使用font屬性時,必須按語法格式中的順序書寫,不能更換順序,各個屬性以空格隔開。
注意:其中不需要設定的屬性可以省略(取預設值),但必須保留font-size和font-family屬性,否則font屬性將不起作用。
選擇器複製**
css標籤
css命名不要純數字、中文等命名, 盡量使用英文本母來表示。
標籤選擇器
標籤名元素名
複製**
類選擇器
.類名標籤呼叫的時候用 class=「類名」 即可。
複製**
多類名選擇器
樣式顯示效果跟html元素中的類名先後順序沒有關係,受css樣式書寫的上下順序有關。
各個類名中間用空格隔開。
多類名
複製**
id選擇器
id名即為html元素的id屬性值,大多數html元素都可以定義id屬性,元素的id值是唯一的,只能對應於文件中某乙個具體的元素
注:選擇器和類選擇器區別在於 次數 id只能使用一次
#id名
複製**
萬用字元選擇器
* 複製**
偽類選擇器
注意寫的時候,他們的順序盡量不要顛倒 按照 順序 link->visited->hover->active
a { /* a是標籤選擇器 所有的鏈結 */
font-weight: 700;
font-size: 16px;
color: gray;
a:hover { /* :hover 是鏈結偽類選擇器 滑鼠經過 */
color: red; /* 滑鼠經過的時候,由原來的 灰色 變成了紅色 */
複製**
結構(位置)偽類選擇器(css3)
:first-child :選取屬於其父元素的首個子元素的指定選擇器
:last-child :選取屬於其父元素的最後乙個子元素的指定選擇器
:nth-child(n) : 匹配屬於其父元素的第 n 個子元素,不論元素的型別
:nth-last-child(n) :選擇器匹配屬於其元素的第 n 個子元素的每個元素,不論元素的型別,從最後乙個子元素開始計數。
li:first-child { /* 選擇第乙個孩子 */
color: pink;
li:last-child { /* 最後乙個孩子 */
color: purple;
li:nth-child(4) { /* 選擇第4個孩子 n 代表 第幾個的意思 */
color: skyblue;
複製**
目標偽類選擇器(css3)
:target {
color: red;
font-size: 30px;
複製**
引入css樣式表
type="text/css" 在html5中可以省略, 寫上也比較符合規範。
內部樣式表
內嵌式是將css**集中寫在html文件的head頭部標籤中,並且用style標籤定義,其基本語法格式如下:
複製**
行內式(內聯樣式)
內聯樣式,又有人稱行內樣式、行間樣式、內嵌樣式。是通過標籤的style屬性來設定元素的樣式,其基本語法格式如下:
內容 標籤名》
複製**
外部樣式表(外鏈式)
複製**
標籤顯示模式
塊級元素(block-level)
常見的塊元素有、、
、等,其中
標籤是最典型的塊元素。
複製**塊級元素的特點:
總是從新行開始
高度,行高、外邊距以及內邊距都可以控制。
寬度預設是容器的100%
可以容納內聯元素和其他塊元素。
行內元素(inline-level)
常見的行內元素有、、、、、、、、、等,其中標籤最典型的行內元素。
複製**行內元素的特點:
和相鄰行內元素在一行上。
高、寬無效,但水平方向的padding和margin可以設定,垂直方向的無效。
預設寬度就是它本身內容的寬度。
行內元素只能容納文字或則其他行內元素。(a特殊)
注:只有 文字才 能組成段落 因此 p 裡面不能放塊級元素,同理還有這些標籤h1,h2,h3,h4,h5,h6,dt,他們都是文字類塊級標籤,裡面不能放其他塊級元素。
鏈結裡面不能再放鏈結。
複製**
塊級元素和行內元素區別
塊級元素的特點:
總是從新行開始
高度,行高、外邊距以及內邊距都可以控制。
寬度預設是容器的100%
可以容納內聯元素和其他塊元素。
複製**行內元素的特點:
和相鄰行內元素在一行上。
高、寬無效,但水平方向的padding和margin可以設定,垂直方向的無效。
預設寬度就是它本身內容的寬度。
行內元素只能容納文字或則其他行內元素。
複製**
標籤顯示模式轉換 display
塊轉行內:display:inline;
行內轉塊:display:block;
塊、行內元素轉換為行內塊: display: inline-block;
複製**
外鏈式樣式表 CSS外鏈式與內聯式的區別是什麼
區別 css外鏈式是將css 單獨寫乙個以 css 為副檔名的檔案中,然後使用link標籤鏈結到html中。css內聯式是直接使用style屬性將css 寫在html標籤中。內聯式的權重高於內聯式。本教程操作環境 windows7系統 css3 html5版 dell g3電腦。css外鏈式 外鏈樣...
CSS 嵌入式樣式表
嵌入樣式表是在網頁文件的頭部定義乙個標籤對,在該標籤對內加入各種網頁元素的樣式規則。如 style元素放在文件的head部分。必須的type屬性用於指定 型別,同樣地,title和media屬性也可以用style指定。舊版本的瀏覽器,並不能識別style元素,會將其當作body的一部分照常展示其內容...
Web前端(二)CSS層疊樣式表
二.基本語法 三.常用css樣式 四.基本選擇器 五.盒子模型 六.css浮動 七.應用案例 css實現qq郵箱介面 css指層疊樣式表 cascading style sheets 定義如何顯示控制 html元素,從而實現美化html網頁。為了讓網頁元素的樣式更加豐富,也為了讓網頁的內容和樣式能拆...