"CSS Stuff" reading notes

• This book was published in 2009, so some knowledge ... You know.
• Some of my familiar knowledge points, it is not recorded, so want to know more details, or to read the book it.
• The dark gray mark part, is my own understanding, has the wrong or to add the place, also invites everybody to advise.
• Code demonstration I unified put on the Jsfiddle, the domestic access speed is slightly slower, we are patient point. Or you know the domestic have similar online debugging site, trouble and I share under, thank you here first.
• This note only gives part of the Code demo link, if you want to see the book's full sample code, can go to the Baidu Cloud: http://pan.baidu.com/s/1o64sPR0 Download, I have been shared well.
• The note is longer, so be patient!

After learning CSS patiently and mastering the essential principles of CSS, you will find that the original CSS is really fun.

The best way to learn CSS is to do it constantly, to constantly think, and to practice it constantly.

CSS Features:

• Modifies page elements such as page text, pictures, and so on, avoiding unnecessary HTML elements.
• Control page structure, page layout more effectively.
• Improve development and maintenance efficiency.

shorthand for CSS:

• Abbreviation for color: #RRGGBB – abbreviated to #RGB.
• Ellipsis of the unit value: the unit can be omitted when the value is 0 o'clock.
• shorthand for internal and external margins: there are 4 shorthand methods based on the clockwise direction of the upper right and left.
• Shorthand for border: border:-width | | -style | | -color.
• Shorthand for background: background:-color | | -image | | -repeat | | -attachment | | -position
• Shorthand for fonts: font:-style | | -variant | | -weight | | -size | | /line-height | | -family
• Shorthand for list: List-style:-image | | -position | | -type

CSS selector:

• Tag Selector: E (HTML tag)
• ID Selector: #className
• Class selector:. ClassName
• Wildcard selector: *
• Contains a selector: Also called a derived or descendant selector, which is used as a descendant element of an element.
• Sub-selectors: Also called sub-object selectors, as child elements of the element, with the ">" Connection selector (ie7+).
• Adjacent selectors: The adjacent next element acting on the element (direct back-drive in a linear structure), with a "+" connection selector (ie7+).
• Property selector: e[attr], e[attr= "value"], e[attr~= "value"], e[attr|= "value"], e[attr^= "value"]
• Combination of selectors: Use the class selector or ID selector, select clouds Group, select combination.

pseudo-Class:The State (IE6/7 Support Section) used to specify one or more selectors associated with it. The form is: selector: Pseudo-Class {attribute: property value;}. such as: a:link{}, a:visited{}, a:hover{}, a:active{}. Pseudo-classes can add more interactivity to the page without having to use too much JavaScript to aid the implementation.

Pseudo-object:Refers to the additional information (IE6/7 Support section) of creating a document beyond the information specified in the HTML document. Its form: selector: Pseudo-Object {property: property value;}. such as: p:before {content: "April 1"}.

CSS Cascading style sheets feature "cascading", the so-called CascadeThat is, the CSS style sheet will overlay or overwrite styles with each other based on the use of the selectors.

4 styles of page definition:

• HTML: Represents the style that is used in HTML.
• Represents the creator of a CSS file.
• User: Refers to the style set by the user of the browser page.
• Browser: Refers to the default browser style.

CSS styles take precedence:

• The attribute marked with the!important keyword declaration.
• CSS style properties in HTML.
• The author edits the CSS file style properties.
• User-set style.
• The default browser style.

Selector Priority points:

• Tag selectors, pseudo-classes, and pseudo-objects: priority integral is 1.
• class Selector, attribute selector: Priority integral is 10.
• ID Selector: Priority integral is 100.
• Style attribute: Priority integral is 1000.
• Other selectors, such as wildcard selectors: priority integral is 0.

The use of!important keywords must be cautious, do not use casually, to avoid unnecessary problems.

Inline style sheet, the general application reduces the burden on the server by reducing the number of HTTP requests to the server on a page with a larger volume of traffic. The downside is that if you need to modify it, you can only modify the page and not take advantage of browser caching features.

Because the browser finally resolves the @import, it is easy to cause the IE6 splash screen or no style in the process of opening the page, until the page loaded after the appearance of the style, it is not recommended to use the @import.

<div id= "Container" > <div class= "Mainbox" > main content area </div> <div class= "Sidebox" > Sidebar </div> </div> because the browser parses the HTML code in a top-down way, the main purpose of putting Mainbox before Sidebox is to show the content area ahead of the browser.

When you use CSS styles to lay out the page structure, you do not use floating so that you can only use positioning to page layout.

two column page layout:

• Two-column fixed-width structure:
  Important: Float, width designation,: After clear float.
  Effect: http://jsfiddle.net/XianfaLang/tWvph/
  Premise: The two columns of the box model width addition can not be greater than the width of the parent element, or there will be dislocation phenomenon.
• Two-column adaptive structure:
  Important: Float, width percent,: after clear float.
  Effect: http://jsfiddle.net/XianfaLang/MyfXs/
• Single-row fixed-width-single-ROW adaptive structure:
  Important: Relative positioning, negative margin effect: http://jsfiddle.net/XianfaLang/U3J3X/
  Problem: When Sidebox content is large, using absolute positioning causes the height of the parent element to be stretched and overwrites the contents of other elements. The solution is to use JavaScript to re-judge the height of the parent element to solve, the individual think there should be a CSS solution to this problem, rather than using JavaScript to solve. This is no, the 5th chapter gives a solution: http://jsfiddle.net/XianfaLang/5w8MD/
• Two columns of equal height:
  4.1. Background simulation: Using the background image of the tile, the visual effect of creating a high feeling.
  4.2. Negative margin Implementation (recommended):
  Principle: The use of the left and right two direction of the margin to make up the layout of the page dislocation phenomenon.
  Important: Two container settings margin-bottom:-9999px; PADDING-BOTTOM:9999PX, the parent element is set Overflow:hidden;
  Effect: http://jsfiddle.net/XianfaLang/Q5nph/
  Question: If the page uses <a> do page jump, it will hide some text messages. If you place the background picture at the bottom of the Mainbox or Sidebox, you will not see the background image.
  4.3. Border simulation:
  Key points: border-right:280px solid #AAAAAA; Absolute positioning
  Effect: http://jsfiddle.net/XianfaLang/tLmTc/
  4.4. JS Mode:
  Important: Use JavaScript to set two columns with the same height.
  Effect: http://jsfiddle.net/XianfaLang/C9XcZ/

three-column or multiple-column layouts:

• Learn about the relationship between Width:auto and float: http://jsfiddle.net/XianfaLang/nMyh4/
• Two-column fixed-width intermediate adaptive structure:
  Important: Float, negative margin, mainbox width of 100%.
  Effect: http://jsfiddle.net/XianfaLang/dsfKU/
• Left fixed width-right and middle adaptive structure:
  Important: Float, margin percentage, negative margin.
  Effect: http://jsfiddle.net/XianfaLang/nB57t/
• Three-column-width adaptive structure: similar to left-to-right and intermediate adaptive structures, change the width to a percentage.
• Three columns of equal height:
  The principle is similar to the two columns, and there are 4 ways to achieve this. There are only two types of this list:
  Negative margin implementation: http://jsfiddle.net/XianfaLang/hRq2q/
  Border Simulation: http://jsfiddle.net/XianfaLang/EBww5/

text-related

• The text-indent property can "push" the text to the side, such as: p {text-indent:2em;}/* Set paragraph indent 2em */Lenovo to negative margin has "suction" effect.
• Hidden text methods:
  A. Use Text-indent/line-height to "push" the text out of the container.
  B. Visibility:hidden; The set element is not visible, but occupies a space position.
  C. display:none; The set element is not visible and does not occupy space position.

Photo relatedPNG Advantages:

• is currently guaranteed the most undistorted format, it draws the advantages of both GIF and JPG, the storage form is rich.
• The image file can be compressed to the limit to facilitate the transmission of the network, but also to retain all the image quality-related information.
• Fast display speed.
• Supports the production of transparent images.

PNG disadvantage: Animation effects are not supported.

PNG-8 is smaller than GIF, GIF can be animated and PNG-8 cannot be animated. PNG-24 is the most colorful picture and supports the transparency of the alpha channel, unlike PNG-8 and GIF only support full-transparent images. The transparency of the alpha channel is supported, allowing the picture to be translucent and make the page more beautiful.

which format of the picture is used as a reference point for the background map:

• Whether the picture is seriously distorted.
• Which format of the picture is the smallest.
• Whether the picture has a transparency effect, and if so, whether it has alpha transparency.

background-position Note the point:

• Any background image is to set the horizontal orientation first, and then set the vertical orientation.
• When there is only one numeric value, the value will be used for the horizontal orientation, while the vertical orientation will be based on the default of 50%.
• When the property value is a percentage, its relative position is calculated as the center point of the picture, and the PX pixel value is used as the upper-left corner of the picture as the Datum.
• Negative values can be used.

CSS sprites are commonly used to combine frequently used graphical elements. CSS Sprite Note points:

• The width and height of the fixed container.
• Background images that exceed the width and height portion of the container need to be hidden.
• Background images when merging, you need to consider the purpose of each picture.

Picture and text mix: give set float:left;

three types of listings:

• Unordered list:<ul><li>...</li></ul>
• There are sequence tables:<ol><li>...</li><ol>
• Custom list:<dl> <dt> title </dt> <dd> content </dd> </dl>

The inline element does not have a wide-height attribute, and it only has a wide-height attribute if it is converted to a block-level element. In CSS styles, the block elements can be arranged in a horizontal arrangement with only the position (position) and floating (float) methods.

CSS implements performance, and JavaScript implements behavioral effects.

CSS style needs to be constantly groping, and constantly try new content will make everyone's own understanding of CSS style and the ability to deal with problems improved.

example of a column:

• Second-level menu navigation (horizontal):
  Important: Overall width, level list width height and float, level two list absolute positioning.
  Effect: http://jsfiddle.net/XianfaLang/4CPdG/
• Graphic list information:
  Important: Overall width, float.
  Effect: http://jsfiddle.net/XianfaLang/KM7Ua/

Understanding, analysis, and summary are some of the steps that must be made:

• Understand the steps described in each example and how to implement it.
• Analyze the availability of each method and whether there are other better ways to implement it.
• Summarize the experience gained in each practice.

In IE, the vertical alignment between the button and the text is like the alignment between the check box and the text, which needs to be adjusted using Vertical-align.

Table RelatedBorder-collapse: Retrieves or sets whether the rows of the table and the edges of the cells are merged together. Default value: Separate. Merge: Collapse. You can use adjacent selectors to make interlaced color changes. Personally feel this knowledge point, mainly to understand the application of adjacent selectors, the actual applicability is not small. Creation of the Calendar table: http://jsfiddle.net/XianfaLang/Z4wVQ/2/

Use the table label for displaying data structures, not for page layouts.

floatis to put the elements in the page in the horizontal direction sidedisplayed, and positionInstead, the elements of the page are OverlayThe way it is displayed.

before using CSS filters, there are a few questions to consider:

• There will be too many times to use CSS filters in the page.
• Using a CSS filter is a lot more CPU-intensive.
• Can you use a picture to directly replace the effect created by a CSS filter?
• The use of CSS filters will not affect the operation of the content on the page.

Using the IFRAME implementation of the "tab" gradually evolved to the page content set in one, through the JS switch display content. Implement the Tab tab to grasp the subtle relationship between HTML structure and CSS styles.

Negative margins and cascading effects: a weird navigation menu.

IE will generate a few pixels of space between each list Li, which can be float:left, so that the extra few pixels "disappear".

The best way to analyze an instance is to simplify it, to understand the problem and to analyze it fundamentally.

Clear Floating Effect:

• Solve the page dislocation phenomenon.
• Resolves a problem where a child element floats causing the parent element to be unable to adapt to the height of the child element.

common ways to clear floats:1. Clear attribute--common clear:both; 2. Add additional tags: <div style= "Clear:both;" ></div> 3. Use the BR tag and its own HTML attributes: <br clear= "All" > 4. Parent element settings: Overflow:hidden; *zoom:1;    (You also need to trigger haslayout in IE6, such as Zoom:1)    5. Parent element settings: display:table; 6. Parent element settings: After Pseudo-Class (recommended):

. clearfix:after {    clear:both;/* Clear the Pseudo-class layer above the floating */    display:block;   /* Causes the generated elements to be displayed as block-level elements, occupying the remaining space; */    Visibility:hidden;/* Set pseudo-class layer content as block-level elements and not visible */       height:0;    line-height:0; /* Set the height and row height in the pseudo-class layer to 0 */    content: ""; /* Empty the contents of the pseudo-class layer */}.clearfix {    zoom:1;/* Clear floating */}/* for the haslayout effect of IE browser more concise notation */.clearfix:before,.clearfix:after { C9/>content: "";    display:table;}. clearfix:after {    clear:both;}. clearfix{    zoom:1;}

Structural AnalysisIs the first step in page authoring.

The user is accustomed to moving the scroll bar up and down instead of moving around.

If the picture is large, you can cut it into two pictures.

the XHTML tag benefits of using semantics:

• When the style does not load properly, the structured document structure is still displayed.
• Increase SEO (Search engine Optimization) performance.
• Strengthen the cooperation with the development of the program.
• Improve the productivity of post-page maintenance.

Share your work and thank those who criticize your work because he is telling you how to do it better.

How to improve your ability to write code:

• Read more about CSS manuals.
• The meaning of each label in the XHTML code.
• Good at analyzing the CSS layout of Web site processing methods.
• Do more CSS layout website practice writing.
• Learn to use Web search engines.
• Good at using assistive tools to solve layout problems (Firebug, Chrome devtool).
• Good at summing up experience, organize notes (here we recommend that you use Youdao cloud notes, Pc/mobile/web have, and in the copy link can be directly synchronized cloud notes, so that you make use of debris time to read notes).
• Bookmark and use code snippets.

Reprinted from:

Alang Blog

Http://www.cnblogs.com/langjt/p/4281477.html

"CSS Stuff" reading notes