html默认样式总结

我们都知道，一些html标签通常都带有默认css样式，我们在写网页时，这些默认的样式就会时不时的跳出来捣一下乱，搞得我们很是无奈。

所以成手在写css样式时，一般都会在开头写一段初始化程序，来去掉这些默认样式，最简单的方法就是使用*{margin：0;padding：0;}。

但是通常我们很少使用这种方法，因为通配符*的效率极低。

所以我们要先熟悉标签的默认样式，再来研究怎么对付他们。

001 //块级元素

002

003 html, body, div,ol, p, ul, h1, h2,h3,h4,h5, h6,

004

005 address,blockquote, form,

006

007 dd,dl, dt, fieldset, frame, frameset,noframes,center, dir, hr, menu, pre

008

009 { display: block }

010

011

012

013 //列表元素类

014

015 li{ display:list-item }

016

017 ol{list-style-type: decimal }

018

019 ol ul, ul ol,ul ul, ol ol { margin-top: 0; margin-bottom: 0 }

020

021 ol, ul{ margin-left: 40px }

022

023

024

025 //预格式文本类

026

027 i, cite, em,var, address{ font-style: italic }

028

029 big{ font-size:1.17em }

030

031 small, sub, sup{ font-size: .83em }

032

033 sub{ vertical-align:sub }

034

035 sup{ vertical-align:super }

036

037 s, strike, del{ text-decoration: line-through }

038

039 u, ins{ text-decoration:underline }

040

041

042

043 //标题类

044

045 h1{ font-size:2em; margin: .67em 0 }

046

047 h2{ font-size:1.5em; margin: .75em 0 }

048

049 h3{ font-size:1.17em; margin: .83em 0 }

050

051 h4, p,blockquote, ul,fieldset, form,ol, dl, dir,menu { margin: 1.12em 0}

052

053 h5 { font-size:.83em; margin: 1.5em 0 }

054

055 h6{ font-size:.75em; margin: 1.67em 0 }

056

057 h1, h2, h3, h4,h5, h6, b,strong { font-weight: bolder }

058

059

060

061

062

063 //伪类

064

065 br:before{ content: ”\A” }

066

067 :before, :after{ white-space: pre-line }

068

069 :link, :visited { text-decoration: underline }

070

071 :focus{ outline: thin dotted invert }

072

073

074

075 //表格类

076

077 table{ display: table }

078

079 tr{ display:table-row }

080

081 thead{ display:table-header-group }

082

083 tbody{ display:table-row-group }

084

085 tfoot{ display:table-footer-group }

086

087 col{ display:table-column }

088

089 colgroup{ display:table-column-group }

090

091 td, th{ display: table-cell;}

092

093 caption{ display: table-caption }

094

095 th{font-weight: bolder; text-align: center }

096

097 caption{ text-align: center }

098

099 table{ border-spacing: 2px;}

100

101 thead, tbody,tfoot { vertical-align:middle }

102

103 td, th { vertical-align:inherit }

104

105

106

107 //其它元素

108

109 head{ display: none }

110

111 body{ margin: 8px;line-height: 1.12 }

112

113 button, textarea,input, object,select { display:inline-block;}

114

115 blockquote{ margin-left: 40px;margin-right: 40px }

116

117 pre, tt, code,kbd, samp { font-family: monospace }

118

119 pre{ white-space: pre}

120

121 hr{ border: 1px inset }

122

123 center{ text-align: center }

124

125 abbr, acronym{ font-variant: small-caps; letter-spacing:0.1em }

126

127

128

129 BDO[DIR="ltr"] { direction: ltr; unicode-bidi:bidi-override }

130

131 BDO[DIR="rtl"] { direction: rtl; unicode-bidi:bidi-override }

132

133 /*定义BDO元素当其属性为DIR="ltr/rtl"时的默认文本读写显示顺序*/

134

135 *[DIR="ltr"]{ direction: ltr;unicode-bidi: embed }

136

137 *[DIR="rtl"] { direction: rtl;unicode-bidi: embed }

138

139 /*定义任何元素当其属性为DIR="rtl/rtl"时的默认文本读写显示顺序*/

140

141 @media print {

142

143 h1{page-break-before: always }

144

145 h1, h2, h3,h4, h5, h6 { page-break-after: avoid }

146

147 ul, ol, dl{ page-break-before: avoid }

148

149 } /*定义标题和列表默认的打印样式*/

我认为我们可以把能用的样式留着，不能用的就通过常用标签选择器给初始化一下，这样才能提高效率

html默认样式总结相关推荐

Android UI 统一修改Button控件的样式，以及其它系统控件的默认样式
先介绍下修改原理:首先打开位于android.widget包下面的Button.java文件,这里有一句关键的代码如下: public Button(Context context, Attribut ...
element ui需要引入样式吗_ElementUI 修改默认样式的几种办法
ElementUI 是一套ui组件库,目前最新版本 react 和 vue 等主流框架都有支持.该库默认主题色是天蓝色,若用于项目开发,难免遇到要需求修改其默认样式的情况,本文就基于 react 和 ...
CSS之布局（默认样式）
默认样式: <!DOCTYPE html> <html><head><meta charset="UTF-8"><title& ...
input 默认样式的修改
/* 修改input选中的默认边框样式 */ outline: none; /* 修改input的选中时的光标颜色 */ caret-color:red; /* 修改input的选中时的默认边框 */ ...
Python可视化matplotlib自定义：运行时参数修改、自定义样式、默认样式+plt.style.use()
Python可视化matplotlib自定义:运行时参数修改.自定义样式.默认样式+plt.style.use() 目录 Python可视化matplotlib自定义:运行时参数修改.自定义样式.默认 ...
Flex警告：framework.swc”具有默认样式并且在 library-path 中，表...
2019独角兽企业重金招聘Python工程师标准>>> 错误描述: 首先要提醒你的是不要小看Flex中的警告,Flex中的警告和java中不一样,有些警告可能是致命的,以至于你 ...
input[type=checkbox] ; input[type=radio] 改变默认样式
/*改变checkbox 默认样式*/input[type="checkbox"] { -webkit-appearance: none; /*清除复选框默认样式*/ height ...
Cannot read property 'nodeType' of null; audio元素默认样式下载按钮
1.chrome-->console抛出如下错误: Uncaught TypeError: Cannot read property 'nodeType' of null 错误原因:从stack ...
css修改select下拉列表的默认样式
select的一些默认样式我们很难修改,比如图标的替换.接下来就说说如何修改这些默认样式: html代码: <div><select name=""> &l ...
怎么覆盖默认样式_PPT办公技巧：3种办法快速统一幻灯片中不同形状的显示样式...
应用场景下图幻灯片中第一排为插入流程图形状"过程""数据""终止"时的默认样式,默认样式中形状填充色为蓝色,形状内文字为等线18号.如果我 ...

html默认样式总结

html默认样式总结相关推荐

最新文章

热门文章