web 內容大部分都是文本。CSS 里面的text-align屬性可以控制文本的對齊方式。

text-align: justify;可以讓除最后一行之外的文字兩端對齊，即每行的左右兩端都緊貼行的邊緣。

text-align: center;可以讓文本居中對齊。

text-align: right;可以讓文本右對齊。

text-align: left;是text-align的默認值，它可以讓文本左對齊。

?

CSS提供的偽類是可以添加到選擇器上的關鍵字，用來選擇元素的指定狀態。

比如，超鏈接可以使用:hover偽類選擇器定義它的懸停狀態樣式。下面是懸停超鏈接時改變超鏈接顏色的 CSS：

a:hover {
??color: red;
}

?

?

CSS 提供font-weight屬性用于設置文本中所用的字體的粗細?

CSS 提供line-height屬性來設置行間的距離。行高，顧名思義，用來設置每行文字所占據的垂直空間。

?

?CSS 里面的width屬性來指定元素的寬度。屬性值可以是相對單位（比如 em），絕對單位（比如 px），或者包含塊（父元素）寬度的百分比。下面這個例子把圖片的寬度設置為 220px：

img {
??width: 220px;
}?

CSS 里面的height屬性來指定元素的高度。下面這個例子把圖片的高度設置為 20px：

img {
??height: 20px;
}

?

術語：Strong => s => 加粗。

你可以使用strong標簽來加粗文字。添加了strong標簽后，瀏覽器會自動給元素應用font-weight:bold;。

?

術語：Underline => u => 下劃線。

你可以使用u標簽來給文字添加下劃線。添加了u標簽后，瀏覽器會自動給元素應用text-decoration: underline;。

?

術語：emphasis => em => 強調。

你可以使用em標簽來強調文本。由于瀏覽器會自動給元素應用font-style: italic;，所以文本會顯示為斜體。

?

術語：Strikethrough => s => 刪除線。

你可以用s標簽來給文字添加刪除線，我是明晃晃的刪除線，它代表著這段文字不再有效。添加了s標簽后，瀏覽器會自動給元素應用text-decoration: line-through;。

?

術語：Horizontal Rule => hr => 水平線。

你可以用hr標簽來創建一條寬度撐滿父元素的水平線。它一般用來表示文檔主題的改變，在視覺上將文檔分隔成幾個部分。

?

文字的父元素上添加background-color屬性還可以使用rgba();

? rgba 代表：
??r = red 紅色
??g = green 綠色
??b = blue 藍色
??a = alpha 透明度

RGB 值可以在 0 到 255 之間。alpha 值可以在 0 到 1 之間，其中 0 代表完全透明，1 代表完全不透明。rgba()非常棒，因為你可以設置顏色的透明度，這意味著你可以做出一些很漂亮的半透明效果。

?

box-shadow屬性用來給元素添加陰影，該屬性值是由逗號分隔的一個或多個陰影列表。

box-shadow屬性的每個陰影依次由下面這些值描述：

• offset-x陰影的水平偏移量；
• offset-y陰影的垂直偏移量;
• blur-radius模糊距離；
• spread-radius陰影尺寸；
• 顏色。

其中blur-raduis和spread-raduis是可選的。

下面是創建了多個陰影的 CSS 例子，陰影加了模糊效果，顏色是透明度很高的黑色:

box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

?

CSS 里的opacity屬性用來設置元素的透明度。

值 1 代表完全不透明。
值 0.5 代表半透明。
值 0 代表完全透明。

透明度會應用到元素內的所有內容，不論是圖片，還是文本，或是背景色。

?

CSS 里面的text-transform屬性來改變英文中字母的大小寫。它通常用來統一頁面里英文的顯示，且無需直接改變 HTML 元素中的文本。

下面的表格展示了text-transform的不同值對文字 “Transform me” 的影響。

ValueResult

lowercase	"transform me"
uppercase	"TRANSFORM ME"
capitalize	"Transform Me"
initial	使用默認值
inherit	使用父元素的text-transform值。
none	Default:不改變文字。

?

?更改元素的相對位置?

?CSS 里一切 HTML 元素皆為盒子，也就是通常所說的盒模型。塊級元素自動從新的一行開始（比如標題、段落以及 div），行內元素排列在上一個元素后（比如圖片以及 span）。元素默認按照這種方式布局稱為文檔的普通流，同時 CSS 提供了 position 屬性來覆蓋它。

當元素的 position 設置為relative時，它允許你通過 CSS 指定該元素在當前普通流頁面下的相對偏移量。 CSS 里控制各個方向偏移量的對應的屬性是left、right、top和bottom。它們代表著從原來的位置向對應的方向偏移指定的像素、百分比或者 ems。下面的例子展示了段落向上偏移 10 像素：

p {
??position: relative;
??bottom: 10px;
}

把元素的 position 設置成 relative 并不會改變該元素在普通流布局所占的位置，也不會對其它元素的位置產生影響。CSS 里面的top、bottom、left和right定義了元素在相應方位的偏移距離。

絕對定位的參照物是元素的父元素

CSSposition屬性的取值選項absolute，absolute相對于其包含塊定位。和relative定位不一樣，absolute定位會將元素從當前的文檔流里面移除，周圍的元素會忽略它。可以用 CSS 的 top、bottom、left 和 right 屬性來調整元素的位置。absolute定位比較特殊的一點是元素的定位參照于最近的已定位祖先元素。如果它的父元素沒有添加定位規則（默認是position:relative;）,瀏覽器會繼續尋找直到默認的 body 標簽。

固定定位的參照物是瀏覽器的窗口

fixed定位，它是一種特殊的絕對（absolute）定位，區別是其包含塊是瀏覽器窗口。和絕對定位類似，fixed定位使用 top、bottom、left 和 right 屬性來調整元素的位置，并且會將元素從當前的文檔流里面移除，其它元素會忽略它的存在。

fixed定位和absolute定位的最明顯的區別是fixed定位元素不會隨著屏幕滾動而移動。

?

使用 float 屬性將元素左浮動或右浮動

通過元素的float屬性來設置。浮動元素不在文檔流中，它向左或向右浮動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。通常需要用width屬性來指定浮動元素占據的水平空間。

?

?使用 z-index 屬性更改重疊元素的位置

當一些元素重疊時，在 HTML 里后出現的元素會默認顯示在更早出現的元素的上面。你可以使用z-index屬性指定元素的堆疊次序。z-index的取值是整數，數值大的元素優先于數值小的元素顯示。

使用 margin 屬性將元素水平居中

經常需要把一個塊級元素水平居中顯示。一種常見的實現方式是把塊級元素的margin值設置為auto。

同樣的，這個方法也對圖片奏效。圖片默認是內聯元素，但是可以通過設置其display屬性為block來把它變成塊級元素。

CSS 線性漸變

HTML 元素的背景色并不局限于單色。CSS 還提供了顏色過渡，也就是漸變。可以通過background里面的linear-gradient()來實現線性漸變，下面是它的語法：

background: linear-gradient(gradient_direction, 顏色 1, 顏色 2, 顏色 3, ...);

第一個參數指定了顏色過渡的方向 - 它的值是角度，90deg 代表垂直漸變，45deg 的漸變角度和反斜杠方向差不多。剩下的參數指定了漸變顏色的順序：

例子：

background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));

CSS Transform scale 屬性可以更改元素的大小

CSS 屬性transform里面的scale()函數，可以用來改變元素的顯示比例。下面的例子把頁面的段落元素放大了 2 倍：

p {
??transform:scale(2);
}

CSS Transform scale 屬性在懸停時縮放元素?

transform屬性有很多函數，可以對元素進行調整大小、移動、旋轉、翻轉等操作。當使用偽類描述元素的指定狀態如:hover時，transform屬性可以方便的給元素添加交互。

下面是當用戶懸停段落元素時，段落大小縮放到原始大小 2.1 倍的例子：

p:hover {
??transform: scale(2.1);
}

CSS Transform skex 屬性沿X軸傾斜元素?

接下來transform屬性是skewX，skewX使選擇的元素沿著 X 軸（橫向）翻轉指定的角度。

下面的代碼沿著 X 軸翻轉段落元素 -32 度。

p {
??transform: skewX(-32deg);
}

skewY屬性使指定元素沿 Y 軸（垂直方向）翻轉指定角度。

使用 CSS 創建一個圖形

術語表：blur-radius => 模糊半徑，spread-radius => 輻射半徑，transparent => 透明的，border-radius => 圓角邊框。

?

?

總結

以上是生活随笔為你收集整理的Web 应用视觉相关便签的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。