『無為則無心』Python函式 — 28、Python函式的簡單應用
阿新 • • 發佈：2021-07-13
一：CSS的概念
1.層疊樣式表(英文全稱：Cascading Style Sheets)。*層疊：多個樣式可以作用在同一個html的元素上，同時生效是一種用來表現HTML或XML（標準通用標記語言的一個 子集）等檔案樣式的計算機語言。
2. 樣式定義如何顯示 HTML 元素 樣式通常儲存在樣式表中 把樣式新增到 HTML 4.0 中，是為了解決內容與表現分離的問題 外部樣式表可以極大提高工作效率 外部樣式表通常儲存在 CSS 檔案中 多個樣式定義可層疊為一個 3. CSS很像化妝，通過不同的CSS將同樣的HTML內容打造為不同的呈現結果。所以，前端程式設計師相互表白的時候可以說：you are the CSS to my HTML.這是是CSS是對 HTML進行美化和佈局作用的最好總結？ 4. CSS的優勢 功能強大 將內容展示和樣式控制分離 降低耦合度。解耦 讓分工協作更容易 提高開發效率二：CSS與html結合使用
1.行內樣式
1）直接在標籤中編寫樣式，通過使用標籤內部的style屬性
2）一般在測試的時候使用居多： 語法：
<html標籤 style="樣式1：值1;樣式2：值2;....樣式N：值N;">hello my css</html標籤>
案例：
<div style="color: red;">hello my css</div>
3）弊端：只能對當前的標籤生效，沒有做到內容和樣式相分離，耦合度太高。
2.內部樣式
1）定義在head標籤內，通過style標籤，該標籤內容就是CSS程式碼<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>內部樣式</title>
<style>
div{color: red; }
</style>
</head>
<body>
<div>hello my css</div>
</body>
</html>
3. 外部樣式 1）提前定義css資原始檔 2）在head標籤內，定義link標籤引入外部樣式檔案。
3）三個樣式表的總結：
作用域的範圍:外部樣式表>內部樣式表>行內樣式表 優先順序：外部樣式表<內部樣式表<行內樣式表; 同樣的樣式作用在同一個標籤身上：就近原則；不同樣式作用在同一個標籤身上:疊加生效。三：CSS語法
1.基本格式：由兩個主要的部分構成：選擇器，以及一條或多條宣告:2）CSS註釋：註釋是用來解釋你的程式碼，並且可以隨意編輯它，瀏覽器會忽略它。CSS註釋以 /* 開始, 以 */ 結束
四:基本選擇器 ,篩選具有相似特徵的元素
2. class選擇器
1） 選擇具有相同的class屬性值的元素。 class 選擇器用於描述一組元素的樣式，class 選擇器有別於id選擇器，class可以在多個元素中使用。 class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個點"."號顯示： PS：類名的第一個字元不能使用數字！它無法在 Mozilla 或 Firefox 中起作用。3. 元素選擇器/標籤選擇器
1） 選擇具有相同標籤名稱的元素。 定義選擇器語法：標籤名稱{}；PS：標籤名稱必須是html提供好的標籤。 使用標籤選擇器：自動使用在所有的同名的標籤上五：優先順序
1） 選擇器的優先順序： ID選擇器 > 類選擇器 > 標籤選擇器 當多個選擇器作用在同一個標籤上的時候，如果屬性衝突，看優先順序；如果不衝突，樣式疊加生效。 2）樣式表的優先順序 行內樣式 > 內部樣式 >外部樣式 同樣，三個樣式表中都有內容作用在同一個html標籤的時候，如果屬性衝突，看優先順序；如果不衝突，樣式疊加生效。六：CSS常用樣式
1.color :字型顏色
跟顏色相關的取值分3種： 1、顏色的單詞 red blue... 2、rgb(紅，綠，藍)三色的取值範圍是0-255 rgb(255,0,0) 3、rgba（紅，綠，藍,透明度），透明度取值：0-1 0 全透明 1-不透明 0.5 半透明rgba(255,0,0,0.4) 4、#值1值2值3 ：值的正規化是00-FF 十六進位制數字組成的 例如：#FF00002. width height:寬高
1、只有塊狀元素可以設定寬高，行級元素設定不生效。 2、取值方式有2種： 1：數值 絕對數字 單位是畫素PX 2：百分比：佔據父元素的比例3. 背景樣式
4.文字樣式
5.列表樣式
6.邊框樣式
7. HTML&CSS除錯利器
8.盒子模型
1、 概念：所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和佈局時使用。CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括： 邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。 2、盒子模型說明圖：Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
Border(邊框) - 圍繞在內邊距和內容外的邊框。
Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。 Content(內容) - 盒子的內容，顯示文字和影象。九、盒子的寬度和高度
1、元素的實際寬度和高度：當我們計算一個元素實際在頁面佔有的總寬度計算公式是這樣的： 總元素寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距 2、元素的總高度最終計算公式是這樣的： 總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距 3、如果想要設定的寬度直接就是元素的實際寬度，通過box-sizing屬性十：浮動
1、 什麼是浮動：CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。Float（浮動），往往是用於影象，但它在佈局時一樣非常有用。 2、元素怎樣浮動：元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框 的邊框為止。浮動元素之後的元素將圍繞它。浮動元素之前的元素將不會受到影響。 3、彼此相鄰的浮動元素：如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。 4、 clear--清除浮動：元素浮動之後，周圍的元素會重新排列，為了避免這種情況，使用 clear 屬性。clear 屬性指定元素兩側不能出現浮動元素<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮動</title>
<style>
div {
width: 400px;
height: 200px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<!--沒有浮動屬性的元素都屬於常規文件流：
從上往下從左往右依次顯示 浮動的元素都脫離了常規文件流；
為了好理解：大家可以認為浮動元素屬於一層，
非浮動元素屬於一層 如果想要非浮動元素不受浮動元素的影響，
需要使用clear屬性-->
<div style="background: rgba(255,0,0,0.5); float: left;"> div1
<!--
-左浮動，脫離常規文件流，緊貼父元素或者上一個同方向浮動
-->
</div>
<div style="background: lawngreen; width: 600px; height: 350px; "> <br/>
<!--
div2-未浮動，常規文件流,
-->
<!--
PS:此時div1在div2的上方顯示，因為div1和div2是不同文件流中的元素，
顯示互 不影響 如果不想讓div2被浮動元素影響，
需要新增clear屬性。 新增clear: left;
之後div2就會忽略div1浮動的影響，在div1層後面顯示，
不會重疊 了，大家可以自己試驗一下
-->
</div>
<div style="background: lightblue; float: right; width: 1800px;">
<!--
div3-右浮動，脫離常規文件流，緊貼父元素或者上一個同方向浮動
-->
</div>
<div style="background: lightcoral; width: 600px; height: 350px; ">
<!--
div4-未浮動，常規文件流,
-->
<br/>
<!--
PS:此時div3在div4的上方顯示，
因為div3和div4是不同文件流中的元素，
顯示互 不影響 如果不想讓div4被浮動元素影響，
需要新增clear屬性。 新增clear: right;
之後div4就會忽略div3浮動的影響，在div3層後面顯示，不會重疊 了，
大家可以自己試驗一下 clear屬性有三個取值：left、right、both;
分別是取出左浮動、有浮動和所有浮動元素 的影響
-->
</div>
<div style="background: lavender;">
<!--
div5-未浮動，常規文件流
-->,
</div>
</body>
</html>
4、 overflflow 1、控制內容溢位元素框時顯示的方式。 2、overflflow屬性有以下值 visible：預設值。內容不會被修剪，會呈現在元素框之外。 hidden：內容會被修剪，並且其餘內容是不可見的。 scroll：內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容。 auto：如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘的內容。 inherit：規定應該從父元素繼承 overflflow 屬性的值。 3、注意:overflflow 屬性只工作於指定高度的塊元素上。 4、注意: 在 OS X Lion ( Mac 系統) 系統上，滾動條預設是隱藏的，使用的時候才會顯示 (設定"overflflow:scroll" 也是一樣的)。 注意:overflflow 屬性只工作於指定高度的塊元素上。 注意: 在 OS X Lion ( Mac 系統) 系統上，滾動條預設是隱藏的，使用的時候才會顯示 (設定 "overflflow:scroll" 也是一樣的)。 注意:overflflow 屬性只工作於指定高度的塊元素上。 注意: 在 OS X Lion ( Mac 系統) 系統上，滾動條預設是隱藏的，使用的時候才會顯示 (設定 "overflflow:scroll" 也是一樣的)。
十一：Display(顯示) 與 Visibility（可見性）
1 兩者的區別： 1）display屬性設定一個元素應如何顯示，visibility屬性指定一個元素應可見還是隱藏。 2）隱藏一個元素可以通過把display屬性設定為"none"，或把visibility屬性設定為"hidden"。但是請注意，這兩種方法會產生不同的結果。visibility:hidden可以隱藏某 個元素，但隱藏的元素仍需佔用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響佈局。 3）display:none可以隱藏某個元素，且隱藏的元素不會佔用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本佔用的空間也會從頁面佈局中消失。 2、 display 改變元素的型別 CSS樣式有以下三個： display:block -- 顯示為塊級元素 display:inline -- 顯示為內聯元素 display:inline-block -- 顯示為內聯塊元素，表現為同行顯示並可修改寬高內外邊距等屬性十二：複合選擇器
1.概念：由兩個或多個基礎選擇器，通過不同方式組合而成的。可以更準確更精細的選擇目標元素標籤。1）全域性選擇器
語法：* {} 一般去掉標籤的一些預設效果的時候使用，或者整站通用效果時使用。但是不推薦，一般將* 替換為常用標籤的名稱，並用逗號分隔，其實就是 並集選擇器。2 ）並集選擇器
1、並集選擇器（CSS選擇器分組）是各個選擇器通過 , 連線而成的，通常用於集體宣告。 2、語法：選擇器1，選擇器2，......選擇器N{} 3、意思是多個選擇器都是通用的樣式。任何形式的選擇器（包括標籤選擇器、class類選擇器id選擇器等），都可以作為並集選擇器的一部分。3）交集選擇器
1、條件：交集選擇器由兩個選擇器構成，找到的標籤必須滿足：既有標籤一的特點，也有標籤二的特點。 2、語法：h3.class{ color:red; } 3、其中第一個為標籤選擇器，第二個為class選擇器，兩個選擇器之間不能有空格，例如div.list。交集選擇器是並且的意思。 即...又...的意思 例如： table.bg 選擇的是： 類名為 .bg 的 表格標籤，但用的相對來說比較少4）後代選擇器
1、概念：後代選擇器又稱為包含選擇器。 2、作用：用來選擇元素或元素組的子孫後代。其寫法就是把外層標籤寫在前面，內層標籤寫在後面，中間用空格分隔，先寫父親爺爺，在寫兒子孫子。 3、格式：父級 子級{屬性:屬性值;屬性:屬性值;} 4、語法：.class h3{color:red;font-size:16px;} 5、當標籤發生巢狀時，內層標籤就成為外層標籤的後代。子孫後代都可以這麼選擇。 或者說，它能選擇任何包含在內 的標籤。5）子元素選擇器
1）作用：子元素選擇器只能選擇作為某元素子元素(親兒子)的元素。其寫法就是把父級標籤寫在前面，子級標籤寫在後面，中間跟一個 > 進行連線。 2）語法：.class>h3{color:red;font-size:14px;}3）比如： .demo > h3 {color: red;} 說明 h3 一定是demo 親兒子。 demo 元素包含著h3。
6）偽類選擇器
1 、偽類選擇器：和類選擇器相區別類選擇器是一個點 比如 .demo {} 而我們的偽類 用 2個點 就是 冒號 比如 :link{} 。 2、作用：用於向某些選擇器新增特殊的效果。比如給連結新增特殊效果， 比如可以選擇 第1個，第n個元素。因為偽類選擇器很多，比如連結偽類，結構偽類等 等。我們這裡先給大家講解連結偽類選擇器。 3、a:link /* 未訪問的連結 */ a:visited /* 已訪問的連結 */ a:hover /* 滑鼠移動到連結上 */ a:active /* 選定的連結4、寫的時候，他們的順序儘量不要顛倒 按照 lvha(四類的首字母) 的順序。否則可能引起錯誤。
因為叫連結偽類，所以都是利用交集選擇器 a:link a:hover 因為a連結瀏覽器具有預設樣式，所以我們實際工作中都需要給連結單獨指定樣式。 實際開發中，我們很少寫全四個狀態，一般我們寫法如下：