一、字體設置

字體樣式的設置，屬性有：

font-family 設置字體類型 隸書
font-size 設置字體大小 12px
font-style 設置字體風格 italic
font-wieght 設置字體的粗細 bold

還可以將4中屬性一起寫入一個font中，不過要按照：

字體風格---->字體粗細---->字體大小---->字體類型

font-family: fantasy;
font-size: 24px;
font-style: italic;
font-weight: bold;
/全部寫在一起的方法，要按順序來寫/
font: normal 400 24px cursive;
設置字體類型，可以設置楷書，隸書等等;

設置字體大小，設置數字后面要加px;

文本屬性，文本的屬性有
color 設置文本顏色
text-align 設置元素水平對齊方式
text-indent 設置首行文本的縮進
line-height 設置文本的行高

text-decoration 設置文本的裝飾

color: #77F908;
text-indent: 2em;
line-height: 48px;
text-align: right;
text-decoration: underline;

二、顏色
RGB:顏色屬性，16進制方法表示顏色，前兩位表示紅色分量，中間兩位表示綠色分量，最后兩位表示藍色分量

rgb（r、g、b）：正數的取值為0到255。

RGBA:在RGB的基礎上，增加了控制透明度的參數，其中這個透明通道值為0到1。

注：

對于我們想要的顏色，可以在ps軟件中先找到，然后復制其下面的參數值。

三、排版布局

3.1 水平對齊（text-align）方式屬性：
left 把文本排列到左邊，默認值由瀏覽器決定
right 把文本排列到右邊
center 把文本排列到中間

justify 實現兩端對齊文本效果

text-align: right;
3.2 排版文本段落：

首行縮進

text-indent :em或px

text-indent: 2em;
3.3 行高

line-height :px

line-height: 48px;
3.4 文本裝飾：

text-decoration

text-decoration: underline;
underline 設置文本的下劃線
overline 設置文本上劃線
lint-through 設置文本的刪除線

none 默認值，定義標準文本

3.5 div的應用

3.6 圖片文本垂直對齊方式：

vertical-align

垂直對齊方式
vertical-align: bottom;
向上對齊
vertical-align:top;
向下對齊
vertical-align: middle;
middle（中央）top（頂部）bottom（底部）

文本陰影:

text-shadow

/文本陰影/
text-shadow: red 5px 4px 1px;
text-shadow : color x-offest y-offest biur-radius;
定義陰影的顏色---->x軸位移,用來定義水平位移量---->y軸位移，用來令陰影垂直位移量---->陰影模糊半徑，代表陰影向外模糊的模糊范圍。

這里還存在瀏覽器兼容性的問題。在我們不確定瀏覽器是否兼容的時候，可以上網查。caniuse.com

3.7 熟悉超鏈接屬性的使用
使用cs設置超鏈接，偽類的名稱，一共有四個:
a : link 單擊訪問時超鏈接樣式
a : visited 單擊訪問后超鏈接樣式
a : hover 鼠標懸浮其上的超鏈接樣式

a : active 鼠標單擊未釋放的超鏈接樣式

/移上去未釋放的效果/
a:hover{
color: red;
}
/單擊未跳轉時的效果/
a:active{
color: blue
}
最重要的就是鼠標懸浮其上的超鏈接樣式，我們經常使用，所以得記住它的英文單詞。

格式：

標簽名：偽類名{聲明；}

設置偽類的順序，從上到下；

<a style=“cursor: help” href=“https://www.baidu.com"target=”_self">百度

3.8 背景屬性的使用

常見的背景樣式有背景圖像和背景顏色

首先來設置背景顏色樣式

background-color

/背景顏色/
background-color:bisque ;
背景圖像：

background-image:url(圖片路徑）：

/背景圖片/
background-image:url(’…/Demo/網頁背景/buy.png’);
背景重復方式：

background-repeat屬性：

/圖片不平鋪，只顯示一次/
background-repeat:no-repeat;
repeat 沿水平和垂直兩個方向平鋪
no-repeat 不平鋪，即只顯示一次
repeat-x 只沿水平方向平鋪

repeat-y 只沿垂直方向平步

背景定位：

background-position屬性：

/向XY兩軸的偏移量/
background-position-x:80px;
background-position-y:80px
Xpos(代表水平位置）,Ypos(代表垂直位置）,單位px

X% Y% 使用百分比表示背景的位置

XY方向關鍵詞：水平方向關鍵詞：left right center

垂直方向關鍵詞：top bottom center

背景屬性簡寫：background：背景顏色，背景圖像，背景定位，背景不重復顯示

背景圖片大小控制：

background-size

auto 默認值，使用背景圖片保持原樣

percentage 當時用百分比時，不是對于背景的尺寸大小來計算的，而是相對于元素寬度來計算的

cover 整個背景圖片放大填充了整個元素

contain 讓背景圖片保持本身的寬高比例，將背景圖片縮放到寬度或高度，正好適應所定義背景的區域

線性漸變： 顏色沿著一條直線過渡，從左到右，從右到左，從上到下等

linear-gradient(position(漸變方向)，color1,color2…)

#線性漸變，從左到右設置，漸變方向，第一種顏色值，第二種顏色，質地，三種顏色時等等。#

徑向漸變： 圓形或橢圓形漸變顏色，不再沿著一條直線變化，而是從一個起點朝著所有方向混合

注：此處也有瀏覽器兼容性問題

Ie瀏覽器是Trident內核加前綴-ms-

Chrome 瀏覽器是Webkit內核加前綴-webkit-

Safari瀏覽器是Webkit內核加前綴-webkit-

Opera瀏覽器是Blink內核加前綴-o-

Firefox瀏覽器是內核加前綴-moz-

兼容webkit內核的瀏覽器：

-webkit-liner-gradient(position，color1,color2…)

四、列表
列表就是信息資源的一種展示形式，
以列表的樣式顯示，可以使信息結構化和條理化，便于瀏覽者能更快捷的獲取相應的信息。

列表的分類：
1.無序列表

• • 
    2.有序列表

定義列表

標題

1

2

• 泰戈爾詩集
• 冰心詩集
• 莎士比亞

泰戈爾詩集

冰心詩集

莎士比亞

文人

泰戈爾詩集

冰心詩集

莎士比亞

無序列表的特性：

1沒有順序，每個ul標簽獨占一行

2標簽像前面有個實心小圓點

3一般用于無序類型的列表，如導航側邊，新聞欄有規律的圖文組合模塊的

定義列表的特性:

1沒有順序，每個第一批標簽的dl標簽獨占一行(塊元素）

2默認沒有標記

3一般用于一個標題下有一個或多個列表項的情況。

列表樣式：列表樣式，可以設置列表前面的字符的形狀

lidt-style-type

list-style-type: square
none 無標記字符號

disc 實心圓,默認類型

circle 空心圓

square 實心正方形

decimal 數字

例如：li { list-style : none }

為什么使用表格 : 簡單通用結構穩定

基本結構: 行 列 單元格

表格標簽:

行標簽:

單元格標簽:

大數據學士后32班成績列表
李志豪	語文	90
	數學	90
李寧	語文	100
	數學	59

跨列：colspan

跨行: rowspan

五、表單在網頁中的應用

表單語法：規定如何發送表單數據常用值method（post/get）；表示向何處發送表單數據action

<!--復選框選了可以取消--> <input type="checkbox"name="sprots"vaule="足球"/>足球 <input type="checkbox"name="sprots"vaule="籃球"checked/>籃球 <input type="checkbox"name="sprots"vaule="籃球"/>籃球

在實際網頁開發中，通常采用post方式提交表單數據。

一般表格表單元素有：

input元素類型type （指定元素類型有：text，password，CheckBox，radio，submit，reset，file，hidden， image，和button，默認為text）

input元素名稱name （指定表單元素的名稱）

input元素的值value （type為radio時，必須指定一個值）

指定表單元素的初始寬度：size （type為text或password時元素大小為字符單位，其它的為像素px單位）

輸入最大字符數：maxlength （type為text或password時）

確定按鈕是否被選中：checked (type為radio或CheckBox時）

文本框：
<input type="text"name="urseName"value="用戶名"size=“30"maxlength=“20”/>
密碼框：
<input type="password"name="pass"size=“20”/>
單選按鈕：

---

轉載：https://blog.csdn.net/Golden_soft/article/details/80379111

總結

以上是生活随笔為你收集整理的html/css表单美化的全部內容，希望文章能夠幫你解決所遇到的問題。

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