/* */：
* @import url("css/02-CSS.css");
*
* [兩種導入方式的區別]
* ① link屬於標準的HTML標簽，[email protected]；
* ② link可以兼容所有低版本瀏覽器，[email protected]；
* ③ link是將兩個文件鏈接起來，起橋梁作用； [email protected]；
* ④ 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常用文本屬性

/* 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分。 */

CSS新增屬性

/* 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- : 火狐瀏覽器；
* 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之旅