CSS讓網頁里的提交按鈕變得更漂亮
2024-07-11 08:43:26
供稿：網友
你是不是覺得自己的主頁不夠靚麗，想讓它有所改變呢？聽說過樣式表格嗎？就是CSS，它就是那個能讓你更為準確地控制網頁的東東。讓我們先來看兩個例子：
1、把按鈕的背景由灰色變成黃色，下面是代碼：
〈formmethod="POST"〉
〈inputtype="button"value="按鈕"name="B1"style="background-color:rgb(255,255,0)"〉
〈/p〉
〈/form〉
“form”標簽就是表單的標簽，“type”就是說明按鈕的類型，這里說明按鈕是普通的命令按鈕。然后，請注意，重要的東西來了！ “style”說明這里采用了一個樣式表單，而“background-color”是用來聲明按鈕的背景顏色屬性的，后面的“rgb”則給了它的屬性值，在這里“(255,255,0)”表示是黃色。
2、把按鈕文字的顏色變成紅色，字體變成楷體，代碼如下：
〈formmethod="POST"〉
〈inputtype="button"value="按鈕"name="B1"style="background-color:rgb(255,255,0);font-family:楷體_GB2312;color:rgb(255,0,0)"〉〈/p〉
〈/form〉
看一下是不是多了些什么東西？對了，多了兩個屬性：“font-family”和“color”，前一個是字體屬性，后一個是字體的顏色屬性，它們的值分別是：楷體_GB2312和rgb(255,0,0)，說明文字是紅色的楷體字，好了，通過這個例子來了解一下什么叫做樣式表單。
首先，什么叫樣式表單呢？如果你使用過Word就知道只需要設置一次版面配置和打印格式，那么在該文件內所有的頁面都具有了相同的格式，而樣式表單起的也就是這個作用，在同一個網站只需要提供一份樣式表單，然后在所有頁引用它，那么整個網站都會有相同的格式。樣式表單一共有三種。
第一種是外部網頁樣式表單。它是一個以CSS為后綴名的文件，相當于一個模板，設置好以后只需要在網頁內部引用它，就能夠使引用的網頁具有相同的格式。
第二種是內嵌式的網頁樣式表單，它一般在申明，它只對本網頁起作用，同時如果你已經使用了外部樣式表單，那么它將被內嵌式的網頁樣式表單屏蔽。
第三種叫做內聯式樣式表單，用于一段文字，一個表格，或者是一幅圖形。在前面，我們用的就是這種樣式表單，請注意，它通常是接在一個我們比較熟悉的HTML標簽之后，比如前文的“input”標簽，以“style”開頭，后面跟著一些屬性和屬性值。并且借助它們來準確地控制這個標簽。屬性與屬性值之間以冒號隔開，屬性與屬性之間用分號隔開。
好了，有了以上的理論知識，我們再來聯系一下實際，下面我們再看一個比較復雜的例子：
〈formmethod="POST"〉
〈inputtype="button"value="按鈕"name="B1"style="font-family:隸書;font-size:9pt;background-image:url(’file:///D:/Inetpub/wwwroot/asp/wwwboad/IMAGES/asp400.jpg’);border-left:mediumridgergb(128,0,0);border-right:mediumnonergb(128,0,128);border-top:mediumnonergb(0,255,0);border-bottom:mediumridgergb(255,0,0)"〉字串9
〈/p〉
〈/form〉
其實，形式和前面講的是一樣的，只不過多了幾種屬性而已，“font-family: 隸書;Font-size: 9pt;”用來說明按鈕文字是9PT大小的隸書，按鈕的背景是一幅圖畫，用了一個“background-image”屬性。接下去用了一個“border-left”屬性說明按鈕的左邊框是隆起的，邊框線是深紅色的，厚度為中等。其余的就可以以此類推了，分別是用來說明按鈕的右邊、上邊和底邊的。
