外鏈式樣式表 WEB前端 CSS樣式表

2021-10-16 23:56:44 字數 3848 閱讀 2653

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網頁。為了讓網頁元素的樣式更加豐富,也為了讓網頁的內容和樣式能拆...