Shulou(Shulou.com)06/01 Report--

In this article Xiaobian for you to introduce in detail "how to quote the page in CSS", the content is detailed, the steps are clear, the details are handled properly, I hope this "how to quote the page in CSS" article can help you solve your doubts, the following follow the editor's ideas slowly in-depth, together to learn new knowledge.

Css

In order to enrich the style of web page elements and to separate the content and style of web pages, CSS was born. CSS is the acronym of CascadingStyleSheets, which means cascading style sheets. With most of the style tags in CSS,html are discarded, html is only responsible for the structure and content of the document, and the presentation is completely handed over to CSS,html documents to become more concise.

Basic syntax of css

Css is defined by:

Selector {attribute: value;}

The selector is the name that associates the style with the page element, and the attribute is the style attribute that you want to set. Each attribute has one or more values. Code example:

P {width:100px;height:100px;color:red}

Css page introduction method:

1, external style: through the link tag, link to the external style sheet to the page.

2. Embedded: create embedded stylesheets on the web page through style tags.

P {width:100px;height:100px;color:red}

.

3. Inline: write the style directly on the tag through the style attribute of the tag.

.

Css text Settings

Commonly used css styles for applying text:

Color sets the color of the text, such as color:red

Font-size sets the size of the text, such as font-size:12px

Font-family sets the font of the text, such as font-family:', Microsoft Yahei'

Font-style sets whether the font is tilted, such as: font-style:'normal'; setting does not tilt, font-style:'italic'; sets text tilting

Font-weight sets whether the text is bold, for example: font-weight:bold; setting is bold, font-weight:normal setting is not bold

Font sets several attributes of the text at the same time, and there is a compatibility problem in the writing order. It is recommended to write in the following order: font: whether to add bold font / line high font; such as: font:normal12px/36px' Microsoft Yahei'

Line-height sets the line height of text, such as line-height:24px

Text-decoration sets the underline of the text, such as text-decoration:none; to remove the underline of the text

Text-indent sets the first line of text to be indented, for example: text-indent:24px; sets the first line of text to indent 24px

Text-align sets the horizontal alignment of text, such as text-align:center sets the horizontal center of text

Css color representation

There are three main representations of css color values:

1. Color name, such as red red, gold gold

2. Rgb says, for example: rgb (255Jing 0jin0) means red.

3. Hexadecimal numeric representation, for example: # ff0000 for red, which can be simplified to # f00

Css selector

The commonly used selectors are as follows:

1. Tag selector

Tag selector, this kind of selector has a wide range of influence and is recommended to be used in hierarchical selector as far as possible.

For example:

* {margin:0;padding:0}

P {color:red}

....

....

2. Id selector

The element is selected by the id name, the id name of the element cannot be repeated, so a style setting item can only correspond to an element on the page and cannot be reused. The id name is generally used by the program, so it is not recommended to use id as a selector.

For example:

# box {color:red}

....

3. Class selector

Select elements through the class name, a class can be applied to multiple elements, an element can also use multiple classes, the application is flexible, reusable, is the most widely used selector in css.

For example:

.red {color:red}

.big {font-size:20px}

.mt10 {margin-top:10px}

....

....

....

4. Hierarchical selector

It is mainly used to select child elements under the parent element, or child elements under the child element, can be used in conjunction with tag elements to reduce naming, but also through the hierarchy to prevent naming conflicts.

For example:

.boxspan {color:red}

.box.red {color:pink}

.red {color:red}

....

....

....

5. Group selector

Multiple selectors, if you have the same style settings, you can use the group selector.

For example:

.box1, .box2, .box3 {width:100px;height:100px}

.box1 {background:red}

.box2 {background:pink}

.box2 {background:gold}

....

....

....

6. Pseudo class and pseudo element selector

The commonly used pseudo-class selector is hover, which represents the state of the mouse hovering over the element, and the pseudo-element selector has before and after, which can insert content into the element through styles.

.box1: hover {color:red}

.box2: before {content:' first line text';}

.box3: after {content:' end-of-line text';}

....

....

....

Css element overflow

When the size of the child element exceeds the size of the parent element, you need to set how the parent element displays the overflowed child elements, by setting it through the overflow attribute.

Settings for overflow:

1. Default value of visible. The content will not be trimmed and will be rendered outside the element box.

2. The hidden content will be trimmed and the rest of the content will not be visible. This property also has the ability to clear the float and clear the margin-top collapse.

3. The scroll content will be trimmed, but the browser will display a scroll bar to view the rest.

4. Auto if the content is trimmed, the browser will display a scroll bar to view the rest of the content.

5. Inherit states that the value of the overflow attribute should be inherited from the parent element.

Block element, inline element, inline block element

Elements are tags, there are three kinds of tags commonly used in layout, block elements, inline elements, inline block elements, understand the characteristics of these three elements, can be skilled in page layout.

Block element

Block elements, also known as row elements, are commonly used tags in layout, such as p, p, ul, li, h2~h7, dl, dt, dd, and so on, and their behavior in the layout:

All styles are supported

If the width is not set, the default width is 100% of the parent width

The box occupies a row, even if the width is set

Inline element

Inline elements, also known as inline elements, commonly used in layout tags such as: a, span, em, b, strong, I, and so on are inline elements, their behavior in the layout:

Some styles are supported (width, height, margin and padding are not supported)

Width and height are determined by content

The box is on one line.

The code wraps and there is a gap between the boxes.

The child element is inline. The parent element can use the text-align attribute to set the horizontal alignment of the child element and the line-height attribute value to set the vertical alignment.

The method of solving the gap between inline elements

1. Remove the line breaks between inline elements

2. Set the parent font-size of the inline element to 0, and then set the font-size of the inline element itself.

Inline block element

Inline block elements, also known as inline block elements, are new element types. Existing elements are not classified into this category. Img and input elements behave like this element, but they are also classified as inline elements. We can use the display attribute to convert block elements or inline elements into this element. Their behavior in the layout:

All styles are supported

If width and height are not set, width and height are determined by content

The box is on one line.

When the code breaks, the box will produce spacing.

The child element is an inline block element. The parent element can set the horizontal alignment of the child element with the text-align attribute and the vertical alignment of the child element with the line-height attribute value.

These three elements can be converted into each other through display attributes, but in actual development, block elements are often used, so we often convert inline elements into block elements, a small amount into inline elements, and when we want to use inline elements, we directly use inline elements instead of block elements.

Display attribute

The display attribute is used to set the type and concealment of an element. Common attributes are:

1. The none element is hidden and does not occupy a position.

2. Block elements are displayed as block elements

3. Inline elements are displayed as inline elements

4. Inline-block element inline block element display

Float

Document stream

Document flow, refers to the box in accordance with the html tag written in the order from top to bottom, from left to right, block elements occupy a line, line elements in a line from left to right, first write the first arrangement, and then write the row in the back, each box occupies its own position.

Floating characteristic

1. There are two kinds of floating elements: left float (float:left) and right float (float:right).

2. The floating element floats to the left or right, and only stops when it touches the boundary of the parent element, the floating element, and the unfloating element.

3. Adjacent floating block elements can be merged on one line and wrap beyond the parent width.

4. Floating allows inline elements or block elements to be automatically converted to inline block elements

5. The element without floating after the floating element will occupy the position of the floating element, and the text in the element without floating will avoid the floating element, forming the effect of text graph.

6. The overall floating element in the parent element cannot support the parent element, and the float needs to be cleared.

7. There is no merging of vertical margin between floating elements

Clear float

Add the attribute overflow:hidden on the parent

Add an empty p after the last child element to give it the style attribute clear:both (not recommended)

Use the mature clean floating style class, clearfix

.clearfix: after,.clearfix:before {content: "; display:table;}

.clearfix: after {clear:both;}

.clearfix {zoom:1;}

Clear how to use floats:

.con2 {... overflow:hidden}

Or

Positioning

About positioning

We can use the position attribute of css to set the positioning type of the element. The setting entry for postion is as follows:

Relative generates relative positioning elements, the position of the document stream occupied by the element remains unchanged, and the element itself is offset from the position of the document stream.

Absolute generates an absolute positioning element, which is separated from the document stream and does not occupy the position of the document stream, which can be understood as floating above the document stream, relative to the previous parent element with relative or absolute or fixed positioning, or relative to the body element if it cannot be found.

Fixed generates fixed positioning elements, which are separated from the document stream and do not occupy the position of the document stream, which can be understood as floating above the document stream and positioning relative to the browser window.

Static default value, no positioning, the element appears in the normal document stream, which is equivalent to unpositioning attributes or not setting positioning attributes.

Inherit inherits the value of the position attribute from the parent element

Positioning element properties

Absolute and fixed positioning block elements and inline elements are automatically converted to inline block elements

Locate the element level

The positioning element is on top of a floating normal document stream, and you can use the z-index attribute to set the level of the element

Typical positioning layout

1. The menu fixed at the top

2. Horizontal and vertical centered bouncing frame

3. Fixed side toolbar

4. The button fixed at the bottom

Background attribute

Attribute interpretation

The background attribute is a widely used and important attribute in css. It is responsible for setting the background image and background color for the box. Background is a compound attribute, which can be decomposed into the following settings:

Background-color sets the background color

Background-image sets the address of the background picture

Background-repeat sets how the background picture is tiled repeatedly

Background-position sets the location of the background picture

Background-attachment sets whether the background picture is fixed or scrolls along the page scroll bar

In practical applications, we can use the background property to put all the above settings together, and it is also recommended to do so, which has higher performance and better compatibility, for example: "background:#00FF00url (bgimage.gif) no-repeatleftcenterfixed", where the "# 00ff00" is to set background-color; "url (bgimage.gif)" is to set background-image; "no-repeat" is to set background-repeat; "leftcenter" is to set background-position "fixed" is to set background-attachment, each setting is separated by a space, and some settings can be left unwritten. It uses the default value.

For example:

The following examples use the following picture as a background image:

1.png

1. "background:url (bg.jpg)", which sets a picture address by default. The picture will cover the box from the upper left corner of the box.

2.png

2. "background:cyanurl (bg.jpg) repeat-x", tile the box horizontally, and the rest of the box displays the background color "cyan".

3.png

3. "background:cyanurl (bg.jpg) repeat-y", the box is tiled longitudinally, and the rest of the box shows the background color "cyan".

4.png

4. "background:cyanurl (bg.jpg) no-repeat". The background is not duplicated, the background is aligned with the upper left corner of the box, and the rest of the box displays the background color "cyan".

5.png

5, "background:cyanurl (bg.jpg) no-repeatleftcenter", the background is not repeated, the background is aligned with the middle left of the box, and the rest of the box shows the background color "cyan".

6.png

6, "background:cyanurl (bg.jpg) no-repeatrightcenter", the background is not repeated, the background is aligned with the middle right of the box, that is, the right side of the background picture is aligned to the right of the box, and the rest of the box shows the background color "cyan".

7.png

Related codes:

Testbackground

.backshow {

Width:320px

Height:160px

Border:3pxsolid#333

Float:left

Margin:10px

}

.bg1 {background:cyanurl (bg.jpg);}

.bg2 {background:cyanurl (bg.jpg) repeat-x;}

.bg3 {background:cyanurl (bg.jpg) repeat-y;}

.bg4 {background:cyanurl (bg.jpg) no-repeat;}

.bg5 {background:cyanurl (bg.jpg) no-repeatleftcenter;}

.bg6 {background:cyanurl (bg.jpg) no-repeatrightcenter;}

After reading this, the article "how to quote pages in CSS" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.