一、字體設(shè)置

字體樣式的設(shè)置，屬性有：

font-family 設(shè)置字體類型 隸書
font-size 設(shè)置字體大小 12px
font-style 設(shè)置字體風(fēng)格 italic
font-wieght 設(shè)置字體的粗細(xì) bold

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

字體風(fēng)格---->字體粗細(xì)---->字體大小---->字體類型

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

設(shè)置字體大小，設(shè)置數(shù)字后面要加px;

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

text-decoration 設(shè)置文本的裝飾

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

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

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

RGBA:在RGB的基礎(chǔ)上，增加了控制透明度的參數(shù)，其中這個(gè)透明通道值為0到1。

注：

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

三、排版布局

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

justify 實(shí)現(xiàn)兩端對齊文本效果

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

首行縮進(jìn)

text-indent :em或px

text-indent: 2em;
3.3 行高

line-height :px

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

text-decoration

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

none 默認(rèn)值，定義標(biāo)準(zhǔn)文本

3.5 div的應(yīng)用

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軸位移，用來令陰影垂直位移量---->陰影模糊半徑，代表陰影向外模糊的模糊范圍。

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

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

a : active 鼠標(biāo)單擊未釋放的超鏈接樣式

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

格式：

標(biāo)簽名：偽類名{聲明；}

設(shè)置偽類的順序，從上到下；

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

3.8 背景屬性的使用

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

首先來設(shè)置背景顏色樣式

background-color

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

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

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

background-repeat屬性：

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

repeat-y 只沿垂直方向平步

背景定位：

background-position屬性：

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

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

XY方向關(guān)鍵詞：水平方向關(guān)鍵詞：left right center

垂直方向關(guān)鍵詞：top bottom center

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

背景圖片大小控制：

background-size

auto 默認(rèn)值，使用背景圖片保持原樣

percentage 當(dāng)時(shí)用百分比時(shí)，不是對于背景的尺寸大小來計(jì)算的，而是相對于元素寬度來計(jì)算的

cover 整個(gè)背景圖片放大填充了整個(gè)元素

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

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

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

#線性漸變，從左到右設(shè)置，漸變方向，第一種顏色值，第二種顏色，質(zhì)地，三種顏色時(shí)等等。#

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

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

Ie瀏覽器是Trident內(nèi)核加前綴-ms-

Chrome 瀏覽器是Webkit內(nèi)核加前綴-webkit-

Safari瀏覽器是Webkit內(nèi)核加前綴-webkit-

Opera瀏覽器是Blink內(nèi)核加前綴-o-

Firefox瀏覽器是內(nèi)核加前綴-moz-

兼容webkit內(nèi)核的瀏覽器：

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

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

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

• • 
    2.有序列表

定義列表

標(biāo)題

1

2

• 泰戈?duì)栐娂?/li>
• 冰心詩集
• 莎士比亞

泰戈?duì)栐娂?/li>

冰心詩集

莎士比亞

文人

泰戈?duì)栐娂?/dd>

冰心詩集

莎士比亞

無序列表的特性：

1沒有順序，每個(gè)ul標(biāo)簽獨(dú)占一行

2標(biāo)簽像前面有個(gè)實(shí)心小圓點(diǎn)

3一般用于無序類型的列表，如導(dǎo)航側(cè)邊，新聞欄有規(guī)律的圖文組合模塊的

定義列表的特性:

1沒有順序，每個(gè)第一批標(biāo)簽的dl標(biāo)簽獨(dú)占一行(塊元素）

2默認(rèn)沒有標(biāo)記

3一般用于一個(gè)標(biāo)題下有一個(gè)或多個(gè)列表項(xiàng)的情況。

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

lidt-style-type

list-style-type: square
none 無標(biāo)記字符號

disc 實(shí)心圓,默認(rèn)類型

circle 空心圓

square 實(shí)心正方形

decimal 數(shù)字

例如：li { list-style : none }

為什么使用表格 : 簡單通用結(jié)構(gòu)穩(wěn)定

基本結(jié)構(gòu): 行 列 單元格

表格標(biāo)簽:

行標(biāo)簽:

單元格標(biāo)簽:

大數(shù)據(jù)學(xué)士后32班成績列表
李志豪	語文	90
	數(shù)學(xué)	90
李寧	語文	100
	數(shù)學(xué)	59

跨列：colspan

跨行: rowspan

五、表單在網(wǎng)頁中的應(yīng)用

表單語法：規(guī)定如何發(fā)送表單數(shù)據(jù)常用值method（post/get）；表示向何處發(fā)送表單數(shù)據(jù)action

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

在實(shí)際網(wǎng)頁開發(fā)中，通常采用post方式提交表單數(shù)據(jù)。

一般表格表單元素有：

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

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

input元素的值value （type為radio時(shí)，必須指定一個(gè)值）

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

輸入最大字符數(shù)：maxlength （type為text或password時(shí)）

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

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

---

轉(zhuǎn)載：https://blog.csdn.net/Golden_soft/article/details/80379111

總結(jié)

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

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