CSS基礎(chǔ)入門(mén)學(xué)習(xí)筆記

1、css基礎(chǔ)入門(mén)學(xué)習(xí)筆記css概念掃瞄器前綴css驗(yàn)證工具字體樣式挑選器一般挑選器復(fù)臺(tái)挑選器交集挑選器并集挑選器后代挑選器子元素挑選器 偽類挑選器鏈接偽類挑選器：first-child偽類 塊行元素塊級(jí)元素（block-leve1）行內(nèi)元素（inline-leve1）行內(nèi)塊元素（inline-block） css三大特性層疊、繼承、優(yōu)先級(jí)特別性（specificity） 背景背景半透亮背景漸變 盒子模型元素居中外邊距合并content寬度和高度盒子陰影 浮動(dòng)布局一般流（normal flow）浮動(dòng)（float）定位（position）元素的定位屬性疊放次序（z-index）四種定位總結(jié) 元素的顯

2、示與躲藏display顯示visibility可見(jiàn)性overflow溢出溢出的文字躲藏 css技巧鼠標(biāo)樣式cursor輪廓outline防止拖拽文本域resizevertical-align垂直對(duì)齊去除底側(cè)空白縫隙 精靈技術(shù)本質(zhì)用法制作精靈圖滑動(dòng)實(shí)例 字體圖標(biāo)（iconfont）字體引入到html第三步：盒子里面添加結(jié)構(gòu)追加新圖標(biāo) bfc（塊級(jí)格式化上下文）元素的顯示模式具有bfc條件的元素元素產(chǎn)生bfc條件bfc元素所具有的特性bfc的主要用途bfc總結(jié)優(yōu)雅降級(jí)和漸進(jìn)增加長(zhǎng)名稱或詞組可以用法中橫線來(lái)為挑選器命名。不建議用法_下劃線來(lái)命名css挑選器。外部樣式表：link 是個(gè)單標(biāo)簽href：

3、定義所鏈接外部樣式表文件的url，可以是相對(duì)路徑，也可以是肯定路徑。rel：定義當(dāng)前文檔與被鏈接文檔之間的關(guān)系，在這里需要指定為stylesheet，表示被鏈接的文檔是一個(gè)樣式表文件。掃瞄器前綴掃瞄器-webkit-google chrome, safari, android browser-moz-firefox-o-opera-ms-internet explorer, edge-khtml-konquerorcssstats 在線的 css 代碼分析w3c 統(tǒng)一驗(yàn)證工具：站長(zhǎng)工具unicode字體在 css 中設(shè)置字體名稱，挺直寫(xiě)中文是可以的。但是在文件編碼（gb2312、utf-8 等

4、）不匹配時(shí)會(huì)產(chǎn)生亂碼的錯(cuò)誤。xp 系統(tǒng)不支持 類似微軟雅黑的中文。可以用法英文來(lái)替代。 比如 font-family:microsoft yahei。在 css 挺直用法 unicode 編碼來(lái)寫(xiě)字體名稱可以避開(kāi)這些錯(cuò)誤。用法 unicode 寫(xiě)中文字體名稱，掃瞄器是可以正確的解析的?？梢酝ㄟ^(guò)escape（） 來(lái)測(cè)試屬于什么字體。字體名稱英文名稱unicode 編碼宋體simsun5b8b4f53新宋體nsimsun65b05b8b4f53黑體simhei9ed14f53微軟雅黑microsoft yahei5fae8f6f96c59ed1楷體_gb2312kaiti_gb231269774f

5、53_gb2312隸書(shū)lisu96b64e66幼園youyuan5e7c5706華文細(xì)黑stxihei534e65877ec69ed1細(xì)明體mingliu7ec6660e4f53新細(xì)明體pmingliu65b07ec6660e4f53font-weight:字體粗細(xì)字體加粗除了用 b 和 strong 標(biāo)簽之外，可以用法css 來(lái)實(shí)現(xiàn)font-weight屬性用于定義字體的粗細(xì)，其可用屬性值：normal（400）、bold（700）、bolder、lighter、100——900（100的整數(shù)倍）。font : 綜合設(shè)置字體樣式用法font屬性時(shí)，必需

6、按上面語(yǔ)法格式中的挨次書(shū)寫(xiě)，不能更換挨次，各個(gè)屬性以空格隔開(kāi)。注重：其中不需要設(shè)置的屬性可以省略（取默認(rèn)值），但必需保留和屬性，否則font屬性將不起作用。一般挑選器類挑選器（class）：是可以多次重復(fù)用法的id挑選器：不得重復(fù)。復(fù)合挑選器交集挑選器交集挑選器由兩個(gè)挑選器構(gòu)成，其中第一個(gè)為標(biāo)簽挑選器，其次個(gè)為class挑選器，兩個(gè)挑選器之間不能有空格 h3.special并集挑選器并集挑選器（css挑選器分組）是各個(gè)挑選器通過(guò)逗號(hào)銜接而成的，任何形式的挑選器都可以作為并集挑選器的一部分?？梢岳貌⒓暨x器為它們定義相同的css樣式。后代挑選器后代挑選器又稱為包含挑選器，用來(lái)挑選元素或元素組的

7、后代，其寫(xiě)法就是把外層標(biāo)簽寫(xiě)在前面，內(nèi)層標(biāo)簽寫(xiě)在后面，中間用空格分隔。當(dāng)標(biāo)簽發(fā)生嵌套時(shí)，內(nèi)層標(biāo)簽就成為外層標(biāo)簽的后代。注重：子孫后代都可以這么挑選。 或者說(shuō)它能挑選任何包含在內(nèi)的標(biāo)簽。子元素挑選器子元素挑選器只能挑選作為某元素子元素的元素。其寫(xiě)法就是把父級(jí)標(biāo)簽寫(xiě)在前面，子級(jí)標(biāo)簽寫(xiě)在后面，中間跟一個(gè) > 舉行銜接，注重，符號(hào)左右兩側(cè)各保留一個(gè)空格。注重：這里的子指的是親兒子不包含孫子、重孫子之類。偽類挑選器鏈接偽類挑選器：link :visited :hover :active注重：1. 根據(jù) lvha 的挨次， love hate 2. 偽類名稱對(duì)大小寫(xiě)不敏感。：first-child

8、偽類向元素的第一個(gè)子元素添加樣式。p:first-child匹配作為任何元素的第一個(gè)子元素的 p 元素 p > i:first-child匹配全部元素中的第一個(gè) 元素 p:first-child i匹配全部作為第一個(gè)子元素的 元素中的全部元素參考文檔標(biāo)簽顯示模式轉(zhuǎn)換 display塊轉(zhuǎn)行內(nèi)：display:inline;行內(nèi)轉(zhuǎn)塊：display:block;塊、行內(nèi)元素轉(zhuǎn)換為行內(nèi)塊： display: inline-block;塊級(jí)元素（block-level）每個(gè)塊元素通常都會(huì)獨(dú)自占領(lǐng)一整行或多整行，可以對(duì)其設(shè)置寬度、高度、對(duì)齊等屬性，常用于網(wǎng)頁(yè)布局和網(wǎng)頁(yè)結(jié)構(gòu)的搭建。頻繁的塊元素有、等，其中標(biāo)簽是最典型的塊元素。行內(nèi)元素（inline-level）行內(nèi)元素（內(nèi)聯(lián)元素）不占有自立的區(qū)域，僅僅靠自身的字體大小和圖像尺寸來(lái)支撐結(jié)構(gòu)，普通不行以設(shè)置寬度、高度、對(duì)齊等屬性，常用于控制頁(yè)面中文本的樣式。頻繁的行內(nèi)元素有、等，其中標(biāo)