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

WBOY
Release: 2016-06-24 11:47:44
Original
1109 people have browsed it

0. Browser default style

When you do not set any style for html elements, what is displayed on the browser (for example: element will have vertical margin, the

element's font size will be twice as large as the

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中将废弃*/
Copy after login
li { display: list-item }/*默认以列表显示*/
Copy after login
Copy after login
head { display: none }/*默认不显示*/
Copy after login
table { display: table }/*默认为表格显示*/
Copy after login
Copy after login
tr { display: table-row }/*默认为表格行显示*/
Copy after login
thead { display: table-header-group }/*默认为表格头部分组显示*/
Copy after login
tbody { display: table-row-group }/*默认为表格行分组显示*/
Copy after login
tfoot { display: table-footer-group }/*默认为表格底部分组显示*/
Copy after login
col { display: table-column }/*默认为表格列显示*/
Copy after login
colgroup { display: table-column-group }/*默认为表格列分组显示*/
Copy after login
td, th { display: table-cell; }/*默认为单元格显示*/
Copy after login
Copy after login
caption { display: table-caption }/*默认为表格标题显示*/
Copy after login
th { font-weight: bolder; text-align: center }/*默认为表格标题显示,呈现加粗居中状态*/
Copy after login
caption { text-align: center }/*默认为表格标题显示,呈现居中状态*/
Copy after login
body { margin: 8px; line-height: 1.12 }
Copy after login
h1 { font-size: 2em; margin: .67em 0 }
Copy after login
h2 { font-size: 1.5em; margin: .75em 0 }
Copy after login
h3 { font-size: 1.17em; margin: .83em 0 }
Copy after login
h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu { margin: 1.12em 0 }
Copy after login
h5 { font-size: .83em; margin: 1.5em 0 }
Copy after login
h6 { font-size: .75em; margin: 1.67em 0 }
Copy after login
h1, h2, h3, h4, h5, h6, b,strong { font-weight: bolder }
Copy after login
blockquote { margin-left: 40px; margin-right: 40px }
Copy after login
i, cite, em,var, address { font-style: italic }
Copy after login
pre, tt, code, kbd, samp { font-family: monospace }
Copy after login
pre { white-space: pre }
Copy after login
button, textarea, input, object, select { display:inline-block; }
Copy after login
big { font-size: 1.17em }
Copy after login
small, sub, sup { font-size: .83em }
Copy after login
sub { vertical-align: sub }/*定义sub元素默认为下标显示*/
Copy after login
sup { vertical-align: super }/*定义sub元素默认为上标显示*/
Copy after login
table { border-spacing: 2px; }
Copy after login
thead, tbody, tfoot { vertical-align: middle }/*定义表头、主体表、表脚元素默认为垂直对齐*/
Copy after login
td, th { vertical-align: inherit }/*定义单元格、列标题默认为垂直对齐默认为继承*/
Copy after login
s, strike, del { text-decoration: line-through }/*定义这些元素默认为删除线显示*/
Copy after login
hr { border: 1px inset }/*定义分割线默认为1px宽的3D凹边效果*/
Copy after login
ol, ul, dir, menu, dd { margin-left: 40px }
Copy after login
ol { list-style-type: decimal }
Copy after login
ol ul, ul ol, ul ul, ol ol { margin-top: 0; margin-bottom: 0 }
Copy after login
u, ins { text-decoration: underline }
Copy after login
br:before { content: "A" }/*定义换行元素的伪对象内容样式*/
Copy after login
:before, :after { white-space: pre-line }/*定义伪对象空格字符的默认样式*/
Copy after login
center { text-align: center }
Copy after login
abbr, acronym { font-variant: small-caps; letter-spacing: 0.1em }
Copy after login
:link, :visited { text-decoration: underline }
Copy after login
:focus { outline: thin dotted invert }
Copy after login
 /* Begin bidirectionality settings (do not change) */
Copy after login
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }/*定义BDO元素当其属性为DIR="ltr"时的默认文本读写显示顺序*/
Copy after login
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }/*定义BDO元素当其属性为DIR="rtl"时的默认文本读写显示顺序*/
Copy after login
*[DIR="ltr"] { direction: ltr; unicode-bidi: embed }/*定义任何元素当其属性为DIR="ltr"时的默认文本读写显示顺序*/
Copy after login
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed }/*定义任何元素当其属性为DIR="rtl"时的默认文本读写显示顺序*/
Copy after login
@media print { /*定义标题和列表默认的打印样式*/
Copy after login
    h1 { page-break-before: always }
Copy after login
    h1, h2, h3, h4, h5, h6 { page-break-after: avoid }
Copy after login
    ul, ol, dl { page-break-before: avoid }
Copy after login
}
Copy after login

(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中将废弃*/ 
Copy after login

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 }/*默认以列表显示*/
Copy after login
Copy after login

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 }/*默认为表格显示*/
Copy after login
Copy after login

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; }/*默认为单元格显示*/
Copy after login
Copy after login

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; } 
Copy after login

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

The style code written in.

2. Internal style

The style code written in