CSS 樣式表和選擇器

CSS

1.層疊樣式表(Cascading Style Sheets)
2.css可以用來為網(wǎng)頁創(chuàng)建樣式表,通過樣式表可以對網(wǎng)頁進行裝飾
3.層疊耘成,層次高的將會覆蓋層次低的

基本語法

由一個一個的樣式構出,一個樣式又由選擇器和聲明塊構出
語法:選擇器{樣式名:樣式值; 樣式名:樣式值;}
p{color:red;font-size:20px;}

三個樣式

1驹闰、行內(nèi)樣式:
圖片.png

可以直接將樣式寫到標簽內(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、通用選擇器
作用:可以同時選中頁面中的所有元素
語法:*{}


QQ圖片20181116164144.png

7簇搅、后代選擇器
作用:可以根據(jù)標簽的關系完域,為處在元素內(nèi)部的代元素設置樣式
語法:祖先元素 后代元素 后代元素{}
比如:p strong 會選中頁面中所有的p元素內(nèi)的strong元素。

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末瘩将,一起剝皮案震驚了整個濱河市吟税,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌姿现,老刑警劉巖肠仪,帶你破解...
    沈念sama閱讀 222,627評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異备典,居然都是意外死亡异旧,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,180評論 3 399
  • 文/潘曉璐 我一進店門提佣,熙熙樓的掌柜王于貴愁眉苦臉地迎上來吮蛹,“玉大人荤崇,你說我怎么就攤上這事〕闭耄” “怎么了术荤?”我有些...
    開封第一講書人閱讀 169,346評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長然低。 經(jīng)常有香客問我喜每,道長,這世上最難降的妖魔是什么雳攘? 我笑而不...
    開封第一講書人閱讀 60,097評論 1 300
  • 正文 為了忘掉前任带兜,我火速辦了婚禮,結果婚禮上吨灭,老公的妹妹穿的比我還像新娘刚照。我一直安慰自己,他們只是感情好喧兄,可當我...
    茶點故事閱讀 69,100評論 6 398
  • 文/花漫 我一把揭開白布无畔。 她就那樣靜靜地躺著,像睡著了一般吠冤。 火紅的嫁衣襯著肌膚如雪浑彰。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,696評論 1 312
  • 那天拯辙,我揣著相機與錄音郭变,去河邊找鬼。 笑死涯保,一個胖子當著我的面吹牛诉濒,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播夕春,決...
    沈念sama閱讀 41,165評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼未荒,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了及志?” 一聲冷哼從身側(cè)響起片排,我...
    開封第一講書人閱讀 40,108評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎速侈,沒想到半個月后划纽,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,646評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡锌畸,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,709評論 3 342
  • 正文 我和宋清朗相戀三年勇劣,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,861評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡比默,死狀恐怖幻捏,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情命咐,我是刑警寧澤篡九,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站醋奠,受9級特大地震影響榛臼,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜窜司,卻給世界環(huán)境...
    茶點故事閱讀 42,196評論 3 336
  • 文/蒙蒙 一沛善、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧塞祈,春花似錦金刁、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,698評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至斯议,卻和暖如春产捞,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背哼御。 一陣腳步聲響...
    開封第一講書人閱讀 33,804評論 1 274
  • 我被黑心中介騙來泰國打工坯临, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人艇搀。 一個月前我還...
    沈念sama閱讀 49,287評論 3 379
  • 正文 我出身青樓尿扯,卻偏偏與公主長得像求晶,于是被迫代替她去往敵國和親焰雕。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,860評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案芳杏? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,761評論 1 92
  • 轉(zhuǎn)載請聲明 原文鏈接地址 關注公眾號獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    程序員poetry閱讀 16,562評論 32 459
  • 1.CSS基本概念 1.1 CSS的定義 CSS(Cascading Style Sheets)層疊樣式表矩屁,主要用...
    寥寥十一閱讀 1,839評論 0 6
  • 學會使用CSS選擇器熟記CSS樣式和外觀屬性熟練掌握CSS各種選擇器熟練掌握CSS各種選擇器熟練掌握CSS三種顯示...
    七彩小鹿閱讀 6,319評論 2 66
  • 無須, 再寄上你催促的雨滴 疲倦的行囊已經(jīng)打包 塞不下更多期盼 行程拋下辜負 早已設定時間 我能體會你等待的心情 ...
    馬流云閱讀 268評論 0 2