CSS learning records (BASICS)

Document directory

• Cascade order
• External style sheet
• Internal style sheet
• Inline Style
• Term Translation

CSS Overview

• CSS refers to the stacked style sheet (CAscadingSTyleSHeets)
• Style DefinitionHow to displayHTML Element
• Styles are usually stored inStyle SheetMedium
• Add the style to HTML 4.0Solve the problem of separation of content and performance
• External style sheetCan greatly improve work efficiency
• External style sheets are usually stored inCSS fileMedium
• Multiple styles can be definedCascadeOne

 

Cascade order

Which style will be used when the same HTML element is defined by more than one style?

Generally, all styles are stacked in a new virtual style table according to the following rules, where number 4 has the highest priority.

1. Browser default settings
2. External style sheet
3. Internal style sheet (inside the
4. Inline style (inside the HTML element)

Therefore, inline styles (inside an HTML element) have the highest priority, which means they take precedence over the following style Declaration:

 

CSS syntax

CSS syntax consists of three parts: selector, attribute, and value:

selector {property: value}

Selector is usually the HTML element or tag you want to define. Property is the attribute you want to change and each attribute has a value. The attribute and value are separated by colons and surrounded by curly brackets, thus forming a complete style Declaration (Declaration ):

body {color: blue}

Different write methods and units of Values
In addition to the English word red, we can also use the hexadecimal color value # ff0000:
p { color: #ff0000; }
To save bytes, we can use the abbreviated form of CSS:
p { color: #f00; }
We can also use the RGB value in two ways:
p { color: rgb(255,0,0); }p { color: rgb(100%,0%,0%); }
Note that when the RGB percentage is used, the percentage symbol must be written even if the value is 0. However, this is not required in other cases. For example, if the size is 0 pixels, PX is not required after 0.
Remember to write quotation marks
Tip: If the value is a number of words, enclose the value with quotation marks:
p {font-family: "sans serif";}
Multiple declarations:
Tip: to define more than one declaration, separate each declaration with a semicolon.
Selector Group
You can group the selector so that the Group selector can share the same declaration. Use commas to separate the selectors to be grouped. In the following example, all the title elements are grouped. All title elements are green.
h1,h2,h2,h3,h5,h6 {color: green;}
Inheritance and Problems
Based on CSS, child elements inherit attributes from parent elements.
Derived Selector
You can define a style based on the context of the element in its position to make the tag more concise.
For example, if you want the strong element in the list to become italic, rather than the regular italic, you can define a derived selector as follows:
li strong {font-style: italic;font-weight: normal;}
Note the context of the Blue Code marked as <strong>:
<P> <strong> I am in bold or not, because I am not in the list, this rule does not work for me </strong> </P> <ol><li><strong>I am a italic. This is because the strong element is located in the Li element.</strong></li><Li> I am a normal font. </LI> </OL>
Id Selector
The ID selector can specify a specific style for HTML elements labeled with a specific ID.
The ID selector is defined.
The following two ID selectors can be used to define the color of the first element as red, and the color of the second element as Green:
#red {color:red;}#green {color:green;}
In the following HTML code, the P element whose ID attribute is red is displayed in red, while the P element whose ID attribute is green is displayed in green.
<Pid="red"> This paragraph is in red. </P> <pid="green"> This section is green. </P>
In CSS, the class selector is displayed with a dot:
.center {text-align: center}
class="center">
This heading will be center-aligned

<p class="center">
This paragraph will also be center-aligned.
</p> 
External style sheet
<Head>
<linkRel = "stylesheet" type = "text/CSS" href ="mystyle.css"/>
</Head>
 
Internal style sheet
<Head>
<style type="text/css">
HR {color: Sienna}
P {margin-left: 20px}
Body {background-image: URL ("images/back40.gif ")}
</style>
</Head>
 
 
Inline Style
<Pstyle= "Color: Sienna; margin-left: 20px">
This is a paragraph
</P>
 
CSS Box Model
Term Translation
     
     

      
      
Element: element.
      
      
Padding: padding, which can be translated as padding.
      
      
Border: border.
      
      
Margin: margin, which can also be translated into blank or blank edges.
     
     
CSS background attributes
     
     

      
      
 
       
 
        
Attribute
 
        
Description
 
       
 
       
 
        
Background
 
        
This attribute is short for setting the background attribute in a declaration.
 
       
 
       
 
        
Background-Attachment
 
        
Whether the background image is fixed or scrolled with the rest of the page.
 
       
 
       
 
        
Background-color
 
        
Set the background color of the element.
 
       
 
       
 
        
Background-Image
 
        
Set the image as the background.
 
       
 
       
 
        
Background-Position
 
        
Set the start position of the background image.
 
       
 
       
 
        
Background-repeat
 
        
Set whether or not the background image is repeated.
 
       
 
      
     
     
 
 
CSS text attributes
     
     

      
      
 
       
 
        
Attribute
 
        
Description
 
       
 
       
 
        
Color
 
        
Set text color
 
       
 
       
 
        
Direction
 
        
Set the text direction.
 
       
 
       
 
        
Line-height
 
        
Set the Row Height.
 
       
 
       
 
        
Letter-spacing
 
        
Set the Character spacing.
 
       
 
       
 
        
Text-align
 
        
Align the text in the element.
 
       
 
       
 
        
Text-Decoration
 
        
Add modifier to text.
 
       
 
       
 
        
Text-indent
 
        
The first line of text in the indent element.
 
       
 
       
 
        
Text-shadow
 
        
Set text shadow. Css2 contains this attribute, but css2.1 does not retain this attribute.
 
       
 
       
 
        
Text-Transform
 
        
The letters in the control element.
 
       
 
       
 
        
Unicode-bidi
 
        
Set the text direction.
 
       
 
       
 
        
White-space
 
        
Set the blank Processing Method in the element.
 
       
 
       
 
        
Word-spacing
 
        
Set the padding.
 
       
 
      
     
     
 
 
CSS font attributes

     
     

      
      
 
       
 
        
Attribute
 
        
Description
 
       
 
       
 
        
Font
 
        
Attribute. The function is to set all font attributes in a declaration.
 
       
 
       
 
        
Font-family
 
        
Set the font family.
 
       
 
       
 
        
Font-size
 
        
Set the font size.
 
       
 
       
 
        
Font-size-adjust
 
        
When the preferred font is unavailable, intelligently scale the replaced font. (Css2.1 deleted this attribute .)
 
       
 
       
 
        
Font-stretch
 
        
Horizontally stretch the font. (Css2.1 deleted this attribute .)
 
       
 
       
 
        
Font-style
 
        
Set the font style.
 
       
 
       
 
        
Font-variant
 
        
Displays text in a small or normal font.
 
       
 
       
 
        
Font-weight
 
        
Set the font width.
 
       
 
      
     
     
 
 
CSS border attributes

     
     

      
      
 
       
 
        
Attribute
 
        
Description
 
       
 
       
 
        
Border
 
        
This attribute is short for setting attributes for Four Edges in a declaration.
 
       
 
       
 
        
Border-style
 
        
It is used to set the style of all borders of an element, or to set the border style for each edge separately.
 
       
 
       
 
        
Border-Width
 
        
Short attribute, used to set the width of all borders of an element, or separately set the width of each border.
 
       
 
       
 
        
Border-color
 
        
This attribute is short for setting the color of the visible part of all borders of an element or the color of the four sides.
 
       
 
       
 
        
Border-bottom
 
        
Short attribute, used to set all attributes of the bottom border to a declaration.
 
       
 
       
 
        
Border-bottom-color
 
        
Set the color of the Bottom Border of the element.
 
       
 
       
 
        
Border-bottom-style
 
        
Set the style of the Bottom Border of the element.
 
       
 
       
 
        
Border-bottom-Width
 
        
Set the width of the Bottom Border of the element.
 
       
 
       
 
        
Border-left
 
        
This attribute is short for setting all the attributes of the left border to a declaration.
 
       
 
       
 
        
Border-left-color
 
        
Set the color of the Left Border of the element.
 
       
 
       
 
        
Border-left-style
 
        
Set the style of the Left Border of the element.
 
       
 
       
 
        
Border-left-Width
 
        
Set the width of the Left Border of the element.
 
       
 
       
 
        
Border-Right
 
        
This attribute is short for setting all the attributes of the right border to a declaration.
 
       
 
       
 
        
Border-right-color
 
        
Set the color of the right border of the element.
 
       
 
       
 
        
Border-right-style
 
        
Set the style of the right border of the element.
 
       
 
       
 
        
Border-right-Width
 
        
Set the width of the right border of the element.
 
       
 
       
 
        
Border-top
 
        
This attribute is short for setting all the attributes of the upper border to a declaration.
 
       
 
       
 
        
Border-top-color
 
        
Set the color of the upper border of the element.
 
       
 
       
 
        
Border-top-style
 
        
Set the style of the upper border of the element.
 
       
 
       
 
        
Border-top-Width
 
        
Set the width of the upper border of the element.
 
       
 
      
     
     
 
CSS margin attributes

     
     

      
      
 
       
 
        
Attribute
 
        
Description
 
       
 
       
 
        
Margin
 
        
Attribute. Set all margin attributes in one declaration.
 
       
 
       
 
        
Margin-bottom
 
        
Set the bottom and outer margins of the element.
 
       
 
       
 
        
Margin-left
 
        
Set the left margin of the element.
 
       
 
       
 
        
Margin-Right
 
        
Set the right margin of the element.
 
       
 
       
 
        
Margin-top
 
        
Set the top margin of the element.
 
       
 
      
     
     
 
CSS padding attributes

     
     

      
      
 
       
 
        
Attribute
 
        
Description
 
       
 
       
 
        
Padding
 
        
Attribute. It is used to set the padding attribute of an element in a declaration.
 
       
 
       
 
        
Padding-bottom
 
        
Set the bottom padding of the element.
 
       
 
       
 
        
Padding-left
 
        
Set the left padding of the element.
 
       
 
       
 
        
Padding-Right
 
        
Set the right padding of the element.
 
       
 
       
 
        
Padding-top
 
        
Set the top padding of the element.
 
       
 
      
     
     
 
CSS list attributes (list)

     
     

      
      
 
       
 
        
Attribute
 
        
Description
 
       
 
       
 
        
List-style
 
        
Attribute. Set all attributes used for the list to a declaration.
 
       
 
       
 
        
List-style-Image
 
        
Set the image as a list item flag.
 
       
 
       
 
        
List-style-Position
 
        
Set the position of the list item flag in the list.
 
       
 
       
 
        
List-style-type
 
        
Set the type of the list item flag.
 
       
 
       
 
        
Marker-offset
 
        
 
 
       
 
      
     
     
 
CSS table attributes
CSS table attributes allow you to set the layout of a table. (Note: This section describes not how to use a table to create a layout, but how to layout a table in CSS .)

     
     

      
      
 
       
 
        
Attribute
 
        
Description
 
       
 
       
 
        
Border-collapse
 
        
Set whether to merge the table border into a single border.
 
       
 
       
 
        
Border-spacing
 
        
Sets the distance between the borders of the cells to be separated. (Used only for the "separated borders" Model)
 
       
 
       
 
        
Caption-side
 
        
Set the table title position.
 
       
 
       
 
        
Empty-Cells
 
        
Set whether to display empty cells in the table. (Used only for the "separated borders" Model)
 
       
 
       
 
        
Table-Layout
 
        
Sets algorithms for display units, rows, and columns.