CSS-筆記1-選擇器與文本元素


知識點一:

CSS概念:CSS 指層疊樣式表 (Cascading Style Sheets)(級聯樣式表) 
Css是用來美化html標簽的,相當於頁面化妝。

知識點二:

選擇器格式與部分屬性: 
寫法:

 選擇器{屬性:值;屬性:值}

選擇器是一個選擇(一/多個)標簽的過程。 
對應的屬性與值表: 
Width:20px; 寬 
Height:20px; 高 
背景顏色 
font-size:24px; 文字大小 
text-align:left | center| right 內容的水平對齊方式 
text-indent:2em; 首行縮進 
Color:red; 文字顏色

知識點三:

基礎選擇器: 

一:標簽選擇器:

特點:標簽選擇器定義之后,會將頁面所有的元素都執行這個標簽樣式。

    標簽{屬性:值}
div{ font-size: 50px; color:green; background-color:yellow; width:300px; height:200px;
} p{ color:pink; font-size:60px;
}

顏色的顯示方式:

  • 直接寫顏色名稱。
  • 十六進制顯示顏色。
#000000;前2位代表紅色,中間代表綠色,后兩位代表藍色。值越接近0顏色越深
  • RGB
color:rgb(120,120,120);值在0-255之間。
  • RGBA 最后一位值在0-1
color:  rgba(102,217,239,0.5);

二:類選擇器:

特點:誰調用,誰生效。一個標簽可以調用多個類選擇器,多個標簽可以調用同一個類選擇器。 
在標簽中使用class屬性調用,不同的類之間用空格分開。

.自定義類名{屬性:值;屬性:值;}
.box{ font-size: 50px; color:green; background-color:yellow; width:300px; height:200px;
} .miss{ color:pink; font-size:60px;
}

類選擇器命名規則: 
不能用純數字或數字開頭來定義類名 
不能使用特殊符號或者特殊符號開頭(_)來定義類名。 
不建議使用漢字來定義類名。 
不推薦使用屬性或者屬性的值來定義類名。 
常見的命名模板: 

三:ID選擇器:

特點:一個ID選擇器在一個頁面只能調用一次。如果使用兩次或多次以上,是不符合w3c規范的,JS調用會出現問題。 
一個標簽只能調用一個ID選擇器。 
一個標簽可以同時調用類選擇器與ID選擇器。

#自定義名稱{屬性:值;}

四:通配符選擇器:

特點:給所有的標簽都使用相同的樣式。 
不推薦使用。

*{屬性:值;}

知識點四:

復合選擇器: 概念:兩個或兩個以上的基礎選擇器通過不同的方式連接在一起。 

一:交集選擇器:

特點:既要滿足使用的某個標簽選擇器,又要滿足使用了類選擇器。

標簽+類(ID)選擇器{屬性:值;}
div.box{ color:red; } div#miss{ width:400px; height:300px; background-color:yellow;
}

二:后代選擇器:
選擇器特點:后代選擇器首先要滿足包含(嵌套關系) 
父集元素在前,子集元素在后。 
特點:無限制隔代。 
只要能代表標簽,標簽、類選擇器、ID選擇器自由組合。

div #miss{ width:400px; height:300px; background-color:yellow;
} <div> <div id="miss"></div> </div>

三:子代選擇器:

選中直接下一代元素

選擇器>選擇器{屬性:值;}
div>span{ width:300px; height:200px;
} p>span{ width:300px; height:200px;   
} <div> <p> <span>趙靈兒</span> </p> <span>林月如</span> </div>

四:並集選擇器: 
選擇器+,+選擇器+,選擇器{屬性:值;} 
特點:某些元素或部分元素的屬性完全相同,則他們可以寫在一塊。

.box,#miss,span,h1{ width:300px; color:#000;
}

知識點五:

文本元素: 
一:屬性:

font-size:16px;             文字大小
font-weight:700;        值從100-900,文字粗細,不推薦使用font-weight:bold;
font-family:微軟雅黑;       文字字體
font-style:normal|italic    normal默認值,italic斜體。
line-heitht:10px;               行高。

文本屬性連寫: 
font: font-style font-weight font-size/line-height font-family; 
注意:font:后邊寫屬性的值。一定按照書寫順序。 
文本屬性連寫文字大小和字體為必寫項。

例: Font:italic 700 16px/40px  微軟雅黑;

文字的字體表達形式: 
一:直接寫中文名稱:

 div{ font-family:微軟雅黑; font-size:60px; }

二:寫字體的英文名稱:

div{ font-family:microsoft yahei; font-size:15px;
}

Unicode編碼: 

如何快速獲得字體的Unicode編碼: 
在頁面的console中 
escape(“字體名”) 
即可獲取。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM