Home > Developer > JavaScript
Css knowledge point sorting and css knowledge points
CSS is short for Cascading Style Sheets. It is called a Cascading Style Sheet in Chinese. It is used to control the performance of webpage data and separate webpage performance from data content.
I. Introduction of css
1. Intra-row style: the intra-row style is set in the marked style attribute. This method does not reflect the advantages of CSS and is not recommended.
2. Embedded: embedded systems are the <style> </style> label pairs of
<Head>
<Style type = "text/css">
... Write CSS style here
</Style>
</Head>
3. Import: introduce an independent .css file into an HTML file, and use CSS rules to import external CSS files. The <style> mark is also written in the
<Style type = "text/css">
@ Import "mystyle.css"; Path of the. CSS file
</Style>
4. link: Introduce a .css file to an HTML file. <link href = "mystyle.css" rel = "stylesheet" type = "text/css"/>
Note: The Wizard will load the CSS file after the entire web page is loaded, which leads to a problem. If the web page is large, a page with no style is displayed first, after flashing, the webpage style appears again. This
It is an inherent defect of the import type. The difference between the link type and the pilot type is that it will load the CSS file before loading the webpage file body. Therefore, the displayed webpage has a style effect from the very beginning, and it will not be like the pilot type.
Display a webpage without a style first, and then display a webpage with a style. This is a link-based advantage.
Ii. css Selector
The "selector" specifies the target object of the "style" in {}, that is, the elements that the "style" applies to on the webpage.
1. Basic selector:
*: Common element selector, matching any element * {margin: 0; padding: 0 ;}
E: Tag selector, matching all elements using the E tag p {color: green ;}
. Info and E.info: class selector, matching all the elements in the class attribute that contain info. info {background: # ff0 ;}p.info {background: blue ;}
# Info and E # info id selector. match all the elements whose id attribute is equal to footer # info {background: # ff0;} p # info {background: # ff0 ;}
2. Combination selector:
E, F Multi-Element selector, matches all the eElements or F elements at the same time. E and F are separated by commas (,), p {color: # f00 ;}
E f descendant element selector matches all F elements belonging to the descendant of the E element. E and F are separated by spaces # nav li {display: inline;} li a {font-weight: bold ;}
E> F sub-element selector, matching all the sub-elements of the Eelement F div> strong {color: # f00 ;}
E + F is adjacent to the element selector and matches all the elements of the same level after the E element. F p + p {color: # f00 ;}
Note:
3. Attribute Selector
E [att] matches all the eElements with the att attribute, regardless of its value.
(Note: E can be omitted here, for example, "[cheacked]". .) P [title] {color: # f00 ;}
E [att = val] matches all Eelement div [class = "error"] {color: # f00;} Whose att attribute is equal to "val ;}
E [att ~ = Val] matches all att attributes with values separated by spaces, and one of them is equal to the "val" of the Eelement td [class ~ = "Name"] {color: # f00 ;}
E [att | = val] matches all att attributes with values separated by multiple hyphens (hyphen-separated), and an Eelement whose values start with "val" is mainly used for the lang attribute,
For example, "en", "en-us", "en-gb", etc. p [lang | = en] {color: # f00 ;}
E [attr ^ = val] matches each element div [class ^ = "test"] {background: # ffff00;} Whose attribute value starts with a specified value ;}
E [attr $ = val] matches each element div [class $ = "test"] {background: # ffff00;} Whose attribute value ends with a specified value ;}
E [attr * = val] matches each element of the specified value in the property value div [class * = "test"] {background: # ffff00 ;}
P: before insert content p: before {content: "hello"; color: red} before the content of each <p> element}
P: after insert content p: after {content: "hello"; color: red} before the content of each <p> element}
4. Pseudo-class selector
Pseudo class selector: used to control the Display Effect of links. pseudo class selector:
A: link (a link that has never been touched) is used to define the general status of the link.
A: hover (the State of the mouse over the link), used to produce visual effects.
A: visited (the accessed link) is used to read articles and clearly identify the accessed link.
A: active (the status when the mouse is clicked on the Link), used to display the link status when the mouse is clicked.
Pseudo class selector: the pseudo class refers to the different states of the tag:
A ==> click a status that has not been clicked. Hover the mouse over the status to activate the status.
A: link {color: # FF0000}/* unaccessed link */
A: visited {color: #00FF00}/* accessed link */
A: hover {color: # FF00FF}/* move the cursor over the link */
A: active {color: # 0000FF}/* selected link */format: Label: pseudo class name {css code ;}
Iii. Common css attributes
1. color attributes
<Div> 1 <! DOCTYPE html> 2
4. Text attributes
White-space: Set the blank Processing Method in the element.
Direction: Specifies the direction of the text
Text-align: Horizontal Alignment of Text
Line-height: Text line height
Vertical-align:TextVertical Alignment of the Row Height
Text-indent: Text indent
Letter-spacing: Add blank spaces between letters
Word-spacing: Add blank spaces between each word
Text-transform: Attributes control the case sensitivity of text
Text-overflow: Text overflow Style
Text-shadow: text shadow
Word-wrap: automatic line feed
5. List attributes
List-style-type: type of the list item flag
List-style-image: sets the image as a list item flag
List-style-position: position of the list item flag
List-style
6. Border
Border-style: border style
Border-color: border color
Border-width: border width
Border-radius: rounded corner
Border: abbreviated
Box-shadow: border shadow
7. display
8. Box Model
What is a box model?
Padding: used to control the distance between the content and the border;
Margin: used to control the distance between elements;
A Parameter Applied to the four sides.
Two parameters: the first parameter is used for the top and bottom parameters, and the second parameter is used for the left and right parameters.
Three parameters: the first parameter is used for the top, the second parameter is used for the left and right parameters, and the third parameter is used for the following parameters:
The border is located in the upper-left corner of the browser window by default, but it is not close to the border of the browser window. This is because the body itself is also a box (the outer layer has html), the solution
1 body {2 margin: 0; 3}View Code
9. float
Two block-level labels are displayed in one row, which is out of the document flow.
Clear floating:
10. position
1 static, default value static: no special positioning, the object follows the normal document flow.
Top, right, bottom, left and other attributes cannot be applied. Speaking of this, we have to propose a definition-document stream. The document stream is actually the output sequence of the document, that is, what we usually see from left to right, from
In the upper and lower output forms, each element in the webpage is sorted and displayed in this order, while the float and position attributes can separate the elements from the document stream for display. The default value is to allow the element to continue to follow
The document stream is displayed without any changes.
2 position: relative
Relative: the object follows the normal document stream, but it will be offset in the normal Document Stream Based on the top, right, bottom, left and other attributes. Its stack is defined by the z-index attribute.
Absolute: the object is out of the normal Document Stream. Use the top, right, bottom, left and other attributes for absolute positioning. Its stack is defined by the z-index attribute. If you set position: relative, you can use
Top, bottom, left, and right move the element relative to the position where the element should appear in the document. [This means that the element still occupies the original position in the document, but it is visually relative to its original position in the document.
Moved] When position: absolute is specified, the element is removed from the document [that is, the position is no longer occupied in the document]. You can accurately follow the top, bottom, left and right. If an element is absolutely
After positioning, the reference object is based on whether relative positioning is set for the element closest to itself. If there is a setting, it will locate the element closest to itself. If not, it will search for relative positioning elements for its ancestor elements, until html is found.
3 position: fixed
Theoretically, the element set to fixed is located in a specified coordinate of the browser window, which is fixed at this position regardless of whether the window is rolling or not.
Fixed: the object is out of the normal document stream. The top, right, bottom, left and other attributes are used as the reference point of the window to locate the object. When a scroll bar appears, the object does not scroll along. Its stack is determined by the z-index attribute.
. Note
Purpose: If position: absolute | fixed is set for an element, float cannot be set for this element. This is a common sense knowledge point, because it is two different streams, one is a floating stream, the other is "positioning"
Stream ". But relative does. Because its original space still occupies the Document Stream.
Locate by using the following four attributes:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
