Put on a gorgeous coat--css tour (the 23rd day of the study of the Code GOD)

put on a gorgeous coat --CSS tour

Code God study 23rd Day

Learning process Record:

1, CSS(cascading style Sheets, cascading style sheet), in order to solve the content and performance Separation. Styles are typically stored in style Sheets. External style sheets can improve Productivity.

2, three different types of CSS styles:

a :① inline style: the CSS style that defines the label directly on the HTML tag

② internal Style: written in the HTML file and included in the <style></style> code block

③ external styles: controlling styles by referencing external css files in HTML

Element precedence, nearest principle, closest rule to element precedence highest

3. Selector

a : (1) child element selector (childrenselector), used to not want to select any descendant elements, but rather to narrow the scope, select only the child elements of an Element.

①

Eg1:h3 > Em> strong {<span style= "white-space:pre" ></span>color:red;} 

Operation Result:
Ii
Eg2:h3 >strong {<span style= "white-space:pre" ></span>color:red;} 
Operation Result:
(2) descendant selector (descendant selector, which contains selectors), you can select an element that is a descendant of an Element. In the descendant selector, the selector end of the left side of the rule includes two or more selectors separated by Spaces. The space between selectors is a binding character (combinator). Each space-bound character can be interpreted as "... in the ... Find the "," ... as a ... part of the "," ... as a ... , but requires that the selector must be read from right to Left. 
①
Eg:ul Li strong{color:red;font-size:30px;} <ul><li><strong> I am Dunchin Arts </strong></li><li> Dunchin Art this year. </li></ul>
Operation Result:
(3) The attribute selector allows you to select elements based on their attributes and attribute Values.
① Simple attribute selection: you want to select an element that has a property, regardless of the value of the tube Attribute.
Eg:a[href]{<span style= "white-space:pre" ></span>color:red;}
② is selected based on the specific attribute value: Select an element with a specific attribute Value.
eg:a[href= "http://www.mashensoft.com"][title= "code god software"] {<span style= "white-space:pre" ></span>color:red ;}
③ is selected based on the partial attribute value, using the Tilde.
eg:h2[class~= "deng"]{color:red;} <H2 class= "happy deng" >remoa is happy.
Operation Result:
④ specific attribute selection type:
eg1:h4[lang|= "en"]{color:blue;}
note: This rule selects all elements that have the Lang attribute equal to en or start with en- . 
Operation Result:
eg2:h4[lang*= "en"]{color:blue;}
description: This rule will choose the lang attribute to contain  all elements of en that are worth. 
Operation Result:
⑤ adjacent Sibling selector (adjacent sibling selector), You can select an element immediately after another element, and both have the same parent Element. 
EG:H1 + p{color:red;} 
Operation Result:
Practice:
Html code:
<div id= "main" >    start    <div id= "div1" >        <div>div1 tags </div>        <p title= "p1" > Paragraph 1</p>        <p class= "blue" > paragraph 2</p>        <p class= "blue" > paragraph 3</p>        <span > Horizontal block </span>    </div>    <div id= "div2" class= "blue" >div2 tags </div>    end</div >
Practice Requirements:
1. Changethe ID  div1 div2 element font to gold Color. 
2 . Change the word div1 label to Red. 
3. Changeonly the class=blue label and span label in div1 to Blue. 
4, please change the title=p1 label Font to 2 times the default Font. 
① Code Example:
#div1, #div2 {color:gold;} #div1 > div{color:red;} p[class= "blue"]{color:blue;} #div1 span{color:blue;} P[title= "p1"]{font-size:2em;}
② Running Results:
4. Background Properties
①Background: Sets all the background properties in a Declaration. 
②background-color: Sets the background color of the Element. 
③background-position: Sets the start position of the background image. 
④background-repeat: Sets whether and how the background image is Repeated.  Value:repeat-x(repeat horizontally),repeat-y(repeat vertically),  No-repeat(non-repeating),repeat(both vertical and horizontal are repeated)
⑤background-image: Sets the background image of the Element. 
⑥background-attachment: Sets whether the background image is fixed or scrolls along with the rest of the Page.  Value:scroll(default, moves as the rest of the page scrolls) or fixed(the Rest of the page scrolls, the background image does not move) 
5. Text Properties
Color Sets the colors of the Text. 
Direction Specifies the direction/direction of the text   . 
Letter-spacing Set the character spacing. 
Line-height set the row height. 
Text-align Specifies the horizontal alignment of the Text. 
Text-decoration Specifies the decorative effect added to the Text. 
Text-indent Specifies the indentation of the first line of the text Block. 
Text-shadow Specifies the shadow effect added to the Text. 
Text-transform controls the case of Text. 
Unicode-bidi Sets the text Orientation. 
White-space rules How to handle whitespace in an element. 
Word-spacing Set the word spacing. 
Punctuation-trim Specifies whether punctuation characters are trimmed. 
Text-align-last sets How to align the last line or lines immediately preceding the Force line Break. 
Text-emphasis applies a focus marker to the text of the element and the foreground color of the highlighted Marker. 
Text-justify Specifies the alignment method that is used when text-align is set to "justify" . 
Text-outline Specifies the outline of the Text. 
Text-overflow Specifies what happens when the text overflows the containing Element. 
Text-shadow adds a shadow to the Text. 
Text-wrap rules for line breaks for Text. 
6, the outer margin merger:
a :① When two vertical margins meet, they form an outer margin with a combined margin height equal to two larger of the height of the outer margin where the merge Occurred.
② when an element is contained within another element, their upper margin merges, and the bottom margin merges.
7, pseudo-class:
a :①a:link: Select all the links that have not been visited. 
②a:visited: Select all the links that have been visited. 
③a:hover: Select the link on which the mouse pointer is Located. 
④a:active: The moment the link is Clicked. 
A:active must be located   after a:hover
A:hover must be located  after a:link and a:visited
Homework:
To achieve the effect shown:
HTML code example:
<! DOCTYPE Html>
CSS File:
Body {    font-family: "Helvetica Neue", Helvetica, Arial, "microsoft yahei UI", "microsoft yahei", simhei, "\5b8b\4f53", simsun, sans-serif;} #nav li{list-style-type:none;padding-left:8px;padding-right:10px;float:right;} #title {display:inline;padding-left:10px;} #search {display:inline;padding-left:45%;} #nav {float:right;margin-top:0;padding-right:60px;} #header-div{padding-top:6px;padding-bottom:6px;padding-left:10px;background-color:black;color:blue; margin-bottom:0;} #content li{list-style-type:none;line-height:1.7;} #content a{text-decoration:none;} #content-div{padding-top:15px;width:200px;background-color: #EEEEEE; height:500px;} #last {text-align:center;background-color: #DBDBDB;p adding:10px 0;margin:5px 0;} #last h4{font-weight:normal;} a:link{color:blue;} a:active{color:red;} A:visited{color: #00FF00;} a:hover{background-color:aqua;color:yellow;}
Operation Result:
Put on a gorgeous coat--css tour (the 23rd day of the study of the Code GOD)