Back-end coders talk about front-end (CSS) Lesson 2: 5 sources of CSS_html/css_WEB-ITnose

0. Browser default style

When you do not set any style for html elements, what is displayed on the browser (for example: 91a8618abeb78355971a313ad2fe3033 element will have vertical margin, the 4a249f0d628e2318394fd9b75b4636b1 element's font size will be twice as large as the e388a4556c0f65e1904146cc1a846bee element...) Why is this?

Because the browser comes with a default style, when the html element is not styled, the browser will display it according to its default style. However, the browser default style is the lowest level. Once the style is set elsewhere, the browser default style will be overwritten.

Note that the default styles of different browsers are different in some places. For example, when we write CSS, we will first set * {margin:0; padding:0;}. Why is this? It's because of browser compatibility issues. Simply, set them all to 0, so that all browsers will be unified.

Below, we post the code for the default style:

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 }/*以上列表元素默认状态下一块状显示，未显示的将以内联元素显示，该列表针对HTML4版本，部分元素在XHTML1中将废弃*/

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 }/*定义sub元素默认为下标显示*/

sup { vertical-align: super }/*定义sub元素默认为上标显示*/

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 }/*定义分割线默认为1px宽的3D凹边效果*/

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 }

 /* Begin bidirectionality settings (do not change) */

BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }/*定义BDO元素当其属性为DIR="ltr"时的默认文本读写显示顺序*/

BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }/*定义BDO元素当其属性为DIR="rtl"时的默认文本读写显示顺序*/

*[DIR="ltr"] { direction: ltr; unicode-bidi: embed }/*定义任何元素当其属性为DIR="ltr"时的默认文本读写显示顺序*/

*[DIR="rtl"] { direction: rtl; unicode-bidi: embed }/*定义任何元素当其属性为DIR="rtl"时的默认文本读写显示顺序*/

@media print { /*定义标题和列表默认的打印样式*/

    h1 { page-break-before: always }

    h1, h2, h3, h4, h5, h6 { page-break-after: avoid }

    ul, ol, dl { page-break-before: avoid }

}

(1), display: block

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 }/*以上列表元素默认状态下一块状显示，未显示的将以内联元素显示，该列表针对HTML4版本，部分元素在XHTML1中将废弃*/ 

Why by default, p, h1, ul, and div are all displayed in block, which is defined here . So, stop saying that divs are inherently block?? This sentence should be replaced by: The browser's default style stipulates that divs are block! Whether it is a block element or an inline element is determined by the default style, not by the browser's kernel.

Elements that are not set to block will default to inline elements.

(2), display: list-item

li { display: list-item }/*默认以列表显示*/

When we use display, the commonly used values ​​are generally: inline/ block/inline-block, list-item is not used. So what exactly does the list-item here do? We might as well try it ourselves:

See, the effect in ul-li appears. If you add a margin-left, will it be the same as ul-li? ?

So, why does ul-li display like that by default? ??List-item is the "culprit".

(3), diplay:table

table { display: table }/*默认为表格显示*/

Give an example:

In the picture above, the first div is block by default, and its width fills the entire page. The second div has display:table set, and its width depends on the content. This is "encapsulation".

(4), display: table-cell

td, th { display: table-cell; }/*默认为单元格显示*/

For example:

Remember that I just learned html Sometimes, I don’t know how to use div css for multi-column layout, so I use table for multi-column layout. Now, you can use table-cell to create a multi-column layout just like using a table, and the effect will be exactly the same as that produced by the table.

(5), display:inline-block

button, textarea, input, object, select { display:inline-block; } 

can be centered by the parent container, can set height, width and margin, no It will occupy a straight row like a table or div...?? This is inline-block. (For details, please see the performance of setting this style element.)

1. Inline style

ea2b56d2df471085b3c7c1f619380241 The style code written in.

2. Internal style

The style code written in

c9ccee2e6ea535a969eb3f532ad9fe89.

3. Reference style

2cdf5bf648cf2f33323966d7f58a7f3fReferenced css file.

4. Browser user-defined styles

In some news websites, you often see shortcut menus that can set the font size. For example, the picture below is the setting in Sohu News.

These are for people with visual impairments. Anyway, I have never used them. I also have visual impairments, but I use myopia glasses to solve the problem.

In fact, browsers also have such settings. For example, in the Chrome browser, we can set the font size and font.

After the user sets the font and font size here, they will override the browser's default style.

The content of this article is excerpted from "How Much Do You Know About CSS"