在網頁制作中,CSS樣式是非常重要的,它可以定義網頁中的各種元素樣式,使得網頁變得更加美觀、易讀、易用。下面是一份包含常用的CSS樣式的清單,希望能夠對你的網頁制作有所幫助。
/* 文本 */ p { font-size: 14px; /* 字體大小 */ line-height: 1.5; /* 行高 */ color: #333; /* 字體顏色 */ font-family: Arial, sans-serif; /* 字體系列 */ text-align: left; /* 文本對齊方式 */ } /* 鏈接 */ a { color: #007bff; /* 鏈接顏色 */ text-decoration: none; /* 文本去除下劃線 */ } a:hover { color: #0056b3; /* 鼠標懸停鏈接顏色 */ text-decoration: underline; /* 鼠標懸停下劃線 */ } /* 列表 */ ul, ol { padding-left: 1.2em; /* 列表標記距離左側距離 */ margin-top: 0; /* 列表頂部無空白 */ margin-bottom: 1.5em; /* 列表底部留白 */ } li { margin-bottom: 0.5em; /* 列表項間距 */ } /* 圖片 */ img { max-width: 100%; /* 圖片寬度不超過父容器 */ } /* 表格 */ table { border-collapse: collapse; /* 表格邊框合并 */ width: 100%; /* 表格寬度 */ } th, td { padding: 0.75rem; /* 單元格內邊距 */ border: 1px solid #dee2e6; /* 單元格邊框樣式 */ } /* 表單 */ input, textarea, select { display: block; /* 元素變為塊級元素 */ width: 100%; /* 寬度占據父容器全部 */ padding: 0.375rem 0.75rem; /* 元素內邊距 */ font-size: 1rem; /* 字體大小 */ line-height: 1.5; /* 行高 */ color: #495057; /* 字體顏色 */ background-color: #fff; /* 背景顏色 */ border: 1px solid #ced4da; /* 邊框樣式 */ border-radius: 0.25rem; /* 邊框圓角 */ transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; /* 過渡效果 */ } input:focus, textarea:focus { border-color: #007bff; /* 獲得焦點時邊框顏色 */ box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* 獲得焦點時陰影效果 */ }
以上CSS樣式只是其中的一小部分,網頁制作中還有很多其他的樣式可以使用。希望大家在使用CSS樣式時,注意網頁的整體設計風格和用戶體驗,使得網頁更加優美、易用。
上一篇網頁制作css高光代碼
下一篇html16色顏色代碼