Rupeng Net study notes (8) CSS and pennet Study Notes css

Rupeng Net study notes (8) CSS and pennet Study Notes css

CSS

I. Introduction to CSS

1. CSS (Cascading Style Sheet) Cascading Style Sheet is a computer language used to control the Display Effect of HTML content.

2. CSS pre-defines many style attributes related to the display effect, such as color and font-size. If you want the html content to display a certain effect, apply the corresponding CSS style attribute.

3. CSS controls style very precisely and precisely

Ii. CSS syntax

1. The basic unit of the CSS language is the style Declaration: proppertyName: value;

2. How to Use CSS:
1. Use the CSS style declaration as the style attribute value of the HTML Tag.

2. Use the CSS Selector

3. Text Style

Used to control the Display Effect of text. Common style attributes:

Color (text color): color value (color name, RGB/RGBA color, hexadecimal color ..) (see remarks)
Text-indent: length value (unit: px, %, em, in, cm, mm ..)
Text-align (text align): enumerated values (left, right, center ..)
Word-spacing (word interval): Length Value
Letter-spacing (character interval): Length Value
Text-decoration: enumeration values (none, underline, overline, line-through ..)

Iv. Font Style

Font-family: font name
Font-size: font size
Font-style Set font style
Font-weight

Font can combine the above style attributes for writing (values are ordered and separated by spaces)
(Font-weight font-size font-family)

V. CSS features

1. Some style attribute sub-tags can be inherited from the parent tag, while others cannot

2. A tag can apply multiple style attributes at the same time.

3. The final display effect of a tag is formed by the combination of several style attributes.

Vi. CSS Selector

1. If the method of element style attribute values is not applicable, to control the style of an element, CSS must first locate and find the element to be controlled.

2. CSS uses the selector syntax to locate elements. There are multiple types of selectors that can be combined in multiple forms,
The CSS selector is flexible, accurate, and powerful.

3. selector type:
Tag selector, id selector, class selector, attribute selector, and pseudo-class selector

4. the selector can be written in the Html <style> tag. The syntax format is:
<Style type = "text/css">
Selector 1 {style declaration list}
Selector 1 {style declaration list}
</Style>

VII. Attribute Selector

1. Locate by element attributes

[Attr] Select a tag with the attr attribute
[Attr = val] select the tag whose attr attribute value is val
[Attr ^ = val] Select a tag whose attributes start with val.
[Attr $ = val] select the tag whose attribute value ends with val
[Attr * = val] select the tag containing val in the attr Attribute Value

8. Pseudo-class selector

Used to locate elements in a specific State

: Links that have not been clicked
: Visited clicked hyperlink
: Hover hyperlink
: Focus: The tag that obtains the focus.
: First-child, first sub-tag
: Last-child, last sub-tag
: Tags without content in empty
: Tags that enabled can operate on
: A label that is disabled and cannot be operated
: Checked selected label

9. Compound Selector

The selector can be combined in multiple forms:
Selector1 space selector2 in the selected element of 1, use 2 to filter its descendant elements (2 do not use pseudo class selector)
Selector1> selector2: in the selected element of 1, use 2 to filter its child elements.
Selector1 ~ Selector2 in the selected element 1, use 2 to filter its subsequent sibling Elements
Selector1 + selector2: in the selected element of 1, use 2 to filter the sibling element next to it.
The Union of selector1 and selector2 selectors
Selector1 (no space) the intersection of selector2 selectors (this can be used only after combination)

10. CSS controls the border effect

Many HTML elements have borders, such as img, table, td, div, and input.

Border-style border style, enumeration Value

Border-width border width, length value

Border-color border color, color value

You can merge the preceding three style attributes border: solid 2px red;

You can also control the top, bottom, and left border styles, such as border-top-color style attributes.

The table element uses border-collaps: collaps; to merge cell borders


11. CSS control element background Style

Many HTML elements can set background styles (background color and background image), such as body and div.

Background-color: red; background color, color value

Background-image: url ("bg1.jpg"); background image

Background-repeat: Specifies the tiled mode of the background image, which is an enumerated value.

Background-attachment: Specifies whether the background image is scrolled along with the content, which is an enumerated value.

Background-position-x: center; horizontal position of the background image; enumerated Value

Similarly, the background style can also be written together with background: url ("bg1.jpg") repeat;

12. Box Model

To better control the page style, CSS defines the box model. An HTML element is a box

Element of the box:
Margin
Border
Padding
Content



1. The size of a box in the page is determined by the total area of the outer margin, inner margin, and content.

2. Only the width style can be specified for the padding and padding.

3. The background of the box will work with the padding and content.

4. style control can be performed on the top, bottom, left, and right sides of the margin, border, and padding respectively.

5. Set the height or width of the box to only apply to the content.


13. Positioning of the box

1. By precisely controlling the outer margin, border, inner margin, content, and position of each box, CSS can implement complex and precise page layout.

2. You need to master the following concepts:

Block-level elements: these elements have a line feed effect by default, such as div.

In-row elements: by default, these elements do not have line breaks, such as span.

Document Stream: When HTML elements are displayed on the page, based on the order in the source code, the rule is exclusive to one line from top to bottom, left to right, block-level elements, and line elements do not wrap.
Sort in sequence. The elements in the Document Stream will affect the subsequent element positions.

Box positioning:
Relative positioning:
When an element is displayed, It is offset downward or to the right from its original position to specify a value,
However, the element itself is not separated from the document stream. That is to say, the later element also thinks that this element is in the original position,
Therefore, it will be arranged after the original position of the element (but will overwrite it)

Position: relative;
Top: 50px;
Left: 50px;

Absolute positioning:
Offset Based on the nearest located ancestor element (if such an ancestor element does not exist, the browser window is used as the benchmark ),
The element itself is out of the Document Stream. That is to say, later elements think that this element does not exist, so it occupies the original position of this element.
(However, this will cause overwriting. After a document stream is detached, it will not have the attribute of a block-level element exclusive row)

Position: absolute;
Top: 50px;
Left: 50px;

Fixed positioning:
Similar to absolute positioning, it will also leave the Document Stream, but it is always based on the browser window and the position will not move with the scroll bar
Position: fixed;
Top: 50px;
Left: 50px;

Floating:
If a box is float to the left (float: left;): This element will become an element in the row;
The block-level elements behind it will lose half of the characteristics of an exclusive row, that is, the left side is immediately behind the floating element, and the right side is extended to the end of the row.
Float to the right is similar to float to the left.
You can use clear: both; to clear the effect of floating effect on the subsequent boxes.

14. z-index level style attributes

After an element is located, overlay the element is generated. to flexibly control the display of the overlay part, CSS provides the z-index level style attribute.


Z-index can only be an integer. The default value is 0, which can be positive or negative.
The element with a large z-index value will overwrite the element with a small value.
Z-index is only valid for the element to be located.

15. How to obtain the coordinates of elements on the page

All HTML elements have the following five read-only attributes:

The distance between the border of the offsetLeft element and the left border of the page.
The distance between the boundary of the offsetTop element and the upper boundary
The width of the offsetWidth element (the span of the left and right borders)
OffsetHeight element height (span of the upper and lower borders)
OffsetParent returns the located ancestor element. If not, it returns the body element or null.



16. Five methods of using CSS

1. Intra-row style: written in the style attribute of the element

2. Embedded style: written in the <style> element

3. import style: In the <style> element, use @ import url(index.css) at the beginning. This method is actually an embedded style.

4. link style: Use the <link> element to introduce css files, for example, <link type = "text/css" rel = "stylesheet" href = "c1.css"/>

5. Default style: Each html tag in the SET has the default css style.


When a style attribute appears multiple times, priority rules must be used to resolve the conflicts:
1. Priority of different import methods: In-line> embedded, import, and link> default mode
2. In the same import mode or reference mode with the same priority, the next occurrence will overwrite the first occurrence

17. Other common style attributes
Display Control Element visibility

Cursor controls the style when the mouse pointer enters the element