和CSS相遇的第二天,想它!

2021-10-10 04:45:43 字數 2213 閱讀 8457

復合選擇器是建立在基礎選擇器之上,對基礎選擇器進行組合形成的。

復合選擇器可以更準確更高效的選擇目標標籤

復合選擇器是由兩個或多個基礎選擇器,通過不同方式組合而成的

常用的復合選擇器為:後代選擇器 子選擇器 並集選擇器 偽類選擇器

後選擇器又稱為 包含選擇器

後選擇器可以選擇父元素裡面子元素

標籤1和標籤2 中間一定要空格隔開

標籤1必須是父級,標籤2是子級,最終選擇的是標籤2

ol>li

可以把ol裡面li選出來

一般情況下,後代選擇器盡量不要超過4層

(親兒子選擇器) 選擇某個元素最近一級的子元素 **親兒子**

子代選擇器最終選中的元素是子代標籤親兒子

子代選擇器的選擇器之間使用( >) 分開(div>a)

可以選擇多組標籤,同時為他們定義相同的樣式

並集選擇器是通過(,)逗號連線而成,逗號可以理解為()的意思。

可以任何形式的選擇器連線

( 並集選擇器喜歡豎著寫 )

最後乙個選擇器不需要加逗號

偽類選擇器使用單冒號(是某種狀態)

針對鏈結不同狀態設定不同的樣式

只在標籤 a 使用

書寫順序link-visited-hover-active

元素(標籤) 以什麼方式進行顯示

html一般由兩種顯示模式

分為(塊元素)和(行內元素)

塊元素:

獨佔一行

高度寬度外邊距可以設定

寬度預設是容器的100%

是乙個容器或盒子,裡面可以放行內或者塊級元素

文字類的元素不能使用塊級元素

p標籤主要用於存放文字 不能放塊級元素,特別是不能放 div

同理 h1-h6 都是文字類塊級標籤 也不可以

行內元素

相鄰行內元素在一行上,一行可以顯示多個

高、寬直接設定是無效的

預設寬度就是它本身內容的寬度

行內元素只能容納文字或其他行內元素

(鏈結裡面不能再放鏈結 )

(特殊情況鏈結行內塊元素

同時具有塊元素和行內元素的特點被稱為行內塊元素

和相鄰行內元素(行內塊)在一行上,但是他們之間會有空白縫隙。

一行可以顯示多個(行內元素特點)。

預設寬度就是它本身內容的寬度(行內元素特點)。

高度,行高、外邊距以及內邊距都可以控制(塊級元素特點)。

display:block 轉換為塊元素

display:inline 轉換為行內元素(使用較少)

display:inline-block 轉換為行內塊元素

line-height 行高=高=實現垂直居中 (單行)

背景

常見於logo或者裝飾小或超大

便於控制位置

backround-image: url

backround-repeat:repeat(預設平鋪)

repeat 預設,平鋪

no-repeat 不平鋪

repeat-x 水平平鋪

repeat-y 垂直平鋪

背景位置

backround-position

x座標和y座標 可以使用方位名詞或者精確單位

背景影象固定

backround-attachment

transparent 透明的

background-color:rgba(0,0,0,)

背景色半透明 rgba 不影響盒子裡面的內容

盒子半透明 opacity 是整個盒子裡內容半透明

CSS階段第二天

10月29日內容 一 css選擇器 css找到html標籤的方法,叫做選擇器 1.基本選擇器 2.層級選擇器 3.屬性選擇器 4.偽類選擇器 5.其它選擇器 二 詳解選擇器 一 基本選擇器 1.id選擇器 在需要操作的標籤中,加入id 值 名 屬性 在css中通過 值 名 選擇html標籤 ps 不...

慢慢說CSS第二天

今天想說三件事 第一,迪普拉斯的麵包很好吃 第二,咳咳,關於css,不用也可以做出美美的效果 第三,善用利用不同的標籤 從第二點開始說 我很自覺 css的border image和border radius屬性很有用,但是ie並不支援border image,囧囧噠。而且border radius也...

上班第二天

本想坐晚一班車的,誰知道這晚一班的也只是晚了 五 六分鐘,不高興再在站台上等,也只好小跑到車門上去了,果然,八點十分就到了。白天那個困啊 今天的工作內容和昨天一樣,做到後來我實在覺得測的差不多了,想幹些其他的,但這初來乍到的,也不好幹其他的呀,況且領導辦公室就在我旁邊。今天的工作總結有兩點 1 別把...