[前端學(xué)習(xí)]css部分學(xué)習(xí)筆記,第一天

css的格式為 選擇器 {屬性:值;}

css字體設(shè)置

  • font-size字體大小
    • 字體設(shè)置大小時(shí),現(xiàn)在常用的em和px。
    • 現(xiàn)在設(shè)置字體時(shí),一般使用14px+大?。?/li>
    • 盡量使用偶數(shù)的字體號,因?yàn)楹芏嗬蠟g覽器不支持奇數(shù)字號;

font-family字體設(shè)置

  • 中文字體必須使用雙引號,多個(gè)字體時(shí),英文字體名寫中文字體名前;
  • 如果英文字體名中有特殊符號時(shí),必須加上雙引號;
  • 盡量保證默認(rèn)字體。

font-weight

  • css的font-weight屬性就是讓字體單純的樣式加粗
  • 加粗屬性有normal(普通大小),bold加粗,bolder更粗,lighter稍微加粗,數(shù)字(100-900)
  • 常用的bold加粗屬性和數(shù)字類型
  • 其中數(shù)字400等值于normal,700等值于于bold
  • 也可以通過設(shè)置400或者normal來讓html的strong和b標(biāo)簽,效果不加粗

Unicode

  • Unicode字體編碼是一種代替中文字體名的編碼。
  • 基本上所有中文字體名都有對應(yīng)的Unicode名,查詢名稱可以通過chrome控制臺輸入escape()函數(shù)。

font-style

  • font-style有三種格式,normal把傾斜的標(biāo)簽字體變?yōu)椴粌A斜;italic把字體變傾斜;oblique也是把字體變傾斜,italic更為常用。

font連寫格式

  • 格式:font: font-style font-weight font-size/line-height font-family ;
  • 這個(gè)格式順序一定不能亂,亂了字體樣式就不會起效果。其中font-size和font-family是必須要寫的,font-style和font-weight不寫是默認(rèn)值,line-height不寫默認(rèn)為0。

選擇器

標(biāo)簽選擇器

  • 格式:標(biāo)簽名{屬性:屬性值;}
  • 選擇標(biāo)簽名來做選擇器,那么所有相同的標(biāo)簽都會產(chǎn)生指定的css效果

類名選擇器

  • 格式:.類名{屬性:屬性值;}
  • 類名可以自定義名稱,然后當(dāng)聲明了對應(yīng)類名的樣式后,所有寫了對應(yīng)class="類名"的標(biāo)簽都會產(chǎn)生指定的css效果

多類名選擇器

  • 要想使用多類名選擇器只要這樣:class="類名1 類名2"把不同的類名選擇器用空格來分隔開,這樣就能實(shí)現(xiàn)一個(gè)標(biāo)簽使用多個(gè)類名選擇器
  • 注意:有時(shí)候會樣式重疊或者沖突的情況,在多類名選擇器中類名書寫順序是不會產(chǎn)生任何影響的,最終呈現(xiàn)的樣式是根據(jù)css權(quán)重來決定的。
  • 好處是:一,能夠讓樣式更多樣化更自由;二,節(jié)省代碼量易于維護(hù)。

ID選擇器

  • 格式:#ID名{屬性:屬性值;}
  • ID選擇器與類名選擇器類似,都是可以自定義名稱。區(qū)別是ID選擇器在寫樣式的時(shí)候必須以#開頭,然后再標(biāo)簽中調(diào)用時(shí)使用ID="ID名"。

ID選擇器和類名選擇器的區(qū)別

  • 類名選擇器是可以多次甚至無限次調(diào)用的;而ID選擇器是唯一的,只能調(diào)用一次。所以也不會多ID選擇器的存在。
  • 例子:類名選擇器是人的姓名,可以出現(xiàn)多個(gè)人姓名相同。
  • ID選擇器是人的身份證號碼,這是唯一的,不會有第二個(gè)人的身份證號碼相同。

通配符選擇器(幾乎不用)

  • 格式:* {屬性:屬性值;}
  • 它會匹配所用的標(biāo)簽,并且不需要調(diào)用將直接將樣式應(yīng)用到標(biāo)簽。在實(shí)際工作中幾乎用不到,偶爾測試時(shí)會用一下,只做了解。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

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

  • 1.CSS基本概念 1.1 CSS的定義 CSS(Cascading Style Sheets)層疊樣式表,主要用...
    寥寥十一閱讀 2,061評論 0 6
  • 轉(zhuǎn)載請聲明 原文鏈接地址 關(guān)注公眾號獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    前端進(jìn)階之旅閱讀 16,878評論 32 459
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,160評論 1 92
  • CSS基礎(chǔ) 本文包括CSS基礎(chǔ)知識選擇器(重要!?。。├^承、特殊性、層疊、重要性CSS格式化排版單位和值盒模型浮動...
    廖少少閱讀 3,441評論 0 40
  • 引言 本人在慕課網(wǎng)學(xué)習(xí)HTML+CSS基礎(chǔ)課程,記錄一些文字,方便自己回憶,也希望對大家有所幫助 上次給大家?guī)砹?..
    zhaolion閱讀 7,445評論 18 272

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