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

How to visualize sketched charts in Vue.js using RoughViz

introduce A chart is a graphical representation o...

Better looking CSS custom styles (title h1 h2 h3)

Rendering Commonly used styles in Blog Garden /*T...

Summary of techniques for implementing complex page layout using frameset

Copy code The code is as follows: <html> &l...

A brief summary of all encapsulation methods in Vue

Table of contents 1. Encapsulation API 2. Registe...

Introduction to generating Kubernetes certificates using OpenSSL

Kubernetes supports three types of authentication...

Vue + element to dynamically display background data to options

need: Implement dynamic display of option values ...

Detailed introduction to logs in Linux system

Table of contents 1. Log related services 2. Comm...

Docker installation steps for Redmine

Download the image (optional step, if omitted, it...

Detailed explanation of the loading rules of the require method in node.js

Loading rules of require method Prioritize loadin...

Guide to Efficient Use of MySQL Indexes

Preface I believe most people have used MySQL and...

Analysis of how to create a stored procedure in MySQL to add new fields to a data table

This article uses an example to describe how to c...

Solve the problem of being unable to ping the external network after installing Centos7 in VMware

A problem occurred when configuring a cluster. Or...

How to configure path alias for react scaffolding

The react version when writing this article is 16...

Methods and techniques for designing an interesting website (picture)

Have you ever encountered a situation where we hav...

Use of Linux ls command

1. Introduction The ls command is used to display...