技術標籤：筆記csshtmlhtml5前端

title: 前端學習筆記
date: 2020-12-13
tags:

• 前端
• 筆記

網頁分成三個部分：
結構(HTML)
表現(CSS)
行為(JavaScript)

css簡介與使用

1.內部樣式

將樣式編寫到head中的style標籤裡
然後通過CSS的選擇器來選中元素併為其設定各種樣式
可以同時為多個標籤設定樣式，並且修改時只需要修改一處即可全部應用

• 內部樣式表更加方便對樣式進行復用
• 缺點：
  我們的內部樣式表只能對一個網頁起作用，它裡邊的樣式不能跨頁面進行復用
  
  2.外部樣式表
  以將CSS樣式編寫到一個外部的CSS檔案中,
  然後通過link標籤來引入外部的CSS檔案
• 外部樣式表需要通過link標籤進行引入，
  意味著只要想使用這些樣式的網頁都可以對其進行引用
  使樣式可以在不同頁面之間進行復用
• 將樣式編寫到外部的CSS檔案中，可以使用到瀏覽器的快取機制，
  從而加快網頁的載入速度，提高使用者的體驗。
  

css的語法#

1.註釋：
/**/

2.基本語法：
選擇器 宣告塊

選擇器，通過選擇器可以選中頁面中的指定元素
比如 p 的作用就是選中頁面中所有的p元素

宣告塊，通過宣告塊來指定要為元素設定的樣式
宣告塊由一個一個的宣告組成
宣告是一個名值對結構
一個樣式名對應一個樣式值，名和值之間：以:連線 ，以;結尾

選擇器

1.常用選擇器

• 元素選擇器
  作用：根據標籤名來選中指定的元素
  

  語法：標籤名{}
  例子：p{} h1{} div{}

• id選擇器
  作用：給元素設定id屬性，根據元素的id屬性值選中一個元素
  語法：#id屬性值{}
  例子：#box{} #red{}
  
  

• 類選擇器
  作用：給元素設定，根據元素的class屬性值選中一組元素
  語法：.class屬性值
  好處：既可以給單一標籤設定樣式，也可以給一組標籤設定樣式
  
  

• 通配選擇器
  作用：選中頁面中的所有元素
  語法: *

2.複合選擇器

• 交集選擇器
  作用：選中同時複合多個條件的元素
  語法：選擇器1選擇器2選擇器3選擇器n{}
  注意點：交集選擇器中如果有元素選擇器，必須使用元素選擇器開頭
  

• 並集選擇器
  作用：同時選擇多個選擇器對應的元素，其中可以是交集選擇器
  

  語法：選擇器1,選擇器2,選擇器3,選擇器n{}
  例子： #b1,.p1,h1,span,div.red{}

• 關係選擇器
  介紹標籤關係：

父元素：直接包含子元素的元素叫做父元素
子元素：直接被父元素包含的元素是子元素
祖先元素：
1.直接或間接包含後代元素的元素叫做祖先元素
2.一個元素的父元素也是它的祖先元素
後代元素：
1.直接或間接被祖先元素包含的元素叫做後代元素
2.子元素也是後代元素
兄弟元素：擁有相同父元素的元素是兄弟元素

• 子元素選擇器
  作用：選中指定父元素的指定子元素
  語法：父元素 > 子元素
  
• 後代元素選擇器：
  作用：選中指定元素內的指定後代元素
  語法：祖先 後代
  
• 兄弟選擇器
  1.選擇下一個兄弟
  語法：前一個 + 下一個
  
  選擇緊貼著p的span的兄弟元素

2.選擇下邊所有的~符號後面標籤名的兄弟
語法：兄 ~ 弟

選擇p後面的所有的span兄弟元素