css Basics 1

css Basics

syntax structure css selector {property name: Property Value; Attribute name 2: attribute value 2}

css introduced three kinds of ways

1. css document incorporated by <link> tag is the most formal wording

2. css code written directly in the <head> of <style> within

3. The style attribute within the tag directly write css code

Find six choices of labels

The basic selector selects a combination, a selector attributes, grouping and nested pseudo class selectors, pseudo-element selector

The basic selector

1. tag selector

The interior of all the text on the page become red div

div{
    color:red;
}

2. Class Selector

Let all the tags inside the text with a class attribute value c1 turns blue

.c1{
    color:blue;
}

3.id selector (id tags have attributes, such as id = 'd1')

Id into the green label inside the text content of d1

#d1{
    color:green;
}

4. universal selector

All labels on the page to modify the unified style

*{
    color:aqua;
}

Combination selector

1. descendant selectors (div tag, span all included content will be selected!)

div span{
    color:red;
}

2. son selector

Div div that represents the internal layer closest to the span, which contains the content will be selected

div > span{
    color: red;
}

3. adjacent selector (selected at this time is close to the <div> </ div> the <span> tag content, in this case the outer span the div)

div + span{
    color: deeppink;
}

4. sibling selector (div tag selection later, and the content of the same level parallel div span tags)

div ~ span{
    color: deeppink;
}

Attribute selectors

Specify the property name to find all labels have username attribute names of the page

[username]{
    background-color: deeppink;
}

Specify the attribute names and values, to find the attribute name and the page is the username attribute value label called joe

[username='Joe']{
    background-color: black;
}

Specify the attribute names and values of a certain type of label, found on page input tag, and the attribute name is username, property values called joe

input[usrname='Joe']{
    background-color:aqua;
}

Packet nested

Nested grouping is selected in combination with the selected base junctions and used together

div, p, span{
    color: green;
}

C1 find the binding tag property value having a descendant of the class selectors h1 descendant selector

.c1 h1{
    color: green;
}

Pseudo class selector

Pseudo class selector <a> label on, focusing a: When the mouse hover color suspension

Hyperlinks normal color display

a:link{
    color: aqua;
}

Hover color displayed on a hyperlink

a:hover{
    color: black;
}

When the color of the moment did not release the mouse click

a:active{
    color: green;
}

After the color of visited hyperlinks

a:visited{
    color: gray;
}

Tag <input> pseudo-class selector

Focusing the background color when the focus input block

input:focus{
    background-color:red;
}

Pseudo-element selector

The first letter capitalized within the p tag

p:first-letter{
    color: red;
    font-size: 48px;
}

Between the p tags plus the contents of the content

p:before{
    content: '你好啊';
    color: red;
}

After p tags plus the contents of the content

p:after{
    content: '?';
    color: blue;
}

Guess you like