CSS learning notes

Author: gnuhpc
Source: http://www.cnblogs.com/gnuhpc/

Note: This study notes are just some of your own notes, beginner's things do not have reference, please go to w3school (http://www.w3school.com.cn/css/index.asp) for system learning.

The tool I used to learn CSS is visual CSS, which enables synchronous preview and quick learning and editing of CSS.

1. Functions of CSS: Defines how content is displayed on a webpage. This prevents code from being bloated by adding many attributes to HTML.

2. CSS Application Method

(1) inline style: includes a style attribute in the label, and defines the CSS attribute and value after it, for example:

Hello world!

(2) Document-level style sheets: A series of style rules are listed at the beginning of an HTML document. They can change one or more rules defined in an external style sheet, create a personalized document for a single HTML file.

(3) external style sheet: place the style definition in the separated document. In each HTML that needs to be applied to the style sheet, introduce the separated document through the tag, for example. You need to download this table every time you open the page, so try to reduce the size of the style sheet.

Note: When three style sheets have different scopes and exist simultaneously, the page processing principles are as follows:

• "Near higher than far" -- inline style> document-level style.
• "Local priority over the whole" -- attributes of the class defined as tags> attributes defined for the overall tag
• "Special priority over general" -- Context Style> attributes defined for the label population
• "Back> front" -- attributes specified later> attributes specified earlier

3. CSS syntax:

Selector + attribute (attribute name + attribute value ).

• Selector: indicates the name of the HTML Tag Element affected by style rules. Because all tags in XHTML are in lower case, it is recommended that selector be in lower case for css2.
• Property + value: defines various style attributes.

For example:

H1 {

Color: red;

Font-size: 14px;

}

4. selector details

(1) Tag selector: the simplest selector for operations on HTML tags. There are three special selector types:

1) wildcard selector: Apply the style to all elements in the document:

*{
Color: red;
Font-style: Italic
}

2) attribute selector: Apply a style to a label with a special attribute: Apply the style to the label with the align attribute being right.

Element

Div [alige = right] {
Color: black;
Font-style: italic;
}

3) group selector: write the same selector with a few tabs together:

P, u1, U2, U3 {
Color: red;
Font-style: Italic
}

4)

(2) class selector: used to process tags with uniform names but with different formats. Use class = class name in the label to specify the style specified by this selector.

1) Regular Class: Label name. Class Name {}, for example:

Font. Big {
Font. Size: 18pt;
}

Font. Small {
Font. Size: 10pt;
}

Use Time:

Hello,

Hello, B

2) General class: it is not connected to a specific label and is defined with A. prefix.

3) pseudo class: used for special purposes. The three most common statuses of hyperlinks are: unaccessed, accessed, and accessed. Defined as: A: class name {}. The Class Name Is Link/active/visited. Use the tag in HTML.

(3) ID selector: ID is a unique selector. # ID name {} is called by the id = "category name" method to define a large structure, such as logo, NAV, content, and copyright.That is to say, the ID must be unique and used in the periphery as much as possible. The class is reproducible and should be used within the structure as much as possible. IDs are unique and parent-level, while classes are reusable and subset.Generally, # Father. Child {} is used to convert all classes into child-level IDs for later maintenance and modification. You can also use the group method to connect.
For example:

# Main P
{
Color: #000;
Font-size: 18pt;
}

(4) derived selector: or contextual selectors. The derived selector allows you to determine the style of a tag Based on the context of the document, without specifying a class or ID. By properly using the derived selector, we can make HTML code more clean. You want the strong element in the list to be changed to italic, rather than the regular italic, you can define a derived selector as follows:

li strong {
    font-style: italic;
    font-weight: normal;
  }

Usage:

 
 

  
  

  
  
I am a italic. This is because the strong element is located in the Li element.

  
  
I am a normal font.

 
 

5. CSS attributes: most of them are defined in the form of a derived selector.

6. CSS design method

(1) Inheritance: A style can be applied not only to a specific element but also to its descendants. You can use important on your own! Define the priority. Note that it is always placed at the end of the rule declaration before the semicolon.

(2) Box Model: it is assumed that HTML elements can all be placed in a rectangle box, with content, spacing, border, and margin arranged from inside to outside. IE and Firefox have different interpretations of the box model. This is a relative concept.

Background-color fills up all the border's internal ranges. By default, background-image is aligned with the top left corner of the border, and then completely displays the entire image (the excess part is not displayed ), if the image is out of size, the image will be repeated until it is full or out of range by default. The background-image will be superimposed on the background-color. by specifying the alignment of the image, you can change the location of the background-image;

Through the combination of the above rules, various decoration effects can be achieved under a limited combination of elements.

For example, the background color and background image are merged after the image and text are separated.

Author: gnuhpc

Source: http://www.cnblogs.com/gnuhpc/