您好,登錄后才能下訂單哦!
怎么在css中清除默認樣式和設置公共樣式?相信很多沒有經驗的人對此束手無策,為此本文總結了問題出現的原因和解決方法,通過這篇文章希望你能解決這個問題。
CSS 清除默認樣式
通常的清除默認樣式:
*{ margin:0; padding:0 } li{ list-style:none } img{ vertical-align:top; border:none }
設置默認字體
body, button, input, select, textarea /* for ie */ { font: 14px/1.5 tahoma, \5b8b\4f53, sans-serif; } h2, h3, h4, h5, h6, h7 { font-size: 100%; font-weight: normal;} address, cite, dfn, em, var { font-style: normal; } /* 將斜體扶正 */ code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 統一等寬字體 */ small { font-size: 12px; } /* 小于 12px 的中文很難閱讀, 讓 small 正常化 */ /** 重置列表元素 **/ ul, ol { list-style: none; } /** 重置文本格式元素 **/ a { text-decoration: none; } a:hover { text-decoration: underline; } sup { vertical-align: text-top; } /* 重置, 減少對行高的影響 */ sub { vertical-align: text-bottom; } /** 重置表單元素 **/ legend { color: #000; } /* for ie6 */ fieldset, img { border: 0; } /* img 搭車:讓鏈接里的 img 無邊框 */ button, input, select, textarea { font-size: 100%; } /* 使得表單元素在 ie 下能繼承字體大小 */ /* 注:optgroup 無法扶正 */ /* 重置 HTML5 元素 */ article, aside, details, figcaption, figure, footer,header, hgroup, menu, nav, section, summary, time, mark, audio, video { display: block; margin: 0; padding: 0; } mark { background: #ff0; } /* 設置placeholder的默認樣式 */ :-moz-placeholder { color: #ddd; opacity: 1; } ::-moz-placeholder { color: #ddd; opacity: 1; } input:-ms-input-placeholder { color: #ddd; opacity: 1; } input::-webkit-input-placeholder { color: #ddd; opacity: 1; }
select標簽
select { border: none; appearance:none; -moz-appearance:none; -webkit-appearance:none; /*在選擇框的最右側中間顯示小箭頭圖片*/ background: url("https://cache.yisu.com/upload/information/20210311/295/5630.png") no-repeat scroll right center transparent; padding-right: 14px; }
重置表格元素
table { border-collapse: collapse; border-spacing: 0; }
重置hr
hr { border: none; height: 1px; }
清除< ol > < ul >的默認樣式
ul, ol, { margin: 0; padding: 0; list-style: n; }
.button按鈕
.button{ border:0; background-color:none outline:none; -webkit-appearance: none;//用于IOS下移除原生樣式 }
.< a >標簽
a{ text-decoration:none; color:#333; }
< input >標簽
input{ border: none; appearance:none; -moz-appearance:none; outline:none;//input標簽聚焦不出現默認邊框: -webkit-appearance: none;//用于IOS下移除原生樣式 } //or: input:focus{ outline:none; }//input標簽聚焦不出現默認邊框: border: none; appearance:none; -moz-appearance:none; outline:none;//input標簽聚焦不出現默認邊框: -webkit-appearance: no
css的選擇器可以分為三大類,即id選擇器、class選擇器、標簽選擇器。它們之間可以有多種組合,有后代選擇器、子選擇器、偽類選擇器、通用選擇器、群組選擇器等等
看完上述內容,你們掌握怎么在css中清除默認樣式和設置公共樣式的方法了嗎?如果還想學到更多技能或想了解更多相關內容,歡迎關注億速云行業資訊頻道,感謝各位的閱讀!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。