CSS basic syntax
I. Overview
1. CSS concept
-
Cascading style sheets, a computer language used to express HTML document styles
Cascading: The loading feature throughout CSS, with cascading and inheritance
Style: How to display HTML elements, text, background, box model, floating, positioning
-
Modify web pages statically, and dynamically format each element of the web page with a variety of scripts
-
Realize the separation of web page structure and style
2. CSS rules
-
Selector
-
One or more style attributes
-
Writing position
-
Write inline to the style attribute
<div style="width:100px;font-size:14px">1</div>- Disadvantages: not completely separated from the structure, heavy is not conducive to interpretation, unable to carry out public attributes
-
Inner fitting type
<head> <style type="text/css"> p,div{font-size:14px} </style> </head> <p>123</p>-
Excellent: Realize the preliminary separation of structural styles and save code.
-
Lack: can not realize the use of multiple html pages, top-heavy, not conducive to fast reading structure
-
-
Outreach
In the html file, add a css file outside the link. The attribute values of the link are:
<link rel="stylesheet" href="01.css" type="text/css">-
rel: "stylesheet" introduces the relationship between external files and html
-
href: "css file path", hypertext application
-
type: "text/css" Load CSS code as plain text
Excellent: Achieve complete separation of structural styles, which can be used in multiple html files, reduce the workload of developers, and achieve hierarchical implementation
-
-
Import
<style>@import url(o1.css);</style>- The method is the same as the external style, but in the display, the structure is displayed and the style is imported at the end
-
-
Style grammar rules
- The corresponding selector must be selected
- {Key name: Key value} writing method
3. Code style
-
Expansion format: used in the development process, strong readability, easy to adjust errors
-
Compact format: used when uploading to the server, reducing unnecessary blank characters and compressing file size (with specific tools)
-
English letter case does not affect the display effect, lower case is recommended
-
Keep spaces between selectors {} and between attribute names and attribute values
Two, CSS specific tags
1. Common styles
Three attributes of text
-
Color
- Color name color: yellow;
- Hexadecimal color name #0000ff
- rgb (red, green, blue) three primary colors between 0~255
-
Font (font-family: "Arial", "Arial")
- When the first font does not exist, execute the next
- The font loading in the browser comes with the computer. To ensure that the user can display it, the last one is set to a font that all machines have
-
Font-size
-
Relative length
- px: pixel value, the most commonly used unit
- em: multiple, used to inherit font size multiples set by ancestor elements
- %: percentage, the percentage of font size inherited from the ancestor element
-
Absolute length
-
in cm mm pt
When the font size is smaller than the browser default minimum font size, it will be treated as the default minimum font size
-
-
Three attributes of the box
- width
- height
- background-color
Three, CSS selector
Base selector
-
Label selector
p{}- Select tag elements by tag name, select all tags with the same name, the nesting relationship of HTML elements will be ignored
- No special styles can be added to partial labels
-
id selector
#name{}- The id attribute above the tag selects the tag, and each id attribute value is unique
- Writing method#id attribute value
- Can only achieve single selection, not multiple selection
-
Class attribute selector
.name{}- Writing method. class attribute value
- It can be the same as other people's class without distinguishing the label type
- A class attribute can have multiple attribute values, separated by spaces, to set multiple styles
- Atomic classes, generally the most commonly used styles can be written separately first, and called directly when needed
-
Wildcard selector
*{ margin:0; padding:0 }-
Select all tags on the page by special symbols
-
Notation* (All tags including html tags)
-
Generally used to clear the initial style of the page
Selection efficiency is relatively low. Public styles are not required for all tags. Generally, large-scale online websites are not allowed to use it*
-
Advanced selector
-
Descendant selector
div p{font-color:rgb(255,0,0)}- To select elements through the nesting relationship between tags, it also becomes a containment selector
- Space means descendant, before space must be the ancestor of the selector after space
- Narrow the selection range through a series of basic selectors, and finally the last selector determines the selected label
- Reduce the number of classes and make selection more efficient
-
Intersection selector
p .demo .ps{font-color:red}- Choose a label to meet the needs of all basic selectors on a label
- The intersection of the most common tags and classes, the tag selector is placed first
- IE6 does not support continuous writing of class names, only the last one
-
Union selector
h1,.demo{font-color:#eee}- When different elements have to set the same style, multiple writing will be wasted, we can write directly at once
- Multiple selectors are separated by commas
- To make up for the shortcomings of wildcard selectors, you can perform targeted selection operations
Four, stacked
1. Inheritance
-
Inherited ancestor style display
-
Text dependency styles that can be inherited
-
Console information view
- element.style inline style part
- user agent stylesheet user's browser device default display style
- inherited from inherited from style attributes
-
A unified text style can be set to a large ancestor body
2. Stackability
Solve the problem of multiple ancestors setting styles, and descendants should inherit that ancestor level and priority judgment
[External link image transfer failed. The source site may have an anti-hotlink mechanism. It is recommended to save the image and upload it directly (img-XYuAm8Rr-1607231243490)(D:\myself\Study_work\phone\a.png)]
Select target label
-
Basic selector weight, the larger the selection range, the smaller the weight
*** <tag selector<class selector<id selector**
-
Advanced selector weight, total number comparison, union needs to be viewed separately
Number of ids, number of classes, number of tags
-
If the weights of the selectors are the same, then the ones written later will be stacked to execute the style
The ancestor of the selected target tag
- The principle of proximity
- The distance is the same, to compare the weight
- The distance is the same, the weight is the same, then the cascade of writing is written first
important
- When comparing weights, you can add !important
- In the principle of proximity, there is no need to compare weights, and important is invalid
In-line expression
-
Advanced selector weight, total number comparison, union needs to be viewed separately
Number of ids, number of classes, number of tags
-
If the weights of the selectors are the same, then the ones written later will be stacked to execute the style
The ancestor of the selected target tag
- The principle of proximity
- The distance is the same, to compare the weight
- The distance is the same, the weight is the same, then the cascade of writing is written first
important
- When comparing weights, you can add !important
- In the principle of proximity, there is no need to compare weights, and important is invalid
In-line expression
- In-line style has the highest weight, but is lower than important