博客園美化之旅第一天（CSS圖層關係，背景相關設置，字體相關設置）

来源:https://www.cnblogs.com/pythonywy/archive/2019/05/17/10884025.html
-Advertisement-
Play Games

博客園美化之旅第一天 1.修改後的效果圖 2.修改中間學習到的 一.圖層樣式的關係 引用， 個人總結越具體的描述樣式所在的位置優先順序別越高，外層優先於內層， . 二.樣式設置 關於背景圖片設置 三.其他字體設置 以上為個人理解，我自己學的有些地方理解不到位大神看到了留言說下哈，謝謝`` ...


博客園美化之旅第一天

1.修改後的效果圖

2.修改中間學習到的

一.圖層樣式的關係

引用https://www.cnblogs.com/cs_net/articles/1930810.html，

個人總結越具體的描述樣式所在的位置優先順序別越高，外層優先於內層，#>.

如果同個元素有兩個或以上衝突的CSS規則，瀏覽器有一些基本的規則來決定哪一個非常特殊而勝出。
它可能不像其它那麼重要，大部分案例你不需要擔心衝突，但大型而且複雜的CSS文件，或有很多CSS文件組成的，可能產生衝突。
選擇器一樣的情況下後面的會覆蓋前面的屬性。比如：

p { color: red; }
p { color: blue; }
 
 
p元素的元素將是藍色，因為遵循後面的規則。
然而，你不可能經常用相同的選擇器衝突達到目的，當你使用嵌套選擇器，合理的衝突來了。比如：


div p { color: red; }
p { color: blue; }
 
也許你看起來p元素在div元素裡面的顏色是藍色，就像後面p元素的規則，但是第一個選擇器的特性卻是紅色。基本上，一個選擇器越多特性，樣式衝突的時候將顯示它的樣式。
一組嵌套選擇器的實際特性可以計算出來。基本的，使用ID選擇器的值是100，使用class選擇器的值是10，每個html選擇器的值是1。它們加起來就可以計算出特性的值。

p的特性是1（一個html選擇器）
div p的特性是2（兩個html選擇器）
.tree的特性是10（1個class選擇器）
div p.tree的特性是1+1+10=12，（兩個html選擇器，一個class選擇器）
#baobab的特性是100（1個ID選擇器）
body #content .alternative p的特性是112（兩個html選擇器，一個ID選擇器，一個類選擇器）
按照上面的規則，div p.tree的特性比div p高，body #content .alternative p又比它們兩個都高。

css優先順序的四大原則：寫點我自己的總結：

原則一： 繼承不如指定

如果某樣式是繼承來的永遠不如具體指定的優先順序高。

例子1：

CODE:

<style type=”text/css”>

<!–

*{font-size:20px}

.class3{ font-size: 12px; }

–>

</style>

<span class=”class3″>我是多大字型大小？</span>

運行結果：.class3{ font-size: 12px; }

例子2：

CODE:

<style type=”text/css”>

<!–

#id1 #id2{font-size:20px}

.class3{font-size:12px}

–>

</style>

<div id=”id1″ class=”class1″>

<p id=”id2″ class=”class2″> <span id=”id3″ class=”class3″>我是多大字型大小？</span> </p>

</div>

運行結果：.class3{ font-size: 12px; }

註意：後面的幾大原則都是建立在“指定”的基礎上的。

原則二： #ID >.class >標簽選擇符

例子：

CODE:

<style type=”text/css”>

<!–

#id3 { font-size: 25px; }

.class3{ font-size: 18px; }

span{font-size:12px}

–>

</style>

<span id=”id3″ class=”class3″>我是多大字型大小？</span>

運行結果：#id3 { font-size: 25px; }

原則三：越具體越強大。

解釋：當對某個元素的CSS選擇符樣式定義的越具體，層級越明確，該定義的優先順序就越高。

CODE:

<style type=”text/css”>

<!–

.class1 .class2 .class3{font-size: 25px;}

.class2 .class3{font-size:18px}

.class3 { font-size: 12px; }

–>

</style>

<div class=”class1″>

<p class=”class2″> <span class=”class3″>我是多大字型大小？</span> </p>

</div>

運行結果：.class1 .class2 .class3{font-size: 25px;}

原則四：標簽#id >#id ; 標簽.class >.class

上面這條原則大家應該也都知道，看例子

CODE:

<style type=”text/css”>

<!–

span#id3{font-size:18px}

#id3{font-size:12px}

span.class3{font-size:18px}

.class3{font-size:12px}

–>

</style>

<span id=”id3″>我是多大字型大小？</span>

<span class=”class3″>我是多大字型大小？</span>

運行結果：span#id3{font-size:18px} | span.class3{font-size:18px}

很多人會有這樣的疑問，為什麼不把這個原則四歸入原則一形成：

【 標簽#ID >#ID >標簽.class >.class >標簽選擇符 >通配符 】 呢？或者將 “標簽.class” 看作多更為具體的 “.class” 從而歸入原則二呢？後面我將解答各位的疑惑，這就涉及到CSS的解析規律———這四大原則間也是有優先順序的，是不是有些糊塗了？別急，繼續 看。

*四大原則的權重

相信很多人都知道上面的四大原則，不要以為知道了這四大原則就能分辨css中那條代碼是起作用的，不信？那你5秒內能肯定的知道下麵這段代碼，測試中的文字的字型大小嗎？

CODE:

<style type=”text/css”>

<!–

.class1 p#id2 .class3{font-size:25px}

div .class2 span#id3{font-size:18px}

#id1 .class3{font-size:14px}

.class1 #id2 .class3{font-size:12px}

#id1 #id2{font-size:10px}

–>

</style>

<div id=”id1″ class=”class1″>

<p id=”id2″ class=”class2″> <span id=”id3″ class=”class3″>我是多大字型大小？</span> </p>

</div>

為了大家方便閱讀，我去掉了一些代碼。

四大原則的權重就是: 原則一 >原則二 >原則三 >原則四

解釋：

首先遵循原則一

有指定開始使用下麵的原則，無指定則繼承離他最近的定義。

然後開始原則二

1、比較最高優先順序的選擇符

例子：

CODE:

<style type=”text/css”>

<!–

#id3{font-size:18px}

.class1 .class2 .class3{font-size:12px} /* 描述的再具體也不起作用 — 原則二 */

.class3{font-size:18px}

div p span{font-size:12px}

–>

</style>

<div id=”id1″ class=”class1″>

<p id=”id2″ class=”class2″> <span id=”id3″ class=”class3″>我是多大字型大小？</span> </p>

</div>

運行結果：#id3{font-size:18px}

刪掉上面CSS中的前兩行可以得出，如果沒有最高級別的#ID會尋找.class 即使後面的CSS按照“原則二” 描述的再具體也無法突破原則一。

2、如果兩條CSS的如果最高選擇符優先順序一樣，則比較他們的數量

例子：

CODE:

<style type=”text/css”>

<!–

.class1 #id3{font-size:12px}

.class1 .class2 #id3{font-size:14px}

–>

</style>

<div id=”id1″ class=”class1″>

<p id=”id2″ class=”class2″> <span id=”id3″ class=”class3″>我是多大字型大小？</span> </p>

</div>

運行結果:.class1 .class2 #id3{font-size:14px}

3、如果最高選擇符級別和數量都一樣，則按照原則二比較他們下一級，以此類推。

例子1：

CODE:

<style type=”text/css”>

<!–

#id1 .class2 .class3{font-size:14px}

div .class2 #id3{font-size:12px}

–>

</style>

<div id=”id1″ class=”class1″>

<p id=”id2″ class=”class2″> <span id=”id3″ class=”class3″>我是多大字型大小？</span> </p>

[color=Orange]

運行結果:#id1 .class2 .class3{font-size:14px}

[/color]

*最高級選擇符的位置沒有高下之分，論證：[code]CODE:

<style type=”text/css”>

<!–

#id1 .class2 .class3{font-size:18px}

.class1 #id2 .class3{font-size:14px}

.class1 .class2 #id3{font-size:12px}

–>

</style>

<div id=”id1″ class=”class1″>

<p id=”id2″ class=”class2″> <span id=”id3″ class=”class3″>我是多大字型大小？</span> </p>

</div>

上例中更換3條CSS的先後可以得出，哪條位於最後，哪條起作用。說明他們的級別一樣，後面的將覆蓋前面的。

*將原則四歸入原則二的不合理性，論證：

CODE:

<style type=”text/css”>

<!–

.class1 span#id3{font-size:14px}

#id1 .class2 .class3{font-size:12px}

–>

</style>

<div id=”id1″ class=”class1″>

<p id=”id2″ class=”class2″> <span id=”id3″ class=”class3″>我是多大字型大小？</span> </p>

</div>

#id1 .class2 .class3{font-size:12px}

可以看到span#id3並不比#id1高出一個級別。

無結果開始原則三

如果比較結果，選擇符從最高級開始都對應，級別上的數量也相同，則開始比較誰更具體。

例子：

CODE:

<style type=”text/css”>

<!–

#id1 .class2 span{font-size:14px}

.class1 #id3{font-size:12px}

–>

</style>

<div id=”id1″ class=”class1″>

<p id=”id2″ class=”class2″> <span id=”id3″ class=”class3″>我是多大字型大小？</span> </p>

</div>

#id1 .class2 span{font-size:14px}

當然也可以理解為在原則二層層比較中“少一個層級的樣式”，缺少的那個層級沒有“層級較多的樣式”多出的那個層級的級別高。（繞口令）

*將原則四歸入原則三的不合理性，論證：

CODE:

<style type=”text/css”>

<!–

.class2 .class3{font-size:14px}

span.class3{font-size:12px}

–>

</style>

<div id=”id1″ class=”class1″>

<p id=”id2″ class=”class2″> <span id=”id3″ class=”class3″>我是多大字型大小？</span> </p>

</div>

上例中可以看出，如果將原則四併入原則三，將span.class3看作兩層，那麼應該和.class2 .class3層級一樣多，那麼應該顯示12px,而事實不是這樣。

最終對決原則四

如果還分不出結果，則開始原則四的比較：

例子1：

CODE:

<style type=”text/css”>

<!–

.class1 p.class2 .class3{font-size:14px}

.class1 .class2 .class3{font-size:12px}

–>

</style>

<div id=”id1″ class=”class1″>

<p id=”id2″ class=”class2″> <span id=”id3″ class=”class3″>我是多大字型大小？</span> </p>

</div>

.class1 p.class2 .class3{font-size:14px}

 

先看是否描述到該元素，再看最高級別的等級和數量（#id>class，html#id>#id），同級級別&數量一致時，再看下一級屬性。

二.樣式設置

關於背景圖片設置

background-color 背景顏色
background-image 背景圖片
background-repeat 背景重覆
background-attachment 背景圖片是固定還是滾動
background-position 背景圖片的定位
只設置顏色
div{background:#000} 
設置圖片為背景
div{background:url(圖片路徑)}
background-repeat:no-repeat 設置背景圖片是否重覆平鋪
background-position:left top 設置圖片的css背景定位，left代表靠左，top代表靠上
橫向居中：
background:url(圖片地址) no-repeat center top
縱向居中：
background:url(圖片地址) no-repeat left 50%
這裡50%是隨意設置考上為50%距離，細節具體上下垂直居中需要再通過百分比均衡設置
背景圖片橫向平鋪
body{background:url(xxx) repeat-x}
背景圖片縱向平鋪
background:url(xxx) repeat-y}
全屏頁背景圖片
body{
    background:url(xxx)；
    background-size:100% 100%;
}

三.其他字體設置

ont-weight: bold; 字體變圓滑
text-shadow: 2px 2px 3px #222222; 字體凸出來，後面吐出來那一部分顏色
border-radius: 6px 6px 6px 6px; 4個角彎曲
margin: 有4個值順序為上右下左，調整間距
padding: 0px 0px 0px 0px; 與背景之間的距離 這是我理解哈哈
假設字體設置了背景
height 與width表示背景的寬度和高

`以上為個人理解，我自己學的有些地方理解不到位大神看到了留言說下哈，謝謝


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

-Advertisement-
Play Games
更多相關文章
  • MT6739,MT6762 MTK Browser打開網頁預載入時，界面閃屏
    MT6762刪除掉MTK Webview後,在使用MTK Browser時，打開Browser，在網頁沒有載入出來時，界面出現閃屏現象。 問題原因: 首先browser會申請一個bufferqueue（包含3塊buffer），從pvrtrace看，第0幀的時候APP有畫一個白色背景（如 下），其中一 ...
  • 華為麒麟985已在台積電成功試產：7nm Plus工藝、集成4G基帶
    據最新報道，麒麟985晶元已經成功試產，將在三季度大規模量產。 目前5G手機的實現均通過外掛基帶的方式，雖然高通本季度將流片首款集成5G基帶的驍龍SoC（驍龍865？），但這顆處理器需要等到明年上半年才能商用。 從最新的動態來看，華為也在加快推出內建5G基帶SoC的節奏。 據報道，Mate 30搭載 ...
  • 進度條
    ProgressBar是一個進度條控制項，一般在需要做某個比較耗時的操作的時候，向用戶展示執行進度，以免用戶以為已經失去響應。 常用屬性： style 設置進度條的樣式 visible 是否顯示進度條 1、圓形進度條 一個圓形進度條，不斷旋轉。 常用樣式：Widget.ProgressBar.Smal ...
  • 使用預定義的action值啟動系統應用
    q ...
  • 獲取第三方軟體的包名、入口Activity的類名
    q ...
  • Intent實現界面跳轉、程式跳轉
    一個程式往往由多個界面組成，界面之間的跳轉，實質是Activity之間的跳轉。 從當前程式跳轉到其它程式，實質是啟動了目標程式的入口Activity。 Intent被稱為意圖，常用於組件之間的交互，可用於啟動其它組件、程式，並可以在組件之間傳遞數據。 1、顯式意圖 直接指定要啟動的目標組件 方式一： ...
  • Vue中v-on的指令以及一些其他指令
    1.v-on的基本使用 我們在的的時侯v-on是可以縮寫成@的，例如上邊的可以縮寫成:@:chick="btn"。 在Vue中，其他的事件都可以用v-on綁定 2.事件修飾符 在事件處理程式中調用 event.preventDefault() 或 event.stopPropagation() 是非 ...
  • html/css實現聊天佈局
    效果圖 項目結構 html代碼 css ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類