1. Inline style/inline style (used in a single page)
Set the background color background-color:green;
2. Inline styles (used in a small number of pages)
3. External link style sheet (used in the project)
3. Style sheet characteristics
1. Stackability
2. Inheritance
3. Priority of style sheets
4. CSS selector
1. Function
2. Classification:
1. Tag selector
2. id selector
3. class selector/class selector
4. Group Selector
5. Descendant selector
6. Descendant selector
7. Pseudo-class selector
3. Priority of selectors
5. Label size and color
1. Transition animation
2. Label size
3. Color
6. Box model
1. Basic concepts
2. Margins
3. Border
1) Border implementation
2) Single border setting
3) Web page triangle logo production
4) Rounded border
5) Contour lines
2. Padding
3. Box shadow
4. Box model concept
5. Calculation of final label size
7. Layout method
1. Ordinary document flow
2. Floating layout
1) Properties
2) Get value
3) Features
4) FAQ
5) Solve
3. Positioning and layout
1) Properties
2) Get value
3) Offset attribute
4) Classification
5) Stacking order
8. Background attributes
1. Background color
2. Background image related
1) Set background image
2) Set the repeating method of the background image
3) Set the display position of the background image
4) Set the size of the background image
3. Background attribute abbreviation
9. Text attributes
1. Font related
1) Set font size
2) Set the font thickness
3) Set italics
4) Set font name
5) Abbreviation of font attributes
2. Text style
1) Text color
2) Text decorative line
3) Horizontal alignment of text content
4) Row height
1. Introduction to CSS
CSS stands for Cascading Style Sheets, which complements HTML to realize the layout and style beautification of web pages.
2. How to use CSS
1. Inline style/inline style (used in a single page)
Use the style tag attribute to add a style statement to the current tag
<tag name style="style statement">
CSS style declaration: consists of CSS properties and values example:
style="Attribute:value;Attribute:value;"
Commonly used CSS properties:
Set text color color:red;
Set the background color background-color:green;
Set font size font-size:32px;
!
2. Inline styles (used in a small number of pages)
With the help of style tags, embedding CSS style code in HTML documents can achieve the separation between CSS styles and HTML tags. At the same time, you need to use CSS selectors to match tags in HTML and apply styles. Example:
Use selector matching tags to apply styles in style sheet files
3. Style sheet characteristics
1. Stackability
Multiple sets of CSS styles work together on a label
2. Inheritance
Descendant tags can inherit some styles from ancestor tags Example: Most text properties can be inherited
3. Priority of style sheets
Priority is used to resolve style conflicts. The same style (such as text color) of the same label is set multiple times in different places. Which style is finally selected? At this time, which style sheet has the highest priority should be used.
The style closest to the tag has the highest priority (proximity principle)
The document’s embedded and externally linked style sheets have the same priority. The order in which the code is written depends on the later one.
Browser default styles and inherited styles have lower priority
4. CSS selector
1. Function
Match certain tags in the document to apply styles to them
2. Category:
1. Tag selector
Match all tags in the document based on the tag name grammar :
Tag name{<!-- -->
attribute:value;
}
2. id selector
Match the unique tag in the document based on the tag’s id attribute value. The id is unique and cannot be reused. grammar :
#id attribute value{<!-- -->
}
Note: The value of the id attribute is customizable and can be composed of numbers, letters, underscores, and -, and cannot start with a number;
Try to understand the meaning by the name. When it consists of multiple words, you can use connectors, underlines, and small camel cases.
3. class selector/class selector
Match the corresponding tag according to the tag’s class attribute value. The class attribute value can be reused to achieve style reuse. grammar :
.class attribute value {<!-- -->
\t
}
Note: When the tag is combined with the class selector, the tag comes first and the class selector comes last. Example: a.c1{ }
4. Group Selector
Set styles uniformly for a group of labels grammar :
selector1,selector2,selector3{<!-- -->
}
5. Descendant selector
Matches all descendant tags that satisfy the selector (including direct subtags and indirect subtags) grammar :
selector1 selector2{<!-- -->
}
Match all descendant tags in selector1 that satisfy selector2
6. Descendant selector
Matches all direct child tags that satisfy the selector grammar :
selector1>selector2{<!-- -->
}
7. Pseudo-class selector
Set styles for different states of the label, must be used in conjunction with basic selectors Classification :
:hover The state when the mouse is over
:focus focus state (when the text box is edited, it is called focus)
use :
.c1:hover{<!-- --> }
.txt:focus{<!-- -->}
3. Priority of selectors
The selector sets the style for the label. When a conflict occurs, it mainly depends on the weight of the selector. The greater the weight, the higher the priority. You can also use !important to change it.
Selector
Weight
Tag selector
1
(pseudo) class selector
10
id selector
100
Inline style
1000
The final weight of a complex selector (offspring, descendant, pseudo-class) is the sum of the weight values of each selector. The weight of the group selector is based on the individual weight of each selector, and no addition calculation is performed. example :
/*Group selectors are independent of each other and do not affect priority*/
body,h1,p{<!-- --> /*The tag selector weight is 1 */
color:red;
}
.c1 a{<!-- --> /*The current combination selector weight is 10 + 1 */
color:green;
}
#d1>.c2{<!-- --> /*The current combination selector weight is 100 + 10 */
color:blue;
}
5. Label size and color
1. Transition animation
2. Label size
px pixel unit
Percent % relative to parent tag
The relative unit em is 1em=16px. It is usually used for mobile page development. 1.5em is commonly used.
rpx=unit of mini program page
When the content size of the page label exceeds the width of the label, you can use the overflow attribute to solve the display method of the excess part. It is recommended to use auto;
3. Color
Label font, background, border
How to use color:red;
English vocabulary
rgb:
rgb(0~255),rgb(2,3,5)
rgba(0~1),rgba(2,3,5,0.5)
Hexadecimal
Long hexadecimal #ffffff; #000000
Short hexadecimal #fff;#000
6. Box model
1. Basic concepts
? The box model consists of margins, borders, padding and label content respectively.
2. Margins
Attribute: margin
Function: adjust the distance between labels
special: 1) margin:0; cancel the default margins 2) margin: 0 auto; left and right automatic margins to achieve horizontal centering of the label within the range of the parent label 3) margin:-10px; fine-tuning of label position
One-way margin: only takes one value
margin-top
margin-right
margin-bottom
margin-left
Margin merging: 1) Vertical encounter
The margin-top of the child tag acts on the parent tag
Set vertical margins between labels at the same time, and finally take the larger value
2) Contains merge
When a tag is contained within another tag, their above and containing parent tag above
Merging also occurs between the margin below and the outer tag containing the below
!
3. Border
1) Border implementation
grammar:
border:width style color;
The border style is required and is divided into:
Style value
Meaning
solid
Solid border
dotted
Dotted border
dashed
Dotted border
double
Double border
2) Single border setting
Set the border in a certain direction respectively, the value is: width style color;
Attribute
Function
border-top
Set the top border
border-bottom
Set the bottom border
border-left
Set the left border
border-right
Set the right border
3) Web page triangle logo production
Set the width and height of the label to 0
Uniformly set transparent borders in four directions
Adjust the visible color of the border in a certain direction
4) Rounded border
?
Attribute: border-radius specifies the radius of the fillet
Value: pixel value or percentage
Value rules:
A value indicates uniform setting of top, right, bottom and left
The four values represent the upper, right, lower, and left settings respectively.
The two values represent setting up, down, left and right respectively.
The three values mean that the upper, right and lower settings are respectively set, and the left and right are consistent.
5) Contour line
Attribute: outline
Value: width style color
Difference: The border actually occupies space, but the outline does not.
Special: Set to none to cancel the default outline of the text input box.
2. Padding
Attribute: padding
Function: Adjust the distance between the label content box and the border
Value: The unit is px or percentage, but negative values are not allowed
20px; A value indicates uniform setting of top, right, bottom and left
20px 30px; the two values represent settings respectively (up and down) (left and right)
20px 30px 40px; The three values mean that the upper, right and lower settings are respectively set, and the left and right are consistent.
20px 30px 40px 50px; means setting the top, right, bottom and left respectively
Usage: Whether it is the browser window or the label itself, a coordinate system can be constructed, with the upper left corner as the origin, and the right and downward directions as the positive directions of the X-axis and Y-axis.
h-shadow takes the pixel value, the horizontal offset distance of the shadow
v-shadow takes the pixel value, the vertical offset distance of the shadow
blur takes a pixel value, indicating the degree of blur of the shadow. The larger the value, the blurrier it is.
spread is optional, takes the pixel value, and the size of the shadow
color sets the shadow color, the default is black
4. Box model concept
In the model, it specifies how the tag handles content, padding, borders, and margins
The innermost is the content, what surrounds the content is the padding, and the edge of the padding is the border.
Outside the border is the margin, which is transparent by default.
5. Calculation of the final size of the label
The attributes related to the box model will affect the actual occupancy of the label in the document, thereby affecting the layout.
The label setting width/height specifies the size of the content box
Final size = width/height + padding + border + margin
7. Layout method
1. Ordinary document flow
? The default layout mode is displayed from top to bottom and from left to right according to the code writing order and label type.
2. Floating layout
? Mainly used to set the horizontal arrangement of block elements
1) Attributes
float
2) Value
Can be left or right, set the element to float left or right
float:left/right;
clear:left/right/both
3) Features
Elements set to float will be detached from their original positions and docked to the edges of other elements to the left or right, no longer occupying space in the document.
If the element is set to float, it will have the characteristics of a block element and the width and height can be adjusted manually.
“Text wrapping”: The floating element blocks the position of the normal element and cannot block the display of normal content. The content is displayed around the floating element.
4) Frequently Asked Questions
All child elements are set to float, causing the height of the parent element to be 0, affecting the background color and background image display of the parent element, and affecting the page layout.
5) Solution
For elements with fixed content, if the child elements are all floating, the height of the parent element can be fixed (for example: navigation bar)
Add an empty block element at the end of the parent element. Set clear:both; to clear floats
Set overflow:hidden; for the parent element to solve the problem of height 0
3. Positioning layout
? Adjust the display position of the element in combination with the offset attribute
You can use the offset attribute to adjust the position of the positioned element from the reference object.
top from the top of the reference object
right from the right side of the reference object
bottom from the bottom of the reference object
left left from the reference object
4) Classification
relative relative positioning
The
element sets relative positioning, which can be offset based on the original position of the element in the document without breaking away from the document flow.
absolute absolute positioning
1. An absolutely positioned element is offset with reference to its nearest positioned ancestor element. If there is no positioned ancestor element, it is offset with reference to the window.
2. Absolutely positioned elements will flow out and take up no space in the document. You can manually set the width and height.
Use absolute positioning: the parent element sets relative positioning, and the child element is positioned absolutely, with reference to the offset of the positioned parent element.
fixed fixed positioning
1. Position with reference to the window and scroll without following the scrolling of the web page.
2. Break away from the document flow
5) Stacking order
When elements are stacked, you can use the z-index attribute to adjust the display position of positioned elements. The larger the value, the higher the element is:
Property: z-index
Value: A unitless value. The larger the value, the higher it is.
Stacking:
Positioned elements overlap with normal elements in the document, and the positioned element is always on top.
The same positioned elements are stacked. According to the writing order of the HTML code, the later one comes first.
8. Background attributes
1. Background color
background-color: red;
2. Background image related
1) Set background image
background-image: url("path");
Set the background image and specify the image path. If Chinese characters or spaces appear in the path, quotation marks are required.
2) Set the repeating method of the background image
The default background image is displayed from the upper left corner of the element. If the image size does not match the element size, the following situations will occur:
If the element size is larger than the image size, it will be automatically repeated until the entire element is covered.
If the element size is smaller than the image size, the image will be displayed starting from the upper left corner of the element by default, and the excess part will not be visible.
Value:
repeat Default value, repeat tiles horizontally and vertically
repeat-x Repeat tiling along the X axis
repeat-y Repeat tiling along the Y axis
no-repeat does not repeat tiles
3) Set the display position of the background image
Displayed in the upper left corner of the element by default
background-position:x y;
Value method:
1. Pixel value
Set the starting point coordinates of the background image in the element coordinate system
2. Orientation value
Horizontal: left/center/right
Vertical: top/center/bottom
Note: If you only set the orientation value in a certain direction, the other direction defaults to center.
Sprite technology: In order to reduce network requests, all small icons can be spliced into one picture, and all are obtained in one network request; the position of the background image can be adjusted with the help of background-position to display different icons
4) Set the size of the background image
background-size:width height;
Value method:
1. Pixel value
1. 500px 500px; specify width and height at the same time
2. 500px; specified width, height adaptive
2. Percentage
The percentage is calculated with reference to the dimensions of the element
1. 50% 50%; Calculate the width and height of the image respectively based on the width and height of the element.
2. 50%; Calculate the image width and height based on the element width, and scale the image height proportionally
3. Background attribute abbreviation
background:color url("") repeat position;
Notice :
If you need to set the above attribute values at the same time, write them in the corresponding order.
background-size is set individually
9. Text attributes
1. Font related
1) Set font size
font-size:20px;
2) Set font thickness
font-weight:normal;
Value:
1. normal (default value) is equivalent to 400
2. bold (bold) is equivalent to 700
3) Set italics
font-style:italic;
4) Set font name
font-family:Arial,"黑体","宋体";
Value:
1. You can specify multiple font names as alternative fonts, separated by commas
If the font name is in Chinese, or if spaces appear in the name, quotation marks must be used
left (default value) left aligned
center center alignment
right right aligned
4) Row height
line-height:30px;
use : The text is always vertically centered in the current line. You can use the line height to adjust the vertical display position of the text in the element. line-height = height sets a line of text to be vertically centered within the element line-height > height text moves down to display line-height < height The text is displayed at the top special : line-height can use a unitless value, representing a multiple of the current font size, to calculate the line height.
