CSS快速入門學習筆記

概述

CSS 即層疊樣式表（Cascading Style Sheets），用於定義 HTML 內容在瀏覽器內的顯示樣式，如文字大小、顏色、佈局等。
CSS 分爲內聯式、嵌入式和外聯式三類（三類的優先級爲距離被修飾內容越近越優先），具有繼承和層疊的特點。

語法

CSS 的代碼語法由選擇器和聲明組成。

p { font-size:10px; } 
p爲選擇器，{font-size:10px}爲聲明，聲明由屬性和值組成，其中font-size爲屬性，10px爲值。

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS入門（內聯式CSS）</title>
    <style>
  	  body{background-color: forestgreen;} /* 背景樣式 */
  	  h1{text-align:left; color:red;} /* 文本樣式 */
  	  p{font-weight: bolder;}  /* 字體樣式 */
	</style>
</head>
<body>
    <h1>CSS入門</h1>
    <p>CSS樣式由選擇器、屬性、值組成。p{font-weight: bolder} h1{text-align:center} </p>
    <p>CSS樣式可以爲背景、文本、字體、鏈接、列表、表格、圖片、邊框等HTML內容做修飾。</p>
    <p>CSS樣式分爲內聯、嵌入、外部三種樣式。這個頁面採用內聯式CSS。</p>
</body>
</html>

註釋

/*註釋語句*/ 
p{font-size:10px;}  /*設置文字大小爲10px*/

CSS選擇器

CSS 選擇器用於選擇特定的網頁元素，我們根據選擇器選取的網頁內容來進行樣式設置。CSS 選擇器有非常多，主要分爲基本選擇器、屬性選擇器、僞類選擇器。

這裏先列舉部分基本選擇器
通配符選擇器（*）匹配所有元素
元素選擇器（h1/span/div）匹配 h1/span/div 元素（元素、標籤、屬性選擇器都一樣）
類選擇器（.classname）匹配 class=classname 的所有元素
ID選擇器（#idname）匹配 id=idname 的所有元素
後代選擇器（div h1）匹配div元素內部的所有h1元素（選擇內容更多）
子元素選擇器（div > h1）匹配父div元素爲h1的所有元素（選擇內容更精確）
兄弟元素選擇器（div + article）匹配div元素直接相鄰的article元素
通用兄弟選擇器（div ~ article）匹配div元素之後所有的同級別article元素（同一父級元素）
羣組選擇器（div , article）匹配所有div和article元素

選擇器權重
包含更高權重選擇器的一條規則擁有更高的權重；
ID選擇器（#idValue）的權重比屬性選擇器（[id=“idValue”]）高；
帶有上下文關係的選擇器比單純的元素選擇器權重要高；
與元素“捱得近”的規則生效；
最後定義的這條規則會覆蓋上面與之衝突的規則；
無論多少個元素組成的選擇器，都不比一個 class 選擇器權重高；
通配符選擇器權重是 0，被繼承的 css 屬性也帶有權重，權重也是0 ；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS入門（多重樣式）</title>
    <link rel="stylesheet" href="CSS3_入門_3.css">
    <style>
        body{background-color: azure;} /* 背景樣式 */
        h1{text-align:center;color:gold;} /* 文本樣式 */
        p{font-weight: bolder;}     /* 字體樣式 */
        div{color: #ffcc00}
        div > h2 {color: #0000FF}  /* 子選擇器 */
        div h2 {color: #0000FF}
        h1,p {color: red}
    </style>
</head>
<body style="background-color: azure">
<h1>CSS入門（多重樣式）</h1>     <!-- 這是html註釋代碼 -->
<p style="font-weight: bolder;">CSS樣式由選擇器、屬性、值組成。p{font-weight: bolder} h1{text-align:center} </p>
<p style="font-weight: bolder;">CSS樣式可以爲背景、文本、字體、鏈接、列表、表格、圖片、邊框等HTML內容做修飾。</p>
<p style="font-weight: bolder;">CSS樣式分爲內聯、嵌入、外部三種樣式。這個頁面採用嵌入式CSS。</p>
<p style="font-weight: lighter;">CSS樣式優先級：嵌入>內聯>外部式，離元素越近越優先</p>

<div>
    <h2>繼承性</h2>
    <p>繼承性</p>
    <p>繼承性</p>
    <p>繼承性</p>
    <p>繼承性</p>
    <p>繼承性</p>
    <p>繼承性</p>
    <div>
        <h2></h2>
        <h2></h2>
        <h2></h2>
        <h2></h2>
        <h2></h2>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
</div>
</body>
</html>

CSS背景

CSS 背景樣式用於定義 HTML 元素的背景，可以通過設置背景顏色和圖片等方式。

background-color 設置元素的背景顏色
background-image 把圖像設置爲背景
background-repeat 設置背景圖像是否及如何重複
background-attachment 背景圖像是否固定或者隨着頁面的其餘部分滾動 background-position 設置背景圖像的起始位置
background 簡寫屬性，作用是將背景屬性設置在一個聲明中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用一個聲明宣告所有背景屬性</title>
    <style>
        body{
            background: red url("image/css3.jpg") no-repeat fixed center
        }
    </style>
</head>
<body>
<h1>用一個聲明宣告所有背景屬性</h1>
<p>background簡寫方式，按照背景顏色、背景圖片、是否重複、是否浮動、圖片位置的順序來實現</p>
</body>
</html>

可以通過右鍵點擊網頁打開源碼進行直觀樣式配置。

CSS文本

CSS 文本屬性可定義文本的外觀，包括文本的顏色、字符間距，對齊文本、裝飾文本，文本縮進等。

color 設置文本顏色
direction 設置文本方向
line-height 設置行高
letter-spacing 設置字符間距
word-spacing 設置字間距（整塊字符）
text-align 對齊元素中的文本
text-decoration 向文本添加修飾
text-indent 縮進文本首行
text-transform 控制元素中的字母

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <p>使用P標籤實現段落功能</p>
    <p>每個P標籤會自動換行</p>
    <p>P標籤會忽略源碼中的
換行</p>
    <p>通過br標籤實現<br></p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>字符間距</title>
    <style>
        p {word-spacing:30px; }
    </style>
</head>
<body>
<p>字符間距 word-spacing word-spacing</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行間距 line-height</title>
    <style>
        p.small1{
            line-height: 0.5;
        }
        p.small2{
            line-height: 50%;
        }
        p.small3{
            line-height: 10px;
        }
        p.big{
            line-height: 3;
        }
        p.big2{
            line-height: 300%;
        }
        p.big3{
            line-height: 50px;
        }
    </style>
</head>
<body>
    <p>正常行距</p>
    <p>正常行距</p>
    <p class="small1">使用數字設置小行距</p>
    <p class="small1">使用數字設置小行距</p>
    <p class="small2">使用百分比設置小行距</p>
    <p class="samll2">使用百分比設置小行距</p>
    <p class="small3">使用像素設置小行距</p>
    <p class="small3">使用像素設置小行距</p>
    <hr>
    <p>正常行距</p>
    <p>正常行距</p>
    <p class="big">使用數字設置大行距</p>
    <p class="big">使用數字設置大行距</p>
    <p class="big2">使用百分比設置大行距</p>
    <p class="big2">使用百分比設置大行距</p>
    <p class="big3">使用像素設置大行距</p>
    <p class="big3">使用像素設置大行距</p>
</body>
</html>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本大小寫</title>
    <style>
        h1 {text-transform: uppercase}
        h2 {text-transform: lowercase}
        h3 {text-transform: capitalize}
        p.uppercase {text-transform: uppercase}
        p.lowercase {text-transform: lowercase}
        p.capitalize {text-transform: capitalize}
    </style>
</head>
<body>
<h1>text-transform</h1>
<h2>text-transform</h2>
<h3>text-transform</h3>
<p class="uppercase">text-transform</p>
<p class="lowercase">text-transform</p>
<p class="capitalize">text-transform</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本縮進</title>
    <style>
        p {text-indent: 30px}
    </style>
</head>
<body>
<p>文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進</p>
<p>文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進</p>
<p>文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進文本縮進</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本修飾</title>
    <style>
        h1 {text-decoration: overline}
        h2 {text-decoration: line-through}
        h3 {text-decoration: underline}
        p.overline {text-decoration: overline}
        p.linethough {text-decoration: line-through}
        p.underline {text-decoration: underline}
    </style>
</head>
<body>
<h1>上劃線</h1>
<h2>刪除線</h2>
<h3>下劃線</h3>
<p class="overline">上劃線</p>
<p class="linethough">刪除線</p>
<p class="underline">下劃線</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本對齊 text-align</title>
    <style>
        h1 {text-align: center}
        h2 {text-align: left}
        h3 {text-align: right}
        p.center {text-align: center}
        p.left {text-align: left}
        p.right {text-align: right}
    </style>
</head>
<body>
<h1>居中對齊的標題</h1>
<h2>向左對齊的標題</h2>
<h3>向右對齊的標題</h3>
<p class="center">居中對齊的段落</p>
<p class="left">左對齊的段落</p>
<p class="right">右對齊的段落</p>
</body>
</html>

CSS字體

CSS 字體屬性可定義字體系列、大小、粗細、風格等。

font 簡寫屬性，作用是把所有針對字體的屬性設置在一個聲明中；
font-family 設置字體系列；
font-size 設置字體的尺寸；
font-style 設置字體風格；
font-weight 設置字體的粗細。

所謂字體系列：
CSS 字體分爲兩大類，即通用字體系列和特定字體系列。
通用字體系列：擁有相似外觀的字體系統組合，如 Serif 或 Sans-serif 字體 (Monospace. Cursive、Fantasy)
特定字體系列：具體的字體系列，如 Times 或 Arial 字體；對字體要求不高，或者不知道具體特定字體，可以直接設置通用字體系列，這樣CSS會從這個字體系列中選擇一個特定字體並應用 (如Helvetica) 。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字體樣式</title>
    <style>
        p.family{font-family: "Microsoft Sans Serif"}
        p.size{font-size: 200%}
        p.weight{font-weight: bolder}
        p.style{font-style: italic}
    </style>
</head>
<body>
<p class="family">字體系列</p>
<p class="size">字體大小</p>
<p class="weight">字體粗細</p>
<p class="style">字體風格</p>
</body>
</html>

CSS鏈接

CSS 可以對鏈接設置各種屬性，包括color、background、font-family等。除此之外，CSS 還可以針對我們訪問鏈接的不同狀態來設置樣式。鏈接主要分爲以下四種狀態：
a:link - 未被訪問的鏈接
a:visited - 用戶已訪問的鏈接
a:hover - 鼠標位於鏈接的上方
a:active - 鏈接被點擊的時刻
當我們爲不同狀態設置屬性時，需要按照以下順序規則來編寫：
a:hover 必須位於 a:link 和 a:visited 之後
a:active 必須位於 a:hover 之後

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>爲不同鏈接添加不同效果</title>
    <style type="text/css">
        a.color:link {color:#ff0000}
        a.color:visited {color:#0000ff}
        a.color:hover {color:#ffcc00}

        a.size:link {color:#ff0000}
        a.size:visited {color:#0000ff}
        a.size:hover {font-size:150%}

        a.background:link {color:#ff0000}
        a.background:visited {color:#0000ff}
        a.background:hover {background:#66ff66}

        a.decoration:link {color:#ff0000; text-decoration: none}
        a.decoration:visited {color:#0000ff; text-decoration: none}
        a.decoration:hover {text-decoration: underline}
    </style>
</head>
<body>
<h1>爲不同鏈接添加不同效果</h1>
<p><a class="color" href="http://www.baidu.com" target="_blank">百度</a></p>
<p><a class="size" href="http://www.baidu.com" target="_blank">百度</a></p>
<p><a class="background" href="http://www.baidu.com" target="_blank">百度</a></p>
<p><a class="decoration" href="http://www.baidu.com" target="_blank">百度</a></p>
</body>
</html>

CSS盒模型

CSS 網頁佈局主要包括盒模型、浮動、定位三大技術點，盒模型或框模型包括元素內容（element）、內邊距（padding）、邊框（border）、外邊距（margin），如下圖所示：

元素分類

將所有的網頁元素分爲三大類，塊狀元素，內聯元素和內聯塊狀元素。

塊狀元素

html 中 <div> 、 <p> 、 <h1> 、 <form> 、 <ul> 、 <li> 屬於塊級元素。

1、每個塊級元素都從新的一行開始，並且其後的元素也另起一行。
2、元素的高度、寬度、行高以及頂和底邊距都可設置。
3、元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。

內聯元素

在html中， <span> 、 <a> 、 <label> 、 <br> 、 <strong> 和 <em> 就是內聯元素（行內元素）。

1、和其他元素都在一行上；
2、元素的高度、寬度及頂部和底部邊距不可設置；
3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。

內聯塊狀元素

內聯塊狀元素就是同時具備內聯元素、塊狀元素的特點，例如 <img> 和 <input> 。

1、和其他元素都在一行上；
2、元素的高度、寬度、行高以及頂和底邊距都可設置。

元素轉換

按照上面所說，內聯元素無法設置寬度和高度，換言之，是不是就一直無法適用盒模型呢？爲了解決這個問題，CSS 引入了元素類型轉換，塊狀、內聯、內聯塊狀之間都可以相互轉換，通過 display 屬性，例如：

a{display:block;} 將內聯元素a轉換爲塊狀元素，從而使a元素具有塊狀元素特點 
div{display:inline;} 將塊狀元素轉換爲內聯元素 <div> 我要變成內聯元素 </div> 
display:inline-block; 將其他元素轉換爲內聯塊狀元素

CSS 定位

CSS 定位屬性允許我們對元素進行定位，從而實現複雜的網頁佈局。定位的目的就是讓元素按照需求出現在特定的位置，元素之間的位置關係無法相鄰、包含、層疊。 CSS有三種定位機制：普通流、浮動定位、絕對定位。默認情況下，在沒有設定定位機制時，網頁採用普通流進行佈局，所有元素從上到下、從左到右自然排列。

position static 靜態定位
元素框正常生成，塊級元素生成一個矩形框，作爲文檔流的一部分，行內元素則會創建一個或多個行框，置於其父元素中。

position relative 相對定位
元素框偏移某個距離，元素仍保持其未定位前的形狀，它原本所佔的空間仍保留。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相對定位</title>
    <style>
        h3.pos_left
        {
            position: relative;
            left: -10px;
        }
        h3.pos_right
        {
            position: relative;
            left: 20px;
        }
    </style>
</head>
<body>
<h3>正常標題</h3>
<h3 class="pos_left">相對定位向左</h3>
<h3 class="pos_right">相對定位向右</h3>
</body>
</html>

position absolute 絕對定位
元素框從文檔流完全刪除，並相對於其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所佔的空間會關閉，就好像元素原來不存在一樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。父元素如果沒有定位，其子元素會追溯父元素的上一級元素進行定位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>絕對定位</title>
    <style>
        h3.pos_abs
        {
            position: absolute;
            left:100px;
            top:150px;
        }
    </style>

</head>
<body>
<h3 class="pos_abs">絕對位置，距離左側100像素，距離頂部150像素</h3>
</body>
</html>

position fixed 固定定位
元素框的表現類似於將 position 設置爲 absolute，不過其包含塊是視窗本身。
top/right/bottom/left 設置定位元素與其包含塊（或原來位置）之間的距離。
overflow 設置當元素溢出其區域時的處理方式，可以通過 hidden 和 auto 來設置隱藏或顯示滾動條。
z-index 設置元素的堆疊順序，默認爲0；-1則至於底層。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style>
        p.pos_fixed
        {
            position: fixed;
            top: 50%;
            right: 0px;
        }
    </style>
</head>
<body>
<p class="pos_fixed">這是一個諮詢欄</p>
</body>
</html>

CSS浮動

CSS浮動屬性允許設置元素脫離正常文檔流（不處於文檔流中的元素不佔據空間），並且向左或向右水平浮動。與CSS定位屬性類似，通過浮動屬性可以對網頁進行佈局。浮動元素會不斷向左或向右浮動，直到碰到包含塊的邊緣或者其他浮動元素的邊緣。浮動元素脫離了正常文檔流會導致周邊元素重新排列，解決這個問題可以爲周邊元素設置“清除浮動”屬性。

ﬂoat: left 向左浮動
ﬂoat: right 向右浮動
clear: both 清除浮動

CSS快速入門學習筆記

CSS快速入門學習筆記

概述

語法

註釋

CSS選擇器

CSS背景

CSS文本

CSS字體

CSS鏈接

CSS盒模型

元素分類

元素轉換

CSS 定位

CSS浮動

androguard解析指令及字節碼

python理解類和麪向對象

使用androguard生成方法控制流圖CFG

IOTFUZZER: Discovering Memory Corruptions in IoT Through App-based Fuzzing

python函數與模塊

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結