技術標籤：前端學習css

css層疊樣式表

在學習層疊樣式表之前我們先來了解一下網頁的組成

css寫的好壞決定了這個網頁的美觀度

css的引入方式

1.行內樣式：寫在html標籤裡的style屬性值裡邊
2.內嵌樣式：樣式內容寫在style標籤裡
3.外鏈樣式：通過link標籤匯入一個css檔案
4.匯入：

層疊關係

當屬性一致時，誰離元素近誰的級別高，後面的覆蓋前面的（行內樣式最高）；！important許可權最高，宣告最重要，不可以覆蓋

選擇器

1.包含選擇器：
.gold span{ color: #FF0000;}

<ul class="gold">
 

		<li>ul中的li1</li>
		<li>ul <span>中的</span>li2</li>
		<li>ul<span>中的</span>li3</li>
</ul>

2，id選擇器：

<li id="myli">萬用字元選擇器</li>

#myli{ background-color: black;}

3.class類選擇器

<li class="odd">id選擇器</li
 
>

.odd{ background-color: orange;}

4.標記選擇器
通過標籤名作為選擇器，選擇到一個型別的元素
5.萬用字元選擇器
*萬用字元選擇器，代表是頁面中的任意元素

選擇器優先順序

important>id>class>標籤>萬用字元

注：包含選擇器權重相加

css單位

1.px 畫素
2.em
3.%

<h1>css單位</h1>
		<p class="w1">文字px畫素</p>
		<p class="w2"
 
>文字em 1個字元寬度 預設字元寬16px</p>
		<p class="w3">文字% 百分比</p>

p{ background-color: #FF0000;}
			.w1{ width: 100px;}
			.w2{ text-indent: 2em;}
			.w3{ width: 50%;}
			/* 塊級元素寬預設是100%，高是自適應 */

css顏色表示方式

1. 英文單詞表示
2. rgb顏色表示
3. 16進位制顏色表示方式

<p>1. 英文單詞表示</p>
		<p class="color1">只要能寫出的顏色英文單詞都可以用</p>
		<p class="color2">2. rgb顏色表示</p>
		<p class="color3">通過 0-255，百分比表示</p>
		<p class="color4">3. 16進位制顏色表示方式</p>
		<p class="color5">16進位制簡寫</p>

			.color1{
				background-color: gold;
			}
			.color2{
				background-color: rgb(255,0,0);
				/* 紅,綠,藍 取值範圍 0-255 */
			}
			.color3{
				background-color: rgb(0%,100%,0%);
				/* 紅,綠,藍 取值範圍 0%-100% */
			}
			.color4{
			background-color: #0000ff;
			/*為位數2 2分割 00紅 00綠 ff藍*/
			/* 取值0-f 16進位制 */
			}
			.color5{
				/* background-color: #ffff00; */
				background-color: #ff0;
			}

css文字屬性

• font-family: 宋體,微軟雅黑;
  1.建議用國際寫法
  2.中文正文建議用 宋體，微軟雅黑，黑體
  3. 多個字型用逗號隔開，如果前面的字型和電腦字型匹配 就使用前面的，如果都沒有匹配用 系統預設的字型
  4.字型的名稱中間有空格用雙引號包裹