CSS基礎（基於黑馬程式員視頻的學習筆記）

来源:https://www.cnblogs.com/ruchu045/archive/2022/09/28/16736573.html
-Advertisement-
Play Games

一、CSS選擇器 1、標簽選擇器 選中所有的該標簽 標簽名 { CSS屬性名:屬性值;} 2、類選擇器 .類名 { CSS屬性名:屬性值;} 所有標簽都有class屬性，class屬性的屬性值稱為類名 類名可以由數字、字母、下劃線、中劃線組成，但不能以數字或中劃線開頭 一個標簽可以有多個類名，類名之 ...


一、CSS選擇器

1、標簽選擇器

  • 選中所有的該標簽

標簽名 {
    CSS屬性名:屬性值;
}

2、類選擇器

.類名 {
    CSS屬性名:屬性值;
}

  • 所有標簽都有class屬性，class屬性的屬性值稱為類名

  • 類名可以由數字、字母、下劃線、中劃線組成，但不能以數字或中劃線開頭

  • 一個標簽可以有多個類名，類名之間以空格隔開

  • 類名可以重覆，一個類選擇器可以選中多個標簽

3、id選擇器

#id {
    CSS屬性名:屬性值;
}

  • 所有標簽都有id屬性

  • id屬性在一個頁面中不可重覆

  • 一個標簽只能有一個id

  • 一個id選擇器只能選中一個標簽

4、通配符選擇器

* {
    CSS屬性名:屬性值;
}

選中所有標簽

如果給同一個標簽設置了相同的屬性，此時樣式會重疊，寫在下麵的會生效

p {
    color:red;
    color:blue;
}
/* p標簽會顯示為藍色 */

5、後代選擇器

選擇器1 選擇器2 {CSS}（有空格）

後代包括：孩子，孫子，重孫。。。

6、子代選擇器

只包括孩子一代

選擇器1>選擇器2 {CSS}

7、並集選擇器

選擇器1,選擇器2{CSS}

並集選擇器中的每組選擇器可以是基礎選擇器或者複合選擇器

8、交集選擇器

選擇器1選擇器2{CSS}（無空格）

如：p標簽且class="box"

p.box{CSS}

9、hover偽類選擇器

選擇器:hover{CSS}

偽類選擇器選中的元素的某種狀態，任何標簽都可以添加偽類

 

二、字體和文本樣式

1、字體樣式

預設字型大小是16

font-size：字體大小

font-weight：字體粗細

font-style：字體樣式

font-family：字體

font-family:微軟雅黑,黑體,sans-serif;
/* 表示如果用戶電腦沒有安裝微軟雅黑，則按黑體顯示，若沒有安裝黑體，則按任意一種非襯線字體顯示 */

font複合屬性：font:style weight size/line-through family;

只能省略前兩個屬性，相當於設置了預設值

 

2、文本樣式

縮進：

text-indent:xxpx/xem;

em：一個字的大小

 

水平對齊：

text-align:left/center/right;

讓文本、span、a、input、img水平居中，text-align需要給以上標簽的父級標簽

標簽居中總結：margin:0 auto

 

文本修飾：

text-decoration:underline/line-through/overline/none;

underline：下劃線，line-through：刪除線，overline：上劃線，none：無裝飾線

 

行高：

line-height:xxpx/font-size的倍數; 註意：行高=上間距+文本高度+下間距

使用font:style weight size/line-through family;時，註意覆蓋問題

 

三、背景

1、背景顏色 | 圖

background-color：可以設置顏色/十六進位/rgb(a)

background-image:url(圖片路徑)

 

2、背景平鋪

background-repeat屬性

repeat：預設，水平和垂直方向都平鋪

no-repeat：不平鋪

repeat-x：沿x軸平鋪

repeat-y：沿y軸平鋪

 

3、背景位置

background-position:水平方向位置 垂直方向位置;

水平：left center right

垂直：top center bottom

或者均採用px移動，（以父容器左上角為原點）正數向右向下移動，負數向左向上移動

 

4、複合屬性（不要求順序）

推薦寫法：background:color image repeat position

 

四、元素顯示模式

1、塊級元素

div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer...

可以設置寬高，獨占一行

 

2、行內元素

a、span、b、u、i、s、strong、ins、em、del...

不可以設置寬高，一行可以顯示多個

 

3、行內塊元素

input、textarea、button、select...

特殊情況：img標簽有行內塊特點，但是Chrome調試工具中是inline

一行可以顯示多個，可以設置寬高

 

4、元素顯示模式轉換

display:block：轉換成塊級元素

display:inline-block：轉成行內塊元素

display:inline：轉成行內元素

 

TIPS：標簽嵌套註意點

1、塊級元素一般作為大容器，可以嵌套：文本、塊級元素、行內元素、行內塊元素等等......

但是p標簽中不要嵌套div、p、h等塊元素

2、a標簽內部可以嵌套任意元素，但不能嵌套a標簽

 

五、CSS特性

1、繼承性

子元素預設繼承有父元素樣式的特點

常見的可繼承屬性：color、font-style、font-weight、font-size、font-family、text-align、text-indent、line-height...

（控制文字的屬性都能繼承，反之）

繼承失敗的情況：a標簽的color、h系列標簽的font-size

 

2、層疊性

註意：當樣式衝突時，當選擇器優先順序相同時，才能通過層疊性判斷結果

 

3、優先順序

繼承 < 通配符選擇器 < 標簽選擇器 < 類選擇器 < id選擇器 < 行內樣式 < !important

!important寫在屬性值的後面，分號的前面，且不能提升繼承的優先順序

如：

div{
    color:green !important;
}

如果優先順序相同，則按行內、id、類、標簽的順序比較選擇器個數，個數多的優先順序高

 

六、盒子模型

CSS規定每個盒子由內容區域content、內邊距區域padding、邊框區域border、外邊距區域margin構成，這就是盒子模型

1、內容content

width、height預設設置盒子內容大小

 

2、邊框border

border:10px solid red （不分先後順序）

分別表示邊框方向，邊框粗細，邊框線類型，邊框顏色 solid實線、dashed虛線、dotted點線

也可以使用單獨屬性：border-方位詞/width/style/color，但更常用符合屬性

 

3、內邊距padding

padding屬性可以當作符合屬性使用，最多可以取四個值，表示上右下左；兩個值表示上下 左右；三個值表示上 左右 下

盒子模型最終大小 = width/heigth + 2*border + 2*padding

給盒子設置屬性box-sizing:border-box;，瀏覽器會自動計算多餘大小，自動在內容中減去，無需計算border和padding給盒子大小造成的影響

 

4、外邊距margin

設置方式同padding

瀏覽器會給部分標簽預設設置margin和padding，但一般在項目開始時需要清楚預設樣式，所以需：

* {
    margin:0;
    padding:0;
}

 

外邊距問題

摺疊問題：

垂直佈局的塊級元素，上下的margin會合併（取最大值）

解決方案：只給設置一個元素margin

塌陷問題：

互相嵌套的塊級元素，子元素的margin-top會作用在父元素上，導致父元素一起往下移動

解決方案：給父級元素設置border-top或padding-top、給父級元素設置overflow:hiden、轉換成行內塊元素、設置浮動

行內元素的垂直內外邊距：

無法通過padding或margin改變行內標簽的位置

解決方法：加行高

 

七、浮動

1、結構偽類

E:first-child{} ：匹配父元素中第一個子元素，並且是E元素

E:last-child{} ：匹配父元素中最後一個子元素，並且是E元素

E:nth-child(n){} ：匹配父元素中第n個子元素，並且是E元素

E:nth-last-child(n){} ：匹配父元素中倒數第n個子元素，並且是E元素

註：n可以為0、1、2、3...或公式，如even（基數）、odd（偶數）、-n+5（找到前五個）、n+5（從第五個開始往後）

 

2、偽元素

一般頁面中的非主題元素可以使用偽元素，是由CSS（非HTML） 模擬出的標簽效果

::before：在父元素內容的最前面添加一個偽元素

::after：在父元素內容的最後面添加一個偽元素

偽元素必須設置content屬性才能生效，且預設是行內元素

/* 示例 */
div::before{}
div::after{}

 

常見標準流規則：

塊級元素：從上往下，垂直佈局，獨占一行

行內（塊）元素：從左往右，水平佈局，空間不夠自動拆行

 

3、浮動

瀏覽器解析行內（塊）元素時，如果代碼有換行，則會有間距

浮動早期用於圖文環繞，現在則用於網頁佈局

{
	float:left/right;
	
}

特點：

  • 浮動元素會脫離標準流，在標準流中不占據位置

  • 浮動元素會比標準流高半個級別，可以覆蓋標準流中的元素

  • 下一個浮動元素會在上一個浮動元素的左右浮動

  • 浮動後的標簽具有行內塊特點

  • 添加浮動後margin對水平效果的調整不生效，因為浮動更高級

 

4、清除浮動

如果子元素浮動，則此時不能撐開標準流的塊級父元素

方法：

  • 父元素添加高度

  • 額外標簽法：在父元素內容的最後添加一個塊級元素，並設置屬性clear:both（但會讓頁面html結構更複雜）

  • 單偽元素清除

.clearfix::after{
	content:'';
	display:block;
	clear:both;
	/* 以下是補充代碼，在網頁中看不到偽元素；在高版本瀏覽器無區別，主要是為了適配低版瀏覽器 */
	height:0;
	visibility:hidden;
}

  • 雙偽元素清除

/* before作用：解決外邊距塌陷 */
.clearfix::before,
.clearfix::after{
    content:'';
    dispaly:table;
}
.clearfix:after{
    clear:both;
}

  • 設置overflow:hidden

{
    overflow:hidden;
}

 

八、定位

1、使用定位

設置定位方式：

  • position：屬性名

  • static：靜態定位（沒用，不會改變位置）

  • relative：相對定位

  • absolute：絕對定位

  • fixed：固定定位

  • lr都有，以l為準，tb都有，以t為準

設置偏移值：

  • left、right、top、bottom

 

2、相對定位

position:relative

  • 占有原來的位置（不脫標）

  • 仍然具有原有標簽的顯示特點

  • 改變位置參照原位置

應用場景：

  • 配合絕對定位（子絕父相）

  • 用於小範圍的移動

 

3、絕對定位

position:absolute

  • 不占有原來的位置（脫標）

  • 改變標簽的顯示特點（變成行內塊特征）

  • 先找已定位的父級（大多採用相對，就近原則），若有就以這個父級為參照物進行定位；若無已定位的父級，以瀏覽器視窗為參照物進行定位

應用場景：

  • 子絕父相

 

3、居中

絕對定位的盒子無法使用margin:0 auto

  • 定位居中

/* 水平居中 */
position:absolute;
left:50%;
margin-left:-???px;   /*盒子寬度一半*/

/* 垂直居中 */
position:absolute;
top:50%;
margin-top:-???px;    /*盒子高度一半*/

  • 位移居中

/* 位移自己寬高的一半 */
transform:translate(-50%,-50%);

 

4、固定定位

position:fixed

  • 不占據原來位置（脫標）

  • 改變位置參考瀏覽器視窗

  • 具有行內塊特點

 

5、顯示層級

  • 預設情況下，定位的盒子後寫的居上

  • z-index：整數，取值越大，顯示順序越靠上，預設取值0

  • z-index必須配合定位才生效

 

6、裝飾

① vertical-align

  • baseline：預設，基線對齊

  • top：頂部對齊

  • middle：中間對齊

  • bottom：底部對齊

瀏覽器遇到行內和行內塊元素當作文字處理，預設按照基線對齊，可以通過vertical-align:middle居中，也可以display:block;處理

.father{
    width:600px;
    height:600px;
    line-height:600px;
    /* 水平居中 */
    text-align:center;
}

img{
    /* 垂直居中 */
    vertical-align:middle;
}

 

② 游標類型：

cursor

  • default：預設值，通常是箭頭

  • pointer：手，提示用戶可以點擊

  • text：工字型，提示用戶可以選擇文字

  • move：十字游標，提示用戶可以移動

 

③ 邊框圓角

border-radius:數字/百分比

  • 最大取值50%，即正圓

  • 從左上角開始賦值，然後順時針，沒有賦值看對角

 

常見應用：

  • 正圓

    • 盒子必須是正方形

    • 設置border-radius:50%

  • 膠囊按鈕

    • 盒子必須是長方形

    • 設置border-radius:盒子高度一半

 

④ 溢出部分顯示效果

overflow

  • visible：預設值，溢出部分可見

  • hidden：溢出部分隱藏

  • scroll：無論是否溢出，都顯示滾動條

  • 根據是否溢出，自動顯示或隱藏滾動條

 

⑤ 元素本身隱藏

  • visibility:hidden：占位隱藏

  • dispaly:none（常用）：不占位隱藏

 

⑥ 元素整體透明度（拓展）

opacity:0~1之間的數字

opacity會讓元素整體透明，包括其中的文字、圖片

 

九、項目樣式補充

1、精靈圖

項目中將多張小圖片合成一張大圖片，成為精靈圖

優點：減少伺服器發送次數，減輕伺服器壓力，提高頁面載入速度

  • 不能用img標簽引入精靈圖，會全部顯示

  • 精靈圖的標簽使用行內標簽：span、b、i...

/* 設置背景圖片和位置 */
background-image:url();
background-position:水平位置 垂直位置;

設置背景圖片大小background-size

  • ？？px

  • 百分比：相當於當前盒子自身的寬高百分比

  • contain：包含，等比縮放，直到不會超出盒子的最大

  • cover：覆蓋，等比縮放，直到剛好填滿整個盒子沒有空白

background連寫：background:color image repeat position/size;

 

2、盒子陰影

box-shadow

  • h-shadow：必須，水平偏移量，允許負值

  • v-shadow：必須，垂直偏移量，允許負值

  • blur：可選，模糊度

  • spread：可選，陰影擴大

  • color：可選，陰影顏色

  • inset：可選，將陰影改為內部陰影

  • 值都是px

 

3、過渡

transition

  • 過渡的屬性

    • all：所有能過渡的屬性都過渡

    • 具體屬性名:width：只有width過渡

  • 過渡的時長：？s

  • 預設狀態和hover狀態樣式不同，才能有過渡效果

  • transition屬性給需要過渡的元素本身加

  • transition給預設狀態設置，滑鼠移入移出都有效果

  • transition給hover狀態設置，移出沒有效果

/* 過渡配合hover使用，誰變化給誰加過度屬性 */
.box{
    width:200px;
    
    transition:width 1s background-color 2s;
    /* 若變化的屬性多，直接寫all
       transition:all 2s;
    */
}

.box:hover{
    width:600px;
    
}

 

4、SEO

SEO（Search Engine Optimization）：搜索引擎優化，讓網站在搜索引擎排名靠前

提升SEO常見方法：

  • 競價

  • 將網頁製作成html尾碼

  • 標簽語義化（在合適的地方使用合適的標簽）

  • ......

SEO三大標簽：

  • title：網頁標題標簽

  • description：網頁描述標簽

  • keywords：網頁關鍵字標簽

 

5、favicon

顯示在標簽頁左側的小圖標，習慣使用ico格式、

ico圖標設置：

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

 

6、項目結構搭建

  • 新建項目文件夾 xtx-pc-client，在VScode中打開

    • 在實際開發中，項目文件夾不建議使用中文

    • 所有項目相關文件都保存在xtx-pc-client目錄中

  • 複製favicon.ico到xtx-pc-client目錄

    • 一般習慣將ico圖標放在項目根目錄

  • 複製 images和uploads目錄到xtx-pc-client目錄中

    • images ：存放網站固定使用的圖片素材，如: logo、樣式修飾圖片...等

    • uploads：存放網站非固定使用的圖片素材，如:商品圖片、宣傳圖...等

  • 新建index.html在根目錄

  • 新建 CSS文件夾保存網站的樣式，並新建以下CSS文件:

    • base.css：基礎公共樣式

    • common.css：該網站中多個網頁相同模塊的重覆樣式，如:頭部、底部

    • index.css：首頁樣式


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 晶體、分子結構軟體：CrystalMaker for Mac
    晶體結構軟體CrystalMaker for mac創建、顯示和操作各種晶體和分子結構 ，CrystalMaker Mac版便捷、靈活，能夠容易的載入結構數據並產生壯觀的，相片型的圖形，戴上紅/藍眼鏡，還可以感受立體三維畫面，親臨分子結構當中。 詳情：CrystalMaker for Mac(晶體結 ...
  • 電阻種類
    電阻種類很多，常用的有貼片電阻、插件電阻、熱敏電阻、壓敏電阻、光敏電阻、水泥電阻、可調電阻。 可調電阻在成品的PCBA中很少見，也大多用於電路調試中試用，等電路調試完成後再換成固定阻值的電阻，起到電路參數調節的作用。水泥電阻則在調試的時候會用到更多，當做假負載來使用。 這裡說下假負載，假負載並不是電 ...
  • MongoDB安裝使用教程
    準備工作 一臺Linux(Centos7為例)伺服器。 安裝Docker服務。 安裝並啟動SqlServer容器服務。 編寫Shell文件 給出一個備份的範例 #!/bin/bash #設置mssql備份目錄 folder=/var/opt/mssql/data/databack/ day=`dat ...
  • 大數據揭秘丨疫情影響下亞馬遜女性夾克的逆襲之旅
    風裡雨里，我在深圳機場等你，口說無憑，上圖！ 這是一段很長的故事！以前倒也不曾提過～ 銀河證券和騰訊雲資料庫長久以來並肩作戰，情比金堅，我們的故事日前在深圳寶安機場上映 他說：做好國產化分散式改造，就用騰訊雲資料庫。 我說：做國產資料庫，我是認真的。 誕生於2007年的騰訊雲資料庫現已歷經十四年的錘 ...
  • 如何實現資料庫讀一致性
    1 導讀 數據的一致性是數據準確的重要指標，那如何實現數據的一致性呢？本文從事務特性和事務級別的角度和大家一起學習如何實現數據的讀寫一致性。 2 一致性 1.數據的一致性：通常指關聯數據之間的邏輯關係是否正確和完整。 舉個例子：某系統實現讀寫分離，讀資料庫是寫資料庫的備份庫，小李在系統中之前錄入的學 ...
  • 記一次批量更新整型類型的列 → 探究 UPDATE 的使用細節
    開心一刻 今天，她給我打來電話 她：你明天陪我去趟醫院吧 我：怎麼了 她：我懷孕了，陪我去打胎 我：他的嗎 她：嗯 我心一沉，猶豫了片刻：生下來吧，我養！ 她：他的孩子，你不配養！ 我：我隨孩子姓 需求背景 最近接到一個數據遷移的需求，舊系統的數據遷移到新系統；舊系統不會再新增業務數據，業務操作都在 ...
  • Fragment的四種跳轉方式
    本文主要記錄了關於fragment的四種跳轉方式： 1、從同一個Activiy的一個Fragment跳轉到另外一個Fragment 2、從一個Activity的Fragment跳轉到另外一個Activity 3、從一個Activity跳轉到另外一個Activity的Fragment上4、從一個Act ...
  • Xcode Run Script 腳本
    在Xcode 項目執行：Run Script 時，則標識：${SYMROOT} . 更改括弧類型。 例如：BUILD 號自增，編譯完成後自動copy 某文件至目標文件夾等： cp -R ${BUILD_DIR}/${CONFIGURATION}-iphoneos/XXXX.bundle ${SRCR ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類