CSS

CSS define how to display HTML elements, when the browser reads a style sheet, it will format the document to follow this style sheet.

CSS Examples

Selectors and declarations: CSS styles for each section consists of two components. The statement also includes includes attributes and attribute values. End with a semicolon after each statement.

CSS comments

/ * This is a comment * /

CSS introduction of three ways

Internal Style

The focus is embedded CSS style written on the page <head> </ head> tags of the <style> </ style> tag pair. Format is as follows:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

External style

External css style is to write in a separate file, and then introduced to the page. This method is recommended.

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

Inline style

<p style="color: red">Hello world.</p>

CSS selectors

The basic selector

/ * Tag selector * / 
P { Color : "Red" ;} / * ID selector * / 
# I1 { 
  background-Color : Red ; 
} / * class selector * / 
.c1 { 
  font-size : 14px ; 
} 
p.c1 { 
  Color : Red ; 
} / * 
Note: 
style class names do not start with a number (some browsers do not recognize). 
Tag class attribute if you have multiple, use spaces. * /

Universal selector

* {
  color: white;
}

Combination selector

/ * All descendant selectors div span comprising the following nested * / 
        div span { 
            Color : Red ; 
        } / * div span selector son below, does not include nested * / 
        div> span { 
            Color : Aqua ; 
        } / * next selector: immediately following a first span immediately following div * / 
        div + span { 
            Color : Orange ; 
        } / * brother selector: the same level of all of the following labels div All following span * / 
        div ~ span { 
            Color : Brown ;}

Attribute selectors

/ * For selecting elements with the specified attribute. * / 
P [title] { 
  Color : Red ; 
} / * for selecting elements with the specified attributes and values. * / 
P [title = "213"] { 
  Color : Green ; 
}

And nested grouping

Packet

When a plurality of elements of the same style, we do not need to be repeated for each element are set style, we can use a comma-separated packet to selector element disposed uniform pattern between a plurality of selectors.

E.g:

div, p { 
  Color : Red ; 
} / * The above and p div tag code labeling of red font set. 
Usually, we will be divided into two lines to write more clearly: * / 
div, 
the p- { 
  Color : Red ; 
}

Nesting

Multiple choices may be used in combination of, for example: . C1 Internal class for all p tags set the font color to red.

.c1 p {
  color: red;
}

Pseudo class selector

/ * Link unvisited * / 
A: Link { 
  Color : # FF0000
 } / * move the mouse over a link (connected state) * / 
A: hover { 
  Color : # FF00FF
 } / * Selected Link (Suspended mouse) * /  
a: Active { 
  Color : # 0000FF
 } / * link visited (mouse click states) * / 
a: visited { 
  Color : # 00FF00
 } / * when acquiring focus input input box style * / 
input: focus { 
  Outline : none ; 
  background-Color







: #eee;
}

Pseudo-element selector

/ * First-Letter 
commonly provided to the first letter of special style * / 
P: First-Letter { 
  font-size : 48px ; 
  Color : Red ; 
} / * before * / / * insert content before each <p> element * / 
P: before { 
  content : "*" ; 
  Color : Red ; 
} / * after * / / * is inserted after each <p> element content * / 
P: after { 
  content : "[?]" ; 
  Color : Blue ; 
}










/ * The before and after more than a clear float * /

Priority selector

<! DOCTYPE HTML> 
<HTML lang = "EN"> 
<head> 
    <Meta charset = "UTF-. 8"> 
    <title> the Title </ title> 
    <Link the rel = "this stylesheet" the href = "mycss.css"> 
    < style> 
        / * 
            under the same circumstances 1. selector: principles nearby 
            2. selector different cases: 
            inline> id selector> class selector> tag selector 
        * / 
        # D1 { 
            Color : Red ; 
        } 
        .c1 { 
            Color : Orange ; 
        } 
        P { 
            Color : GreenYellow ;
        }

    </style>
</ head>
<body> 
<the p-the above mentioned id = "d1" class = "c1" style = "Color: Green"> going to class was over, I want to eat </ the p->! 
</ body> 
</ HTML>

Summary: The more precise selector range, the more priority

The front end of the road a learning CSS based learning

CSS