应用视觉设计
align
?CSS 里面的?text-align?屬性可以控制文本的對齊方式。
text-align: justify;?可以讓除最后一行之外的文字兩端對齊，即每行的左右兩端都緊貼行的邊緣。
text-align: center;?可以讓文本居中對齊。
text-align: right;?可以讓文本右對齊。
text-align: left;?是默認值，它可以讓文本左對齊。?
size
width
你可以使用 CSS 里的?width?屬性來指定元素的寬度。 屬性值可以是相對單位（比如?em），絕對單位（比如?px），或者包含塊（父元素）寬度的百分比。
height
tag
stron加粗
<strong>? 內容</strong>
=font-weight:bold;
underline下劃線
<u>內容</u>
=text-decoration: underline;
emphasize斜體
<em> 內容 </em>
=font-style: italic;
strick刪除線
<s>內容</s>
=text-decoration: line-through;
hr水平線
人力資源（bushi
Horizontal Rule<hr>自閉合
backgrounhd-color
rgba 代表：
??r = red 紅色
??g = green 綠色
??b = blue 藍色
??a = alpha 透明度(?0 代表完全透明，1 代表完全不透明)
允許使用background：url()添加背景
font-size
標簽屬性值用font-size更改字體大小
font-weight
字體粗細
box-shadow陰影
box-shadow?屬性的陰影依次由下面這些值描述，由逗號分隔的一個或多個陰影列表。：
- offset-x?陰影的水平偏移量；
- offset-y?陰影的垂直偏移量；
- blur-radius?模糊半徑（可選）；
- spread-radius?陰影擴展半徑（可選）；
- color
?opacity透明度
由0到1：透明->不透明
text-transform大小寫
| lowercase | "transform me" |
| uppercase | "TRANSFORM ME" |
| capitalize | "Transform Me" |
| initial | 使用默認值 |
| inherit | 使用父元素的?text-transform?值。 |
| none | Default:不改變文字。 |
? line-height
行高，行間距
hover
懸停狀態
a {color: #000;正常黑色}a:hover{color:blue;懸停藍色}position
relative
當元素的定位設置為?relative?時，它允許你通過 CSS 指定該元素在當前文檔流頁面下的相對偏移量。 CSS 里控制各個方向偏移量的屬性是?left、right、top?和?bottom。 它們代表從原來位置向遠離該方向偏移指定的像素、百分比或者 em。
p {position: relative;bottom: 10px; }?absolute
周圍的元素會忽略它。
fixed
它是一種特殊的絕對（absolute）定位，將元素相對于瀏覽器窗口定位。不會隨著屏幕滾動而移動。
float
浮動元素不在文檔流中，它向?left?或?right?浮動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。 通常需要用?width?屬性來指定浮動元素占據的水平空間。
z-index
解決重疊問題，數值大的放在上面
居中margin：auto
?圖片默認是內聯元素，但是可以通過設置其?display?屬性為?block來把它變成塊級元素。
hsl(Hue,?Saturation, Lightness)
CSS3 引入了?hsl()?做為顏色的描述方式。
色相是色彩的基本屬性，就是平常所說的顏色名稱，如紅色、黃色等。 以顏色光譜為例，光譜左邊從紅色開始，移動到中間的綠色，一直到右邊的藍色，色相值就是沿著這條線的取值。 在?hsl()?里面，色相用色環來代替光譜，色相值就是色環里面的顏色對應的從 0 到 360 度的角度值。
飽和度是指色彩的純度，也就是顏色里灰色的占比。 飽和度越高則灰色占比越少，色彩也就越純；反之則完全是灰色。 飽和度的取值范圍是表示灰色所占百分比的 0 至 100。
亮度決定顏色的明暗程度，也就是顏色里白色或者黑色的占比。 其中，100% 的亮度表示純白色， 0% 的亮度則表示純黑色；而 50% 的亮度就表示在色相中選取的顏色。
linear-gradient
線性漸變
background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...); 第一個參數指定了顏色過渡的方向——它的值是角度，90deg 表示垂直漸變（從左到右），45deg 表示沿對角線漸變（從左下方到右上方）。 其他參數指定了漸變顏色的順序：?linear-gradient(35deg,#CCFFFF,#FFCCCC)有點好看
linear-gradient
重復線性漸變
repeating-linear-gradient(45deg,yellow 0px,yellow 40px,同色起止像素相同，不漸變black 40px,同像素起止色不同，則不漸變blue 80px 不同像素不同色，漸變);transform
:scale(n)
放縮n倍
:hover
transform又很多函數可調用，比如用偽類hover可使懸停時完成效果
:skewX()
按x（y）軸翻轉角度，
::after()
偽元素?::before?和?::after。 偽元素可以在所選元素之前或之后添加一些內容。
動畫
#anim {animation-name: colorful;animation-name 用來設置動畫的名稱animation-duration: 3s;設置動畫所花費的時間。 }@keyframes colorful {0% {background-color: blue;}100% {background-color: yellow;} }如果不想動畫重置，可加入
animation-fill-mode: forwards;?iteration
animation-iteration-count: 3;infinete則一直播放動畫
在 CSS 動畫里，animation-timing-function?用來定義動畫的速度曲線。 速度曲線決定了動畫從一套 CSS 樣式變為另一套所用的時間。 如果要描述的動畫是一輛車在指定時間內（animation-duration）從 A 運動到 B，那么?animation-timing-function?表述的就是車在運動中的加速和減速等過程。
有一些預定義的關鍵字可用于常見的選項。 比如，默認值是?ease，動畫以低速開始，然后加快，在結束前變慢。 其它常用的值包括?ease-out：動畫以高速開始，以低速結束；ease-in，動畫以低速開始，以高速結束；linear：動畫從頭到尾的速度是相同的。
?除了預定義值之外，CSS 還提供了貝塞爾曲線（Bezier curves）來更細致地控制動畫的速度曲線。
在 CSS 動畫里，我們可以用?cubic-bezier?來定義貝塞爾曲線。 曲線的形狀代表了動畫的速度。 曲線在 1 * 1 的坐標系統內， 其中 X 軸代表動畫的時間間隔（類似于時間比例尺），Y 軸代表動畫的改變。
cubic-bezier?函數包含了 1 * 1 網格里的4個點：p0、p1、p2、p3。 其中?p0?和?p3?是固定值，代表曲線的起始點和結束點，坐標值依次為 (0, 0) 和 (1, 1)。 你只需設置另外兩點的 x 值和 y 值，設置的這兩點確定了曲線的形狀從而確定了動畫的速度曲線。
總結
