HTML tag default style arrangement

HTML tag default style arrangement
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 by default. Those not displayed will be displayed as inline elements. This list is for HTML4 version. Some elements will be deprecated in XHTML1*/
li { display: list-item }/*Displayed as a list by default*/
head { display: none }/*Not displayed by default*/
table { display: table }/*Default is table display*/
tr { display: table-row }/*Default is table row display*/
thead { display: table-header-group }/*Default is table header group display*/
tbody { display: table-row-group }/*Default is table row group display*/
tfoot { display: table-footer-group }/*Default is table footer group display*/
col { display: table-column }/*Default is table column display*/
colgroup { display: table-column-group }/*Default is table column grouping*/

td, th { display: table-cell; }/*Default is cell display*/

caption { display: table-caption }/*Defaults to table title display*/

th { font-weight: bolder; text-align: center }/*Default is table title display, bold and centered*/
caption { text-align: center }/*Default is table title display, centered*/
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.5em 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 }/*Defines the sub element to be displayed as a subscript by default*/
sup { vertical-align: super }/*Defines the sub element to be displayed as superscript by default*/
table { border-spacing: 2px; }
thead, tbody, tfoot { vertical-align: middle }/*Defines the header, body, and footer elements to be vertically aligned by default*/
td, th { vertical-align: inherit }/*Defines the vertical alignment of cells and column headers by default and inherits by default*/
s, strike, del { text-decoration: line-through }/*Define these elements to be displayed as deleted lines by default*/

hr { border: 1px inset }/*Define the dividing line to have a 1px wide 3D concave 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 the pseudo-object space character*/
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 }/*Defines the default text reading and writing display order when the BDO element attribute is DIR="ltr"*/
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }/*Defines the default text reading and writing display order when the BDO element attribute is DIR="rtl"*/
*[DIR="ltr"] { direction: ltr; unicode-bidi: embed }/*Defines the default text reading and writing display order for any element when its attribute is DIR="ltr"*/
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed }/*Defines the default text reading and writing display order for any element when its attribute is DIR="rtl"*/

@media print { /*Define the default print style for titles and lists*/
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 Margins
The default value for IE is 10px, which can be set by the margin property of body.
The default value of FF is 8px. To clear the page margins through the body's padding attribute setting, you must clear these two attribute values.

Copy code
The code is as follows:

body {
margin:0;
padding:0;
}

2. Paragraph spacing
The default value for IE is 19px, which can be set by using the margin-top property of p.
The default value in FF is 1.12em, which can be set by the margin-bottom property of p.
p is displayed in blocks by default. To clear the segment spacing, you can usually set

Copy code
The code is as follows:

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

3. Title Style
h1~h6 are displayed in bold by default: font-weight:bold;.
For the default size, please refer to the table above.

Copy 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;}

The default font size of most browsers is 16px, which is equal to medium. The h1~h6 elements are displayed in bold fonts in block fonts by default.
To clear the title style, you can usually set

Copy code
The code is as follows:

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

4. List Style
The default value of IE is 40px, which can be set by the margin attribute of ul and ol.
The default value in FF is 40px, which can be set by the padding property of ul and ol.
dl has no indentation, but the description element dd inside it is indented 40px by default, while the name element dt has no indentation.
To clear the list style, you can usually 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. Centering Elements
IE defaults to text-align:center;
The default value of FF is margin-left:auto;margin-right:auto;

6. Hyperlink Style
The default style is underlined and displayed in blue. Visited hyperlinks turn purple. To clear the link style, you can usually set

Copy code
The code is as follows:

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

7 Mouse Styles
IE defaults to cursor:hand;
FF defaults to cursor:pointer;. This statement also works in IE

8 Image link styles
IE defaults to a 2px purple border line
FF defaults to a 2px blue border. To clear the image link style, you can usually set
img {
border:0;
}

<<:  BUG of odd width and height in IE6

>>:  Two ways to achieve horizontal arrangement of ul and li using CSS

Recommend

A detailed explanation of the subtle differences between Readonly and Disabled

Readonly and Disabled both prevent users from chan...

How to install MySQL 5.7.17 and set the encoding to utf8 in Windows

download MySQL official download, select Windows ...

Detailed explanation of the top ten commonly used string functions in MySQL

Hello everyone! I am Mr. Tony who only talks abou...

How to check where the metadata lock is blocked in MySQL

How to check where the metadata lock is blocked i...

Linux kernel device driver memory management notes

/********************** * Linux memory management...

Embed player in web page embed element autostart false invalid

Recently, I encountered the need to embed a player...

Calendar effect based on jQuery

This article example shares the specific code of ...

Secondary encapsulation of element el-table table (with table height adaptation)

Preface During my internship at the company, I us...

MySQL 5.7.21 winx64 green version installation and configuration method graphic tutorial

This article records the installation and configu...

Detailed Explanation of JavaScript Framework Design Patterns

Table of contents mvc mvp mvvm The source of Vue ...

Optimized implementation of count() for large MySQL tables

The following is my judgment based on the data st...

How to modify the ssh port number in Centos8 environment

Table of contents Preface start Preface The defau...

JavaScript to achieve text expansion and collapse effect

The implementation of expanding and collapsing li...

Vue implements three-level navigation display and hiding

This article example shares the specific code of ...

MySQL Learning (VII): Detailed Explanation of the Implementation Principle of Innodb Storage Engine Index

Overview In a database, an index is used to speed...