CSS選擇器及基本知識

2021-10-02 14:38:07 字數 1828 閱讀 1720

引入css樣式的3種方式

1.直接在行內引用   行內樣式法

2.在head內引入內嵌樣式法

3.外部鏈結  引入外部css檔案法

css選擇器:

類選擇器:

乙個標籤可以擁有多個class名 乙個class名可以被多個標籤使用

id選擇器:

id 唯一性,每個標籤只能有乙個id名 標籤之間的id名,不能重複

標籤選擇器:

div+p兄弟選擇器 選擇div同一級得下乙個標籤

.box>li 子級選擇器 .box子級裡的所有li不包括孫子級

屬性選擇器

input[

class

]input[

class

^="lvv"

]

偽類選擇器:

p:first-of-type 選擇的 p 元素是其父元素的第乙個 p 元素

::before預設行內元素 加在元素前面,一定要包含content:」」

::after 預設行內元素 加在元素後面 一定要包含content:」」

::selection選中變色

::first-line第一行字型

::first-letter 第乙個字

css優先順序

!important>行內樣式》id選擇器》class選擇器》標籤選擇器》*

divfloat浮動

浮動屬性:left right none

浮動特點

1.脫離文件流 向左或向右浮動

2.若元素設定了浮動,位於此元素後面的元素會往上面移動

3.設定浮動的元素會對周邊元素產生影響

特徵:1.文字環繞

2.塊狀元素可以在同一行顯示

3. 設定了浮動的盒子 會一直向左胡總和向右走知道觸碰了文件邊緣或者上乙個設定了浮動的盒子

clear:both;清除浮動的影響

定位 position

相對定位:relative 不脫離文件流 可以設定層疊屬性 參考自身定位

絕對定位:absolutive 脫離文件流 如果父級設定了相對定位或者絕對定位,那麼相對於父級進行定位,如果父級及父級的父級都沒有設定定位的話,那就相對於body定位

固定定位 fixed 相對於可視視窗進行定位

盒模型:width padding margin border

標準盒模型:

基於w3c標準盒模型

寬度=width+padding+border+margin

怪異盒模型:

ie盒模型

寬度=width+margin

css字型樣式

text-indent: 規定文字塊中首行文字的縮排

letter-spacing: 字間距

word-spacing:詞間距

word-wrap: break-word

word-break: break-all; 規定自動換行的處理方法 允許單詞內換行

瀏覽器的私有字首:

谷歌 webkit

火狐 moz

歐鵬 o

ie ms

px 固定畫素

em 基於父元素的字型大小 16px=1em

rem 基於跟元素的font-size大小

選擇器基本知識

一.萬用字元選擇器 也叫子字串選擇器 所有 開頭 結尾包 含 預設 加 d ata code kk d ata code 結尾 包含 預設加 data code kk data code 結尾包含 默 認加 data cod e k k data cod e kk data code kk data...

CSS01 基本知識和語法以及選擇器

層疊樣式表 英文全稱 cascading style sheets 是一種用來表現html 標準通用標記語言的乙個應用 或xml 標準通用標記語言的乙個子集 等檔案樣式的計算機語言。css不僅可以靜態地修飾網頁,還2.可以配合各種指令碼語言動態地對網頁各元素進行格式化。1.屬性的設定 2.注釋 寫法...

CSS 基本選擇器

css的選擇器 告訴css的 作用在哪個標籤上。基本選擇器 標籤名選擇器 div span 類選擇器 在html的標籤上,提供了屬性 class,定位到div的標籤 美工經常使用的方式 寫法 class的名稱 hehe 設定不同的標籤,具有相同的樣式 id選擇器 在html的標籤上,提供的屬性 設定...