標籤：微軟雅黑 定義 寫法 link tac lin 檔案連結 聲明 開始
1、CSS常用選取器
/*【CSS常用選取器】*/
/* 標籤選取器
* 寫法： HTML標籤名{}
* 作用： 可以選中頁面中，所有與選取器同名的HTML標籤。
*/
li{
/*color: red;
font-size: 24px;*/
}
/* 類別選取器(class選取器)
* 寫法： .class名{}
* 調用： 在需要調用選取器樣式的標籤上，使用class="class名"調用選取器
* 優先順序： >標籤選取器
*/
.first{
/*color: blue;*/
}
/* 識別碼選取器
* 寫法： #ID名{}
* 調用： 需要調用樣式的標籤，起一個id="ID名"
* 優先順序： ID選取器>class選取器
* 注意： 一個頁面中，不能出現同名ID
*/
#one{
/*background-color: yellow;
color: green;*/
}
/* 【Class選取器與ID選取器的區別】
* 1、 寫法不同:class選取器用.聲明，ID選取器用#聲明；
* 2、 優先順序不同： ID選取器>class選取器
* 3、 作用範圍不同： class選取器可以多次調用，ID選取器只能使用一次。
*/
/* 【選取器的命名規範】
* 1、只能有字母、數字、底線、減號組成；
* 2、 開頭不能是數字。也不能是只有一個減號。
*
* 一般，起名要求有語義，使用英文單詞與數位組合。
*/
/* 通用選取器
* 寫法： *{}
* 作用： 可以選中頁面中所有的HTML標籤。
* 優先順序： 最低！！！
*/
*{
/*color: orange;*/
}
/* 並集選取器
* 寫法： 選取器1,選取器2,……,選取器n{}
* 生效規則： 多個選取器取並集，只要標籤滿足其中任意一個選取器，樣式即可生效。
*/
li,.first{
/*color: red;*/
}
/* 交集選取器
* 寫法： 選取器1選取器2……選取器n{} 所有選取器緊挨著，沒有分隔
* 生效規則： 多個選取器取交集，則必須滿足所有選取器的要求，才會生效
*/
li.first{
/*color: red;*/
}
/* 後代選取器
* 寫法： 選取器1 選取器2 …… 選取器n{} 選取器之間空格分隔
* 生效規則： 只要滿足，後一選取器是前一個選取器的後代，即可成效。（後代包括子代、孫代、重孫代。。。）
*
* 通俗的講：只要後一個選取器，在前一個選取器裡面即可。
*/
div span{
}
/* 子代選取器
* 寫法： 選取器1>選取器2>……>選取器n{} 選取器之間用>分隔
* 生效規則： 必須滿足，後一個選取器是前一個選取器的直接子代，才會生效。（中間不能間隔任何標籤）
*/
div>span{
color: orangered;
}
【優先順序的權重問題】
*
* 1、CSS生效的第一原則是“近者優先”！即，哪個選取器作用於最裡層標籤，則這個選取器生效；
*
* 2、當選取器作用於同一層時，可以根據優先順序權重，進行累加計算：
* ID選取器*100 > class選取器*10 > 標籤選取器*1
*
* 注意： 並集選取器，相當於多個選取器拆開寫，所以，並集選取器的優先順序不能累加。
*
* 3、 當選取器作用於同一層，且優先順序權重相等時。則，寫在最後的選取器生效。
*
*/
/* 【引入CSS的三種方式】
* 1、 行內樣式表：直接在HTML標籤中，使用style=""的方式引用；
* <div style="height: 100px;"></div>
* 優點： 使用靈活，優先順序權重最高？
* 缺點：不符合W3C關於“內容與表現分離”的要求；不利於樣式複用；
*
* 2、 內部樣式表： 在<head></head>標籤中，使用<style>標籤包裹CSS代碼；
* 特點： 一定程度的實現了HTML與CSS的分離，但是分離不夠徹底，沒有辦法多頁面共用樣式。
*
* 3、 外部樣式表： 將CSS單獨寫入CSS檔案中，並與HTML檔案關聯。
* 優點： 徹底實現HTML與CSS的分離，符合W3C規範，有利於多頁面複用統一樣式；
* [匯入CSS檔案的兩種方式]
* ① 在<head>標籤中，使用link連結：
* <link rel="stylesheet" type="text/css"
* href="css/02-CSS.css" />
* ② 在<style>標籤中，使用@import匯入：
* @import url("css/02-CSS.css");
*
* [兩種匯入方式的區別]
* ① link屬於標準的HTML標籤，而@import不是標準標籤；
* ② link可以相容所有低版本瀏覽器，而@import只在CSS2之後能用；
* ③ link是將兩個檔案連結起來，起橋樑作用； 而@import相當於將CSS檔案複製到HTML檔案中；
* ④ link會在HTML檔案邊載入的過程中，邊連結CSS檔案；
* @import會在HTML檔案全部載入完以後，再匯入CSS檔案；
*
* 綜上所述，我們使用link連結的方式，載入CSS檔案。
*/
@import url("css/02-CSS.css");
</style>
<!--
引入外部CSS樣式表：
rel：選擇stylesheet
type：選擇text/css，可以省略
href： 表示連結的CSS檔案路徑。
-->
<!--<link rel="stylesheet" type="text/css" href="css/02-CSS.css" />-->
/* CSS中的顏色表示方式
* ① 直接使用顏色的單詞表示：red、green、blue
* ② 使用顏色的十六進位數表示：#ff0000 #f00
* 六位元，兩兩分組，分別表示紅、綠、藍的配比；
* ③ rgb(0~255,0~255,0~255); 三位元，分別表示紅、綠、藍的配比
* rgba(); 第四位元，表示透明度。
*/
width: 200px;
height: 200px;
background-color: #E57F13;
/* 【CSS常用文字屬性】
* 1、 字型、字型大小類：
* ① font-weight： 字型粗細。 bold-加粗、normal-正常、lighter-細體
* 也可以使用100-900數值，400表示normal，700表示bold
*
* ② font-style: 字型樣式。 italic-傾斜、normal-正常
*
* ③ font-size: 字型大小。 可以寫px單位，也可以寫%
* 200%表示瀏覽器預設大小(16px)的兩倍=32px
*
* ④ font-family: 字型系列(字型族)。
* >>> 可以直接寫字型名，也可以寫字型系列名。
* >>> 常用字型系列：serif-襯線體 sans-serif-非襯線體；
* >>> font-family可以接收多個值，用逗號分隔。表示優先使用第一個，如果沒有這個字型，依次向後使用。 通常，最後一個值放字型系列名；
* eg: font-family: "黑體","微軟雅黑",sans-serif;
*
* ⑤ font縮寫形式：
* >>> 順序必須是：
* font-weight font-style font-size/line-height font-family
* >>> 不同屬性之間，用空格分隔；
* >>> font-size/line-height必須一組，用/分隔；
* >>> font-family多個字型之間，用逗號分隔
* >>> eg： font: bold italic 32px/50px "微軟雅黑",serif;
*
* 2、 字型顏色
* ① color： 字型顏色 可以使單詞、十六進位、RGB等
*
* ② opacity： 透明度，可選值0-1
* [opacity和RGBA的區別]
* >>> RGBA本身可以設定顏色，而opacity必須配合其他顏色屬性來用；
* >>> rgba僅僅是讓當前元素設定的顏色透明；
* 而opacity，會讓當前元素裡面的所有文字、背景、子項目都透明；
*
*
* 3、行距、對齊、其他類
* ① line-height: 行高。 可以寫px單位、可以直接寫數字(表示預設行距的幾倍)、可以寫% (表示預設行距的百分比)
* >>> 行高重要作用： 讓單行文字在div中垂直置中？
* 設定行高等於div的高度，即可讓單行文字垂直置中。
*
* ② text-align：設定地區內的行級元素水平對齊left/center/right
*
* ③ letter-spacing： 字元間距，字與字之間的距離
*
* ④ text-decoration: 文本修飾；
* underline-底線、overline-上劃線、line-through-刪除線、none
*
* ⑤ overflow： 設定超出地區文字的顯示方式。
* >>> overflow: hidden; 超出地區的文字隱藏不顯示；
* >>> overflow: scroll; 無論文字多少，都會顯示水平垂直捲軸
* >>> overflow: auto; 自動。文字多顯示捲軸，文字少，不顯示捲軸。
* >>> 可以使用overflow-x和overflow-y單獨修改兩個方向的捲軸
* overflow-y: scroll; overflow-x: hidden;
*
* ⑥ text-overflow：設定行末多餘文字的顯示方式；
* >>> clip-多餘文字裁剪掉 ellipsis-多餘文字省略符號顯示
* >>> 顯示省略符號，需要配合white-space: nowrap;使用
* >>> 【重點】 設定行末顯示省略符號(三行代碼，缺一不可)
* overflow: hidden;
*white-space: nowrap;
*text-overflow: ellipsis;
*
* ⑦ white-space: nowrap; 設定中文行末，不斷行顯示
*
* ⑧ text-indent: 首行縮排。
*
* ⑨ -webkit-text-stroke: 0.5px blue; 文字描邊。
* -webkit-表示只有webkit核心瀏覽器生效、常見的有chrome、safari
*
* ⑩ text-shadow: 文字陰影，有四個屬性值，空格分隔；
* >>> 水平陰影距離，正數表示陰影右移，負數左移；
* >>> 垂直陰影距離，正數表示陰影下移，負數上移；
* >>> 陰影模糊距離， 0表示陰影一點不模糊；
* >>> 陰影的顏色；
* >>> eg:text-shadow: 20px -10px 2px blue;
*
CSS常用背景屬性
/* 【CSS常用背景屬性】
* 1、 background-color： 背景色
*
* 2、 background-image: 背景圖。使用url("")選擇背景圖片。背景圖和背景色同時存在時，背景圖覆蓋背景色。
*
* 3、 background-repeat: 背景圖的重複方式。
* no-repeat-不平鋪、repeat-平鋪、repeat-x-x軸平鋪、 repeat-y-y軸平鋪
*
* 4、 background-size： 背景圖的大小
* [指定寬度高度]
* >>> 寬度高度的指定，可以寫px，也可以寫%(父容器寬高的百分比)
* >>> 當寫兩個屬性時，分別表示寬度、高度；
* 當寫一個屬性時，表示寬度，高度將會等比縮放；
* [其他屬性值]
* >>> contain: 圖片等比縮放，直到寬或高中較大的一邊縮放到100%為止。(可能導致較短的一邊<100%,圖片無法蓋住全部地區)
* >>> cover： 圖片等比縮放，直到寬或高中較小的一邊縮放到100%為止。(可能導致較大的一邊>100%,圖片超出地區顯示不全)
*
* 5、 background-position： 背景圖位移量
* >>> 指定位置： left/center/right top/center/bottom
* 當，唯寫一個值時 ，另一個預設置中。
* >>> 指定座標： 兩個屬性分別表示 ：水平位移 垂直位移
* ① 座標的值，可以是px單位，也可以是百分數
* ② 當寫px單位時：
* 水平方向：正數右移 負數左移 ； 垂直方向： 正數下移 負數上移；
* (左負右正 上負下正)
* ③ 當寫%百分數時：
* 一般只能是正數。表示的是，去掉圖片的寬高，剩餘空白地區的分布比例。 eg：background-position:30%; 水平方向去掉圖片寬度，剩餘地區3:7分。 */
/* display 屬性
* 可以設定元素以何種狀態顯示，可選值：
*
* none: 隱藏元素；
* block：顯示為區塊層級元素；
* inline： 顯示為行級元素；
* inline-block: 顯示為內聯區塊層級元素。 本身將是一個行級元素，但是，擁有區塊層級元素的所有屬性。 比如寬度、高度、margin、padding等。。。
*
* [常見的inline-block層級的標籤？]
* <img /> <input /> <textarea></textarea> <td></td>
*
* [隱藏一個元素的方式]
* 1、寬度或高度設為0px； 配合overflow:hidden; 屬性
* 2、 display:none; 顯示display:block;
* 3、 opacity: 0; 設為全透明。 但是元素的空間會佔據；
* 4、 visibility: hidden; 隱藏元素，但是元素所在空間依然會佔據。 與opacity: 0;效果很像；
* 顯示visibility隱藏的元素，visibility: visible;
*/
/*display: none;*/
background-color: yellow;
/*opacity: 0;*/
visibility: visible;
}
#div2{
height: 200px;
width: 200px;
background-color: green;
}
/* 【CSS3 新增的屬性首碼】
* 1、 -webkit- : Chrome/Safari瀏覽器；
* 2、 -moz- : Firefox瀏覽器；
* 3、 -ms- : IE瀏覽器；
* 4、 -o- : Opera 歐朋瀏覽器
*
* 【CSS 長度單位】
* 1、 px： 表示像素。長度是固定的，表示佔分辨率的幾個像素點；
* 2、 % ： 表示相對於預設值的百分比；
* 3、 em： 長度與元素的字型大小掛鈎。表示幾倍的字型大小。
* 4、 rem: 與根項目的字型大小掛鈎。即，與<html>標籤的font-size掛鈎，如果不設定則預設字型大小為16px;
* [em與rem區別]
* em是與當前元素自身的font-size掛鈎，如果當前元素沒有設定，則向上尋找最近的祖先元素字型大小，直到跟字型大小；
* rem與當前元素字型大小無關，直接與根項目字型大小掛鈎。
*/
html{
/*font-size: 48px;*/
}
#div3{
font-size: 32px;
background-color: yellow;
height: 3rem;
}
#div4{
width: 100px;
height: 1000px;
background-color: yellow;
padding: 30px;
border: 20px dotted red;
/* 【CSS3 背景屬性】
* 1、background-clip : 設定背景圖或背景色的裁切顯示地區。
* >>> border-box從邊框外緣開始顯示；
* >>> padding-box從邊框內緣開始顯示；
* >>> content-box從文字內容地區開始顯示;
* >>> 如果不在顯示地區的背景圖或者背景色，會被裁切掉不顯示；
* 2、 background-origin： 設定背景圖從哪開始定位。
* >>> border-box: 背景圖左上方從邊框外緣開始；
* >>> padding-box: 背景圖左上方從邊框內緣開始；
* >>> contentbox: 背景圖左上方從文字內容區開始；
*
* 3、 background-origin不會改變背景圖顯示地區的大小，只是決定背景圖的左上方從哪裡開始定位；
* background-clip 只負責裁切出顯示地區，但是並不關心背景圖定位在哪；
* 4、 background-attachment： 背景圖的附著方式；
* >>> scroll: 背景圖跟隨地區滾動。預設效果；
* >>> fixed: 背景圖充滿整個+地區，並且背景圖是固定的，不隨捲軸滾動；
*
* 5、background 縮寫形式：
* background:background-color background-image background-repeat background-atachment background-position;
*
*/
background-image: url(../01-HTML基本標籤/img/sunyang.jpg);
/*background-clip: border-box;
background-repeat: no-repeat;
background-origin: content-box;*/
background-attachment: fixed;
}
#div5{
width: 100px;
height: 100px;
background-color: red;
/* transition: 過渡屬性，接受四個屬性值
* ① 設定那個CSS屬性，參與過渡； 可以直接指定all/none；
* ② 過渡多少時間完成。 通常 .3s .5s；
* ③ 過渡的樣式效果。 通常選ease；
* ④ 過渡延時幾秒後再開始。 可以省略不寫；
*
* transition屬性可以同時定義多個過渡效果，用逗號隔開；
* eg:transition: width .5s ease,height 1.5s ease;
*/
transition: width .5s ease,height 1.5s ease;
}
#div5:hover{
width: 40px;
height: 40px;
background-color: yellow;
}
#div6{
width: 100px;
height: 100px;
background-color: red;
transition: all .5s ease;
}
#div6-1:hover+#div6{
/* [transform 定義變換屬性]
* 1、常用的變換函數：
* >>> translate(10px,10px) 平移,第二個不寫預設為0
* >>> scale(1.1) 縮放，第二個不寫，預設等於第一個
* >>> rotate(90deg) 旋轉，預設繞Z軸轉可以使用rotateX()等
* >>> skew(20deg,30deg) 扭曲，水平、垂直方向扭曲多少度；
*
* 2、transform可以同時實現多種變換，用空格分隔
* eg: transform: skew(20deg) scale(1.3) translate(100px);
*
* 3、transform-origin： 定義變換起點，常用於旋轉變換。
* 可選值： left/center/right bottom/center/top
* 也可以直接指定X、Y軸座標點，第一個數為X軸；
*
* 例如：transform: rotate(90deg);
* transform-origin:right bottom;
* 表示：繞右下角旋轉90度。
*/
transform: skew(20deg) scale(1.3) translate(100px);
/*transform-origin: 100px 200px;*/
}
走過夏天，一路慢行的CSS之旅
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
