前端網頁學習(html)

DAY45

今日內容:

css三種引入方式

長度及顏色單位

字型樣式

文字樣式

背景樣式

css選擇器

• css三種引入方式

• 行間式

  1. 在標籤頭部的style屬性內
  2. 屬性值滿足的是css語法
  3. 屬性值用key:value形式賦值,value具有單位
  4. 屬性值之間 ; 隔開

  例:

• 內聯式

  1. 在style標籤內(style標籤一般作為head的子標籤)
  2. 屬性值滿足的是css語法
  3. 屬性值用 key:value 形式賦值,value具有單位
  4. 屬性值之間用 ; 隔開(一般獨行分開賦值)
  5. 格式: 選擇器{樣式塊}

  例:

• 外聯式

  1. 在外部css檔案
  2. 屬性值滿足的是css語法
  3. 屬性值用key : value 形式賦值,value具有單位
  4. 屬性值之間用 ; 隔開(一般獨行分開賦值)
  5. 格式: 選擇器{樣式塊}
  6. 將html與css檔案建立聯絡:通過link標籤連結外部css(一般在head中連結)

​ 例: <link rel=“stylesheet” type=“text/css” href=“1.css”

​ 1.css檔案:

​ div{ ​ width: 200px; ​ height: 200px; ​ background-color: brown; ​ }

css三種引入方式優先順序

三種方式之間沒有優先順序

1. 三種方式協同佈局
2. 不重複的屬性一定唯一值
3. 重複的屬性採用覆蓋賦值,保留最後位置的屬性值
4. 行間式一定是邏輯上最後被解析的位置
5. !important會影響優先順序

• 長度及顏色單位

長度單位

px :畫素,螢幕上顯示最小單位,用於網頁設計

in : 英寸

pt : 點,標準長度單位,1pt=1/72in

mm: 毫米

cm : 釐米

em : 相當長度, 通常 1em = 16px ,常用與流式佈局

vw : viwe width

vh : viwe width

顏色單位

rgb() : 三個值可為[0-255]數值或百分比,以逗號分隔

rgba() : 前三個值可為畫素或是百分比,最後一個為[0,1]數值設定透明度

hsl() : 第一個值為[0,360]數值,後兩個值可為百分比, 用逗號分隔

hsla() : 第一個值為[0,360]數值,中間二個值可為百分比,最後一個為[0, 1]數值,以逗號相隔

#AABBCC : 留個十六進位制位,每兩位一個整體 ,分別代表Red, Green,Blue,可以簡寫為#abc

• 字型樣式

font-size:100px; 字型大小

font_weight: 100; 字型重量 : bold mormal(預設) lighter 範圍100~900

line-height: 200px; 字型行高:設定需要大於等於字型大小,字型在行高中垂直居中顯示

font-style: normal; 字型樣式

font-family: “楷體”, “黑體” ; 字型族科:多值用於備用,當楷體不存在,或不起作用,在選取黑體

font: lighter 50mm/50mm “楷體”; css語法: 空格隔開為多個值賦值,隔開為一個值多值賦值;

• 文字樣式

color: red; 文字顏色

text-align: center; 橫向排列

text-decoration: none; 字劃線: underline line-through overline none

letter-spacing: 3px; 字間距

word-spacing: 10px; 詞間距

word-break: break-all; 自動換行 normal預設換行規則 break-all 允許在單詞內換行

text-indent : 2em; 縮排

• 背景樣式

backgroud-color: red; 背景顏色

background-image: url(“image/01.gif”); 背景圖片

backgroud-repeat: no-repeat 平鋪:是否重複repeat | no-repeat | repeat-x | repeat-y

backgroud-position: 10px top; 定位:第一個值控制水平位置,第二個值控制垂直位置(預設center)

backgroud-attachment: fixed 滾動模式:定位相關的涉及到滾動時的效果(scroll 預設)

background: url(“image/01.gif”); 10px top no-repeat green ; 整體設定

• css選擇器(基礎選擇器)

基礎選擇器

• 通配選擇器(*): 匹配所有(html,body,body中的所有子標籤)

  *{
  	border: solid;
  }
  

• 標籤選擇器(標籤名):匹配指定標籤名的對應的所有標籤

  div{
      width: 100px;
      height: 100px;
      background-color: red;
  }
  section{
      width: 200px;
      height: 200px;
      background-color: yellow;
  }
  

• 類選擇器(.): 匹配指定類名對應的所有標籤

  .dd{
  	font-size: 50px;
  }
  

• id選擇器(#): 指定id名對應的唯一標籤

  #ele{
  	color:blue;
  }
  

總結:

通配選擇器一般用於整體reset操作(清除系統自定義樣式)

標籤與id選擇器運用場景並不多,一般不提倡採用id選擇器進行佈局

類選擇器為佈局首選(建議基本全用class選擇器進行佈局)

基本選擇器優先順序:id > class > 標籤 > 通配

以上為本次學習內容