python 之 前端

来源:https://www.cnblogs.com/mylu/archive/2019/08/14/11355010.html
-Advertisement-
Play Games

11.38 css三大特性 11.39 字體屬性 1、font-weight：文字粗細(字重) 2、font-style：文字風格 3、font-size：文字大小 4、font-family：文字字體 註意： 1、設置的字體必須是用戶電腦里已經安裝的字體，瀏覽器會使用它可識別的第一個值。 2、如果 ...


11.38 css三大特性

11.381 繼承性
1、定義：給某一個元素設置一些屬性，該元素的後代也可以使用，這個我們就稱之為繼承性
​
2、註意：
    1、只有以color、font-、text-、line-開頭的屬性才可以繼承
    2、a標簽的文字顏色和下劃線是不能繼承別人的
    3、h標簽的文字大小是不能繼承別人的，會改變，但是會在原來字體大小的基礎上改變
    ps:打開瀏覽器審查元素可以看到一些inherited from...的屬性
3、應用場景：
    通常基於繼承性統一設置網頁的文字顏色，字體，文字大小等樣式
11.382 層疊性
定義：CSS全稱：Cascading StyleSheet層疊樣式表，層疊性指的就是CSS處理衝突的一種能力，即如果有多個選擇器選中了同一個標簽那麼會有覆蓋效果
​
註意：
1、層疊性只有在多個選擇器選中了同一個標簽，然後設置了相同的屬性，才會發生層疊性
11.383 優先順序
1、定義：當多個選擇器選中同一個標簽，並且給同一個標簽設置相同的屬性時，如何層疊就由優先順序來確定
2、優先順序
    整體優先順序從高到底：行內樣式>嵌入樣式>外部樣式
1、大前提：直接選中 > 間接選中(即繼承而來的)
2、如果都是間接選中，那麼離目標標簽比較近的優先順序高，就近原則
3、如果都是直接選中，並且都是同類型的選擇器，那麼寫在後面的優先順序高
4、如果都是直接選中，並且是不同類型的選擇器，那麼就會按照選擇器的優先順序來層疊
    #內聯>id > 類 > 標簽 > 通配符(也算直接選中) > 繼承 > 瀏覽器預設（即沒有設置任何屬性)
5、優先順序之!important 
!important方式來強制指定的屬性的優先順序提升為最高，但是不推薦使用。因為大量使用!important的代碼是無法維護的。
  註意：
    1、!important只能用於直接選中，不能用於間接選中
    2、!important只能用於提升被指定的屬性的優先順序，其他屬性的優先順序不會被提升
    3、!important必須寫在屬性值分號的前面

11.39 字體屬性

1、font-weight：文字粗細(字重)

normal  預設值，標準粗細
bord    粗體
border  更粗
lighter 更細
100~900 設置具體粗細，400等同於normal，而700等同於bold
inherit 繼承父元素字體的粗細值

2、font-style：文字風格

normal 正常，預設就是正常
 italic 傾斜

3、font-size：文字大小

一般是12px或13px或14px
註意：
1、通過font-size設置文字大小一定要帶單位，即一定要寫px
2、如果設置成inherit表示繼承父元素的字體大小值。

4、font-family：文字字體

font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif #按照順序依次選取用戶可用的字體
常見字體：
serif 襯線字體
sans-serif 非襯線字體
中文：宋體，微軟雅黑，黑體

註意： 1、設置的字體必須是用戶電腦里已經安裝的字體，瀏覽器會使用它可識別的第一個值。 2、如果取值為中文，需要用單或雙引號擴起來

5、文字屬性簡寫 

font-weight: bolder;
font-style: italic;
font-size: 50px;
font-family: 'serif','微軟雅黑';
簡寫為:
font: bolder italic 50px 'serif','微軟雅黑';

6、color：文字顏色

 格式描述
rgb color：rgb(255,0,0); 紅色：rgb(255,0,0) 綠色：rgb(0,255,0) 藍色：rgb(0,0,255) 黑色：rgb(0,0,0) # 所有都不亮 白色：rgb(255,255,255) # 所有都最亮 灰色：只要讓紅色/綠色/藍色的值都一樣就是灰色而且三個值越小越偏黑色越大越偏白色
rgba color：rgba(255,0,0,0.1); rgba到css3中才推出，比起rgb多了一個a，a代表透明度 a取值0-1，取值越小，越透明
十六進位 color: #FF0000; #FF0000 其中FF代表R，00代表G，00代表B

11.310 文本屬性

1、text-align：規定元素中的文本的水平對齊方式

left左邊對齊 預設值
right 右對齊
center 居中對齊
justify 兩端對齊

2、text-decoration：文本裝飾

none預設，定義標準的文本，通常用來去掉a標簽的下劃線
underline 定義文本下的一條線。
overline 定義文本上的一條線。
line-through 定義穿過文本下的一條線。
inherit 繼承父元素的text-decoration屬性的值。

3、text-indent：首行縮進

#將段落的第一行縮進 32像素,16px;=1em;
p {text-indent: 32px;}
p {text-indent: 2em;}

4、line-height：行高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>後代選擇器</title>
    <style type="text/css">
        p {
            width: 500px;
            height: 200px;
            text-align: center;
            line-height: 200px;
        }
    </style>
</head>
<body>
<div>
    <p>hello英雄不問出處，流氓不論歲數</p>
</div>
</body>
</html>

11.311 背景屬性

註意：沒有寬高的標簽，即便設置背景也無法顯示，即要求標簽是塊級標簽或行內塊級標簽

background-color設置標簽的背景顏色的 rgb(0,255,0); rgba(0,255,0,0.1); #00ffff;
background-image 設置標簽的背景圖片 background-image: url("images/2.jpg");註意：如果圖片的大小小於標簽的大小，那麼會自動在水平和垂直方向平鋪和填充
background-size 設置標簽的背景圖片的寬、高 background-size: 300px 300px; background-size: 100% 100%;
inherit 設置從父元素繼承background屬性值 以上背景屬性的值均可以設置為inherit，代表從父元素繼承background屬性
     

background-repeat：設置標簽的背景圖片的平鋪方式

background-repeat: repeat; #預設值，在垂直和水平方向都重覆
background-repeat: no-repeat; #不重覆，背景圖片將僅顯示一次
background-repeat: repeat-x; #背景圖片將在水平方向平鋪
background-repeat: repeat-y; #背景圖片將在垂直方向平鋪
應用：可以在服務端將一個大圖片截成小圖片，然後在客戶端基於平鋪屬性將小圖重覆這樣用戶就以為是一張大圖，如此，既節省了流量提升了速度，又不影響用戶訪問例如很多網站的導航條都是用這種手法製作的

background-attachment：設置標簽的背景圖片在標簽中固定或隨著頁面滾動而滾動

background-attachment: scroll; #預設值，背景圖片會隨著滾動條的滾動而滾動
background-attachment: fixed; #不會隨著滾動條的滾動而滾動`

background-position：

前端的坐標系：圖片預設都是在盒子的左上角，background-position屬性，就是專門用於控制背景圖片的位置
background-position：水平方向的值，垂直方向的值
1、具體的方位名詞   水平方向：left，center，right          垂直方向：top，center，bottom　　 
#如果只設置了一個關鍵詞，那麼第二個值就是"center"
2、百分比　        第一個值是水平位置，第二個值是垂直位置。　　左上角是 0% 0%。右下角是 100% 100%。　　
#如果只設置了一個值，另一個值就是50%。
3、具體的像素      第一個值是水平位置，第二個值是垂直位置。　　左上角是 0 0  單位是像素 (0px 0px) 或任何其他的 CSS 單位。　　
#如果只設置了一個值，另一個值就是50%。可以混合使用%和position值。

1、背景屬性縮寫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>後代選擇器</title>
    <style type="text/css">
        div {
            width: 500px;
            height: 500px;
            /*background-color: red;*/
            /*background-image: url("https://images.jpg");*/
            /*background-repeat: no-repeat;*/
            /*background-position: right bottom;*/
            /*background-size: 100px 100px;*/
            background: red url("https://images.jpg") no-repeat right bottom/100px 100px;
        }                                                               #背景屬性縮寫
    </style>
</head>
<body>
<div></div>
</body>
</html>

2、背景圖片和插入圖片的區別

1、背景圖片僅僅只是一個裝飾，不會占用位置，插入圖片會占用位置 2、背景圖片有定位屬性，可以很方便地控製圖片的位置，而插入圖片則不可以 3、插入圖片語義比背景圖片的語義要強，所以在企業開發中如果你的圖片想被搜索引擎收錄，那麼推薦使用插入圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>後代選擇器</title>
    <style type="text/css">
        .box1 {
            width: 200px;
            height: 200px;
            background-color: red;
            background-image: url("https://images.jpg");
            background-repeat: no-repeat;
            background-position: right bottom;
        }
        .box2{
            width: 300px;
            height: 300px;
            background-color: green;
        }
    </style>
</head>
<body>
<div class="box1">
    1111111111111
</div>
<div class="box2">
    22222222222222
    <img src="https://images.jpg" alt="">
</div>
</body>
</html>
11.3111 rgba與opacity

rgba只能給背景設置透明度,不能給標簽、標簽的子標簽設置透明度，opacity可以給整個標簽設置透明度，包括標簽的子標簽以及標簽里的內容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .c1 {
            width: 200px;
            height: 200px;
            background-color: rgba(0,0,0,0.65);#只能給背景設置透明度
            
            #
            #opacity: 0.65;                   改變整個標簽的透明度
        }
    </style>
</head>
<body>
<div class="c1">我是我啊啊啊啊</div>
</body>
</html>

如果想給背景圖片設置透明度，則必須使用opacity，因為背景圖片不能與背景顏色同時使用，如果同時使用，則背景顏色一直被背景圖片覆蓋，背景顏色不顯示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .c1 {
            height: 800px;
            background-image: url("https://images.jpg");
            background-size:300px auto;
            opacity: 0.55;              #改變整個標簽的透明度
        }
    </style>
</head>
<body>
<div class="c1"></div>
</body>
</html>

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

-Advertisement-
Play Games
更多相關文章
  • SpringCloud微服務(05)：Zuul組件，實現路由網關控制
    一、Zuul組件簡介 1、基礎概念 Zuul 網關主要提供動態路由，監控，彈性，安全管控等功能。在分散式的微服務系統中，系統被拆為了多個微服務模塊，通過zuul網關對用戶的請求進行路由，轉發到具體的後微服務模塊中。 2、Zuul的作用 1）按照不同策略，將請求轉發到不同的服務上去； 2）聚合API接 ...
  • 流程式控制制語句 if
    if 表示：如果。在python中是關鍵字。 if True 如果是真的，告訴大家這是真的 1.單if 格式: 如果 空格 條件 冒號 縮進 結果 2.if else （必須二選一） 格式: 如果 空格 條件 冒號 縮進 結果 否則 冒號 縮進 結果 5.if if if （多選） 格式: 如果 空 ...
  • 視頻合併時使用python批量修改文件名
    不知道大家有沒有遇到這樣的情況，比如視頻合併時文件名沒有按照正常順序排列，像這樣 可見，文件名排序是亂的。這個樣子合併出來的視頻一定也是亂的。所以得想辦法把文件名修改一下，讓軟體讀取出正確的順序。閑話少說，上代碼。 其中註意事項，在上述代碼里也說明瞭。運行成功後，再次查看 可見，視頻已經按照順序排列 ...
  • 數據類型基礎
    1.數字(整型)：用於計算和比較（int）integer。 2.字元串：在python中只要是用引號引起來的就是字元串(str)string。（單引雙引三引都有） ​ 加法 兩種都是字元串才能相加。 ​ 乘法 只能和數字進行相乘。 加法 a="黑大個" b="白小個" print(a+b) 輸出: ...
  • python之SQLite筆記
    sqlite3 打開文件並創建游標 連接對象：sqlite3.connect('數據文件.db') : commit() 在sqlite3中會看到操作的結果 close()關閉連接，下次操作數據時需再連接 建立任務讓游標來執行 游標：cursor = conn.cursor(): execute(' ...
  • 201412-2 Z字形掃描（c語言）
    問題描述 在圖像編碼的演算法中，需要將一個給定的方形矩陣進行Z字形掃描(Zigzag Scan)。給定一個n×n的矩陣，Z字形掃描的過程如下圖所示： 對於下麵的4×4的矩陣， 1 5 3 9 3 7 5 6 9 4 6 4 7 3 1 3 對其進行Z字形掃描後得到長度為16的序列： 1 5 3 9 7 ...
  • python+unittest框架第一天，簡單認識
    20萬的慢慢會實現的吧，hhh unittest框架，我就不在介紹了，百度有很詳細的介紹。 我們只要瞭解： 1、unittest是單元測試框架 2、它提供用例組織與執行：在實際工作中案例可能有上百條，我們就需要進行用例的組織以及規範，增強代碼的可維護性等 3、它提供豐富的比較方法：相等\不相等，包含 ...
  • python_0基礎開始_day10
    第十節 一、函數進階 動態參數 *a r g s —— 聚合位置參數，動態位置參數 預設返回的是tuple元組 def eat(*args): # 函數的定義階段 *聚合(打包) print(args) # tuple print(*args) # 函數體中的 * 打散(解包)eat(*args) ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類