HTML基礎(chǔ)學(xué)習(xí)02_CSS基礎(chǔ)屬性

內(nèi)容概述

一颖低、文本屬性

1.text-decoration

設(shè)置文本的修飾外觀（下劃線羡疗、上劃線挺物、貫穿性、刪除線或者閃爍

None 無裝飾線可去除 a 默認下劃線
Underline ：下劃線
overline:上劃線
Line-through 中劃線
letter-spacing: 10px; 字母間的間距
word-spacing: 10px;單詞間的間距

2.text-transform 大小寫轉(zhuǎn)換

capitalize 首字符大寫
uppercase 所有字符轉(zhuǎn)換成大寫
Lowercase 所有字符轉(zhuǎn)換成小寫
none 阻止所有字符的大小寫被轉(zhuǎn)換

3. text-indent 首行縮進

4.text-align 文本對齊方式

left 左對齊
right 右對齊
center 居中對齊
justify 最后一行沒有效果文字向兩側(cè)對齊纺棺，對最后一行無效
justify-all 和justify一致榄笙，但是強制使最后一行兩端對齊

5. font-size 設(shè)置字體大小

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n42" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit; background-repeat: inherit;">/* <absolute-size>，絕對大小值 */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;

/* <relative-size>祷蝌，相對大小值 */
font-size: larger;
font-size: smaller;

/* <length>茅撞，長度值 */
font-size: 12px;
font-size: 0.8em;

/* <percentage>，百分比值 */
font-size: 80%;

font-size: inherit;</pre>

6. font-family 設(shè)置字體 Font-weight 文本粗細

Font-weight :字體的粗細程度一些字體只提供 normal 和 bold 兩種值也可跟數(shù)字默認 400

注意： font-weight: 700; 后面不可跟px

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n48" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 0px; width: inherit; background-position: inherit; background-repeat: inherit;">normal</pre>

正常粗細。與400等值
bold 加粗米丘。與700等值剑令。
font-weight 數(shù)值采取離散式定義（使用 100 的整倍數(shù)）。數(shù)值為實數(shù)拄查，非 100 的整數(shù)倍的值將被四舍五入轉(zhuǎn)換為 100 的整倍數(shù)吁津，遇到 *50 時，將向上轉(zhuǎn)換堕扶，如 150 將轉(zhuǎn)換為 200

7. font-style

italic 斜體（前提是： font-family 支持文字傾斜）
oblique 斜體（讓文字傾斜）

8.font-variant 所有小寫字母變大寫字母按小寫字母顯示

normal 默認值腺毫。瀏覽器會顯示一個標準的字體
small-caps 小型大寫字母的字體
inherit 規(guī)定應(yīng)該從父元素繼承 font-variant 屬性的值。

[圖片上傳失敗...(image-4ebd26-1641522383945)]

9.line-height 行高

10 字體的縮寫

font-style : font-variant: 字體變化 font-weight: 字體粗細 font-size:/ line-height: font-family:

font 屬性可以用來作為 font-style, font-variant, font-weight, font-size, line-height 和 font-family 屬性的簡寫挣柬，或?qū)⒃氐淖煮w設(shè)置為系統(tǒng)字體

簡寫的時候需要注意：

必須包含以下值： font-size font-family
可以選擇性包含以下值： font-styley font-variant font-weight line-height
font-style，font-variant睛挚，font-weight 必須在font-sitze之前
line-height必須在font-size后用/ 分割 eg 16px/30
Font-fimily必須最后指定

/* font: 40px/2 "Fira Sans", serif; */

/* font: italic 1.2em "Fira Sans", serif; */

/* font: oblique small-caps 40px/60px serif; */

/* font: 24px sans-serif; */

三邪蛔、選擇器

通配選擇器 *
元素選擇器
類元素選擇器
ID選擇器
屬性選擇器

按照給定的屬性，選擇所有匹配的元素扎狱。 語法：[attr] 只要有attr屬性

[attr=value]

[attr~=value]

[attr|=value] 恰好等于 value 或者以單詞value 開頭后緊跟連字符 -

[attr^=value] 以 value開頭

[attr$=value] 以value 結(jié)尾

[attr*=value] 包含value 例子：[autoplay] 選擇所有具有 autoplay 屬性的元素（不論這個屬性的值是什么
后代選擇器：（空格）組合器選擇前一個元素的后代節(jié)點侧到。

/* 選中div 底下的span 包括直接和間接 */

div span{

color: red;

}
子選擇器： > 組合器選擇前一個元素的直接子代的節(jié)點

div > span{

color: red;

}
鄰兄弟選擇器：+ 組合器選擇相鄰元素，即后一個元素緊跟在前一個之后淤击，并且共享同一個父節(jié)點匠抗。

/* div 緊挨著的p */

div + p{

color: red;

}
全兄弟選擇器：~ 組合器選擇兄弟元素，也就是說污抬，后一個節(jié)點在前一個節(jié)點后面的任意位置汞贸，并且共享同一個父節(jié)點。

/* div 全兄弟選擇器 p */

div ~ p{

color: red;

}
交集選擇器 :同時符合兩個

/* div 和 class 為.one */

div.one{

color: red;

}
并集選擇器：

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n222" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit; background-repeat: inherit;">, 是將不同的選擇器組合在一起的方法印机，它選擇所有能被列表中的任意一個選擇器選中的節(jié)點矢腻。
語法：A, B</pre>
偽選擇器

偽類

: 偽選擇器支持按照未被包含在文檔樹中的狀態(tài)信息來選擇元素。 例子：a:visited 匹配所有曾被訪問過的 `` 元素射赛。

偽元素

:: 偽選擇器用于表示無法用 HTML 語義表達的實體多柑。 例子：p::first-line 匹配所有 `` 元素的第一行。

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n434" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit; background-repeat: inherit;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 選中div 底下的span 包括直接和間接 /
/ div span{
color: red;
} /
/ 后代選擇器 3 4 5/
/ div span{
color: red;
} */

/* 前一個元素的直接子代節(jié)點 3 4 5 /
/ div > span{
color: red;
} */

/* 兄弟節(jié)點具有共同父節(jié)點 div 后緊挨著span 7 /
/ div + span{
color: red;
} */

/* 兄弟全節(jié)點后節(jié)點在前一個節(jié)點后面的任意位置 78/
/ div ~ span{
color: red;
} */

/* 交集 234568 /
/ div.one{
color: red;
} */

/* 后代選擇器 6 /
/ div .one{
color: red;
} */

/* 并集選擇器楣责，隔開 234568 79 下面只要符合其中一個就滿足條件 */
div, .one , [title="test"]{
color: red;
}

</style>
</head>
<body>
<span>文字內(nèi)容1</span>
<div class="one"> 文字內(nèi)容2
<span>
文字內(nèi)容3
<p>
文字內(nèi)容4
</p>
</span>

四竣灌、偽類（pseudo-class）和偽元素

1. 常見的偽類

動態(tài)偽類：順序有要求

使用時特別注意：：hover 必須放在：link 和：visited后面才能完全生效

：active必須放在： hover后面才能完全生效

女朋友看到 LV后 haha 大笑

女朋友看到LV后瘋（：focus)了樣的哈哈大笑
- ：link a:link 未訪問的狀態(tài)
- :visited a:visited 已訪問的狀態(tài)
- :hover 鼠標放在鏈接上的顏色（也可放在別的元素上）
  
  strong:hover{
  
  }
- :active 激活的鏈接（鼠標在鏈接上長按住未松開）
- :focus 獲取焦點
  
  去掉a元素的焦點狀態(tài)
  
  a:focus{
  
  outline: none;
  
  }
  
  <a href="" tabindex="-1"></a>
  
  tabindex 可以調(diào)整tab選中元素的順序
  
  動態(tài)偽類eg:
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n438" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit; background-repeat: inherit;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<style>
/* 未訪問 /
a:link{
color: red;
}
/ 已訪問 /
a:visited{
color: green;
}
/ 手指放上去 /
a:hover{
color: #600;
}
/ 活躍的時候手指點下去未松手 */
a:active{
color: rgb(34, 34, 34);
}

</style>

</head>
<body>
<a href="#"> 百度一下</a>
</body>
</html></pre>
目標偽類：：taget

目標偽類：target eg

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n449" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit; background-repeat: inherit;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:target{
color: red;
}
</style>
</head>
<body>
<a href="#title1">標題1</a>
<a href="#title2">標題2</a>
<a href="#title3">標題3</a>

 <h2 id="title1">標題1</h2>
 <p>我是內(nèi)容1</p>
 <p>我是內(nèi)容1</p>
 <p>我是內(nèi)容1</p>
 <p>我是內(nèi)容1</p>
 <p>我是內(nèi)容1</p>
 <p>我是內(nèi)容1</p>
 <p>我是內(nèi)容1</p>
 <p>我是內(nèi)容1</p>
 <p>我是內(nèi)容1</p>
 <p>我是內(nèi)容1</p>
 <p>我是內(nèi)容1</p>
 <p>我是內(nèi)容1</p>
 <p>我是內(nèi)容1</p>
 <p>我是內(nèi)容1</p>
 <p>我是內(nèi)容1</p>
 <p>我是內(nèi)容1</p>
 <p>我是內(nèi)容1</p>
 <p>我是內(nèi)容1</p>
 <p>我是內(nèi)容1</p>
 <p>我是內(nèi)容1</p>
 <p>我是內(nèi)容1</p>
 <p>我是內(nèi)容1</p>
 <p>我是內(nèi)容1</p>

 <h2 id="title2">標題2</h2>
 <p>我是內(nèi)容222</p>
 <p>我是內(nèi)容222</p>
 <p>我是內(nèi)容222</p>
 <p>我是內(nèi)容222</p>
 <p>我是內(nèi)容222</p>
 <p>我是內(nèi)容222</p>
 <p>我是內(nèi)容222</p>
 <p>我是內(nèi)容222</p>
 <p>我是內(nèi)容222</p>
 <p>我是內(nèi)容222</p>
 <p>我是內(nèi)容222</p>
 <p>我是內(nèi)容222</p>
 <p>我是內(nèi)容222</p>
 <p>我是內(nèi)容222</p>
 <p>我是內(nèi)容222</p>
 <p>我是內(nèi)容222</p>
 <p>我是內(nèi)容222</p>
 <p>我是內(nèi)容222</p>
 <p>我是內(nèi)容222</p>



 <h2 id="title3">標題3</h2>
 <p>我是內(nèi)容3</p>
 <p>我是內(nèi)容3</p>
 <p>我是內(nèi)容3</p>
 <p>我是內(nèi)容3</p>
 <p>我是內(nèi)容3</p>
 <p>我是內(nèi)容3</p>
 <p>我是內(nèi)容3</p>
 <p>我是內(nèi)容3</p>
 <p>我是內(nèi)容3</p>
 <p>我是內(nèi)容3</p>
 <p>我是內(nèi)容3</p>
 <p>我是內(nèi)容3</p>
 <p>我是內(nèi)容3</p>
 <p>我是內(nèi)容3</p>
 <p>我是內(nèi)容3</p>
 <p>我是內(nèi)容3</p>
 <p>我是內(nèi)容3</p>
 <p>我是內(nèi)容3</p>
 <p>我是內(nèi)容3</p>
 <p>我是內(nèi)容3</p>
 <p>我是內(nèi)容3</p>
 <p>我是內(nèi)容3</p>

</body>
</html></pre>

語言偽類：：lang()
元素狀態(tài)偽類: :disabled

Eg：

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n455" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit; background-repeat: inherit;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<style>
/* button[disabled]{
color: red;
} */
:disabled{
color: red;
}

</style>

</head>
<body>

<button disabled>我是按鈕</button>
<button >我是按鈕</button>

</body>
</html></pre>
結(jié)構(gòu)偽類
- :nth-child(1) 選中第幾個子類
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n471" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit; background-repeat: inherit;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 選中子元素的第三個 /
/ :nth-child(3){
color: red;
} */

/* 選中子元素的自然數(shù) /
/ :nth-child(n){
color: red;
} */

/* 倒數(shù)第三個 /
/ :nth-last-child(3){
color: red;
} */

/* 同類型下第都3個忽略別的元素 */
:nth-of-type(3){
color: red;

}

</style>
</head>
<body>
<div>

<p>文字內(nèi)容1</p>
<p>文字內(nèi)容2</p>
<p>文字內(nèi)容3</p>
<p>文字內(nèi)容4</p>
<p>文字內(nèi)容5</p>
<p>文字內(nèi)容6</p>
<p>文字內(nèi)容7</p>
<p>文字內(nèi)容8</p>
<p>文字內(nèi)容9</p>
</div>

</body>
</html></pre>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n474" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 0px; width: inherit; background-position: inherit; background-repeat: inherit;"> /* 父元素中唯一子元素 */
span:only-child{
color: red;
}</pre>

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n475" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit; background-repeat: inherit;"> /* 是父元素中唯一的這種類型的子元素 */
:only-of-type{
color: red;
}</pre>

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n480" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit; background-repeat: inherit;"> /* 元素為空 */
:empty{
height: 20px;
columns: red;
}</pre>

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n481" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit; background-repeat: inherit;"> /* 否定偽類除啦html 除啦body 除啦div之外的所有元素*/
:not(html):not(body):not(div){
color: red;
}
</pre>
常見的偽元素
- :first-letter 第一個字母
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n493" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit; background-repeat: inherit;"> p::first-letter{
font-size: 50px;
}</pre>
- <pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n503" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 0px; width: inherit; background-position: inherit; background-repeat: inherit;">第一行
  p::first-line{
  font-size: 50px;
  }</pre>
- ：:before 在某元素前加內(nèi)容
- ：：after 在后邊加元素
  
  <pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n512" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit; background-repeat: inherit;"> span::before{
  content: "1323";
  color: red;
  }</pre>

五、 Emment元素

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>

</html>

</pre>

div#title id屬性 #
div.box 類 .
上一級 ^ div#main>div.box+p.p1+span.title^div.footer>span
屬性內(nèi)容帶數(shù)字 {內(nèi)容 $} eg:div>p{內(nèi)容$ }*5
css隱式

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n548" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit; background-repeat: inherit;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
/* w200 */
width: 100px;

/* h200 */
height: 200px;

/* m20 */
margin: 20px;

/* p20 */
padding: 20px;

/* fz20 */
font-size: 20px;

/* fw700 /
font-weight: 700;
/ lh50px 行高需要加px */
line-height: 50px;

}
</style>
</head>
<body>

<div></div>

</body>
</html></pre>
隱式寫法 eg

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n538" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit; background-repeat: inherit;"> lv可以不寫一樣的效果
li>lv.item ${列表元素$ }*5
.container 會自動補齊 div
<div class="container"></div>

</pre>

最后編輯于：2022.01.14 10:42:28

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末秆麸，一起剝皮案震驚了整個濱河市初嘹，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌蛔屹，老刑警劉巖削樊，帶你破解...
沈念sama閱讀 219,539評論 6贊 508
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異，居然都是意外死亡漫贞，警方通過查閱死者的電腦和手機甸箱，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,594評論 3贊 396
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來迅脐，“玉大人芍殖，你說我怎么就攤上這事∏疵铮” “怎么了豌骏？”我有些...
開封第一講書人閱讀 165,871評論 0贊 356
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長隐锭。經(jīng)常有香客問我窃躲，道長，這世上最難降的妖魔是什么钦睡？我笑而不...
開封第一講書人閱讀 58,963評論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任蒂窒，我火速辦了婚禮，結(jié)果婚禮上荞怒，老公的妹妹穿的比我還像新娘洒琢。我一直安慰自己，他們只是感情好褐桌，可當我...
茶點故事閱讀 67,984評論 6贊 393
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布衰抑。她就那樣靜靜地躺著，像睡著了一般荧嵌。火紅的嫁衣襯著肌膚如雪呛踊。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,763評論 1贊 307
城市分裂傳說
那天啦撮，我揣著相機與錄音恋技，去河邊找鬼。笑死逻族，一個胖子當著我的面吹牛蜻底，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播聘鳞，決...
沈念sama閱讀 40,468評論 3贊 420
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼薄辅，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了抠璃？” 一聲冷哼從身側(cè)響起站楚，我...
開封第一講書人閱讀 39,357評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎搏嗡，沒想到半個月后窿春，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體拉一，經(jīng)...
沈念sama閱讀 45,850評論 1贊 317
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 38,002評論 3贊 338
?白月光啟示錄
正文我和宋清朗相戀三年旧乞，在試婚紗的時候發(fā)現(xiàn)自己被綠了蔚润。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 40,144評論 1贊 351
活死人
序言：一個原本活蹦亂跳的男人離奇死亡尺栖，死狀恐怖嫡纠，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情延赌，我是刑警寧澤除盏，帶...
沈念sama閱讀 35,823評論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站挫以，受9級特大地震影響者蠕，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜掐松，卻給世界環(huán)境...
茶點故事閱讀 41,483評論 3贊 331
男人毒藥：我在死后第九天來索命
文/蒙蒙一蠢棱、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧甩栈，春花似錦、人聲如沸糕再。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,026評論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽突想。三九已至殴蹄，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間猾担，已是汗流浹背袭灯。一陣腳步聲響...
開封第一講書人閱讀 33,150評論 1贊 272
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留绑嘹，地道東北人稽荧。一個月前我還...
沈念sama閱讀 48,415評論 3贊 373
代替公主和親
正文我出身青樓，卻偏偏與公主長得像工腋，于是被迫代替她去往敵國和親姨丈。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 45,092評論 2贊 355