CSS default property values for HTML tags

Source: Internet
Author: User

HTML tag CSS default property values Daquan

If the *{margin:0;padding:0 is set, the HTML default CSS value needs to be restored when the margin is Used.

In addition to the definition of inline and block, it is important to note the default styles (margin and Font-size) for labels such as Body|h1~h6|blockquote|menu|ul|ol|dd.

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}
Li {display:list-item}
Head {display:none}
Table {display:table}
TR {display:table-row}
Thead {display:table-header-group}
Tbody {display:table-row-group}
Tfoot {display:table-footer-group}
Col {display:table-column}
Colgroup {display:table-column-group}
td, th {display:table-cell;}
Caption {display:table-caption}
Th {font-weight:bolder; text-align:center}
Caption {text-align:center}
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}
SUP {vertical-align:super}
Table {border-spacing:2px;}
thead, tbody,
Tfoot {vertical-align:middle}
td, th {vertical-align:inherit}
s, strike, del {text-decoration:line-through}
HR {border:1px inset}
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"}
: Before,: after {white-space:pre-line}

Center {text-align:center}
abbr, acronym {font-variant:small-caps; letter-spacing:0.1em}
: Link,: visited {text-decoration:underline}
: Focus {outline:thin dotted invert}


bdo[dir= "ltr"] {direction:ltr; unicode-bidi:bidi-override}
bdo[dir= "rtl"] {direction:rtl; unicode-bidi:bidi-override}

*[dir= "ltr"] {direction:ltr; unicode-bidi:embed}
*[dir= "rtl"] {direction:rtl; unicode-bidi:embed}

@media Print {
H1 {page-break-before:always}
h1, h2, h3,
h4, h5, h6 {page-break-after:avoid}
ul, ol, DL {page-break-before:avoid

--------------------------------------------------------------------------------

What is the impact of multiple IDs for the same page?


When you define a style in a style sheet, you can define the ID or define the class, for example:

ID method: #test {color: #333333}, called in the page

Content
Class Method:. test{color: #333333}, invoking content in the page
ID A page can be used only once, class can be referenced multiple times.

A netizen asked, ID and class as if there is no difference, I used a number of IDs in the IE display also normal, with multiple IDs have any impact?

Answer: the first effect is not through the W3 Calibration.

On the page display, the current browser also allows you to make this error, with more than the same ID "in general" can also be displayed normally. But when you need to use JavaScript to control the DIV with the id, there will be an Error.

The ID is a label that distinguishes between different structures and content, like your name, and if a room has 2 people with the same name, there will be confusion;
Class is a style that can be set on any structure and content, like a garment;
conceptually, It's not the Same:
The ID is the first to find the structure/content, and then to define the style, class is to define a style, and then set to multiple Structures/content.

Web standards want people to use strict habits to write code,

For example: you can use the display in bold, but also can be used to display, but it is recommended for everyone to use, because more semantic

Browser Default Style

1. page margins
IE defaults to 10px, set by the Body's margin property
FF defaults to 8px, via the Body's padding property setting
To clear the margins, be sure to clear both property values
Body {
margin:0;
padding:0;
}

2. Segment Spacing
IE defaults to 19px, set by the Margin-top property of P
The FF defaults to 1.12em, which is set by the Margin-bottom property of P
P defaults to block display, to clear the segment spacing, you can generally set
p {
margin-top:0;
margin-bottom:0;
}

3. Heading styles
H1~h6 default Bold Display: font-weight:bold;.
Default size please refer to the table above
and it's written like This.
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 a large browser is 16px, that is, the Medium,h1~h6 element is displayed as bold by default in block display font,
To clear the heading style, you can generally set
HX {
font-weight:normal;
font-size:value;
}

4. List Style
IE default to 40px, through the margin properties of ul, ol set
FF default is 40px, through the ul, ol padding property settings
The DL does not indent, but the internal description element dd is indented by default at 40px, while the name element DT is not Indented.
To clear the list style, you can generally set
ul, ol, DD {
list-style-type:none;
margin-left:0;
padding-left:0;
}

5. Center Element
ie default is text-align:center;
FF defaults to margin-left:auto;margin-right:auto;

6. Hyperlink Style
A style is underlined by default, the display color is blue, hyperlinks that have been visited become purple, to clear the link style, you can generally set
A
text-decoration:none;
Color: #colorname;
}

7 Mouse Styles
ie default is cursor:hand;
FF defaults to Cursor:pointer;. This statement is also valid in IE

8 Picture Link Style
ie default to purple 2px border line
FF default to blue 2px border line
To clear the picture link style, you can generally set
IMG {
border:0;
}

CSS default property values for HTML tags

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.