'Those Things About CSS' Reading Notes_html/css_WEB-ITnose

Note:

This book was published in 2009, so there is some knowledge... you know.

Some knowledge points that I am familiar with have not been recorded, so if you want to know more details, you should read this book.

The dark gray marked part is my own understanding. If there is something wrong or something to add, please give me your advice.

I have put the code demonstration on jsfiddle. The access speed in China is a little slower, so please be patient. Or if you know that there is a similar online debugging website in China, please share it with me. Thanks in advance.

Only part of the code demonstration link is given in this note. If you want to see the complete sample code of the book, you can download it from Baidu Cloud: http://pan.baidu.com/s/1o64sPR0. I have Shared.

This note is quite long, please be patient.

Learn CSS patiently and master the essential principles of CSS, and you will find that CSS is really fun.

The best way to learn CSS is to keep doing it, keep thinking, and keep practicing.

CSS features:

Modify page text, images and other page elements to avoid using unnecessary HTML elements.

Control page structure and page layout more effectively.

Improve development and maintenance efficiency.

Abbreviation for CSS:

Abbreviation for color: #RRGGBB ?? Abbreviated to #RGB.

Omission of unit value: When the value is 0, the unit can be omitted.

Abbreviation of inner and outer margins: There are 4 abbreviations according to the clockwise direction of top, right, bottom and left.

Abbreviation for border: border: -width || -style || -color.

Abbreviation for background: background: -color || -image || -repeat || -attachment || -position

Abbreviation for font: font: -style || -variant || -weight || -size || /line-height || -family

Abbreviation for list: list-style: -image || -position || -type

CSS selector:

Tag selector: E (html tag)

ID selector: #className

Class selector: . className

wildcard selector: *

contains selector: also known as derived or descendant selector, which acts on the descendant elements of the element.

Sub-selector: Also known as sub-object selector, it acts on the sub-elements of an element. Use ">" to connect the selectors (IE7).

Adjacent selector: Acts on the next element adjacent to the element (direct successor in linear structure), use " " to connect the selector (IE7).

Attribute selectors: E[attr], E[attr="value"], E[attr~="value"], E[attr|="value"], E[attr^=" value”]

Combination relationship of selectors: targeted use of class selectors or ID selectors, selector groups, and selector combinations.

Pseudo class:

Used to specify the status of one or more selectors related to it (IE6/7 support part). Its form is: selector: pseudo-class {attribute: attribute value;}.

Such as: a:link{}, a:visited{}, a:hover{}, a:active{}.

Pseudo-classes can add more interactive effects to the page without having to use too much javascript to assist the implementation.

Pseudo object:

refers to the additional information to create a document in addition to the information specified in the html document (IE6/7 support part) . Its form: selector:pseudo-object {property:property value;}.

For example: p:before {content: "April 1st"}.

The characteristic of CSS cascading style sheets is "cascading". The so-called cascading means that CSS style sheets will superimpose or cover styles with each other based on the use of selectors.

Four styles defined by web pages:

html: Indicates the style used in html.

Author: Indicates the writer of the CSS file.

User: refers to the style set by the user of the browser web page.

Browser: refers to the browser default style.

Priority order adopted by CSS styles:

Attributes declared with the !important keyword.

CSS style attributes in html.

CSS file style attributes edited by the author.

Style set by the user.

Browser default style.

Selector priority points:

Tag selectors, pseudo-classes and pseudo-objects: the priority point is 1.

Class selector, attribute selector: priority points are 10.

ID selector: Priority points are 100.

style attribute: Priority points are 1000.

Other selectors, such as wildcard selectors, etc.: the priority score is 0.

对于 !important关键字的使用一定要谨慎，切勿随便使用，避免产生不必要的问题。

 

内嵌样式表，一般应用在访问量比较大的页面 减少对服务器的http请求数而减少对服务器的负担。

缺点是如果需要修改，那就只能对页面进行修改， 且无法利用浏览器缓存特性。

 

由于浏览器最后解析@import，这样很容易导致IE6的闪屏或者在打开页面的过程中无样式，直到页面加载完毕后才会加载样式的现象出现，因此 不建议使用@import。

 

a7aa28ecea9c76c2bf6495073b604358

    d657c1f03026693bf2216fbd19e13348主要内容区域16b28748ea4df4d9c2150843fecfba68

    0818976174f51fd16148a8e3216f6947侧边栏16b28748ea4df4d9c2150843fecfba68

16b28748ea4df4d9c2150843fecfba68

Because the browser analyzes the html code sentence by sentence from top to bottom, the main function of placing the mainBox before the sideBox is to display the content area in the browser in advance.

When using CSS styles to layout the page structure, if you do not use floating, you can only use positioning to layout the page.

Two-column page layout:

Two-column fixed-width structure:
Key points: float, width specification, :after clear float.
Effect: http://jsfiddle.net/XianfaLang/tWvph/
Premise: The sum of the box model widths of the two columns cannot be greater than the width of the parent element, otherwise misalignment will occur.

Two-column adaptive structure:
Key points: float, width percentage, :after clear float.
Effect: http://jsfiddle.net/XianfaLang/MyfXs/

Single column fixed width-single column adaptive structure:
Key points: relative positioning, negative margin effect: http://jsfiddle .net/XianfaLang/U3J3X/
Problem: When the sideBox has a lot of content, using absolute positioning will not expand the height of the parent element, and will cover the content of other elements. The solution is to use JavaScript to re-judge the height of the parent element. I personally think there should be a CSS solution to solve this problem instead of using JavaScript to solve it. No, Chapter 5 gives a solution: http://jsfiddle.net/XianfaLang/5w8MD/

Two columns of equal height:
4.1. Background simulation: using background images Tiling creates a visual effect of equal heights.
4.2. Negative margin implementation (recommended):
Principle: Use the left and right margins to compensate for the misalignment of the layout on the page.
Key points: The two containers set margin-bottom:-9999px; padding-bottom:9999px, and the parent element sets overflow:hidden;
Effect: http://jsfiddle.net/XianfaLang/Q5nph /
Problem: If the page uses 3499910bf9dac5ae3c52d5ede7383485 for page jump, some text information will be hidden. If you place the background image at the bottom of mainBox or sideBox, the background image will not be visible.
4.3. Border simulation:
Key points: border-right:280px solid #AAAAAA; Absolute positioning
Effect: http://jsfiddle.net/XianfaLang/tLmTc/
4.4. JS method:
Key points: Use javascript to set the height of the two columns to be the same.
Effect: http://jsfiddle.net/XianfaLang/C9XcZ/

Three or more columns layout:

Understand width The relationship between :auto and float: http://jsfiddle.net/XianfaLang/nMyh4/

Two columns of fixed-width intermediate adaptive structure:
Key points: float, negative margin, mainBox’s width is 100 %.
Effect: http://jsfiddle.net/XianfaLang/dsfKU/

Left fixed width - right and middle adaptive structure:
Key points: floating, margin percentage, negative margin.
Effect: http://jsfiddle.net/XianfaLang/nB57t/

Three-column width adaptive structure: Same as the fixed width on the left - similar to the adaptive structure on the right and middle, change the width to a percentage That’s it.

Three columns of equal height:
The principle is similar to that of two columns of equal height, and there are 4 ways to implement it. Here are only two types:
Negative margin implementation: http://jsfiddle.net/XianfaLang/hRq2q/
Border simulation: http://jsfiddle.net/XianfaLang/EBww5/

Text-related

text-indent attribute can "push" text to the side, such as: p { text-indent: 2em; } /* Set paragraph indent 2em */ Think of negative margins as having a "sucking" effect.

Hide text method:
a. Use text-indent/line-height to "push" the text out of the container.
b. visibility: hidden; Set the element to be invisible, but occupy space.
c. display: none; Set the element to be invisible and occupy no space.

Picture related

Advantages of PNG:

is currently the most distortion-free format, it draws on GIF and JPG The advantages of both are rich storage forms.

It can compress image files to the limit to facilitate network transmission, while retaining all information related to image quality.

Display speed is fast.

Supports the production of transparent images.

PNG Disadvantages: Does not support animation effects.

PNG-8 is a little smaller than GIF. GIF can animate but PNG-8 cannot achieve animation effects.

PNG-24 is the most colorful image and supports alpha channel transparency, unlike PNG-8 and GIF which can only support fully transparent images.

Supports the transparency of alpha channel, which can make the picture have a translucent effect and make the page more beautiful.

Which format of picture should be used as a reference point for the background image:

Whether the picture is seriously distorted.

Which format of image is the smallest.

Whether the picture has a transparency effect, and if so, whether it has an alpha transparency effect.

Background-position Note:

For any background image, set the horizontal positioning first, and then set the vertical positioning.

When there is only one value, the value will be used for horizontal positioning, while the vertical positioning will be based on the default 50%.

When the attribute value is a percentage, the relative position will be calculated based on the center point of the image, while when using px pixel values, the upper left corner of the image will be used as the basis.

Negative values ​​can be used.

CSS Sprite is often used to merge frequently used graphic elements.

CSS Sprite Notes:

Fix the width and height of the container.

Background images that exceed the width and height of the container need to be hidden.

When merging background images, you need to consider the purpose of each image.

Mixed graphics and text: Set float for a1f02c36ba31691bcfe87b2722de723b: left;

Three types of lists:

Unordered list: ff6d136ddc5fdfeffaf53ff6ee95f18525edfb22a4f469ecb59f1190150159c6...bed06894275b65c1ab86501b08a632eb929d1f5ca49e04fdcb27f9465b944689

Ordered list: c34106e0b4e09414b63b2ea253ff83d625edfb22a4f469ecb59f1190150159c6... .bed06894275b65c1ab86501b08a632ebc34106e0b4e09414b63b2ea253ff83d6

Customized list: 5c69336ffbc20d23018e48b396cdd57a 73de882deff7a050a357292d0a1fca94titlec72c1af5e0e7f90179c047c5ef85885e 67bc4f89d416b0b8236eaa5f43dee742content82e295699cff932a4d4dabba39074c35 cd324b2387ec29e44e8e788c60648872

Inline elements do not have width and height attributes. They only have width and height attributes after they are converted into block-level elements.

In CSS styles, there are only two ways to arrange block elements horizontally: positioning and floating.

CSS achieves performance effects, and javascript achieves behavioral effects.

CSS styles require everyone to constantly explore and try new content to improve everyone's understanding of CSS styles and their ability to deal with problems.

List example:

Secondary menu navigation (horizontal):
Key points: overall width, first-level list width and height, and Floating and secondary lists are absolutely positioned.
Effect: http://jsfiddle.net/XianfaLang/4CPdG/

Image and text list information:
Key points: overall width, floating.
Effect: http://jsfiddle.net/XianfaLang/KM7Ua/

Understanding, analysis, and summary are necessary steps:

Understand the steps explained in each example and how to implement them.

Analyze the usability of each method and whether there are other better implementation methods.

Summarize the experience gained in each practice.

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

Table related

border-collapse: Retrieve or set whether the rows of the table and the sides of the cells are merged together. Default value: separate. Merge: collapse.

You can use adjacent selectors to change colors on alternate lines. Personally, I feel that this knowledge point is mainly about understanding the application of adjacent selectors, and has little practical application.

Calendar table production: http://jsfiddle.net/XianfaLang/Z4wVQ/2/

Use the table tag to display the data structure, not for Page layout.

float displays the elements on the page side by side in the horizontal direction, while position displays them The elements of the page are displayed in the form of superimposed .

A few questions to consider before using CSS filters:

Will CSS filters be used too many times on the page? .

Will using CSS filters take up more CPU?

Can I use images to directly replace the effects produced by CSS filters?

After using CSS filters, will it affect the content operation on the page?

The "tab" implemented using iframe has gradually evolved into integrating the page content into one, and switching the display content through JS.

To implement tabs, you need to grasp the subtle relationship between html structure and css style.

Application of negative margins and cascading effect: weird navigation menu.

The IE browser will generate a few pixels of space between each list li. You can use float:left; to make the extra few pixels "disappear".

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

Clear floating effect:

Resolve page misalignment.

Solve the problem of floating child elements causing the parent element to be unable to adapt to the height of the child elements.

Common methods to clear floats:

1. clear attribute--common clear: both;

2. Add Additional tags: 56c5d33419803948326578624852419716b28748ea4df4d9c2150843fecfba68

3. Use the br tag and its own html attribute: 079d205125cc08b5a6372726f48e58b9

4. Parent element settings: overflow: hidden; *zoom:1; (hasLayout also needs to be triggered in IE6, such as zoom: 1)

5. Parent element settings: display: table;

6. Parent element settings :after pseudo-class (recommended):

.clearFix:after {    clear: both; /* 清除伪类层以上的浮动 */    display: block;   /* 使生成的元素以块级元素显示,占满剩余空间; */    visibility: hidden; /* 设置伪类层内容为块级元素且不可见 */       height: 0;    line-height: 0; /* 设置伪类层中的高度和行高为0 */    content: " "; /* 将伪类层中的内容清空 */}.clearFix {    zoom: 1; /* 针对IE浏览器产生hasLayout效果清除浮动 */}

　

Structural analysis is the first step in page creation.

Users are accustomed to scroll bars moving up and down, not left and right.

If the image is large, cut it into two images.

Advantages of using semantic XHTML tags:

When the style cannot be loaded normally, a clear document structure will still be displayed.

Increase SEO (Search Engine Optimization) performance.

Strengthen cooperation with program development.

Improve the efficiency of post-maintenance of the page.

Share your work and express gratitude to the person who criticized your work, because he is telling you how to do better.

How to improve your ability to write code:

Read more CSS manuals.

The meaning of each tag in the XHTML code.

Good at analyzing how CSS layout websites are handled.

Do more practice writing CSS layout websites.

Learn to use Internet search engines.

Good at using auxiliary tools to solve layout problems (Firebug, Chrome devtool).

Be good at summarizing experience and organizing notes (it is recommended that you use Youdao Cloud Notes, which are available on PC/Mobile/Web, and you can directly synchronize cloud notes by copying the link in WeChat, which makes it easier for everyone to use their spare time to read notes ).

Collect and use code snippets.