關於巨集奕培訓的一些小筆記（三）

小怪不怪發表於2020-10-28
筆記

這次筆記內容主要為css初步認識和css盒子模型的製作。

文章目錄

一、什麼是css？

css通稱為樣式表，用於設定HTML頁面中文字內容（字型、大小、對齊方式等）、圖片外形（大小，邊距，邊框樣式等）、版面佈局等外觀顯示樣式，起到美化作用。

二、css樣式規則

格式：

​ 選擇器{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;}

程式碼結構特點：
  • 選擇器區分大小寫，屬性和值不區分大小寫。
  • 多個屬性間用英文分號（;）隔開
  • 若屬性由多個單片語成且包含空格，則加上英文狀態下引號
  • css註釋快捷鍵操作相同（/**/)
  • css程式碼中空格不被解析

三、引入css方法

1、行內式（內聯樣式）

通過標記style屬性來設定元素的樣式

格式：<標記名 style="屬性1:屬性值1; 屬性2:屬性值2; "> 內容</標記名>

例：

<p style="color:red;font-size:10px;">哈哈哈</p>

2、內嵌式

將css程式碼集中寫在html的文件的頭部標記中，用包起來。

格式：

<head>

<styletype="text/css">

 選擇器 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;}

</style>

</head>

注：

3、鏈入式

新建一個**.css**檔案內含所有樣式，通過標記將外部樣式錶連結到HTML文件中。

格式：

<head>

<link href="CSS檔案的路徑" type="text/css" rel="stylesheet" />

</head>

屬性：

  • href：定義外部樣式表檔案的URL，可以是相對路徑，也可以是絕對路徑（推薦相對）
  • type：定義引入的文件型別，這裡指定為“text/css”，表示引入的外部檔案為css樣式表
  • rel：定義當前文件與引入文件的關係，這裡指定為"stylesheet",表示引入文件是為樣式表檔案。

四、css基礎選擇器

1、標記選擇器（p、div、h1）

**格式：**標記名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

例：

p{font-size:12px; color:red; font-family:"微軟雅黑";}

2、類選擇器

格式：.類名{屬性1：屬性值1；屬性2：屬性值2；} （class=“類名”）

例：

在html中：

<p class="hhh">哈哈哈</p>

在css中：

.hhh{color：red;font-size：12px;}

**注：**可以為元素物件定義單獨或相同的樣式

3、id選擇器

格式： #id名{屬性1:屬性值1;屬性2:屬性值2;} （id=“id名”）

例：

在html中：

<p id="hhh">哈哈哈</p>

在css中：

#hhh{color：red;font-size:12px;}

**注：**元素的id值是唯一的，只能對應文件中某一個具體的元素

4、萬用字元選擇器

格式：*{屬性1:屬性值1;屬性2:屬性值2;}

例：

*{margin: 0;  /* 定義外邊距*/  padding: 0;  /* 定義內邊距*/}

注：“*”是所有選擇器中作用範圍最廣的，能匹配頁面中的所有元素，可使用萬用字元選擇器標記預設邊距。

5、標籤指定選擇器

又稱交集選擇器，由兩個選擇器構成，其中第一個為標記選擇器，第二個為class選擇器或id選擇器，兩個選擇器之間不能有空格。

例：

h3.my{color:red;}

或

h3#one{color:red;}

6、後代選擇器

用來選擇元素或元素組的後代，寫法是把外層標記寫在前面，內層標記寫在後面，中間用空格分隔。當標記發生巢狀時，內層標記就成為外層標記的後代。

例：

<p> <em>我愛睡覺</em> </p>

<h1> <em>我不愛睡覺</em> </h1>

在css中：

p em{color:red;}

**注：**兩個標記間的空格不要漏

7、並集選擇器

並集選擇器是各個選擇器通過逗號連線而成，任何形式的選擇器（包括標記選擇器、class選擇器、id選擇器等），都可以作為並集選擇器的一部分。如果某些選擇器定義的樣式完全相同，或部分相同，即可以利用並集選擇器為他們定義相同的css樣式。

例：

<p>豬豬俠</p>
<h1 class="cat">加菲貓</h1>
<div id="baby">花園寶寶</div>

css裡：

p .cat #baby{color:red;}

8、屬性選擇器

  • E[att^=value]屬性選擇器
  • E[att$=value]屬性選擇器
  • E[att*=value]屬性選擇器

9、關係選擇器

  • 子代選擇器（>)：選擇某個元素的第一級子元素，如h1>strong
  • 兄弟選擇器(+、~)：
    1. 臨近兄弟選擇器：該選擇器使用加號“+”來連結前後兩個選擇器。選擇器中的兩個元素有同一個父親，而且第二個元素必須緊跟第一個元素。
    2. 普通兄弟選擇器：普通兄弟選擇器使用
      “~”來連結前後兩個選擇器。選擇器中的兩個元素有同一個父親，但第二個元素不必緊跟第一個元素。

10、結構化偽類選擇器

  1. :root選擇器
  2. :not選擇器
  3. :only-child選擇器
  4. :first-child和:last-child選擇器
  5. :nth-child(n)和:nth-last-child(n)選擇器
  6. :nth-of-type(n)和:nth-last-of-type(n)選擇器
  7. :empty選擇器
  8. :target選擇器

11、偽元素選擇器

  1. :before選擇器
  2. ​
  3. :after選擇器

12、連結偽類

五、css的優先順序

權重

  • 繼承樣式的權重為0
  • 標記選擇器的權重為1
  • 類選擇器的權重為10
  • id選擇器的權重為100
  • 行內樣式的權重極大、非常大。
  • ！important更大，最大。是最大的優先順序。
.hhh{color:red !important;color:green;}

六、css文字樣式屬性

字型樣式屬性

1、font-size：字號大小（單位：em、px、in、cm、mm、pt）

2、font-family：字型（宋體、微軟雅黑）

3、font-weight:字型粗細（normal、bold、bolder、lighter、100-900）

4、font-style:字型風格斜體（normal、italic斜體常用、oblipue傾斜）

5、font:綜合設定字型樣式

格式：選擇器{font: font-style font-variant font-weight/line-height font-family;}

6、@font-face屬性：未安裝字型時，使用喜歡的字型

格式：@font-face{ font-family:字型名稱; src:字型路徑; }

7、word-wrap屬性：長單詞和URL地址的自動換行

格式：選擇器{word-wrap:屬性值;}（屬性值：normal（單詞）、break-word（URL地址））

文字外觀屬性

1、color:文字顏色（red、#FF0000、rgb（255,0,0））

2、letter-spacing:字間距（預設normal，可以為負值，不同單位）

3、word-spacing:單詞間距（對中文字元無效，定義英文單詞間的間距）

4、line-height:行間距，也成為行高（畫素px、相對值em、百分比%）

5、text-transform:文字轉換，控制英文字元大小寫（none、capitalize首字母大寫、uppercase全部大寫、lowercase全部小寫）

6、text-decoration:文字裝飾（none、underline下劃線、overline上劃線、line-through刪除線）

7、text-align:水平對齊方式相當於html中的align（left、right、center）

8、text-indent:首行縮排（em、%、負數）

9、white-space:空白符處

•normal：常規，文字中的空格、空行無效，滿行（到達區域邊界）後自動換行。

•pre：預格式化，按文件的書寫格式保留空格、空行原樣顯示。

•nowrap：空格空行無效，強制文字不能換行，除非遇到換行標記
內容超出元素的邊界也不換行，若超出瀏覽器頁面則會自動增加滾動條。

10、text-shadow:陰影效果

格式：選擇器{text-shadow:h-shadow v-shadow blur color;}

h-shadow用於設定水平陰影的距離，v-shadow用於設定垂直陰影的距離，blur用於設定模糊半徑，color用於設定陰影顏色。

11、text-overflow: 標示物件內溢位文字

格式：選擇器{text-overflow:屬性值;}

•clip：修剪溢位文字，不顯示省略標記“…”。

•ellipsis：用省略標記“…”標示被修剪文字，省略標記插入的位置是最後一個字元。

在這裡插入圖片描述

相關文章