自我學習前端第三天 選擇器和浮動

2021-10-20 06:22:05 字數 1328 閱讀 5445

span標籤

文字內容標籤本身沒有任何的效果是用來插入更改部分文字的css樣式

標籤名 元素選擇器,標記選擇器、型別選擇器

css div{} 網頁裡所有的div標籤

id選擇器

css #box{} id名為box的內容,唯一性,名字不能重複使用

class選擇器(類選擇器)

css .box{} 選中class名為box的內容,可以重複設定

高階用法:乙個class可以設定多個值,用空格隔開

萬用字元選擇器

css   *      網頁內的所有內容

*

包含選擇器

父子選擇器(通過父元素選擇子元素)

父元素 > 子元素

後代選擇器(只要是包含關係就都能選中)

祖先元素 後代元素

偽類選擇器

設定內容在不同的狀態下選擇內容

a:link 設定內容訪問前的狀態

a:visited 設定內容訪問後的狀態

a:hover 設定內容滑鼠移入的狀態

a:active 設定滑鼠按下時的狀態(滑鼠啟用的狀態)

內聯樣式表 1000  》   id  0100  》    class  0010   》   標記選擇器  0001   》  萬用字元選擇器 0000

包含選擇器的權重

包含選擇器的權重是計算所有選擇器的權重值和

群組選擇器是不會造成權重衝突

偽類選擇器 10

總結:

1 、css樣式衝突的時候,誰的權重高設定誰

2、如果權重值相同,跟順序有關,誰在後面設定誰

3、css的繼承(就近原則)

自己的樣式 》 父元素的樣式 》 祖孫元素的樣式

float:

left

right

none

1、浮動的**環繞效果

2、讓垂直的內容水平排列

清除浮動有兩種作用

1:套乙個父元素設定高度隔開

2:clear 清除浮動 (給受影響的盒子設定清除浮動)

left 清除左浮動

right 清除有浮動

none 不清除

both 清除兩邊浮動

前端學習第三天

float left 設定左浮動 z index 100 重疊時顯示的順序,值越大越在上面 position fixed 固定 text align center 字型對齊方式 z index 屬性設定元素的堆疊順序 擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。所以,z index 9...

前端學習 第三天

css 指層疊樣式表 cascading style sheets 為了顯表現html 元素,使html內容與表現分離。當瀏覽器顯示文件時,它必須將文件的內容與其樣式資訊結合。它分兩個階段處理文件 1 瀏覽器將 html 和 css 轉化成 dom 文件物件模型 dom在計算機記憶體中表示文件。它把...

學習前端的第三天

一 1.的作用 顯示屬性 table,行 tr,列 td 2.中的屬性 width 寬度 height 高度 border 邊框 bordercolor 邊框顏色 cellspacing 相鄰單元格邊框間的間距 cellpadding 內容距邊框之間的間距 align center left rig...