前端入門知識 css(2)

2021-09-23 22:37:47 字數 2257 閱讀 2709

css顏色表示法

css顏色值主要有三種表示方法:

顏色名表示,比如:red 紅色,gold 金色。

rgb表示,比如:rgb(255,0,0),表示紅色。

16進製制數值表示,比如:#ff0000 表示紅色,這種可以簡寫成 #f00。

css顏色表示法示例

這是乙個div標籤

css選擇器

如果對同一內容區新增樣式,下面的樣式會覆蓋上面的樣式;

在css中,#代表id選擇器,.代表類選擇器;

常用的選擇器有如下幾種:

1.標籤選擇器

標籤選擇器,此種選擇器影響範圍大,建議盡量應用在層級選擇器中。

標籤選擇器舉例:

*

div

....

....

01標籤選擇器示例

第乙個div標籤

第二個div標籤

第三個div標籤

01標籤選擇器示例

id選擇器舉例:

#box

....

02id選擇器示例

第乙個div標籤

第二個div標籤

第三個div標籤

02id選擇器示例

3.類選擇器

通過類名來選擇元素,乙個類可應用於多個元素,乙個元素上也可以使用多個類,應用靈活,可復用,是css中應用最多的一種選擇器。

類選擇器舉例:

.red

.big

.mt10

....

....

03類選擇器示例

這是第乙個div標籤

這是第二個div標籤

這是乙個p標籤

下面是沒有新增類選擇器的標籤

這是第乙個div標籤

這是第二個div標籤

這是乙個p標籤

03類選擇器示例

4.層級選擇器

主要應用在選擇父元素下的子元素,或者子元素下面的子元素,可與標籤元素結合使用,減少命名,同時也可以通過層級,防止命名衝突。

層級選擇器可以包含多層,比如box中巢狀box,二層box下再巢狀span;但一般而言,最好不要超過四層。

層級選擇器之間用空格隔開;

層級選擇器舉例:

.box span

.box .red

.red

....

....

5.組選擇器

多個選擇器,如果有同樣的樣式設定,可以使用組選擇器,抽離重複樣式。組選擇器之間用逗號分隔開。

組選擇器舉例:

.box1,.box2,.box3

.box1

.box2

.box2

....

....

....

6.偽類及偽元素選擇器

常用的偽類選擇器有hover,表示滑鼠懸浮在元素上時的狀態,偽元素選擇器有before和after,它們可以通過樣式在元素中插入內容。

常用於a標籤。

偽類選擇器舉例

.box1:hover

.box2:before

.box3:after

....

....

....

06偽類和偽元素選擇器示例

這是第乙個div標籤

這是第二個div標籤

這是第三個div標籤

06偽類和偽元素選擇器示例

注意:

id選擇器基本不用,用得最多的是類選擇器。

如果乙個元素上有多個類,多個類之間有重複的樣式,那麼在外聯式/嵌入式中後定義的類選擇器的樣式會覆蓋先定義的;

id選擇器的權重要高於類選擇器的權重,即id和類的樣式同時作用於乙個內容區,會優先使用id的樣式。

最後,給大家推薦乙個前端學習高階內推交流圈子(前端資料分享),不管你在地球哪個方位,

不管你參加工作幾年都歡迎你的入駐!(會定期免費提供一些收藏的免費學習書籍資料以及整理好的面試題和答案文件!)

願大家都能在程式設計這條路,越走越遠。

前端 CSS2常用屬性

font weight font size font family line height font variant font direction 設定文字方向。vertical align 設定元素的垂直對齊 text align 對齊元素中的文字 text decoration 向文字新增修飾 ...

css2基礎知識梳理

基礎的css知識,只放xmind的截圖。轉 via.wang 布局中所遵循的規範或是通例 一般是遵循從上到下,從左到右的乙個順序。從頁面的穩定性上來說,優先考慮使用標準流,其次考慮浮動或定位。遵循標準流的元素中,又以寬高最穩定,先把大的框架例項化出來,再進行細節的布局。能用padding 的優先考慮...

前端學習筆記 CSS 2 選擇器

交集選擇器 選擇器1 選擇器2 選擇器3 p h1 div選擇器分組 並集 選擇器1,選擇器2,選擇器3,選擇器4 p,h1,div,sapn子元素選擇器 父元素 子元素 div span後代元素選擇器 祖先 後代 div span兄 弟後面所有的兄弟選擇器 不會選中前面的兄弟 兄 弟指定屬性為ti...