Home > Web Front-end > HTML Tutorial > Default style arrangement of html tags_HTML/Xhtml_Web page production

Default style arrangement of html tags_HTML/Xhtml_Web page production

WBOY
Release: 2016-05-16 16:39:56
Original
1257 people have browsed it

html, address,blockquote,body, dd, div,dl, dt, fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6, noframes,ol, p, ul, center,dir, hr, menu, pre { display: block }/*The above list elements are displayed in block form by default, and those that are not displayed will be displayed as inline elements. This list is for the HTML4 version, and some elements will be obsolete in XHTML1*/
li { display: list-item }/*The default is to display in a list*/
head { display: none }/*The default is not to display*/
table { display: table }/*The default is to display in a table*/
tr { display: table-row }/*The default is table row display*/
thead { display: table-header-group }/*The default is table header group display*/
tbody { display: table- row-group }/*The default is the group display of table rows*/
tfoot { display: table-footer-group }/*The default is the group display at the bottom of the table*/
col { display: table-column }/* The default is table column display*/
colgroup { display: table-column-group }/*The default is table column group display*/

td, th { display: table-cell; }/*Default Display for cells*/

caption { display: table-caption }/*Default for table title display*/

th { font-weight: bolder; text-align: center }/ *The default is to display the table title, in a bold and centered state*/
caption { text-align: center }/*The default is to display the table title, in a centered state*/
body { margin: 8px; line-height : 1.12 }
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu { margin: 1.12em 0 }
h5 { font-size: .83em; margin: 1.5 em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4, h5, h6, b,strong { font-weight: bolder }
blockquote { margin-left: 40px; margin-right: 40px }
i, cite, em,var, address { font-style: italic }
pre, tt, code, kbd, samp { font-family: monospace }
pre { white-space: pre }
button, textarea, input, object, select { display:inline-block; }
big { font-size: 1.17em }
small, sub , sup { font-size: .83em }
sub { vertical-align: sub }/*Define the sub element to display subscript by default*/
sup { vertical-align: super }/*Define the sub element to display by default Display superscript */
table { border-spacing: 2px; }
thead, tbody, tfoot { vertical-align: middle }/* Define the table header, body table, and table foot elements to be vertically aligned by default* /
td, th { vertical-align: inherit }/*Define cells and column titles to be vertically aligned by default and inherited by default*/
s, strike, del { text-decoration: line-through }/* Define these elements to be displayed as strikethroughs by default*/

hr { border: 1px inset }/* Define the dividing line to be a 1px wide 3D concave edge effect by default*/

ol, ul, dir , menu, dd { margin-left: 40px }

ol { list-style-type: decimal }
ol ul, ul ol, ul ul, ol ol { margin-top: 0; margin- bottom: 0 }
u, ins { text-decoration: underline }
br:before { content: ""A" }/*Define the pseudo-object content style of the line break element*/
:before, : after { white-space: pre-line }/*Define the default style of pseudo-object space characters*/
center { text-align: center }
abbr, acronym { font-variant: small-caps; letter- spacing: 0.1em }
:link, :visited { text-decoration: underline }
:focus { outline: thin dotted invert }
/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }/*Define the default text reading and writing display order of the BDO element when its attribute is DIR="ltr"*/
BDO[ DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }/*Define the default text reading and writing display order of the BDO element when its attribute is DIR="rtl"*/
*[DIR= "ltr"] { direction: ltr; unicode-bidi: embed }/*Define the default text reading and writing display order of any element when its attribute is DIR="ltr"*/
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed }/*Define the default text reading and writing display order of any element when its attribute is DIR="rtl"*/

@media print { /*Define the title and List default printing style*/
h1 { page-break-before: always }
h1, h2, h3, h4, h5, h6 { page-break-after: avoid }
ul, ol, dl { page-break-before: avoid }
}

Browser default style

1. Page margin
IE default is 10px, passed The margin attribute setting of the body
FF defaults to 8px, and the padding attribute setting of the body
To clear the page margins, you must clear these two attribute values ​​​​

Copy code
The code is as follows:

body {
margin:0;
padding:0;
}

2. Paragraph spacing
IE defaults to 19px, set by the margin-top attribute of p
FF defaults to 1.12em, set by the margin-bottom attribute of p
p defaults to block display, To clear the paragraph spacing, you can generally set

Copy the code
The code is as follows:

p {
margin-top:0;
margin-bottom:0;
}

3. Title style
h1~h6 default bold display: font-weight :bold;.
Please refer to the table above for the default size
It is also written like this

Copy the code
The code is as follows:

h1 {font-size:xx-large;}
h2 {font-size:x-large;}
h3 {font-size:large;}
h4 {font-size:medium;}
h5 {font-size:small;}
h6 {font-size:x-small;}

Large browser default font size is 16px, which is equal to medium. By default, h1~h6 elements are displayed in bold in block display font.
To clear the title style, you can generally set

Copy code
The code is as follows:

hx {
font-weight:normal;
font-size:value;
}

4. List style
IE defaults to 40px, set by the margin attributes of ul and ol
FF defaults to 40px, set by the padding attributes of ul and ol
dl has no indentation , but the internal description element dd is indented by 40px by default, while the name element dt is not indented.
To clear the list style, you can generally set

Copy code
The code is as follows:

ul, ol, dd {
list-style-type:none;/*Clear list style character*/
margin-left:0;/*Clear IE left indent*/
padding- left:0;/*Clear non-IE left indent*/
}

5. Elements are centered
IE defaults to text-align:center;
FF defaults to margin -left:auto;margin-right:auto;

6. Hyperlink style
a style is underlined by default, and the display color is blue. The visited hyperlink turns purple. To clear the link Style, generally you can set

Copy code
The code is as follows:

a {
text-decoration:none;
color:#colorname;
}

7 Mouse style
IE defaults to cursor:hand;
FF defaults to cursor:pointer ;. This statement is also valid in IE

8 Image link style
IE defaults to a purple 2px border line
FF defaults to a blue 2px border line
To clear the image link style, generally You can set
img {
border:0;
}
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template