CSS Concepts & Functions

Http://www.cnblogs.com/moveofgod/archive/2012/09/18/2691101.html

Style defines how HTML content is displayed

Usually stored in the model table

Role: Solving the problem of separation of content from presentation (MVC model, model:html, VIEW:CSS, Control:javascript)

External style table can greatly improve the efficiency, for example, to modify the page of the title of the form, if the page has 100 headings, if the use of HTML to modify, you need to modify 100 times, if the use of CSS to modify, you only need to modify 1 times OK, because the content and performance is separated, so you can display (model sheet) to be saved and used for later use.

Model tables can be stacked, the back of the design will cover the front, such as the specification of the title of A, and several of the pages want to change the style, you can add the model table, just for these changes.

Stacking order: 1. Browser default

2. External model Sheet

3. Internal design table (inside the

4. Inline style (inside HTML elements)

Basic format

CSS rules are made up of two parts: selectors and one or more declarations. selector {declaration1, declaration2 ...} The selector is usually an HTML element, and each property is a property and a value. Attribute and value are separated by: number. For example: h1{color:red; font-size:14 px; }

selectors can be grouped : The same style is set within the group. For example: H1, H2, H3 {} This function is, H1, H2, H3 the style is the same.

Inheritance and problems : child elements can inherit attributes from the parent element, so when the parent element defines the attribute, it is important to note that it cannot be too detailed, resulting in some child elements that do not require that detail and are inherited. For example body {Font-family:verdana;} then all child elements within the body, such as P, TD, UL, and so on, will all use the Verdana font. Part

CSS Derivation selectors : refers to multiple element tags that work together in CSS styles, descendant selectors, child element selectors, neighboring sibling selectors (all have, who first who must have the order)

Descendant selectors: For example H1 em {color:red;} heading</em>

child element selector: H1 >strong {color:red;} note the > number here, which represents the interior of all strong tags inside the H1, see the example below

The difference between descendant selectors and child selectors: descendant selectors refer to all descendants, such as the example above,

Sang Lin Brother Selector: If you select an element immediately after another element, or both have the same parent element, for example: H1 +p {margin-top:50px;} This selector reads: "The paragraph element p, which appears immediately after the H1 element, and H1 and P have a total The same parent element ", with a binding + can only be used for two brothers in the 2nd after the design change, that is, the content behind the + sign.

For example, a heading H1 element followed by two paragraph p elements, we want to position the first paragraph P element, apply a style to it. We can use the neighboring sibling selector. This is the meaning immediately after the other element.

ID Selector : You can specify a specific style for an HTML element that is labeled with a specific ID. Defined by the # number. #red {color:red;} #blue {color:blue;} <p id = "Red" > This paragraph is red </p> <p id= "Green" > This paragraph is green </p&  Gt   , which can be used in combination, #sidebar p {color:red;} At this point the id = "Sidebar" element inside the P will have a special meaning, with the other paragraph p will be different.

class selector : . Center {text-align:center;} class= "center"> This is a center

CSS Property Selector : Sets the style for the HTML element with the specified property, [title] {Color:blue;} this way, all HTML elements with the title attribute will be styled and set: [Titl e = Color:blue;} This is not all the HTML elements with the title attribute are changed, but only the HTML element style of the title = The show will change accordingly. Again for example input [type = "text"] combined use ... In addition, such a property selector such as Input[type = "text"], where input and [type= "text"] cannot have spaces between them, because they represent a whole in HTML.

CSS pseudo-class: CSS pseudo-classes are used to add special effects to certain selectors.

1 a:link {color: #FF0000}/    * not visited link */2 a:visited {color: #00FF00}/    * visited link */3 a:hover {color: #FF00FF}/    * mouse Label to */4 a:active {color: #0000FF}/    * selected link */

Pseudo-classes can be used in conjunction with CSS classes:

A .red : visited {color: #FF0000}<a class= " red " href= "css_syntax.asp" >css syntax</a>
Generic pseudo-classes can only be used for <a> this tag.

How to insert a style sheet

external style sheet : This approach is good when the design needs to be applied to multiple pages, using <link> tags to link to the design table, <link> tags should be at the head of the document:

<link rel= "stylesheet" href= "Style.css" type= "Text/css" >

internal style sheet : When a single document requires a special style, you can use the <style> tag to define an inline style sheet in the document header, for example:

multiple styles: If some attributes are defined by the same selector in a different style table, then the attribute value will be inherited from the more specific style sheet.    is actually overlapping function, for example: External model table: h3 {color:blue; text-align:left; font-size:8pt;} The Internal model table for the H3 selector: h3{text-aglin:right; font-size:20pt;} so the final result is {color:blue; text-again:right; font-size:20pt ;} That is, the content of the external style is used first, and then overwritten with the internal style sheet, the same attributes are overwritten, and the external excess attributes are retained.

Color different notation:

1) Red--English words

2) #ff0000--16 binary

3) RGB (255,0,0)--3 Yuan Color

4) RGB (100%, 0%, 0%)--percent

CSS examples

Body {/* element */color:blue;} H1,h2,h3,h4,h5,h6 {color:blue; font-size:20px;} p {color:green; font-size:15px; font-family: "sans serif"; text-align:center;background-color:gray;/* Background color */padding:10 px;/* extends outward, wide */} #myid p {/* id + element */color:red;}. Center {/* class */text-align:center;} H1.center {/* denotes h1 This element's class attribute */color:red;    /* Follow priority, so no change */}[dir] {/* property */color:yellow;}

CSS Box Model Overview

Block-level elements (such as Div, p)

Floating and positioning (layout)

Implement

First define the basic CSS, such as a unified small title, HTML tags, body tags, p tags, and so on, as well as unified mouse content a:hover,a:active and so on

Then define the div area, and the detail properties of each area

Finish, and see what needs to be adjusted.

CSS Concepts & Functions