day04 css 細分元素,分類,特性

2022-07-31 06:00:19 字數 1979 閱讀 3697

一,鏈結偽類選擇器

1. :link /*

未訪問的鏈結

*/2. :visited /*

已訪問的鏈結

*/3. :hover /*

滑鼠移動到鏈結上

*/4. :active /*

選定的鏈結

*/例 (未點選過得鏈結顯示為紅色)

注意:寫的時候,他們的順序不要顛倒,按照 l v h a 的順序。

二,塊狀,行,行內塊

塊級元素(block-level)

常見的塊元素有

~、、、、、等,其中標籤是最典型的塊元素。

特點:(1)總是從新行開始

(2)高度,行高、外邊距以及內邊距都可以控制。

(3)寬度預設是容器的100%(4)可以容納內聯元素和其他塊元素。

行內元素(inline-level)

行內元素(內聯元素)不占有獨立的區域,僅僅靠自身的字型大小和影象尺寸來支撐結構,一般不可以設定寬度、高度、對齊等屬性,常用於控制頁面中文字的樣式。

常見的行內元素有

、、、、、、、、、等,其中標籤最典型的行內元素。

特點:(1)和相鄰行內元素在一行上。

(2)高、寬無效,但水平方向的padding和margin可以設定,垂直方向的無效。

(3)預設寬度就是它本身內容的寬度。

(4)行內元素只能容納文字或則其他行內元素。(a特殊a裡面可以放塊級元素)

行內塊元素(inline-block)

在行內元素中有幾個特殊的標籤——

、、,可以對它們設定寬高和對齊屬性,有些資料可能會稱它們為行內塊元素。

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

(2)預設寬度就是它本身內容的寬度。

(3)高度,行高、外邊距以及內邊距都可以控制。

標籤顯示模式轉換 display

塊轉行內:display:inline;

行內轉塊:display:block;

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

三,背景屬性及屬性值

background: 不分順序,可加顏色

background-image:url("./image/01.gif")

background-size: 10px 10px;寬 高;設定大下

background-position: 10px 10px;

background-color:red;

background-repeat:

background:rgba:(0 0 0 0.3);顏色,最後乙個可以設定透明度

四,邊框屬性及屬性值

border:10px red splid;

屬性值:red bule #666666dotted點線 dashed 虛線 splid 實線 transparent 透明邊框

border-radius:10px 10px 10px 10px;順時針賦值,達到的50%就成圓邊了

border-top:10px red splid;單獨設定上邊線

border-buttom:下邊線

border-left:左邊線

border-right:右邊線

border-collapse:collapse ;在**中使邊框不重合加粗

color:rgb(0,0,0,0.2)

2.css三大特性

css三大特性

層疊 繼承 優先順序 是我們學習css 必須掌握的三個特性。

css層疊性

記住:就近原則。

css繼承性

子類元素和後代元素會繼承部分屬性如:

css優先性

*{}全域性設定 權重為零

div{}標籤選擇器 權重為1

.class{}類別選擇器 權重為10

a:link{}偽類選擇器 權重為10

#id{}id選擇器 權重為100

day04 css學習筆記

css的基本概念 cascading style sheet 層疊樣式表 選擇器標籤 之類的標籤 使用方式 直接輸入標籤名 類 class class名字 使用方式 輸入點 class名 id id名 使用方式 輸入 id名 一般來說我們寫css檔案的時候用的都是第二種選擇器,class名 這是因為...

Day5 CSS元素型別

1 元素型別分類依據和元素型別分類 2 元素型別的轉換 3 inline block元素型別的應用 4 置換和非置換元素的概念和應用案例 根據css顯示分類,xhtml元素被分為 三種型別 塊狀元素,內聯元素 1.塊狀元素 block element a 塊狀元素在網頁中就是以塊的形式顯示,所謂塊狀...

Day04 分支和迴圈

順序結構 從上往下依次執行 分支結構 根據不同的條件,執行不同的語句 迴圈結構 根據指定的條件,重複執行某段 語法 if 表示式 執行語句 說明 要麼執行,要麼不執行,當表示式成立的之後,則執行語句 如果表示式不成立,則直接跳過整個if語句繼續執行後面的 單分支 num1 50 num2 60 需求...