Summary of key CSS knowledge

1 Overview

1. What is CSS?

Cascading Style Sheet, a cascading style sheet, is used to set the display style of page content.

##Why use css and what are the advantages?

1: [Content] and [Performance] are separated. Only text information is stored in the HTML file, and the style part is placed in an independent style file. The page is more friendly to search engines.

2: Improve page browsing speed. The capacity of the page using CSS layout is much smaller than the page file capacity of TABLE layout. The former is generally only 1/2 the size of the latter.

3: Easy to maintain and revise. As long as you simply modify the corresponding CSS file, you can redesign the entire website page.

4: Using CSS layout is more in line with the current W3C standards. The W3C organization is a non-profit organization that formulates network standards. Standards such as HTML, CSS, and XML are customized by it.

What are the ways to call CSS style sheets?

1. Internal style: Put the CSS style sheet in the document: The format is as follows:

2. It is an element Add multiple styles

One element can define multiple classes at the same time, and separate different classes with spaces, such as class="xxx01 xxx02".

3. Add styles to child elements

How to set styles for child elements: parent element + space + child element {}, Usually id+class.

Two commonly used attributes

1. Text

• text- align:center: The text is centered.

2. Inner patch

• padding: Inner patch, that is, internal width. Format: padding: 5px (you can define one value or 4 values), used to set the distance between adjacent elements and their borders.

3. External patch

• margin: Add margin between the object and other objects Reduce the white space. The increased spacing is outside the object, so it is called outer patch. The usage method is the same as inner patch padding.

4. Layout

overflow: Set the processing method when the content of the object exceeds the specified range.

• auto: Use scroll bars or shear only when necessary.

• hidden: Do not display content out of range.

• visible: Default value, no cutting, no scroll bars.

• scroll: Always display scroll bars.

# display: Change the display mode of the object.

• inline-block: Treat the object as an inline object and its contents as a block object. Usually width is added to set the width of the object for alignment.

• none: Hidden element, this element does not occupy space.

• visibility:hidden: Hidden objects, hidden objects still occupy space.

The above is the detailed content of Summary of key CSS knowledge. For more information, please follow other related articles on the PHP Chinese website!