Preliminary Research on CSS

CSS Introduction

 
CSS is short for Cascading Style Sheet, which is used to represent HTML or
The computer language for file styles such as XML is a Cascading Style Sheet. However, due to language differences, I think it is more appropriate to translate it into a "style sheet, because CSS is mainly used to beautify, adjust, and deploy webpage content, it is more like defining the webpage style.

CSS content

Use: First, you need to create a CSS, and then drag it to the head of the page to be referenced, to bind the two together.

ID: Id class body. You can use these identifiers to set the style of a specified element. For example, you can use the block-level element Div to define the ID and class inside it: <Div id = "category" class = "commonfrm"> set category and commonfrm In the CSS file:

. Commonfrm {/* Public framework */Border: 1px solid red; float: Left ;}

And

# Category {/* news category framework */width: 150px; Height: 400px ;}

The DIV and other positions that use category or commonfrm are set according to the defined style.

Relationship between identifiers: all of them can be used to set styles, but there are still differences in the treatment of the same element. In the same element, the class can be tied together, however, the ID cannot be used, and the ID and class can be used together. In CSS, the Space ID is child-level, and the comma ID is the same.

Identifier priority: the three priorities are: Id> class> body. This can be understood as the ID is to set a specified class, while the class is to set a class, and the body is to set all internal elements by default, that is, when there is a special common, take the special rule as the standard.

Container: block-level element in the row.

Line Element

Span (defines text blocks and single lines)

A (Anchor)

IMG (image)

Input (input box)

Block-level elements

Dir (Directory List)

Div (common block-level elements)
DL (definition list)
H1 (large title)
H2 (Subtitle)
H3 (level 3 title)
H4 (Level 4 title)
H5 (Level 5 title)
H6 (Level 6 title)
HR (horizontal separator)
OL (sorting form)
P (paragraph)
Table)
Ul (non-sorted List)

Common combinations

<Ol>

<Li> ...... </LI>
<Li> ...... </LI>
<Li> ...... </LI>
</OL>
Performance:
1 ......
2 ......
3 ......
Ul unordered list, represented by a large circle before Li rather than 123
<Ul>
<Li> ...... </LI>
<Li> ...... </LI>
</Ul>

For more CSS elements, you can download CSS document streams and block-level elements (blocks) and inline elements (Inline ).

CSS Core Content

Standard stream: The standard stream is displayed in the order of the body by default.

Box Model: The box model. The box model is actually a model description that visualizes containers for ease of understanding and memory. That is, each container has the margin, Border border, and padding. Image Distance: There is a wooden box with sugar in it. the outer part of the box can be called the outer margin, and the thickness of the box itself can be called the border, the distance between sugar and the box can be called the padding. Both the padding, border, and outer margin can be divided in the direction. Top, buttom, left, and right are selected in sequence from top to bottom. For example, to define the left border of a container

{/* Left Border parameter of the wooden box */border-left: 1px solid red ;}

Floating: A floating box can be moved left or right until its outer edge hits the border of the contained box or another floating box. Because the floating box is not in the normal stream of the document, the block box in the normal stream of the document performs as if the floating box does not exist.

When frame 1 floats to the right, it leaves the Document Stream and moves to the right until its right edge hits the right edge of the include box:

Positioning: relatively absolute.

Relative positioning: the element box that is set to relative positioning will offset a certain distance. The element remains in the shape before its position, and its original space remains. If an element is relatively located, it appears at its location. Then, you can set the vertical or horizontal position to move the element "relative to" its start point. If
If the top is set to 20px, the box is 20 pixels at the top of the original position. If left is set to 30 pixels, a 30-pixel space is created on the left of the element, that is, the element is moved to the right.
# Box_relative {
Position: relative;
Left: 30px;
Top: 20px;
}

:

Absolute positioning:

#box_relative {  position: absolute;  left: 30px;  top: 20px;}

:

CSS Summary

I just got started with CSS, just a little bit of understanding. I think CSS as a language also has the commonality of other languages, such as reusability: Enhance reusability by using ID or class, creating web templates, and isolating design from web content, this is a bit like layering. There is always an internal connection between knowledge, finding these relationships, and weaving them into a knowledge network, so that knowledge can be reused in the same way as these languages.