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;

文本spanainputimg水平居中,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-toppadding-top、給父級元素設置overflow:hiden、轉換成行內塊元素、設置浮動

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

無法通過paddingmargin改變行內標簽的位置

解決方法:加行高

 

七、浮動

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標簽引入精靈圖,會全部顯示

  • 精靈圖的標簽使用行內標簽:spanbi...

/* 設置背景圖片和位置 */
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給預設狀態設置,滑鼠移入移出都有效果

  • transitionhover狀態設置,移出沒有效果

/* 過渡配合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.icoxtx-pc-client目錄

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

  • 複製 imagesuploads目錄到xtx-pc-client目錄中

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

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

  • 新建index.html在根目錄

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

    • base.css:基礎公共樣式

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

    • index.css:首頁樣式


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

-Advertisement-
Play Games
更多相關文章
  • 晶體結構軟體CrystalMaker for mac創建、顯示和操作各種晶體和分子結構 ,CrystalMaker Mac版便捷、靈活,能夠容易的載入結構數據並產生壯觀的,相片型的圖形,戴上紅/藍眼鏡,還可以感受立體三維畫面,親臨分子結構當中。 詳情:CrystalMaker for Mac(晶體結 ...
  • 電阻種類很多,常用的有貼片電阻、插件電阻、熱敏電阻、壓敏電阻、光敏電阻、水泥電阻、可調電阻。 可調電阻在成品的PCBA中很少見,也大多用於電路調試中試用,等電路調試完成後再換成固定阻值的電阻,起到電路參數調節的作用。水泥電阻則在調試的時候會用到更多,當做假負載來使用。 這裡說下假負載,假負載並不是電 ...
  • 準備工作 一臺Linux(Centos7為例)伺服器。 安裝Docker服務。 安裝並啟動SqlServer容器服務。 編寫Shell文件 給出一個備份的範例 #!/bin/bash #設置mssql備份目錄 folder=/var/opt/mssql/data/databack/ day=`dat ...
  • 風裡雨里,我在深圳機場等你,口說無憑,上圖! 這是一段很長的故事!以前倒也不曾提過~ 銀河證券和騰訊雲資料庫長久以來並肩作戰,情比金堅,我們的故事日前在深圳寶安機場上映 他說:做好國產化分散式改造,就用騰訊雲資料庫。 我說:做國產資料庫,我是認真的。 誕生於2007年的騰訊雲資料庫現已歷經十四年的錘 ...
  • 1 導讀 數據的一致性是數據準確的重要指標,那如何實現數據的一致性呢?本文從事務特性和事務級別的角度和大家一起學習如何實現數據的讀寫一致性。 2 一致性 1.數據的一致性:通常指關聯數據之間的邏輯關係是否正確和完整。 舉個例子:某系統實現讀寫分離,讀資料庫是寫資料庫的備份庫,小李在系統中之前錄入的學 ...
  • 開心一刻 今天,她給我打來電話 她:你明天陪我去趟醫院吧 我:怎麼了 她:我懷孕了,陪我去打胎 我:他的嗎 她:嗯 我心一沉,猶豫了片刻:生下來吧,我養! 她:他的孩子,你不配養! 我:我隨孩子姓 需求背景 最近接到一個數據遷移的需求,舊系統的數據遷移到新系統;舊系統不會再新增業務數據,業務操作都在 ...
  • 本文主要記錄了關於fragment的四種跳轉方式: 1、從同一個Activiy的一個Fragment跳轉到另外一個Fragment 2、從一個Activity的Fragment跳轉到另外一個Activity 3、從一個Activity跳轉到另外一個Activity的Fragment上4、從一個Act ...
  • 在Xcode 項目執行:Run Script 時,則標識:${SYMROOT} . 更改括弧類型。 例如:BUILD 號自增,編譯完成後自動copy 某文件至目標文件夾等: cp -R ${BUILD_DIR}/${CONFIGURATION}-iphoneos/XXXX.bundle ${SRCR ...
一周排行
    -Advertisement-
    Play Games
  • 一個自定義WPF窗體的解決方案,借鑒了呂毅老師的WPF製作高性能的透明背景的異形視窗一文,併在此基礎上增加了滑鼠穿透的功能。可以使得透明窗體的滑鼠事件穿透到下層,在下層窗體中響應。 ...
  • 在C#中使用RabbitMQ做個簡單的發送郵件小項目 前言 好久沒有做項目了,這次做一個發送郵件的小項目。發郵件是一個比較耗時的操作,之前在我的個人博客裡面回覆評論和友鏈申請是會通過發送郵件來通知對方的,不過當時只是簡單的進行了非同步操作。 那麼這次來使用RabbitMQ去統一發送郵件,我的想法是通過 ...
  • 當你使用Edge等瀏覽器或系統軟體播放媒體時,Windows控制中心就會出現相應的媒體信息以及控制播放的功能,如圖。 SMTC (SystemMediaTransportControls) 是一個Windows App SDK (舊為UWP) 中提供的一個API,用於與系統媒體交互。接入SMTC的好 ...
  • 最近在微軟商店,官方上架了新款Win11風格的WPF版UI框架【WPF Gallery Preview 1.0.0.0】,這款應用引入了前沿的Fluent Design UI設計,為用戶帶來全新的視覺體驗。 ...
  • 1.簡單使用實例 1.1 添加log4net.dll的引用。 在NuGet程式包中搜索log4net並添加,此次我所用版本為2.0.17。如下圖: 1.2 添加配置文件 右鍵項目,添加新建項,搜索選擇應用程式配置文件,命名為log4net.config,步驟如下圖: 1.2.1 log4net.co ...
  • 之前也分享過 Swashbuckle.AspNetCore 的使用,不過版本比較老了,本次演示用的示例版本為 .net core 8.0,從安裝使用開始,到根據命名空間分組顯示,十分的有用 ...
  • 在 Visual Studio 中,至少可以創建三種不同類型的類庫: 類庫(.NET Framework) 類庫(.NET 標準) 類庫 (.NET Core) 雖然第一種是我們多年來一直在使用的,但一直感到困惑的一個主要問題是何時使用 .NET Standard 和 .NET Core 類庫類型。 ...
  • WPF的按鈕提供了Template模板,可以通過修改Template模板中的內容對按鈕的樣式進行自定義。結合資源字典,可以將自定義資源在xaml視窗、自定義控制項或者整個App當中調用 ...
  • 實現了一個支持長短按得按鈕組件,單擊可以觸發Click事件,長按可以觸發LongPressed事件,長按鬆開時觸發LongClick事件。還可以和自定義外觀相結合,實現自定義的按鈕外形。 ...
  • 一、WTM是什麼 WalkingTec.Mvvm框架(簡稱WTM)最早開發與2013年,基於Asp.net MVC3 和 最早的Entity Framework, 當初主要是為瞭解決公司內部開發效率低,代碼風格不統一的問題。2017年9月,將代碼移植到了.Net Core上,併進行了深度優化和重構, ...