css樣式引入
-
樣式的三種引入方式
1.** 外部樣式表 **當(dāng)樣式需要應(yīng)用于很多頁(yè)面時(shí)
<link rel="stylesheet" type="css/text" href="./css">`rel=關(guān)系 stylesheet=樣式表 type=文件類型 href=文件路徑` `每個(gè)頁(yè)面使用 <link> 標(biāo)簽鏈接到樣式表。<link> 標(biāo)簽在<head>`
2.** 內(nèi)部樣式表 ** 當(dāng)單個(gè)文檔需要特殊的樣式時(shí)
<style>
p {
color:blue;
font-size:12px;
}
</style>
`使用 <style> 標(biāo)簽在文檔頭部定義`
3.** 內(nèi)聯(lián)樣式 ** 當(dāng)樣式僅需要在一個(gè)元素上應(yīng)用一次時(shí)
<p style=color:blue;font-size:12px;>當(dāng)前元素</p>
`相關(guān)的標(biāo)簽內(nèi)使用樣式（style）屬性`
- link和@import的區(qū)別
1.link是XHTML標(biāo)簽，除了加載CSS外，還可以定義RSS等其他事物；
@import屬于CSS范疇，只能加載CSS。
2.link引用CSS時(shí)，在頁(yè)面載入時(shí)同時(shí)加載；
@import需要頁(yè)面網(wǎng)頁(yè)完全載入以后加載。
3.link是XHTML標(biāo)簽，無(wú)兼容問(wèn)題；
@import是在CSS2.1提出的，低版本的瀏覽器不支持。
4.link支持使用Javascript控制DOM去改變樣式；
@import不支持。
5.tip：@import最優(yōu)寫(xiě)法
兼容最多@import url(style.css) 和@import url("style.css")
字節(jié)優(yōu)化@import url(style.css)
文件路徑
-
../main.css表示上級(jí)目錄的文件 -
./main.css表示當(dāng)前目錄的文件 -
main.css表示當(dāng)前目錄的文件
console.log
- console.log：可以看到頁(yè)面中輸出的內(nèi)容,方便調(diào)試。
- alert：只顯示對(duì)象類型，打斷頁(yè)面操作，影響調(diào)試。
text-align
text-align 屬性規(guī)定元素中的文本的水平對(duì)齊方式
該屬性通過(guò)指定行框與哪個(gè)點(diǎn)對(duì)齊，從而設(shè)置塊級(jí)元素內(nèi)文本的水平對(duì)齊方式
- left 把文本排列到左邊。默認(rèn)值：由瀏覽器決定。
- right 把文本排列到右邊。
- center 把文本排列到中間。
- justify 實(shí)現(xiàn)兩端對(duì)齊文本效果。
- inherit 從父元素繼承 text-align 屬性的值。
單位
-
定義
- px：絕對(duì)長(zhǎng)度單位。直接指定字體大小，是固定值。
- em：相對(duì)長(zhǎng)度單位。相當(dāng)于父元素的字體大小的倍數(shù)。
- rem：相對(duì)單位長(zhǎng)度。相對(duì)于根元素<html>的倍數(shù)。
-
區(qū)別
px：優(yōu)點(diǎn)絕對(duì)大小，數(shù)值精確，兼容性最高
缺點(diǎn)無(wú)法調(diào)整，一旦改變?yōu)g覽器的縮放，Web頁(yè)面布局就會(huì)被打破em：優(yōu)點(diǎn)相對(duì)大小，可以按比例調(diào)整字體大小
缺點(diǎn)進(jìn)行任何元素設(shè)置，都有可能需要知道父元素的大??；IE8及之更早版本瀏覽器不支持rem：優(yōu)點(diǎn)相對(duì)大小。只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)
缺點(diǎn)IE8及之更早版本瀏覽器不支持
-
使用
-
px：
p {font-size: 100px} -
em：
p1{font-size:100px} p2{font-size:5em} -
rem：
html{font-size:62.5%} p{font-size:5rem}
-
px：
tips
轉(zhuǎn)換工具
chrome 審查元素的功能
Elements html調(diào)試區(qū)
Console js調(diào)試區(qū)
Style css調(diào)試區(qū)
