CSS 筆記1 選擇器與文字元素

2021-09-26 18:13:26 字數 2613 閱讀 8154

css概念:css 指層疊樣式表 (cascading style sheets)(級聯樣式表) 

css是用來美化html標籤的,相當於頁面化妝。

選擇器格式與部分屬性: 

寫法:

選擇器
選擇器是乙個選擇(一/多個)標籤的過程。 

對應的屬性與值表: 

width:20px; 寬 

height:20px; 高 

背景顏色 

font-size:24px; 文字大小 

text-align:left | center| right 內容的水平對齊方式 

text-indent:2em; 首行縮排 

color:red; 文字顏色

一:標籤選擇器:

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

標籤

divp
顏色的顯示方式:

#000000;前2位代表紅色,中間代表綠色,後兩位代表藍色。值越接近0顏色越深

color:rgb(120,120,120);值在0-255之間。

color:  rgba(102,217,239,0.5);
二:類選擇器:

特點:誰呼叫,誰生效。乙個標籤可以呼叫多個類選擇器,多個標籤可以呼叫同乙個類選擇器。 

在標籤中使用class屬性呼叫,不同的類之間用空格分開。

.自定義類名

.box.miss
類選擇器命名規則: 

不能用純數字或數字開頭來定義類名 

不能使用特殊符號或者特殊符號開頭(_)來定義類名。 

不建議使用漢字來定義類名。 

不推薦使用屬性或者屬性的值來定義類名。 

常見的命名模板: 

三:id選擇器:

特點:乙個id選擇器在乙個頁面只能呼叫一次。如果使用兩次或多次以上,是不符合w3c規範的,js呼叫會出現問題。 

乙個標籤只能呼叫乙個id選擇器。 

乙個標籤可以同時呼叫類選擇器與id選擇器。

#自定義名稱
四:萬用字元選擇器:

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

一:交集選擇器:

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

標籤 類(id)選擇器

div.boxdiv#miss
二:後代選擇器:

選擇器特點:後代選擇器首先要滿足包含(巢狀關係) 

父集元素在前,子集元素在後。 

特點:無限制隔代。 

只要能代表標籤,標籤、類選擇器、id選擇器自由組合。

div #miss

三:子代選擇器:

選中直接下一代元素

選擇器》選擇器

div>spanp>span趙靈兒

林月如

四:並集選擇器: 

選擇器 , 選擇器 ,選擇器 

特點:某些元素或部分元素的屬性完全相同,則他們可以寫在一塊。

.box,#miss,span,h1
文字元素: 

一:屬性:

font-size:16px;             文字大小

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
二:寫字型的英文名稱:

div
unicode編碼: 

如何快速獲得字型的unicode編碼: 

在頁面的console中 

escape(「字型名」) 

即可獲取。

CSS 元素選擇器

最常見的 css 選擇器是元素選擇器。換句話說,文件的元素就是最基本的選擇器。如果設定 html 的樣式,選擇器通常將是某個 html 元素,比如 p h1 em a,甚至可以是 html 本身 html h1 h2親自試一試 可以將某個樣式從乙個元素切換到另乙個元素。假設您決定將上面的段落文字 而...

css 元素選擇器

子元素選擇器 h1 strong 這個規則會把第乙個 h1 下面的兩個 strong 元素變為紅色,但是第二個 h1 中的 strong 不受影響 後代選擇器 descendant selector 又稱為包含選擇器 h1 em 上面這個規則會把作為 h1 元素後代的 em 元素的文字變為 紅色。其...

CSS選擇器 偽元素選擇器

css選擇器 偽元素選擇器 偽元素以 開頭,用在選擇器後,用於選擇指定的元素。after選中之後的不存在的節點,可配合content屬性進行內容填充 section h3 after before選中之前的不存在的節點,可配合content屬性進行內容填充 section h3 before fir...