CSS Learning Summary (a) turn

Original address: CSS Learning Summary (i) Selector grouping

CSS selectors can be divided into

1. Group selector such as:PBodyImgDiv{}2. Brother selector such as:P +P{Color#f00;}3. Property selectors such as:P[Title]{Color#f00;}4. Include (descendant) selectors such as:BodyUlLi{}5. Child element selectors such as:div >P{}6 #myDiv {}7. Class selector such as: .class1{}8. Pseudo-element selectors such as: e:first-line,E :before9. Pseudo-class selector such as: e:first-child, e:visited,e:focus, e:ENABLED10. Tag Selector such as: p {font-size: 1EM;               /span>            

The difference between a child selector and a descendant selector:

后代选择器的写法就是把外层的标记写在前面，内层的标记写在后面，之间用空格分隔。子选择器只对直接后代有影响的选择器，而对“孙子后代”以及多层后代不产生作用。

Note: In IE6, only descendant selectors are supported and sub-selectors are not supported

Box model

CSS Box Model Description:

Given ul the width of the li setting, then they will average out the width of the container they occupy. div >ul> li> athe width and height of the label:

When you specify for the body element div , each div default width of the browser 100%, the height of each browser resolution is not the same, for example, under the Firefox is 131px, under the chrome 142px, the specific mechanism is unclear

CSS font Shorthand rules

When css you define a font style, you might do this:

font-weight: bold;font-style: italic;font-variant: small-caps;font-size: 1em;line-height: 1.5em;font-family: verdana,sans-serif 

There is no need to do this because you can use CSS shorthand properties:

font: bold italic small-caps 1em/1.5em verdana,sans-serif

It is important to note that the css shorthand version will only take effect if you specify and attribute it at the same time font-size font-family . If you do not specify, font-weight font-style or font-variant , then these values will automatically default tonormal

Avoid redundant selectors

Sometimes you will have the following wording:

ul li { ... }ol li { ... }    tr td { ... }

But in fact it is not necessary to be written, because it will be and will <li> only be <ul> used with, as <ol> <td> can only exist in the same as <tr> <table> , here really did not repeat them once necessary.

! Important

All !important tagged styles, even if it is later rewritten, will only take the flagged one.

#content{      height:960px !important; height:900px;} 

!important：IE7/IE8/IE9/FireFoxcan recognize the above appended !important statements, see !important the additional statements, the second sentence will not be executed, although they also "know" the second sentence, but the additional "!important" statement has an absolute priority, as long as it exists, the second sentence is not allowed to execute.

IE6 executes !important the statement, then executes the second sentence “height:900px” , with the following style covering the previous style, so under IE6, the final height value is 900px.

@import and <link>

Before deciding which method to use to include your stylesheet, you should understand how these two methods are used to do it.

LINK Type:

Link is to connect the external CSS with the Web page, add it to the header tag, the form is as follows:

<link href="styles.css" type="text/css" />

Import Style:

Through two or more css file common parts, the css page is introduced into the css file, through@import url（” “）

@import url("global.css");@import url(global.css);@import "global.css";

All three of these methods are valid,

Difference:

    1）link属于XHTML标签，而@import是CSS提供的;     2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载; 3）@import只在IE5以上才能识别，而link是XHTML标签，无兼容问题; 4）link方式的样式的权重 高于@import的权重.

Inline elements, block elements, and empty elements in-line elements feature

The inline element produces a margin effect when the horizontal direction is set padding-left、padding-right、margin-left、margin-right , but the vertical direction does not result in a margin padding-top、padding-bottom、margin-top、margin-bottom effect.

Block-level element features

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）2、元素的高度、宽度、行高以及顶和底边距都可设置。3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

In HTML, <span>、<a>、<label>、<input>、 、 <strong> and <em> is the typical inline element.

Block-level elements can be set to a wide height, but the actual width of its height is itself wide and high +padding. The block element has a separate row. Inline elements are not exclusive to a single line, and it is useless to set a wide height for him.

List of block-level elements and inline elements:

Empty element

Well-known empty elements: <br>
Little-known is:<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

Length Unit em

emis the relative length unit, relative to the font size () of the text within the current object font-size . For example: The text size of the Web page body in the user browser default rendering is 16px , so, at this time 1em = 16px ;

Inch

Inches (Inches). Absolute length units.

1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

Pt

Point (Points). Absolute length units.

1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

Small

<small>The label renders a small font effect.

<strong>，<em>And<b>，<i>Label

`<strong>` 标签和 `<em>` 标签一样，用于强调文本，但它强调的程度更强一些。`em` 是 斜体强调标签，更强烈强调，表示内容的强调点。相当于html元素中的 `<i>...</i>`;`< b > < i >` 是视觉要素，分别表示无意义的加粗，无意义的斜体。em 和 strong 是表达要素(phrase elements)。 

Difference between B-label and I-label

 b 元素现在描述为在普通文章中仅从文体上突出的不包含任何额外的重要性的一段文本。  例如：文档概要中的关键字，评论中的产品名。或者代表强调的排版方式。 i 元素现在描述为在普通文章中突出不同意见或语气或其他的一段文本，  例如：一个分类名称，一个技术术语，一个外语中的谚语，一个想法等。或者代表斜体的排版方式。

Angle Unit deg

Degrees (degress). A circle total 360 degrees

90deg = 100grad = 0.25turn 

Grag

Gradient (Gradians). A circle total of 400 gradients

90deg = 100grad = 0.25turn 

Turn

Turn, Circle (Turns). A circle total of 1 laps

90deg = 100grad = 0.25turn

Rad

Radians (Radians). A circle total of 2 π radians

90deg = 100grad = 0.25turn

CSS Multi-Class Selector

A class value may contain a list of words, separated by a space between the words. For example, if you want to mark a particular element as both important (important) and warning (warning), you can write:

class="important warning">This paragraph is a very important warning.</p>

For the ID, it can't be written like this.

CSS transparency under all browsers

Element transparency is often an annoying problem, and the following is a way to achieve the transparency settings under all browsers:

.transparent {  zoom: 1; filter: alpha(opacity=50); opacity: 0.5;}

ZoomProperties are the exclusive property of IE browser and are not supported by browsers such as Firefox. It can set or retrieve the scale of an object. In addition, it has some other small functions, such as triggering the hasLayout properties of IE, clear floating, clear margin overlap and so on.

When the attribute value of an element hasLayout is true, we say that the element has a layout

CSS Float Property

Definition and usage

floatThe property defines in which direction the element floats. Historically this attribute has always been applied to the image, so that the text surrounds the image, but in CSS , any element can float. A floating element generates a block-level box, regardless of its own element.

If floating non-replacement elements, specify a definite width; otherwise, they will be as narrow as possible.

Note: If there is only a small amount of space above a row for floating elements, then this element jumps to the next line, which continues until a row has enough space.

The great collapse

One of the more puzzling things about using float (float) is how they affect the parent element that contains them. If the parent element contains only floating elements, its height collapses to zero. If the parent element does not contain any visible backgrounds, this problem can be difficult to notice

The visual opposite of collapse is worse, look at the following situation:

Clear floating

If you know exactly what the next element will be, you can use it clear:both to clear the float. This method is good, it does not need hack , does not add the extra element also makes it has the good semantics.

Use the CSS pseudo-selector (: After) to clear the float:

.clearfix:after {                   content: "."; visibility: hidden; display: block; height: 0; clear: both; }

Progressive enhancement and graceful downgrade concepts

An elegant downgrade and progressive enhancement impression is css3 a concept that comes with the flow. Because the low-level browser does not support css3 , but css3 the effect is too good to give up, so in the advanced browsing css3 and low-level browser only guarantee the most basic functions. At first glance, the two concepts are similar, focusing on different experiences under different browsers, and the key difference is the content they focus on, and the difference in workflow that results from this difference.

Progressive enhancement progressive enhancement : Build pages for low-version browsers, ensure the most basic functionality, and then improve and append features such as effects and interactivity for advanced browsers to achieve a better user experience.

Graceful downgrade graceful degradation : Build the full functionality from the start and then be compatible with the low-version browser.

Difference

Graceful demotion begins with a complex situation and attempts to reduce the supply of user experience, while the incremental enhancement begins with a very basic, workable version and is continuously expanded to suit the needs of the future environment. Downgrading (functional decay) means looking back, while progressive enhancement means looking forward while keeping its roots in a safe zone.

Visibility:hidden and Display:none

display:none  隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。visibility:hidden  隐藏对应的元素，但是在文档布局中仍保留原来的空间。

After using a CSS display:none property, various property values, such as the width and height of the HTML element (object), are "lost", and visibility:hidden when the attribute is used, the HTML element (object) is simply visually invisible (completely transparent), and the space it occupies remains there.

Text Literal Property Text-indent

text-indentThe Indent property specifies the indentation of the first line of text in the block.

Note: Negative values are allowed. If a negative value is used, the first row is indented to the left. If you indent with a large negative value, the text will be hidden, as in-9999em

Letter-spacing and Word-spacing

letter-spacingword-spacingthe difference between attributes is that the former is the interval for modifying letters, which is the interval between modifying a word or a single text

Text-transform

text-transformProperty handles the case of text. This property has a value of 4:

noneuppercase：所有的单词都大写lowercase：所有的单词都小写capitalize：只对每个单词的首字母大写

Text-decoration

text-decorationThere are 5 values:

noneunderline：下划线overline：上划线line-through：在文本中间画一个贯穿线blink：让文本闪烁

White-space

pre-line     合并空白符序列，但保留换行符 normal      nowrap      防止元素中的文本换行pre      空白符不会被忽略pre-wrap    保留空白符序列

CSS Learning Summary (a) turn