CSS基本樣式（基礎中的基礎）

05-03

1.如何在頁面引用 CSS

1.內聯樣式；
2內部引用樣式；
3外部引用link標籤，引用樣式；
4外部引用@import引用樣式；

注意：link標籤與@import有區別：

1link屬於XHTML標籤，而@import完全是CSS提供的一種方式。
link標籤除了可以載入CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連接屬性等，@import就只能載入CSS了。
2：載入順序的差別。當一個頁面被載入的時候，link引用的CSS會同時被加載，而@import引用的CSS會等到頁面全部被下載完再被載入。所以有時候瀏覽@import載入CSS的頁面時開始會沒有樣式（就是閃爍）。
3.兼容性的差別。由於@import是CSS2.1提出的所以老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標籤無此問題。
4.@import只能css中再次引入其他樣式表，比如可以創建一個主樣式表，在主樣式表中再引入其他的樣式表，這樣做有一個缺點，會對網站伺服器產生較多的HTTP請求

@import的使用範例：<style> @import url("hello.css"); @import "world.css";</style>

2.CSS 繼承

什麼是 CSS 繼承?

元素沒有被設置樣式，但它可以從父元<div>素繼承樣式，如上hello world字體顏色為紅色；

<style> .father{ color: #f00; } </style></head><body> <div class="father"> <p>hello world</p> </div></body>

1.png

要詳細了解css樣式表的繼承，我們先從文檔樹（HTML DOM）開始，文檔樹由HTML元素組成,文檔樹和家族樹類似，也有祖先、後代、父親、孩子、兄弟，css樣式表繼承指的是，特定的css屬性向下傳遞到後代元素。

對於一些可以繼承的屬性，可以只設置上級的CSS樣式表樹形，子級（下級）不用設置，會自動繼承此CSS屬性，可以減少CSS代碼，便於維護。

那麼有哪些屬性可以自動繼承呢

1、字體系列屬性

font：組合字體

font-family：規定元素的字體系列

font-weight：設置字體的粗細

font-size：設置字體的尺寸

font-style：定義字體的風格

font-variant：設置小型大寫字母的字體顯示文本，這意味著所有的小寫字母

均會被轉換為大寫，但是所有使用小型大寫字體的字母與其餘文本

相比，其字體尺寸更小。

font-stretch：允許你使文字變寬或變窄。所有主流瀏覽器都不支持。

font-size-adjust：為某個元素規定一個 aspect 值，字體的小寫字母 "x"

的高度與"font-size" 高度之間的比率被稱為一個字體的 aspect 值。

這樣就可以保持首選字體的 x-height

2、文本系列屬性

text-indent：文本縮進

text-align：文本水平對齊

text-shadow：設置文本陰影

line-height：行高

word-spacing：增加或減少單詞間的空白（即字間隔）

letter-spacing：增加或減少字元間的空白（字元間距）

text-transform：控制文本大小寫

direction：規定文本的書寫方向

color：文本顏色

3、元素可見性：visibility

4、表格布局屬性：caption-side

border-collapse

empty-cells

5、列表屬性：list-style-type

list-style-image

list-stye-position、list-style

6、設置嵌套引用的引號類型：quotes

7、游標屬性：cursor

不可繼承的屬性

1、display

2、文本屬性：vertical-align

text-decoration

3、盒子模型的屬性:寬度、高度、內外邊距、邊框等

4、背景屬性：背景圖片、顏色、位置等

5、定位屬性：浮動、清除浮動、定位position等

6、生成內容屬性:content、counter-reset、counter-increment

7、輪廓樣式屬性:outline-style、outline-width、outline-color、outline

8、頁面樣式屬性:size、page-break-before、page-break-after

注意

繼承中比較特殊的幾點

1、a 標籤的字體顏色不能被繼承

1、<h1>-<h6>標籤字體的大下也是不能被繼承的

因為它們都有一個默認值

3.塊級元素與行內元素

常用的塊級元素與行內元素有哪些？

塊級元素：div , p , form, ul, li , ol, dl, form, address, fieldset, h1-6, hr,menu, table,dd dt tr td th,pre

行內元素：span, strong, em, br, img , input, label, select, textarea,button,code ,script

塊級元素與行內元素的區別

區別1：塊級元素獨佔一行，行內元素的長度就是內容的長度。

區別2：塊級元素可以設置寬高，行內元素不能設定寬和高。

區別3：塊級元素可以包含行內元素，但行內元素不能包含塊級元素

區別4：行內元素的padding-top、padding-bottom、margin-top、margin-bottom屬性設置是無效的

行內元素的padding-left、padding-right、margin-left、margin-bottom屬性設置是有效的

注意：

行內元素的padding-top、padding-bottom從顯示的效果上是增加的，但其實設置的是無效的。並不會對他周圍的元素產生任何影響。

範例：

<style> div{ border:1px solid red; } span{ border:1px solid #0f0; padding-top:20px; padding-bottom:20px; padding-left:20px; padding-right:20px; margin-top: 20px; margin-bottom:20px; margin-left: 20px; margin-right: 20px; } </style></head><body><div> <span>hello </span><span>world</span></div></body>

2.png

4.如何讓元素水平居中

a.塊級元素居中：

設置margin:0，auto；

.box { /* margin: 0 auto; 實際上是下面兩個起作用 */ margin-left: auto; margin-right: auto;}

b.行內元素居中：

給父級塊級元素設置：text-align: center;

<style> .box{ text-align: center; }</style><div class="box"> <img src="http://7xpvnv.com2.z0.glb.qiniucdn.com/6673909a-098c-4202-8b80-f4aad64e0262.png"></div>

5.display屬性

塊級：block, list-item, table
行內: inline, inline-table, inline-block
display
Value: inline | block | list-item | inline-block | table | inline-table | table-row | table-cell | none | inherit
Initial: inline

Applies to: all elements
Inherited: no

6.字體font

font-size：字體大小

font-family：字體，宋體、微軟雅黑、Arial等

font-weight：文字粗度，常用的就是默認值regular和粗體bold

line-height：行高，可以用百分比、倍數或者固定尺寸

以上屬性都可繼承給子元素

用法：

body{ font: 12px/1.5 tahoma,arial,Hiragino Sans GB,5b8b4f53,sans-serif;}p { line-height: 1.5; font-size: 12px; font-family: tahoma,arial,Hiragino Sans GB,5b8b4f53,sans-serif; font-weight: bold;}

font-family

當瀏覽器打開頁面時，瀏覽器會讀取 HTML 文件進行解析渲染。當讀到文字時會轉換成對應的 unicode碼（可以認為是世界上任意一種文字的特定編號）。再根據HTML 里設置的 font-family （如果沒設置則使用瀏覽器默認設置）去查找電腦里（如果有自定義字體@font-face ，則載入對應字體文件）對應字體的字體文件。找到文件後根據 unicode 碼去查找繪製外形，找到後繪製到頁面上

字體圖標就是通過這原理實現的

注意1：

在 CSS 中設置字體時，直接寫字體中文或英文名稱瀏覽器都能識別，直接寫中文的情況下編碼（GB2312、UTF-8 等）不匹配時會產生亂碼。保險的方式是將字體名稱用Unicode來表示

方法：打開控制台 escape(微軟雅黑)，把 %u替換成

注意2：

chrome 默認字體大小16px, 最小字體 12px

7.文本text

text-align：文本對其方式 left、center、right、justify

text-indent：文案第一行縮進距離

text-decoration： none、underline、line-through、overline

color：文字顏色

text-transform：改變文字大小寫none、uppercase、lowercase、capitalize

word-spacing：可以改變字（單詞）之間的標準間隔

letter-spacing：字母間隔修改的是字元或字母之間的間隔

單行文本溢出加 ...如何實現?

3.png

8.顏色color

單詞: red, blue, pink, yellow, white, black

十六進位: #000000, #fff, #eee, #ccc, #666, #333, #f00, #0f0, #00f

rgb: rgb(255, 255, 255), rgb(0, 255, 0)

rgba: rgba(0,0,0,0.5)

其他

9.單位

px：固定單位，px就是pixel的縮寫，意為像素。px就是一張圖片最小的一個點，一張點陣圖就是千千萬萬的這樣的點構成的，比如常常聽到的電腦像素是1024x768的，表示的是水平方向是1024個像素點，垂直方向是768個像素點。

百分比(寬高？文字大小？line-height? position?)

em: 相對單位，相對於父元素字體大小， em的參考物是父元素的font-size，具有繼承的特點。如果自身定義了font-size按自身來計算（瀏覽器默認字體是16px），整個頁面內1em不是一個固定的值。

rem: 相對單位，相對於根元素(html)字體大小，rem是css3新單位，相對於根元素html（網頁）的font-size，不會像em那樣，依賴於父元素的字體大小，而造成混亂

vw vh: 相對單位，1vw 為屏幕寬度的1%，vw是css3新單位，viewpoint width的縮寫，視窗寬度，1vw等於視窗寬度的1%。舉個例子：瀏覽器寬度1200px, 1 vw = 1200px/100 = 12 px。

使用邊框做三角形

範例：

5.png