@font-face {
font-family: "myFont";
src: url("myFont.ttf");
}
/*
在資源文件中放置你的字體，在開頭的時候就聲明字體名字和路徑
瀏覽器就會下載運用，在其後可以設置運用它
*/
#fontAttribute{
font-family: myFont,Arial, Helvetica, sans-serif;
font-size: 1em;
font-style: normal;
font-weight: lighter;
text-transform:capitalize;
text-decoration: overline;
text-shadow: 1px,1px,1px,yellow;
text-align: left;
line-height: 2;
letter-spacing: 1px;
word-spacing: 2px;
font-kerning: none;
text-indent: 2px;
word-break: keep-all;
text-align: center;
hyphens: auto;
}
/*
font-family 字體棧，將按照一個個字體進行檢索，使用被匹配的哪個字體
font-size 字體大小，其中em爲相對於父元素的字體大小，1em表示與父元素一致 rem是相對於根元素，不是父元素 px是像素
font-style 字體樣式，normal代表如果是斜體則取消斜體，italic斜體，oblique傾斜（斜體不作用，用普通文字的傾斜版）
font-weight border比父元素的粗體更粗一些，lighter更細點
text-transform 轉化爲小寫 capitalize: 轉換所有單詞讓其首字母大寫。 lowercase,uppercase
full-width: 將所有字形轉換成固定寬度的正方形，類似於等寬字體，允許對齊。拉丁字符以及亞洲語言字形（如中文，日文，韓文）
text-decoration line-through 線穿過字體中間 overline underline decoration還有color等選項
text-shadow 文字陰影，水平垂直偏移以及模糊半徑 顏色 可設置多個陰影，用逗號隔開
text-aligh 文本對齊方式 justify: 使文本展開，改變單詞之間的差距，使所有文本行的寬度相同。你需要仔細使用，它可以看起來很可怕。特別是當應用於其中有很多長單詞的段落時。如果你要使用這個，你也應該考慮一起使用別的東西，比如 hyphens，打破一些更長的詞語。
line-height 行高，純數字以倍數呈現
letter-spacing 字母的間距
word-spacing 單詞的間距
font-kering 開關字體的間距
text-indent 指代第一行空留多少空間
word-break 是否打斷單詞
text-aligh-last:最後一行的對其方式
hyphens 開啓或關閉連字符
*/
/*
list 存在有序和無序，時常用它來做一些導航欄之類的東西，移動顯示不同的等等，因爲它有很多子項
*/
#ulAttribute{
list-style-type: disc;
list-style-image: url('../images/picture.png');
list-style-position: outside;
background-image: url("../images/picture.png");
background-position: 100% 50%;
background-size: 10px 10px;
background-repeat: no-repeat;
background-color: aqua;
}
/*
list-style-type 選擇一些前綴 如果設置了背景，可以通過none來關閉
list-style-image 可以選擇圖片前綴，但是無法修改很多參數，因此不推薦,改爲調背景
list-style-position inside則看作是文本的一部分，對其文本。 而outside則作爲單獨的一部分，對其自己
background-image 設置背景圖片
background-position 設置圖片位置，上面是設置在左上角 如果第一值是100%，則在右側
background-size 設置背景大小
background-repeat 一般設置的背景會一值重複，直到填充完畢，因爲只需前面表示，則不填充
在html中可以設置一些參數：
<ol start="4" reversed>
<li>Toast pitta, leave to cool, then slice down the edge.</li>
<li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
<li>Wash and chop the salad.</li>
<li value="3">Fill pitta with salad, humous, and fried halloumi.</li>
</ol>
從4開始計數，反着記，上面輸出爲4323
也可以指定value，但是一定要是數字，道理我應該很容易理解
*/
a:link {
color: #265301;
}
a:visited {
color: #437A16;
}
a:focus {
border-bottom: 1px solid;
background: #BAE498;
}
a:hover {
border-bottom: 1px solid;
background: #CDFEAA;
}
a:active {
background: #265301;
color: #CDFEAA;
}
/*
鏈接的五種狀態：
Link (沒有訪問過的): 這是鏈接的默認狀態，當它沒有處在其他狀態的時候，它可以使用:link 僞類來應用樣式。
Visited: 這個鏈接已經被訪問過了(存在於瀏覽器的歷史紀錄), 它可以使用 :visited 僞類來應用樣式。
Hover: 當用戶的鼠標光標剛好停留在這個鏈接，它可以使用 :hover 僞類來應用樣式。
Focus: 一個鏈接當它被選中的時候 (比如通過鍵盤的 Tab 移動到這個鏈接的時候，或者使用編程的方法來選中這個鏈接 HTMLElement.focus()) 它可以使用 :focus 僞類來應用樣式。
Active: 一個鏈接當它被激活的時候 (比如被點擊的時候)，它可以使用 :active 僞類來應用樣式。
可以通過設置不同狀態來提示用戶
*/
/*
與盒子有關的
*/
#boxAttribute{
min-width: 200px;
max-width: 600px;
display: block;
flex: 1 300px;
box-sizing: border-box;
}
/*
盒子概要：
設置最大和最小寬度，當父容器的大於1280px時，則顯示爲1280px，小於480px時，則顯示480px,拖動查看，其餘則保持和父容器一直
max-width 理解應該是和圖片本身有關，當父容器小於圖片本身寬度時，圖片保持和父容器一致
display:
block box 塊盒 獨佔一行，和前後內容不連續
inline 隨文檔文本流堆放，可能會對自身產生影響
inline-block 也會隨文本流堆放，但是不會影響其內部，且該盒不會被分成兩行顯示
flex 鎖定在一行，每個框的大小和最大的框height和width保持一致，平均分配，給每一個盒子
flex:
當在父元素設置的時候無任何用處，默認爲1，可以特殊定義子元素，flex 2，會按照比例分配寬度給每一個盒子
box-size設定和沒設定border-box
未設定的框的寬度和高度等於content + padding + border。
設定的框的寬度和高度等於通過CSS設置在 content 的寬度和高度, padding 和 border 並沒有添加到總寬度和高度上; 反而，他們佔用一些內容的空間，使內容更小，並保持總體尺寸相同。
*/
#bkgrdAttribute{
background-image: linear-gradient(to bottom right,white,rgba(255, 255, 255, 0.534) 50%,black);
background-attachment: fixed;
background: url(image.png) no-repeat 99% center,
url(background-tile.png),
linear-gradient(to bottom, yellow, #dddd00 50%, orange);
background-color: yellow;
background-repeat: no-repeat,no-repeat,repeat;
}
/*
設置背景爲漸變色：
to right,to top,to bottom是漸變顏色的方向，起始顏色和終點顏色，如果顏色設置3個值的話，則會在由A-B-C
顏色可設置爲多個值，同時也可指定顏色站點的位置如上
background-attachment:
scroll 自身內容框滑動和所有父元素，背景跟着一起動，顯示的內容不變
fixed 當自身內容框滑動，背景不變，但是父元素滑動，自身不動，就在滑動看他這個圖,想想知乎那個背景
local 自身滑動，跟着一起滑動，父元素滑動，本身不滑，整體一起動
設置多個背景，背景將按照順尋進行層疊，例如上面的，最開始的圖片將會疊到最上面,
同時相應的repeat也要設置多個值,其餘設置順序一樣
*/
#borderAttribute{
border-radius: 10px;
border: 2px solid black;
width: 600px;
padding: 20px;
margin: 10px auto;
line-height: 3;
background-color: #f66;
text-align: center;
/* border-related properties */
border: 20px solid black;
background-clip: padding-box;
border-image-source: url(https://mdn.mozillademos.org/files/13060/border-image.png);
border-image-slice: 40;
border-image-repeat: round;
}
/*
border-radius 創建邊框圓角：
如果是兩個值 10px / 20px則創建的是橢圓圓角
/* 1st value is top left and bottom right corners,
2nd value is top right and bottom left
border-radius: 20px 10px;
/* 1st value is top left corner, 2nd value is top right
and bottom left, 3rd value is bottom right
border-radius: 20px 10px 50px;
/* top left, top right, bottom right, bottom left
border-radius: 20px 10px 50px 0;
使用圖片對邊框進行修飾
首先對引入頭像進行切片，slice以像素爲單位，如上述圖片爲160*160
stretch：默認;側面的圖像被拉伸來填滿邊界。這通常看起來很糟糕和像素化，所以不推薦。
repeat：邊圖像被重複，直到邊界被填滿。根據具體情況，這可能看起來不錯，但您可能會看到一些難看的圖像片段。
round： 邊的圖像被重複，直到邊界被填滿，它們都被稍微拉伸，這樣就不會出現碎片。
space：邊圖像被重複，直到邊界被填滿，每個拷貝之間添加了少量的間隔，這樣就不會出現任何片段。這個值只在Safari(9+)和Internet Explorer(11+)中得到支持。
*/
button {
width: 150px;
font-size: 1.1rem;
line-height: 2;
border-radius: 10px;
border: none;
background-image: linear-gradient(to bottom right, #777, #ddd);
box-shadow: 1px 1px 1px black,
inset 2px 3px 5px rgba(0,0,0,0.3),
inset -2px -3px 5px rgba(255,255,255,0.5);
}
button:focus, button:hover {
background-image: linear-gradient(to bottom right, #888, #eee);
}
button:active {
box-shadow: inset 2px 2px 1px black,
inset 2px 3px 5px rgba(0,0,0,0.3),
inset -2px -3px 5px rgba(255,255,255,0.5);
}
/*
第一個長度值是水平偏移量（horizontal offset ）——即向右的距離，陰影被從原始的框中偏移(如果值爲負的話則爲左)。
第二個長度值是垂直偏移量（vertical offset）——即陰影從原始盒子中向下偏移的距離(或向上，如果值爲負)。
第三個長度的值是模糊半徑（blur radius）——在陰影中應用的模糊度。
顏色值是陰影的基本顏色（base color）。
*/
.multiply{
background-blend-mode: multiply;
}
/*
background-blend-mode 背景混合模式，疊加！
*/
