css簡結

CSS的連接方式,三種,分別為:

1.內(nèi)嵌2.外鏈3.行間樣式

CSS的選擇器

通配符選擇器標簽選擇器類選擇器id選擇器

屬性樣式的優(yōu)先級

!Important>行間樣式>id選擇器>類選擇器>標簽選擇器>通配符選擇器

什么是就近原則

當class里面的屬性值有不止一個時,而且選擇器里面的屬性有沖突,具體的樣式要根據(jù)style里面定義選擇器時與html代碼物理距離的遠近,與body里面的class屬性值的先后并沒有什么關系

CSS的類選擇器的組合使用

分為群組選擇器,子代選擇器,后代選擇器等,其使用規(guī)范為:

群組:把有相同屬性的標簽或者類或者id用樣式的規(guī)范方式寫出來,中間用逗號隔開,然后設置屬相和屬性值

子代:想要具體實現(xiàn)某個標簽或者類或者id等元素的直接子元素的樣式設置,可以在該父元素的后面直接加上該想要設置樣式的直接子元素,中間用>連接,然后設置屬相和屬性值

后代:想要實現(xiàn)某個標簽或者類或者id等元素的某一個后代元素的所有的設置,可以在該祖先元素后面直接加上這個后代元素,中間用空格隔開,然后設置屬相和屬性值

CSS選擇器的優(yōu)先級

優(yōu)先級可以用權重值來比較,換算方法為:

標簽選擇器權值為1

類、偽類、屬性選擇器權值為10

id選擇器 權值為100

行內(nèi)樣式權值為1000

通配選擇器(*),它們權值都為0

到時候將選擇器對應的權值相加,權值高的優(yōu)先級就高,當權值同樣時,可以看代碼中距離html的物理距離,離得近的優(yōu)先級高。(還可以通過從右到左來遍歷,先找到子代選擇器標記的優(yōu)先級就高。)不過這種情況具體項目實現(xiàn)中會盡量避免。

偽類選擇器的設置

1.目前常用的是a標簽的四個鼠標點擊狀態(tài)的偽類,分別為a:link表示的是當未點擊鼠標時的樣式;a:visited點擊鼠標過后的樣式;a:hover當鼠標懸停在鏈接上面的時候的樣式;a:active當鼠標點擊鏈接并且不松手時鏈接的樣式;

2.偽類選擇器的寫法一定要按照順序來,lvha。

樣式的繼承

可以繼承的屬性樣式包括:字體的顏色,大小,類型,行高等。

CSS的文本設置

1.color屬性,屬性值的寫法有三種,英文表示,十六進制代碼顯示,RGB的具體數(shù)值的顯示,還有一個是rgba( ),比rgb的后面多了一個值,用來標識的是透明度。

2.Font-family屬性,用來設置不同的字體,比如宋體,黑體什么的,要用雙引號引起來,如果想要設置中英文不同的字體,則將英文設置的寫在前面,中文字體設置的寫在后面,中間用逗號。

3.Font-size屬性,用來設置的是大小,除了可以寫具體的大小,還可以寫某某em,em的意思是倍數(shù),也就是說設置的字體大小是瀏覽器默認字體的某某倍。

4.Font-weight屬性,設置的是字體的加粗,加粗用bolder,但是常見的是用normal,用來消除b標簽的加粗效果。

5.Font-style屬性,設置的是字體的傾斜,同上,一般用的也是normal值,用來消除i標簽的傾斜效果。

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 14,164評論 1 92
  • 本文主要是起筆記的作用,內(nèi)容來自慕課網(wǎng). 認識CSS樣式 CSS全稱為“層疊樣式表 (Cascading Styl...
    0o凍僵的企鵝o0閱讀 2,750評論 0 30
  • CSS基礎 本文包括CSS基礎知識選擇器(重要!?。。├^承、特殊性、層疊、重要性CSS格式化排版單位和值盒模型浮動...
    廖少少閱讀 3,442評論 0 40
  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,600評論 19 139
  • 我們知道中國歷史上有很多的朝代,我們講歷朝歷代就一定有皇上,他有皇上就得有皇后嘛,可是偏偏有這么一個朝代,有皇上但...
    2ce89d4b6d65閱讀 672評論 0 15

友情鏈接更多精彩內(nèi)容