一,鏈結偽類選擇器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 需求...