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

Write a publish-subscribe model with JS

Table of contents 1. Scene introduction 2 Code Op...

80 lines of code to write a Webpack plugin and publish it to npm

1. Introduction I have been studying the principl...

Detailed explanation of the master-slave configuration tutorial of redis under Docker

1. Pull the redis image docker pull redis 2. Star...

Vue implements verification whether the username is available

This article example shares the specific code of ...

MySQL 8 new features: Invisible Indexes

background Indexes are a double-edged sword. Whil...

Solution to the problem that the server cannot remotely connect to the database when installing the Pagoda Panel

I am planning to build my own website, so I took ...

IDEA configuration process of Docker

IDEA is the most commonly used development tool f...

Illustration-style website homepage design New trend in website design

You can see that their visual effects are very bea...

Usage and scenario analysis of npx command in Node.js

npx usage tutorial Tonight, when I was learning V...

Detailed explanation of how Node.js handles ES6 modules

Table of contents 1. Differences between the two ...

Detailed explanation of CSS label mode display property

The code looks like this: <!DOCTYPE html> &...

Solution to MySQL failure to start

Solution to MySQL failure to start MySQL cannot s...

How to use DQL commands to query data in MySQL

In this article, the blogger will take you to lea...

Linux uses NetworkManager to randomly generate your MAC address

Nowadays, whether you are on the sofa at home or ...

HTML meta viewport attribute detailed description

What is a Viewport Mobile browsers place web pages...