應用視覺設計

• • 一、設置文本樣式
  • • 1.設置對齊方式
    • 2.調(diào)整元素的寬度和高度
    • 3.加粗、下劃線、刪除線、水平線、強調(diào)文本
    • 4.調(diào)整文本的背景色
    • 5.調(diào)整標題與段落的大小
    • 6.給元素添加陰影、降低元素的透明度
    • 7.給文本添加大寫效果
    • 8.設置多個標題元素的 font-size和font-width
    • 9.設置段落的font-size和line-height
  • 二、設置元素位置
  • • 1.調(diào)整錨點的懸停狀態(tài)
    • 2.更改元素的相對位置
    • 3.絕對定位的參照物是元素的父元素
    • 4.固定定位的參照物是瀏覽器的窗口
    • 5.使用 float 屬性將元素左浮動或右浮動
    • 6.更改重疊元素的位置
    • 7.將元素水平居中

一、設置文本樣式

1.設置對齊方式

CSS 里面的 text-align 屬性可以控制文本的對齊方式。

text-align: justify; 可以讓除最后一行之外的文字兩端對齊，即每行的左右兩端都緊貼行的邊緣。
text-align: center; 可以讓文本居中對齊。
text-align: right; 可以讓文本右對齊。
text-align: left; 是默認值，它可以讓文本左對齊。

2.調(diào)整元素的寬度和高度

寬度：width
高度：height
屬性值可以是相對單位（比如 em），絕對單位（比如 px），或者包含塊（父元素）寬度的百分比。

img {width:20px;height: 20px; }

3.加粗、下劃線、刪除線、水平線、強調(diào)文本

(1)加粗：strong
添加了 strong 標簽后，瀏覽器會自動給元素添加這段樣式：font-weight:bold;
(2)下劃線： u
添加了 u 標簽后，瀏覽器會自動給元素添加這段樣式：text-decoration: underline;
(3)添加刪除線：
添加了 s 標簽后，瀏覽器會自動給元素添加這段樣式：text-decoration: line-through;
(4)創(chuàng)建水平線：hr
hr 標簽用來創(chuàng)建一條寬度撐滿父元素的水平線。 這種水平分割線一般用來表示內(nèi)容主題的改變，或在視覺上將文檔分隔成幾個部分。
hr標簽是自閉合標簽，也就是沒有結(jié)束標簽
(5)強調(diào)文本：em
使用 em 標簽來強調(diào)文本，瀏覽器會自動給元素應用 font-style: italic;所以文本會顯示為斜體。
注意：上面五個，出了hr標簽，其他的都是將要設置樣式的文本用開始標簽和結(jié)束標簽包圍起來即可。

4.調(diào)整文本的背景色

設置background-color屬性
rgba 代表：
r = red 紅色
g = green 綠色
b = blue 藍色
a = alpha 透明度
RGB 值可以取在 0 到 255 之間。 alpha 值可取在 0 到 1 之間，其中 0 代表完全透明，1 代表完全不透明。

background-color:rgba(45,45,45,0.1);

5.調(diào)整標題與段落的大小

使用 font-size 屬性來設置元素內(nèi)文字的大小

font-size:27px;

6.給元素添加陰影、降低元素的透明度

(1)box-shadow 屬性用來給元素添加陰影，該屬性值是由逗號分隔的一個或多個陰影列表。
box-shadow 屬性的陰影依次由下面這些值描述：

• offset-x 陰影的水平偏移量；
• offset-y 陰影的垂直偏移量；
• blur-radius 模糊半徑；
• spread-radius 陰影擴展半徑；
• color
  其中 blur-radius 和 spread-radius 是可選的。

box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); <!--多個陰影列表用逗號分隔-->

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

• 屬性值為 1 代表完全不透明。
• 屬性值為 0.5 代表半透明。
• 屬性值為 0 代表完全透明。
  透明度可以應用到元素內(nèi)的所有內(nèi)容，不論是圖片，還是文本，或是背景色。

7.給文本添加大寫效果

CSS 里的 text-transform 屬性可以改變英文字母的大小寫。 使用這個屬性時，我們無需改變 HTML 元素中的文本也可以統(tǒng)一頁面里英文的顯示。
下面的表格展示了 text-transform 的不同值對文字 “Transform me” 的影響：

值結(jié)果

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

8.設置多個標題元素的 font-size和font-width

<style>h1 {font-size: 68px;font-weight:800;}h2 {font-size: 52px;font-weight:600;}h3 {font-size: 40px;font-weight:500;}h4 {font-size: 32px;font-weight:400;}h5 {font-size: 21px;font-weight:300;}h6 {font-size: 14px;font-weight:200;} </style>

9.設置段落的font-size和line-height

p {font-size: 16px;line-height: 25px;}

二、設置元素位置

1.調(diào)整錨點的懸停狀態(tài)

偽類是可以添加到選擇器上的關(guān)鍵字，用來選擇特定狀態(tài)的元素。
可以使用 :hover 偽類選擇器來選取超鏈接的懸停狀態(tài)。
下面的代碼可以在鼠標懸停在超鏈接上時將其 color 變成紅色：

a:hover {color: red; }

2.更改元素的相對位置

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

當元素的定位設置為 relative 時，它允許你通過 CSS 指定該元素在當前文檔流頁面下的相對偏移量。 CSS里控制各個方向偏移量的屬性是 left、right、top 和 bottom。 它們代表從原來位置向遠離該方向偏移指定的像素、百分比或者em。
把元素的位置設置成相對，并不會改變該元素在布局中所占的位置，也不會對其它元素的位置產(chǎn)生影響。

h2 {position:relative;top:15px;<!--向上偏移了15px-->}

CSS 里面的 top、bottom、left 和 right 定義了元素在相應方位的偏移距離。
元素將從當前位置向?qū)傩韵喾吹姆较蚱啤?/p>

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

CSS position 屬性的取值選項 absolute，它的含義是相對于其包含塊定位。

絕對定位比較特殊的一點是元素的定位參照于最近的 positioned 祖先元素。 如果它的父元素沒有添加定位規(guī)則（默認是 position:relative;），瀏覽器會繼續(xù)尋找直到默認的 body 標簽。

#searchbar {position:absolute;top:50px;right:50px;}

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

fixed 定位，它是一種特殊的絕對（absolute）定位，將元素相對于瀏覽器窗口定位。 類似于絕對位置，它與 CSS偏移屬性一起使用，并且也會將元素從當前的文檔流里面移除。 其它元素會忽略它的存在，這樣也許需要調(diào)整其他位置的布局。但 fixed 和 absolute 的最明顯的區(qū)別在于，前者定位的元素不會隨著屏幕滾動而移動。

#navbar {position:fixed;<!--將元素相對于瀏覽器窗口定位-->top:0px;left:0px;width: 100%;background-color: #767676;}

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

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

#left {float:left;width: 50%;}

6.更改重疊元素的位置

當一些元素在位置上重疊時（例如，使用 position: absolute | relative | fixed | sticky 時），在HTML 里后出現(xiàn)的元素會默認顯示在更早出現(xiàn)的元素的上面。 你可以使用 z-index 屬性指定元素的堆疊次序。 z-index 的取值是整數(shù)，數(shù)值大的元素會疊放到數(shù)值小的元素上面。

.first {z-index:2; } .second {z-index:1; } <!--first的z-index值大于second，所有first在上-->

7.將元素水平居中

在應用設計中經(jīng)常需要把一個塊級元素水平居中顯示。 一種常見的實現(xiàn)方式是把塊級元素的 margin 值設置為 auto。
同樣的，這個方法也對圖片奏效。 圖片默認是內(nèi)聯(lián)元素，但是可以通過設置其 display 屬性為 block來把它變成塊級元素。

div {background-color: blue;height: 100px;width: 100px;margin:auto;}

謝謝你的堅持閱讀ovo喲，讓我們一起加油吖

總結(jié)

以上是生活随笔為你收集整理的应用视觉设计_Day01的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。