詳盡的前端筆記，包含html和css部分，由xmind8做的筆記。css部分:編寫的位置 1.內(nèi)聯(lián)樣式 將樣式編寫到標簽的style屬性中 這種樣式只會對當前標簽起作用，不能對樣式進行復用，不方便后期維護，不推薦使用 2.內(nèi)部樣式表 將樣式表編寫到head中的style標簽中 使用內(nèi)部樣式表，進一步將表現(xiàn)和結(jié)構(gòu)分離，可以同時為多個元素設置樣式，方便后期的維護 3.外部樣式表 將樣式表編寫到外部的CSS文件中，然后通過link標簽將外部文件引入 將樣式編寫到外部樣式表中，可以在不同的頁面中使用同一個樣式表，完全將表現(xiàn)和結(jié)構(gòu)分離，方便后期的維護，推薦使用的方式 編寫的位置 1.內(nèi)聯(lián)樣式 將樣式編寫到標簽的style屬性中 這種樣式只會對當前標簽起作用，不能對樣式進行復用，不方便后期維護，不推薦使用 2.內(nèi)部樣式表 將樣式表編寫到head中的style標簽中 使用內(nèi)部樣式表，進一步將表現(xiàn)和結(jié)構(gòu)分離，可以同時為多個元素設置樣式，方便后期的維護 3.外部樣式表 將樣式表編寫到外部的CSS文件中，然后通過link標簽將外部文件引入 將樣式編寫到外部樣式表中，可以在不同的頁面中使用同一個樣式表，完全將表現(xiàn)和結(jié)構(gòu)分離，方便后期的維護，推薦使用的方式 基本語法 選擇器 通過選擇器可以選中頁面中的一組元素，然后為其設置樣式 元素選擇器 根據(jù)標簽名，選中頁面中的指定元素 語法：標簽名{ } 例子： div{} p{} h1{} id選擇器 根據(jù)元素的id屬性值選中一個唯一的元素 語法：#id {} 例子： #box1{} #hello{} 類選擇器 根據(jù)元素的class屬性值，選中一組元素 語法：.class{} 例子： .hello{} .box{} 通配選擇器 選中頁面中的所有元素 語法：*{} 通配選擇器的性能比較差，盡量避免使用 并集選擇器 可以同時選中符合多個選擇器的元素 語法：選擇器1,選擇器2,選擇器N{} 例子： div,p,#box,.hello{} 交集選擇器 可以選中滿足多個條件的元素 語法：選擇器1選擇器2選擇器N{} 例子：p.hello{} 后代元素選擇器 選中指定元素的指定后代元素 語法：祖先元素 后代元素{} 例子： div span {} div p{} 子元素選擇器 選中指定元素的指定子元素 語法：父元素 > 子元素 {} 例子： div > span {} div > p{} 聲明塊 聲明塊中實際上就是一個一個CSS聲明 聲明 每一個CSS聲明都是一個樣式，實際上就是一個名值對的結(jié)構(gòu) 名和值之間使用:鏈接 :左邊是樣式的名字 :右邊是樣式的值 每一個聲明以;結(jié)尾 例子 color:red; font-size:20px; 元素之間的關系 父元素 直接包含子元素的的元素叫做父元素 子元素 直接被父元素包含的元素叫做子元素 祖先元素 直接或間接包含后代元素的元素叫做祖先元素，父元素也是祖先元素 后代元素 直接或間接被祖先元素包含的元素叫后代元素，子元素也是后代元素 兄弟元素 擁有相同父元素的元素叫做兄弟元素 塊元素和內(nèi)聯(lián)元素 塊元素 塊元素會獨占頁面中的一行，無論他的內(nèi)容的多少 一般使用塊元素對頁面進行布局 常見的塊元素 div p h1~h6 內(nèi)聯(lián)元素 內(nèi)聯(lián)元素只占用自身的大小，不會獨占一行 內(nèi)聯(lián)元素也叫行內(nèi)元素（inline） 一般內(nèi)聯(lián)元素都是用來為文本來設置效果 常見的內(nèi)聯(lián) span a img 包裹規(guī)則 一般都是使用塊元素去包裹內(nèi)聯(lián)元素，而不會使用內(nèi)聯(lián)去包裹塊元素 a元素可以包含任意元素，除了a本身 p元素不能包含任何塊元素 偽類和偽元素