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
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...