css-Union Selector

Deep layout, step in, point to a tag, called: Association selector -sets the style of nested labels div p {}

DAY02 Yesterday Content review 1, the operation of the idea of HTML * * Use the label to manipulate the data package, by modifying the label's property values to achieve the change in the label data style * * * <font size= "5" ></font> 2, Image label  * * access to the local image via HTML, using absolute path, there is currently a problem 3, hyperlink tag <a href= "" Targ et= "_blank" ></a> 4, Table label * * Skill: How many rows are in the number, how many cells are in each row * * <table></table> <            Tr> <td> <th> 5, form labels * * <form></form>-action Method Enctype            -Method:get Post * * Input Item * * * has Name property * Normal Entry Type= "text" * Password: Password                * Radio: Radio-name values same-value values * check box: Checkbox-name values are the same            -Value * drop-down box select option * Text field TEXTAREA * Hidden item: type= "hidden" * File: type= "file" * Submit button Type= "Submit" * Reset: RESET * Use image submission: <input type= "      Image "Src=" "/>      * Normal button Type= "button" 6, div and span * div: Wrap line * span: show CSS1 on one line, Introduction to CSS * CSS: Cascading style Sheet * * Cascade: One layer A layer of * * Style sheet: A lot of properties and property values * is better for the page display * CSS separates the content of the Web page from the display style, which improves the display function. 2, the combination of CSS and HTML (Four ways) (1) on each HTML tag has a property style, CSS and HTML together-<div style= "background-color:red;color:gr een; "        > (2) Use a tag of HTML to implement <style> tag, write in head inside * <style type= "text/css" > CSS code;  </style> * <style type= "text/css" > div{Background-color:Blue;Color:Red; }</style> (3) Use the statement (which does not work under some browsers) in the style tag @import url (the path to the CSS file);          -First step, create a CSS file <style type= "text/css" > @import url (div.css); </style> (4) using the header tag link to introduce an external CSS file-The first step is to create a CSS file-<link rel= "stylesheet" type= "Text/css" href= "Path to CSS files"/> The third combination, the disadvantage: in some browsers do not work, the general use of the Fourth way * * * Priority (General) from top to bottom, from outside to inside.        The priority level is from low to high. Post-load Priority high * * * format selector name{Property Name: property value; Property Name: property value; ....}3, CSS basic selector (three kinds) * * to which the data inside the tag to operate (1) Tag Selector * Use the tag name as the name of the selector Div{Background-color:Gray;Color: White; }(2) class selector * Each HTML tag has an attribute class-<div class= "haha" >aaaaaaa</div>-. Haha {Background-color:Orange; }(3) ID selector * Each HTML tag has an attribute ID-<div id= "hehe" >bbbbb</div>-#hehe{Background-color:#333300; }* * * priority style > ID selector > class selector > tag Selector 4, CSS extension selector (1) Association selector * <DIV><P>WWWWW Www</p></div> * Set the style of the P tag inside the div tag, the style inside the nested tag * Div P{Background-color:Green; }(2) Combo selector * <div>1111</div> <p>22222</p> * Set div and P tags to the same style, put different Label set to the same style * Div,p{Background-color:Orange; }        (3) Pseudo-element selector (understanding, browser compatibility is poor) * CSS provides a number of well-defined styles, can be used to use * such as hyperlinks * * The state of the original state of hyperlinks                Mouse on the state click after click: link:hover:active:visited * * Memory method        LV ha5, CSS box model * * The data needs to be encapsulated into a piece of area (Div) (1) Border border:2px solid blue before layout; Border: Unified set up Border-top under Border-bottom left Border-left right border-right (2) Inner margin padding        : 20px;        Using padding unified settings can also be set up and down about four internal margins (3) margin margin:20px;         You can use the margin unified settings can also be set up and down four margin 6, the layout of the CSS floating (understanding) Float: * * attribute value left: text to the right of the object                 Right: Text to the left of the object 7, positioning of the layout of the CSS (learn) Position: * * Attribute value-Absolute: * * Drag an object from the document stream Can be a top, bottom and other properties to locate-relative: * * * does not drag objects from the document stream * * * can use top, bot Tom and other properties for positioning 8, Case text mixed case * * Picture and text together display 9, Case image Signature * * display text on the picture 10, UpperAfternoon Content Summary 1, CSS and HTML four combinations (* * *) 2, CSS basic selector (* * * *) * Tag Selector using the tag name * class Selector. Name * ID Selector #名称  * * Priority style > ID > Class > tag 3, CSS Extension selector (learn) * Association Selector-set style for nested labels Div p{}* Combo Selector-Different labels have the same style div,p{}* Pseudo Element selector * Hyperlink Status-Original: Link-hover: hover-click: active        -After Click: visited 4, Box model (Learn) * border border:2px solid red;        Up and down border-top border-bottom border-left border-right * Inner margin padding:20px up or down * margin margin:20px            Up and down * to manipulate the data, you need to put the data into an area inside (DIV) 5, the layout of the floating (understand) Float-left: the back of the div to the right -Right: Back Div to left 6, layout positioning (Learn) position-absolute * * Drag from document Stream-RE lative * * will not be dragged out of the document stream generally in the directory, mark the symbol (********): Focus, code to understand, the code will write, code Understanding-(* * * * * * * * * * * * * * * * * * * * * * * * * *): Code to read Solution): Able to clarify the principle

css-Union Selector