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

May 16, 2016 pm 04:39 PM
html tag

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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to remove HTML tags using Python regular expressions How to remove HTML tags using Python regular expressions Jun 22, 2023 am 08:44 AM

HTML (HyperTextMarkupLanguage) is a standard language for creating Web pages. It uses tags and attributes to describe various elements on the page, such as text, images, tables, links, etc. However, when processing HTML text, it is difficult to quickly extract the text content for subsequent processing. At this time, we can use regular expressions in Python to remove HTML tags to quickly extract plain text. In Python, regular tables

How to extract HTML tag content using regular expressions in Go language How to extract HTML tag content using regular expressions in Go language Jul 14, 2023 pm 01:18 PM

How to use regular expressions to extract HTML tag content in Go language Introduction: Regular expression is a powerful text matching tool, and it is also widely used in Go language. In the scenario of processing HTML tags, regular expressions can help us quickly extract the required content. This article will introduce how to use regular expressions to extract the content of HTML tags in Go language, and give relevant code examples. 1. Introduce related packages First, we need to import related packages: regexp and fmt. regexp package provides

How to remove HTML tags from string in PHP? How to remove HTML tags from string in PHP? Mar 23, 2024 pm 09:03 PM

PHP is a commonly used server-side scripting language that is widely used in website development and back-end application development. When developing a website or application, you often encounter situations where you need to process HTML tags in strings. This article will introduce how to use PHP to remove HTML tags from strings and provide specific code examples. Why do you need to remove HTML tags? HTML tags are often included when processing user input or text obtained from a database. Sometimes we want to remove these HTML tags when displaying text

How to escape html tags in php How to escape html tags in php Feb 24, 2021 pm 06:00 PM

In PHP, you can use the htmlentities() function to escape html, which can convert characters into HTML entities. The syntax is "htmlentities(string,flags,character-set,double_encode)". You can also use the html_entity_decode() function in PHP to de-escape html and convert HTML entities into characters.

How to remove HTML tags from given string in Java? How to remove HTML tags from given string in Java? Aug 29, 2023 pm 06:05 PM

String is a final class in Java, it is immutable, which means we cannot change the object itself, but we can change the reference of the object. HTML tags can be removed from a given string using the replaceAll() method of String class. We can remove HTML tags from a given string using regular expressions. After removing the HTML tags from the string, it returns a string as normal text. Syntax publicStringreplaceAll(Stringregex,Stringreplacement) example publicclassRemoveHTMLTagsTest{&nbs

How to use HTML tags in HTML tables? How to use HTML tags in HTML tables? Sep 08, 2023 pm 06:13 PM

We can easily add HTML tags in the table. HTML tags should be placed inside <td> tags. For example, add paragraph <p>…</p> tags or other available tags inside the <td> tag. Syntax The following is the syntax for using HTMl tags in HTML tables. <td><p>Paragraphofthecontext</p><td>Example 1 An example of using HTML tags in an HTML table is given below. <!DOCTYPEhtml><html><head&g

PHP regular expression method to verify basic HTML tags PHP regular expression method to verify basic HTML tags Jun 24, 2023 am 08:07 AM

PHP is an efficient web development language that supports regular expression functions and can quickly verify the validity of input data. In web development, HTML is a common markup language, and validating HTML tags is a very important method for web form validation. This article will introduce basic HTML tag verification methods and how to use PHP regular expressions for verification. 1. Basic structure of HTML tags HTML tags consist of element names and attributes surrounded by angle brackets. Common tags include p, a, div

Complete collection of HTML tags Complete collection of HTML tags Nov 27, 2023 am 10:05 AM

HTML标签有<!DOCTYPE>、<html>、<head>、<title>、<meta>、<link>、<style>、<script>、<body>、<h1> - <h6>、<p>、<a>、<img>、<div>、<span>、<input>、<button>、<form

See all articles