表單中運用外部 CSS
在網頁開發中,表單通常是必不可少的元素之一。表單可以為用戶提供一個交互式的界面,用于提交數據、進行搜索、登錄等操作。為了使表單更加美觀、易于使用,我們可以使用外部 CSS 樣式表來為其添加樣式。
/* 引入外部 CSS 樣式表 */ <link rel="stylesheet" type="text/css" href="form.css" /> /* 在 form.css 中添加樣式 */ input[type="text"] { border: 1px solid #CCCCCC; padding: 5px; } input[type="submit"] { background-color: #26BFBF; color: #FFFFFF; border: none; padding: 10px; cursor: pointer; } /* 樣式表中可以添加其他的樣式 */
上面的代碼中,我們首先通過<link>
標簽引入了一個名為 "form.css" 的外部樣式表。然后我們在樣式表中分別為文本框和提交按鈕添加了樣式。文本框的樣式包括邊框、內邊距等;提交按鈕的樣式包括背景顏色、顏色、邊框、內邊距、鼠標指針等。
值得注意的是,我們在樣式表中使用了input[type="text"]
和input[type="submit"]
選擇器來選擇文本框和提交按鈕,其中type
屬性表示輸入框的類型。這種選擇器的運用可以輕松地為表單中的不同元素添加不同的樣式,提高表單的可讀性、可操作性和用戶體驗。
<form> <label for="username">用戶名</label> <input type="text" id="username" name="username" /> <br><br> <label for="password">密碼</label> <input type="password" id="password" name="password" /> <br><br> <input type="submit" value="登錄" /> </form>
最后,我們在表單中使用了上述樣式,如上面的代碼所示,為用戶名和密碼輸入框添加了標簽,并為登錄按鈕添加了 "登錄" 文本。我們可以看到,由于運用了外部樣式表,表單的樣式更加美觀、統一,而且易于維護。
上一篇pa zoua vue
下一篇表格CSS頭部