CSS that you may not be familiar

Although I have been developing Web applications for three years, I am still in a completely unknown state of CSS. The main reason is the fear of xhtml. In addition to being forced to work for a while, I chose to write data, communication, or framework code in subsequent projects. The closest to the UI is to write WebControl, I will give the development of the UI to the trusted and good at Web-End partner. Starting from 2010, I switched my position to Internet development. Now every website is focusing on the UI experience, and the related RIA technology is also very popular, the homepage of the blog Garden often contains Ajax, JQuery, and Silverlight content. No way, I only have to make up the course, so I recently went crazy to learn related technologies.

If you are the same as me and have a thorough understanding of CSS, this article will be very useful to you. Check the list below. Do you understand the meaning of css rule:

* {font-size:12px;}div {font-size:12px;}div > p {font-size:12px;}div + p {font-size:12px;}div:first-child {font-size:12px;}.light {font-size:12px;}div.light {font-size:12px;}#light {font-size:12px;}div#light {font-size:12px;}div[id] {font-size:12px;}div[id="foo"]{font-size:12px;}div[id~="foo"]{font-size:12px;}div[id^="foo"]{font-size:12px;}div[id$="foo"]{font-size:12px;}div[id*="foo"]{font-size:12px;}div[id|="foo"]{font-size:12px;}a:link {font-size:12px;}a:visited {font-size:12px;}div:hover {font-size:12px;}div:focus {font-size:12px;}textarea:active {font-size:12px;}p:first-letter {font-size:12px;}p:first-line {font-size:12px;}p:before {font-size:12px;}p:after {font-size:12px;}h1,h2 {font-size:12px;}.class1, .class2 {font-size:12px;}div.light a:link {font-size:12px;}

If you are not familiar with the css selectors listed above, you will have a clear understanding after reading this article. This article includes the following content:

• Various CSS Selector
• CSS Box Model
• Positioning)
• CSS version and browser compatibility
• Others

Declaration: the CSS version discussed in this article is CSS2.1

CSS Selectors

Each CSS rule is composed of two parts: selector {declaration}, such as p {font-size: 12px}. in order to more accurately select the elements that need to apply the CSS style, CSS provides a variety of selector options. Why is it called selector? I checked "why named css selector" on google and didn't find the answer, but I guess it is related to the browser's implementation behavior, after obtaining the html response stream from the server, the browser needs to "Draw" the DOM element contained in the html according to the CSS, this "painting" process should be performed according to the sequence in which DOM elements appear in the html streams. selector is used to match the DOM elements that meet the conditions. Of course, this is just a guess, if any of you have any questions, please let me know. The following types of selector are commonly used in CSS2.1:

• Type selector (DOM element type selector)
• Decendant selector (child element node selector)
• Class selector (class selector)
• Id selector (id selector)
• Attribute selector)
• Pseudo-class and pseudo-element selector (pseudo class and pseudo element selector)

For the definition of the complete selector, see the W3C documentation:

W3C about CSS2 selector Description: http://www.w3.org/TR/CSS2/selector.html

The most interesting thing is that CSS selector can be combined for definition. Let's look at the following css rule:

div.post div.entry h1, div.post div.entry h2, div.post div.entry h3, div.post div.entry a:hover{margin-bottom:12px;margin-top:24px;}

The preceding css rule uses the definition of grouping selector to match the following elements:

1) match the

2) a: hover is a pseudo class selector that matches <a> in <div class = "entry"> of all <div class = "post"> elements, defines the style when the mouse moves to the <a> element.

 

In practical applications, css rule conflicts are sometimes encountered. For example, a blog garden page contains the css of the blog Garden, the css of the template, and the custom css of each user. It will inevitably lead to repeated definitions of css selector or css rule. Let's take a look at the following example:

body div p { font-size: 14px; }div p { font-size: 12px; }

In the above example, the p element is also selected. Is the final font-size 12px or 14px? CSS determines which css rule is used at the end by calculating the feature weight.

Description of feature computation in CSS2: http://www.w3.org/TR/CSS2/cascade.html#specificity

What should I do if the CSS from the blog garden page conflicts with the preferred CSS set by the user?

IE users can ignore the CSS provided on the website page completely, and use their preferred CSS definition. The specific setting path is: Control Panel-> Internet Options-> General tab-> auxiliary functions

The full name of CSS is Cascade Stylesheet. Cascade means Cascade and Cascade. For CSS from browsers, users, and pages, the browser will follow the priority order of these CSS, CSS rule with a higher priority is used. features are calculated if they have the same priority. The CSS priorities are sorted from high to low as follows:

1. User important declaration
2. Author important declaration
3. Author normal declaration
4. User important declaration
5. User agent declaration (css settings in the browser)

I believe that general users will not set their preferred CSS settings, and we cannot control the browser. 2) and 3) are related to CSS writing ). My blog uses Lao Zhao's template. In the template's css, div. post h1 is set to gray and sidebar is also gray, but I personally like green and gold, but it is impossible to modify the template's css. Fortunately, the blog garden provides custom css settings, so I have redefined the css rule of h1 and sidebar in the Custom css settings, overwriting the settings of the template css. For css rule like this, CSS2 provides! Important keywords, such:

div.post h1 {color: lime !important;}

Therefore, the css rule marked as important overwrites the normal css rule in the template css. Anyway, I still want to thank Lao Zhao for providing the template. I like it very much, and Lao Zhao is very Wang Dao.

CSS Box Model

Box Model is the core of CSS. Although different browsers have different implementation technologies, they all need to draw dom elements in html according to the corresponding Box Model. Let's take a look at a simple html and Its Box Model:

<p style="height:140px;width:400px">Hi, u r reading a post written by k.k.</p>

The Box in the outer layer indicates the Box Model generated by <p>, the Box in the inner layer indicates the Box Model generated by , and the display page is a frame for the browser, draw these nested Box models (the outermost Box Model is an html or body element ). The most important thing about the Box Model is to understand the three concepts of padding, border, and margin. The W3C documentation makes it clear:

W3C description of Box Model: http://www.w3.org/TR/CSS2/box.html

Here we discuss two concepts related to the Box Model: Block-level element and Inline-level element.

Block-level elements generate an element box that fills its parent element's content area and can not have other elements at its sides (left and right ). it generates "break" before and after the element box.

Inline-level elements generate an element box within a line of text and do not break up the flow of that line.

The difference between Block-level element and Inline-level element is whether a line break is generated between the front and back elements. The most typical Block-Level elements are <p> and <div>. Their appearance produces line breaks between the front and back elements. The most typical Inline-Level element is <a>, its appearance does not make the front and back generate a line break. Using display: block or display: inline, we can directly specify the method for generating the Box Model of the DOM element:

<div>this is <div style="display:block">block-level</div>element</div><p></p><div>this is <div style="display:inline">inline-level </div>element</div>

The page generation result is as follows:

The value of display is -- display: none, which can be used to not display an element. The visual effect is the same as that of visibility: hidden. However, there is a difference between the two in browser implementation: the browser does not process the html of the element marked with display: none, and its height and width are invalid; visibility: the hidden is visually invisible, while the browser still retains the space occupied by the element, and its height and width are still valid. Simply put, the latter is Harry Potter wearing a stealth cloak.

In the pop-up dialog box of the popular div, the height, width, and other information are required to calculate the positioning offset. Therefore, visibility: hidden is used for css settings.

Locate Positioning

There are three types of CSS positioning: Floating positioning, relative positioning, and absolute positioning.

Float)

Users who have used text typographical tools such as Word should easily understand floating positioning, similar to text-and-text mixing in Word, but CSS float is very simple, with only left and right.

Float is used for the About setting in the upper right corner of my blog page:

<p class="kkintro">

I have never understood a problem or field, but have never been familiar with it, and have been familiar with it. This records the growth process of K.K in thinking and solving problems. </P> <p class = "kkintro"> On an issue or area, never learned to understand, from the learned to be familiar with, from the familiar

to the master, this blog records the K.K's growth by thinking and solving problems.</p><p></p>

The page effect is as follows:

The preceding figure shows the effect of text and image mixing. If you do not want to mix, you can set the clear attribute. The value may be left/right/both/none. Let's take a look at the effect of setting clear: both in the above html:

Position: relative)

Relative positioning refers to the location where the box model of the html element is contained in the box model of the parent node, and the top-left-corner in the upper left corner of the parent node is the location where the coordinates are 0 points. You can understand the following html code:

<div style="width:200px;height:200px;margin: 30px;border: thin solid black;background-color: #FFFF99;display: block;"><div style="width:100px;height:100px;background-color: #CC3300;border: thin solid black;position: relative;top: 50%;left: 50%;"></div></div>

The div nested in the inner layer adopts relative positioning. The distance from the upper left corner (x, y) of the parent div is (+ 100px, + 100px). The page effect is as follows:

Absolute position (position: fixed & position: absolute)

Position: absolute refers to positioning relative to the parent element that has been located, and position: fixed refers to positioning relative to the browser window. When element does not have a parent elemenet, position: absolute locates relative to the browser window, which is equivalent to position: fixed.

Located parent element: the containing block is set to the nearest ancestor (of any kind) that has a position value other than static

Let's take a look at an absolute positioning example. The google suggestion drop-down box is as follows:

Css settings:

.gac_m {-moz-background-clip:border;-moz-background-inline-policy:continuous;-moz-background-origin:padding;background:#FFFFFF none repeat scroll 0 0;border:1px solid #000000;cursor:default;font-size:14px;margin:0;position:absolute;z-index:99;}

In. gac_m, the position: absolute containing block is the browser window, which is equivalent to position: fixed. It is relative to the browser window. Currently, the standard div dialog box of a website uses position: fixed for positioning.

CSS versions and browsers are compatible with Version & User Agent Compatibility.

CSS2.1 and CSS3.0 browser compatibility Overview: http://www.quirksmode.org/css/contents.html

CSS2.1 browser compatibility (detailed): http://www.webdevout.net/browser-support-css

Other Tricks implement div transparent mask (overlay)

The div transparent mask is also basically the standard for the div dialog box, with a full browser window mask, such as fill in the resume of the blog garden; also has a border mask, such as Douban "want to read ". I personally prefer the Douban style. Although a dialog box pops up, the browser window becomes gray or white, which looks cool, it always gives a abrupt feeling, of course, the full screen mask also plays a role in imitating the modal window effect, which is very practical.

Opacity settings are used to implement transparent masks. The following shows the css for transparent effects in different browsers.

div#overlay {/*opacity setting for ie*/filter:alpha(opacity=50);/*opacity setting for early version of firefox*/-moz-opacity:0.5;/*opacity setting for early version of safari*/-khtml-opacity: 0.5;/*opacity setting in css3*/opacity: 0.5;}

CSS Transparency settings for All browsers: http://css-tricks.com/css-transparency-settings-for-all-broswers/

When implementing a transparent mask, because there is a cascade relationship between multiple Divs, we can set the z-index to implement the order of element layers, where the z-index value is greater.

Example of a complete overlay mask implementation: http://files.cnblogs.com/chwkai/popup.html.xml (can be browsed without the. xml suffix)

Interpreting HTML <link> Elements

I believe that Web pages know that <link> can be used to link external css and javascript files, but it is not limited to this link that can be used to link any external resources.

W3C description of the <link> elements of HTML: http://www.w3school.com.cn/tags/tag_link.asp

Taking css as an example, a complete <link> shape is as follows:

<link rel="stylesheet" type="text/css" href="style.css"/>

You can also link an RSS feed. When you subscribe to this page using Rss feed reader, reader automatically analyzes whether the page contains <link title = "RSS"> <link> nodes, if yes, this is the RSS feed for the page, such as the douban http://www.douban.com/subject/1000534/ page:

<link rel="alternate" href="/feed/subject/1000534/reviews" type="application/rss+xml" title="RSS" />

 

<Link rel = "stylesheet"…> And <link rel = "alternate stylesheet"…> Both <link> nodes are connected to external css, but the browser uses <link ref = "stylesheet"…> by default. <Link rel = "alternate stylesheet"…> As an alternative css. We can implement alternate stylesheet switching through JS programming, so as to implement such features as font transformation and background changes. It seems that these features are also standard for popular websites.

Stylesheet switcher (pure js): http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm

Switch to alterate stylesheet using jQuery: http://webdevcodex.com/how-to-switch-to-an-alternate-stylesheet-using-jquery/

Tools

To do this, you must first sharpen the tool. When developing Web pages, it is very important to have a good editor. The most famous one is Adobe Dreamweaver, however, I prefer another tool, Microsoft Expression Web Designer 3, with a simpler interface and better Asp. net support, html and css smart prompts are also good, superpreview function is more convenient to view the page's multi-browser compatibility.

Expression Web Desginer 3 download (simplified-chinese ):

"Href =" http://download.microsoft.com/download/3/5/8/358EF194-E47F-46BC-815F-D610732E977C/Web_Trial_zh-Hans.exe "> http://download.microsoft.com/download/3/5/8/358EF194-E47F-46BC-815F-D610732E977C/Web_Trial_zh-Hans.exe

Firefox + firebug is the second recommended tool. firebug provides the inspect element function. You can select any dom element on the page to view html and css, which is very convenient.

Firebug: http://getfirebug.com/

References

CSS-The Definitive Guide, 3rd Edition http://www.douban.com/subject/2152110/

CSS Cookbook, 3rd Edition http://www.douban.com/subject/4016866/

W3School CSS Online Tutorial http://www.w3school.com.cn/css/index.asp

We recommend that every Web developer have The opportunity to read CSS: The definitive guide and have a complete understanding of CSS.