CSS
1.層疊樣式表(Cascading Style Sheets)
2.css可以用來為網(wǎng)頁創(chuàng)建樣式表,通過樣式表可以對網(wǎng)頁進行裝飾
3.層疊耘成,層次高的將會覆蓋層次低的
基本語法
由一個一個的樣式構出,一個樣式又由選擇器和聲明塊構出
語法:選擇器{樣式名:樣式值; 樣式名:樣式值;}
p{color:red;font-size:20px;}
三個樣式
1驹闰、行內(nèi)樣式:可以直接將樣式寫到標簽內(nèi)部的屬性中瘪菌,這種樣式不用填寫選擇器,直接編寫聲明嘹朗。
這種方式編寫簡單控嗜,定位準確。但是由于直接將css代碼寫到了html標簽的內(nèi)部骡显,導致結構與表現(xiàn)耦合疆栏,同時導致樣式不能夠復用,不建議使用
2惫谤、內(nèi)部樣式:
<style>
p{color:red;font-size:20px;}
</style>
可以直接將樣式寫到<style>標簽中壁顶。
這樣使css獨立于html代碼,而且可以同時為多個元素設置樣式溜歪,這是我們使用的比較多的一中方式若专。
但是這種方式,樣式只能在一個頁面中使用蝴猪,不能在多個頁面中重復使用调衰。
3膊爪、外部樣式表:(自結束標簽)
<link rel="stylesheet" type="text/css"
href="style.css"
可以將所有的樣式保存到一個外部的css文件中,然后通過<link>標簽將樣式表引入到文件中嚎莉。
這種方式將樣式表放入到了頁面的外部米酬,可以在多個頁面中引入,同時瀏覽器加載文件時可以使用緩存趋箩,這是我們開發(fā)中使用的最多的方式赃额。
選擇器:
會告訴瀏覽器網(wǎng)頁上的哪些元素需要設置什么樣的樣式。
1叫确、元素選擇器
作用:可以根據(jù)標簽的名字來從頁面中選取指定的元素
語法:標簽名{}
比如:p則會選中頁面中的所有p標簽
2跳芳、類選擇器
作用:可以根據(jù)元素的class屬性值選擇元素
語法:.className{}
比如:.hello會選中頁面所有class屬性為hello的元素
3、ID選擇器
作用:可以根據(jù)元素的id屬性選取元素
語法:#id{}
比如:#box會選中頁面中id屬性值為box的元素竹勉,和class屬性不同飞盆,id屬性是不能重復的。
4次乓、復合選擇器(交集選擇器)
作用:可以同時使用多個選擇器吓歇,同時滿足多個選擇器的元素
語法:選擇器1選擇器2{}
比如:div.box1會選中頁面中具有box1這個class
的div元素。
5檬输、群組選擇器(并集選擇器)
作用:可以使用多個選擇器,多個選擇器將被同時應用指定的樣式
語法:選擇器1匈棘,選擇器2丧慈,選擇器3{}
比如:p,.hello,#box會同時選中頁面中p元素,class為hello的元素主卫,id為box的元素逃默。
6、通用選擇器
作用:可以同時選中頁面中的所有元素
語法:*{}
7簇搅、后代選擇器
作用:可以根據(jù)標簽的關系完域,為處在元素內(nèi)部的代元素設置樣式
語法:祖先元素 后代元素 后代元素{}
比如:p strong 會選中頁面中所有的p元素內(nèi)的strong元素。