CSS Learning Memo

How to reference the contents of a CSS file

In a CSS file, you can refer to another CSS file by using the @import directive, in the following format:

@import URL ("referenced CSS filename");

For example, there are two CSS files for a.css and b.css, and if you want to use the selector in B.css in A.css, you can add the following instructions to the A.css file:

@import url ("B.css");

When referencing a CSS file in an HTML or PHP file, you can add a statement in the <style> tag to the following format:

<style>
@import URL ("referenced CSS filename");
</style>

CSS Selector

Selectors are a very important concept in CSS, and four different selectors are commonly used in CSS. Simply put, selectors are created in CSS and used in Web pages (html,jsp,php,asp.net).

CSS Selector Priority:

ID selector >class Selector >html selector > wildcard Selector

The ID selector is relatively low in reusability and has a higher priority than the class selector, and is only used. Select the ID selector if one of the styles is used for only one HTML element, or use the class selector if a style can be used for more than one HTML element.

1, CSS class selector (also called class selector)

Basic syntax:

. class Selector {

Property Name: property value;

......

}

Examples of CSS class selectors:

Http://www.bianceng.cn/http://www.bianceng.cn/web/Css/201607/50222.htm

2, the CSS ID selector

Basic syntax:

#id选择器 {

Property Name: property value;

......

}

Example of a CSS ID selector:

Http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201607/50229.htm

3, CSS HTML element selector

Basic syntax:

HTML element name {

Property Name: property value;

......

}

Examples of CSS HTML element selectors:

Http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201607/50230.htm

Example: CSS lets all hyperlinks appear with the specified effect:

Http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201607/50235.htm

Example:CSS controls the different effects of different paragraphs, that is, classifying the same HTML elements :

Http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201607/50240.htm

4, CSS wildcard selector:

You want all elements to conform to one style, and you can use wildcard selectors. Wildcard selectors can be applied to all HTML elements, but with the lowest precedence.

Grammar:

*{

Property Name: property value;

.......

}

Cases:

*{margin:0;padding:0}

You can have the outer and inner margins of all HTML elements default to 0

Examples of CSS wildcard selectors

Http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201607/50246.htm

Margin properties for CSS:

Http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201607/50251.htm

CSS Parent-Child selector:

Http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201607/50256.htm

An example of a CSS element that has both an ID selector and a class selector:

Http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201607/50261.htm

Example of a CSS element with multiple class selectors

Http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201607/50266.htm

How do I merge the common parts of multiple class selectors?

Http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201607/50271.htm

Elements within a CSS block and inline elements

Http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201607/50276.htm

Conversion between block elements and inline elements

Http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201607/50281.htm

CSS Standard and non-standard streams

Flow: A stream in the design of a Web page that refers to the arrangement of elements (labels).

Standard Flow: Elements (tags) in a Web page as a stream, the first element (label), the content appears in front of, the next Element (label), the content appears in the back.

Non-standard flow: When an element (label) is separated from the standard stream (for example, because of relative positioning), it is collectively referred to as a nonstandard flow arrangement.

CSS Box model

Http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201607/50287.htm

A comprehensive example of CSS box model

Http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201608/50290.htm

CSS Settings background picture

Http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201608/50295.htm

CSS controls more than one picture with a text description

Use the CSS box model to realize the image effect of the home page of imitation Youku.

Specific Write page order:

1, first write HTML, make display content;

2, write CSS file, control style;

CSS Floating

Floating is a very important concept in CSS. Floating on block elements and inline elements take effect, including left float, right float, and clear float. Inline elements are automatically converted to block elements if they float.

1, right float: refers to a block element to the right, let out their original position, move right until the right side of the box containing their own parent elements.

2, left float: refers to a block element as far as possible to the left to move, let out the right position, so that other block elements display.

Example of a CSS right float:

Http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201608/50296.htm

Examples of CSS left-floating:

Http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201608/50301.htm

A special case of CSS floating

Http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201608/50307.htm

How to understand floating?

If an element is floating right/left:

1, the element itself will be as far as possible to move to the right/left, until it touches the border or other floating elements, floating on block elements and inline elements are effective.

2, the element to the right/left float, the equivalent of giving up their left/right, the other elements will be in its left/right arrangement.

CSS to achieve text surrounding the effect of the picture

Http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201608/50312.htm

Clear floating

If you don't want other elements to be on the left or right side of an element, you can use the clear float method:

Clear:right;clear:left;clear:both;

CSS Positioning

The CSS positioning (positioning) property allows the element to be positioned, position the property value:

1, static positioning: Static (default): Element normal generation. The block element generates a rectangular box that is part of the document flow/standard flow, and the inline element creates one or more row boxes, which are placed in the parent element.

2, relative positioning: relative: Element box offset some distance. The element retains its position before it is positioned, and its original space remains as if the element is still in the document flow/standard stream. Here the so-called relative is positioned relative to where the element should have been originally.

3. Absolute positioning: Absolute: The element box is completely removed from the document flow and is positioned relative to its containing block. The containing block may be another element in the document or an initial containing block. The space that the element originally occupies in the normal document stream is closed, as if the element did not originally exist. The element is positioned to generate a block-level box, regardless of what type of box it originally generated in the normal stream.

Absolute positioning refers to the element that is closest to the element that is detached from the standard stream, and is positioned relative to the upper-left corner of the body if there is no parent element (or parent element, but the parent element is not detached from the standard stream).

4, fixed positioning: the performance of the element box is similar to the position set to absolute, but its containing block is the window itself, that is, relative to the upper left corner of the body.

Static positioning relies on margin-left,margin-right to move the position;

Dynamic positioning relies on left,right to move the position.

Examples of CSS relative positioning

Http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201608/50317.htm

Examples of CSS absolute positioning 1

Http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201608/50322.htm

Examples of CSS absolute positioning 2

Http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201608/50325.htm

Examples of CSS fixed positioning

Http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201608/50331.htm

Position's Z-index

Http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/201608/50336.htm