Home > Article > Web Front-end > CSS detailed explanation
CSS detailed explanation
- 高洛峰Original
- 2016-10-20 13:26:451093browse
Introduction to CSS
1. Overview and function of CSS
CSS: Cascading Style Sheets) is a cascading style sheet used to define the display effect of web pages. It can solve the duplication of style definitions in HTML code, improve the maintainability of later style code, and enhance the display effect of web pages.
Function: CSS separates web page content and display style, improving the display function.
2. Combination of CSS and HTML (*****) (four types)
How to combine CSS and HTML
1. Style attribute method:
Use the style attribute in the tag to change the display of each tag style.
Example:
p tag paragraph content.
This method is more flexible, but it is more troublesome to define the same style for multiple identical tags, so it is suitable for local modification.
2. Style tag method: (embedded method)
Add the style tag to the head tag to modify multiple tags uniformly.
<head>
<style type=”text/css”>
p { color:#FF0000;}
</style></head> This method can uniformly set the style of a single page, but it is not flexible enough for local areas.
3. Import method: (commonly used method)
The premise is that there is already a defined CSS file. If part of the style of the web page needs to be used, then use this method.
Example:
<style type="text/css">
@import url(css_3.css);
div { color:#FF0000;}</style>
Define the end of an external CSS file (.css).
@import url("css file address"); needs to be written inside the
Note: The url brackets must be ended with a semicolon. If the imported style overlaps with the style defined on this page, the style defined on this page shall prevail.
4. Link method: (commonly used method)
It is implemented through the link tag in the head tag. The premise is that there must be a predetermined CSS file first.
Example:
<link rel="stylesheet" type="text/css" href="css_3.css" />
<link rel="stylesheet" type="text/css" href="CSS文件的地址" > ，不能写在<style>内部，写在<head>标签的内部。 rel：代表当前的文件和引入文件的关系。 type：类型 href：CSS的地址
Note: Multiple CSS files can be linked through multiple link tags. The repeated style is subject to the last linked CSS style.
3. CSS style priority and code specifications
1. CSS priority
(Generally) from top to bottom, from outside to inside, and from low to high priority.
Special case: tag name selector
2. CSS code specifications
(1) Selector name {attribute name: attribute value; attribute name: attribute value;.. .}
(2) Separate attributes with semicolons
(3) Attributes and attribute values are directly connected with colons
(3) If an attribute has multiple values, the values are directly separated by spaces. Open
Example
div{border: value 1 value 2 value 3}
4. CSS selector (*****)
1. Selector:
Where does the written CSS code act? on the label.
2. Basic selector:
(1) Tag name selector
Each tag defines a class attribute and an id attribute. Used to identify labels to facilitate label operations.
In the definition, the class attribute value of multiple tags can be the same, and the id value must be unique, because it is often used in JavaScript.
(2) Class selector: (commonly used)
Define the class attribute in the tag and assign a value. Set the style of the tag through tag name.class value.
Example:
When setting different styles for the same label, use class to distinguish them.
p.pclass_1 {color:#FF0000;}
p.pclass_2 {color:#0000FF;}
<p class=”pclass_1”>P标签样式</p><p class=”pclass_2”>P标签样式</p>
When different tags have the same settings, use class to define them uniformly.
.classname {color:#00FF00;}
P tag style
(3) id selector:
Similar to the class selector, but in a different format, the name of the selector is: #id value.
Example:
#pid { color:#0000FF;}
P tag style
Note: Multiple tags can also define the same id value, but an error will occur when JavaScript obtains the tag element. Therefore, forming a habit and ensuring the uniqueness of the id value is also very beneficial for future database design.
Priority (special):
Tag name selector
3. Extension selector:
(1) Association selector: There is a relationship between multiple tags.
Separated by spaces
(2) Combined selectors: Set the same style for multiple different selectors
Separated by commas
(3) Pseudo-element selectors: Selectors defined by CSS
If you use super The 4 states of the link, the order of use: L V H A
5. CSS layout (understanding)
* Box model
My heart is like a tiger, sniffing the rose.