CSS related knowledge

Advantages of CSS:1: Style sheets provide far more formatting choices than HTML. 2: When adding a background to a Web page, you need to determine how he will tile (repeating a series of properties)3:css occupies far less space than HTML formatting options, and loads more quickly4: Can set a variety of style style sheet, more different needs to provide different styles, style more independent Document Type:all pages start with a DOCTYPE (document type), which is the HTML that the Web page is written in. How HTML Works1: The first line of the site is the DOCTYPE statement,2:3: Head header of Web page4: The main body of the Web page, the content presented on the page is written in this area let IE8 support HTML5<!--[if it IE 9]><script src= "//html5shiv.googlecode.com/svn/trunk/html5.js" ></script><! [endif]>IE Conditional comment abbreviation (IECC)JavaScript code only visible prior to IE9 version HTML tags and attributes that can be forgotten1: Do not use <font> to control the display of text, CSS can do better2: Do not use <b><i> tags to make the text bold or italic: If you must strengthen a word or a paragraph, you can use the <strong> tag. For relatively minor text, you can use the <em> tag to emphasize in order to make the label appear italic can use the <cite> tag, it has the function of with stone, it not only to the title of the italic, to mark the label, easy search engines 3: Do not use <table> tags for page layout4: Do not use label properties to set effects5: Do not misuse <br> tags experience and perspective:Through the recent two page layout design exercises, I have a certain experience and experience about HTML: More semantic structure of the label, in the absence of CSS style before the best HTML code does not show the superfluous effect, HTML only need to focus on the structure of the display, we must pay attention to the naming specification and write annotations,  This way when others look at your code to better understand your layout thinking, why these several structures into a piece, reasonable use of labels, reasonable division structure. About the CSS part: 1: After getting the design manuscript, must not get the design draft began to do, designers design modules are have his own reasons, first understand the designer's ideas, find similar places, to achieve reuse, so you can reduce the amount of code, but also conducive to change. 2: Things that can be implemented in style as far as possible with style, do not use other things to affect the structure of HTML, to achieve low coupling. 3: Using CSS to reset the technology, because each browser's initial designer is different, he can cancel the space that the browser often inserts between the paragraph and other tags.Tips:1: Use title Stop IE8 All nonsense behavior, revert to IE8 before the normal appearance, the practice is to add a meta tag in the Web page, let IE8 ignore compatibility view (Compatibility view), Compatillty View list (Compatibility View lists Use the most standard compatibility mode to display Web pages<meta http-equiv= "x-ua-comptible" content= "Ie=edge"/>preferably right below the <title> label cache: When you find that the changes you have just made are not reflected on the browser, you can use the Force reload page to resolve, Ctrl+f5 using CSS to connect to an external style sheetmethod One use <link> labelmethod Two: Use the @improt directive:Unlike HTML <link> tags, @improt is part of the CSS language and has some of the following properties that are significantly different from HTML:1: Use a URL (absolute path) instead of an href when connecting to an external file, and place the path in a pair of parentheses. 2: As with the link tag, you can also use multiple @improt external styles

<style>
@import URL ();

@import URL ();

</style>

The quotation marks are not written in the line.   Tag Selector:not very recommended, will be a lot of use, in your HTML code structure of all the same tag will use this set of styles, not conducive to the same tag content display not the same implementation class selector:at the moment I think it's the best selector. Adding a class name to the tag allows for precise control of the element tag you want to set the style to, setting the class name you want, and setting it in an external style. usage Rules:1: All class selectors start with a dot (the ID selector starts with the # key)2:css only allowed to appear in class names using letters, numbers, hyphens-and underscores _3: After a dot, the name always begins with a letter. 4: Class names are case-sensitive. Uppercase small different Two the same name, CSS will parse them into different classes Small gas station:div and span tagsyou can use a div tag when you want to place a large section of related elements, which behaves as a block-level element, and you can use a box model to understand it .span Tags:in a large paragraph of text, if you just want to set a style for a specific text, you can use the span tag, and set the span tag class to use CSS to set the envoy's style. ID Selector: Controlling special page Elements have uniquenessonly one ID name can exist in an HTML page. use: The currently used features are: Set a tab, set the Position property: fixed positioning, click on it to jump to the top.  define a style for a label groupIf some tags (classes) need to be set to the same styleYou can use label groups to define styles: for example, H1,h2,h3,h3,... {content of the style}properties that require the same style to be set can be written together, separated by commas. Also called Group selector Universal Selector (*)Brother level Selector, he will set the entire page at the same time, not for one, all involved define a style for a label within a tagbecause the HTML structure is a tree structure, so it is destined to have a lot of branches, her internal will have a lot of sub-nodes (branches) such as UL has LiLi is a derivative of the UL, and this time we can use the derived selector:These tags can be thought of as a genealogy, you are the location of the sub-label;grandfather is the ancestor element, the derivation tag is the ancestor element next level of label, can be understood as uncle and father's generation, (actually is the closest element of the ancestor element node), the parent element is father, you are the child label, is a first-class root-like divergence down. ancestor element: The beginning of a page. Derived Tags: labels that are inside a label or multiple labels are derived labels.Fellow label that can be understood as your brother pseudo-classes and pseudo-elements (giving the user a better experience with more action will have a corresponding effect) can also add additional display effects to the elementdefine a style for a link1:a:link refers to a link that the user has not yet visited2:a:visited indicates that the user has visited the label, after the visit will have a different effect, and no access to the link to create a difference3:a:hover effect When the user moves the mouse over the link4:a:active effects When a user clicks a link add a style to a paragraph1:frist-letter: You can create the first letter of the drop (setting the first letter to the beginning of a paragraph)2:frist-line: Design The first line of a paragraphintroduce more pseudo-classes:The very similar difference between 1:focus and hover is the style that is provided when the label gets the focus, and where the user's focus is judged, which is best used to provide feedback to the visitor, such as by changing the background color table name of the text box where she will enter2:befor can do things that a selector can't do, like adding something to an element3:after and before just the opposite, adding a reference mark later4::selection (Note that it is important to use two colons, which do not work with a colon) is typically used as a way for a visitor to copy text, and to change the style of a selected text when the visitor chooses to copy the text. Property SelectorSelect which elements of the same label, but have different attributesImg[title] (label signature [with attribute value]) 1: (^=): Starting with what img[href^= "/http"]2: ($=): With what end img[href$= ". jpg"]3: (*=): With what (find all element tags with a common attribute name) img[hreg*= "Select" Find all elements containing select in all names Sub-selectors:and derived similar to finding the sibling element of the child element closest to the parent element, finding the next level of child elements can also continue to use the self-selector: First-child Find first child label: Last-child found last child label : Nth-childvery complex selector, there are many ways to use it.You can select odd elements or even elements in a listTr:nth-child (Odd) {backgroung-color: #efefef} set elements of odd rows Tr:nth-child (even) {background-color: #efefef} set elements of even rows nth-child (n) here n can be set, set the element you want him to change  Subclass Selector: (First note, this is not used for a while, after use to add): Frist-of-type: Last-of-type: Nth-of-type Fellow selectorthe connection between child elements must also be adjacent child elements, if the two elements are adjacent child elements can be used with the + number to associate them togetherThere is also a combination selector ~ number if h2+p represents the P tag next to the H2 label, then h2~p represents all P tags at the same level as H2 : Not () selectorcan be called a negative pseudo-class: You can help you select all classes except a classExampleP:not (. Class) {color:red}This means that all label colors except the P tag class named Class are set to redLimitations:1: Use only simple selectors. 2: Cannot use derivation selector3: Cannot use: not selector

CSS related knowledge