What is CSS? Introduction to CSS cascading styles (code)

What is CSS? CSS is a CSS cascading style sheet. Because CSS is the acronym for Cascading style Sheets, it means cascading style sheets. The appearance of CSS makes the style of page elements richer, and also separates the format of Web pages from the content of Web pages. Let's take a look at what the specific content of CSS is.

CSS basic Syntax and page references

CSS Basic syntax

CSS is defined by:

Selector {property: Value; property: Value; property: Value;}

A selector is a name that associates a style with a page element, and a property is a style property that you want to set with one or more values for each property. code example:

p{width:100px; height:100px; color:red}

CSS Page Introduction method:

1, Outreach: through the link tag, linked to the external style sheet to the page.

<link rel= "stylesheet" type= "Text/css" href= "Css/main.css" >

2. Embedded: Create an embedded style sheet on a Web page by using the Style tab.

<style type= "Text/css" >    p{width:100px; height:100px; color:red}    ......</style>

3. Inline: Write the style directly on the label by using the Style property of the label.

<p style= "width:100px; height:100px; Color:red ">......</p>

CSS text settings

CSS styles for commonly used text:

• Color sets the colour of the text, such as: color:red;

• Font-size set the size of the text, such as: font-size:12px;

• font-family Set the text font, such as: font-family: ' Microsoft ya Black ';

• Font-style Set the font tilt, such as: Font-style: ' normal '; Set no tilt, Font-style: ' Italic '; set text skew

• Font-weight set the text whether bold, such as: Font-weight:bold; Set bold Font-weight:normal setting not bold

• Font set several properties of the text at the same time, the order of writing has compatibility problems, it is recommended to write in the following order: font: Whether bold font size/line height, such as: Font:normal 12px/36px ' Microsoft Ya Black ';

• Line-height set the line height of the text, such as: line-height:24px;

• Text-decoration set the underline of the text, such as: Text-decoration:none; Remove the text underline

• Text-indent set the first line of text indentation, such as: text-indent:24px; Set the first line of text indent 24px

• Text-align Set Text horizontal alignment, such as Text-align:center set text to center horizontally

CSS Color notation

There are three main ways to represent CSS color values:

1, color name, such as: Red Red, gold gold

2, RGB means, for example: RGB (255,0,0) Red

3, 16 binary numerical representation, such as: #ff0000 is red, this can be written in simple #f00

CSS Selector

There are several common selectors:

1. Tag Selector

The tag selector, which has a large range of effects, is recommended to be applied to the hierarchy selector as much as possible.
Example:

*{margin:0;padding:0}div{color:red}   <div>....</div>   <!--corresponds to the above two styles--><div class= "box ">....</div>   <!--corresponds to the above two styles--

2. ID Selector

By selecting an element with an ID name, the ID name of the element cannot be duplicated, so a style setting item can only correspond to the previous element of the page, cannot be reused, and the ID name is generally used for the program, so it is not recommended to use the ID as a selector.
Example:

#box {color:red} <p id= "box" >....</p>   <!--corresponds to one of the above styles, other elements do not allow this style--

3. Class Selector

By selecting elements through the class name, a class can be applied to multiple elements, multiple classes can be used on an element, flexible and reusable, and is the most applied selector in CSS.
Example:

. red{color:red}.big{font-size:20px}.mt10{margin-top:10px} <div class= "Red" >....</div>

4. Level Selector

The main application is to select child elements under the parent element, or sub-elements below the child element, which can be used in conjunction with the LABEL element, reduce the naming, and also prevent naming collisions through hierarchies.
Example:

. Box Span{color:red}.box. Red{color:pink}.red{color:red}<div class= "box" >    <span>....</span>    <a href= "#" class= "Red" >....</a></div>

5. Group Selector

Multiple selectors, you can use the group selector if you have the same styling settings.
Example:

. Box1,.box2,.box3{width:100px;height:100px}.box1{background:red}.box2{background:pink}.box2{background:gold} <div class= "Box1" >....</div><div class= "Box2" >....</div><div class= "Box3" >....</ Div>
6. Pseudo-class and pseudo-element selectors

Common pseudo-class selectors have hover that represent the state of the mouse hovering over an element, and pseudo-element selectors have before and after, which can be used to insert content into an element by style.

. Box1:hover{color:red}.box2:before{content: ' text at the beginning ';}. Box3:after{content: ' Line end text ';} <div class= "Box1" >....</div><div class= "Box2" >....</div><div class= "Box3" >....</ Div>
CSS Box model

Box Model explanation
Elements appear in a page as a block, like a box, a CSS box model uses real-world boxes to make metaphors that help us set the style of the elements. The box model is as follows:


The elements are called boxes, and the corresponding styles are: The box's border (border), the space between the contents of the box and the border (padding), the space between the box and the box (margin).

Set border
Setting a border on one side, such as the top border, can be set as follows:

border-top-color:red;    /* Set the top border color to red */  border-top-width:10px;   /* Set the top border thickness to 10px */   border-top-style:solid;  /* Set the line of the top border to solid, commonly used: solid (solid)    dashed (dashed line)  dotted (dotted line); */
The above three sentences can be simply written in one sentence:

border-top:10px solid red;
Set the other three sides of the same method as above, the above ' top ' replaced with ' left ' is set to the right side, and the bottom is set to the side.

Four sides if set, you can combine the settings of four edges into one sentence:

border:10px solid red;
Set Inner spacing padding

Set the inner spacing of the four sides of the box, which can be set as follows:

padding-top:20px;     /* Set top inner pitch 20px */padding-left:30px;     /* Set left inner spacing 30px */padding-right:40px;    /* Set the right inner spacing 40px */padding-bottom:50px;   /* Set the bottom inner spacing 50px */
The above settings can be abbreviated as follows:

padding:20px 40px 50px 30px; /* Four values are set in a clockwise direction, respectively, with the padding values in the upper right and left  four directions. */
Padding can also be followed by 3 values, 2 values, and a value, which are set separately as follows:

padding:20px 40px 50px; /* Set the top padding to 20px, the left and right padding is 40px, the bottom padding is 50px */padding:20px 40px; /* Set the upper and lower padding to 20px, the left and right padding is 40px*/padding:20px; /* Set four-sided padding to 20px */
Set the outer spacing margin

The margin is set up in the same way as the padding, and the ' padding ' in the above setting is replaced with ' margin ', which is the margin setting method.

Size of Box model

Make the page according to the following code:

<! DOCTYPE html>
The page looks as follows:


The above page concludes that the width and height of the box are set by the width and height of the box content, not the width and height of the box itself, and the true size of the box is calculated as follows:


   

 
    
 
     
Box width = width + padding around + border
 
     
Box height = height + padding up/down + border
 
    

   
Study Questions
1. In the layout, if I want to increase the distance between the content and the border, and do not want to change the size of the box display, what should I do?

Classroom Exercises
Please make a caption as shown in the diagram:


Margin related tips
1, the setting element is centered horizontally: margin:x auto;
2, margin negative to let the element displacement and border merge

Margin Merge

Margin merging means that when two vertical margins meet, they form an outer margin. The height of the merged margin is equal to the greater of the two of the height in which the merged margins occur. Here's how to fix it:

1. Use this feature
2, set aside the margin, general settings margin-top
3, the element floating or positioning

Margin-top collapse

When two boxes are nested, the internal box margin-top will be added to the outside box, resulting in the internal box margin-top setup failure, the workaround is as follows:

1, external box set a border
2. External box setting Overflow:hidden
3. Use pseudo-element classes:

. clearfix:before{    content: ';    display:table;}
CSS element Overflow

When the dimensions of a child element exceed the dimensions of the parent element, you need to set how the parent element displays the overflow child elements, set by the overflow property.

Settings for overflow:
1, visible default value. The content is not trimmed and is rendered outside the element box.
2, hidden content will be trimmed, and the rest of the content is not visible, this property also clear floating, clear margin-top collapse function.
3. Scroll content will be trimmed, but the browser will display a scroll bar to view the rest of the content.
4, Auto If the content is trimmed, the browser displays a scroll bar to view the rest of the content.
5. Inherit specifies that the value of the overflow property should be inherited from the parent element.

Block elements, inline elements, inline block elements

Element is the label, the layout commonly used in three kinds of tags, block elements, inline elements, inline block elements, understand the characteristics of these three elements, to be skilled in page layout.

Block element
Block elements, which can also be called row elements, are commonly used in layouts such as: P, p, UL, Li, H1~h6, DL, DT, DD, and so on are block elements that behave in the layout:


   

 
    
 
     
Support for all styles
 
     
If no width is set, the default width is parent width 100%
 
     
The box occupies one line, even if the width is set
 
    

   
Inline elements
Inline elements, also known as inline elements, are commonly used in layouts such as: A, span, EM, B, strong, I, and so on are inline elements that behave in the layout:


   

 
    
 
     
Support for partial styles (width, height, margin up/down, padding up/down)
 
     
Wide height determined by content
 
     
box and in a row
 
     
The code wraps and the spacing between the boxes is generated.
 
     
The child element is an inline element, and the parent element can use the Text-align property to set the child element horizontal alignment and to set the vertical alignment with the Line-height property value
 
    

   
Methods for solving the gaps in inline elements
1. Remove line breaks between inline elements
2, the parent of the inline element is set to Font-size to 0, and the inline element itself is set Font-size

Inline block elements
Inline block elements, also called inline block elements, are new element types, existing elements are not attributed to this class, and the IMG and input elements behave like this element, but are also categorized as inline elements, and we can use the display property to convert block elements or inline elements into such elements. The behavior they perform in the layout:


   

 
    
 
     
Support All Styles
 
     
If the width height is not set, the width height is determined by the content
 
     
box and in a row
 
     
The code wraps, the box creates spacing.
 
     
Child elements are inline block elements, and parent elements can use the Text-align property to set child element horizontal alignment and to set child element vertical alignment with the Line-height property value
 
    

   
These three elements can be transformed by the display property, but in actual development, the block element is used more, so we often convert the inline elements into block elements, a small amount into an inline block, and to use inline elements, directly using inline elements, instead of the block elements transformed.

Display Properties
The display property is used to set the type of element and the hidden, commonly used properties are:
1. The none element is hidden and does not occupy a position
2. Block elements are displayed as blocks
3. Inline element Display
4. The Inline-block element is displayed within the block element

Please make the menu shown in the diagram:


Floating

Document Flow
Document flow, refers to the box in accordance with the HTML tags written in order from top to bottom, from left to right, block elements occupy a row, the elements of the row within a row from left to right, first written first arranged, then written in the following, each box occupies its own position.

Floating characteristics

1, floating elements have left floating (float:left) and right floating (float:right) two

2, floating elements will float to the left or right, touching the parent element boundaries, floating elements, non-floating elements to stop

3, adjacent floating block elements can and in one row, beyond the parent width of the line wrapping

4. Float allows inline elements or block elements to be automatically converted into inline block elements

5, floating elements are not floating elements will occupy the position of the floating elements, no floating elements within the text will avoid floating elements, forming the effect of text Ratu

6. Elements floating within the parent element cannot open the parent element and need to clear the floating

7. There is no merge of vertical margin between floating elements

Clear floating


   

 
    
 
     
Add attribute Overflow:hidden on parent
 
     
Add an empty p after the last child element, giving it the style attribute Clear:both (not recommended)
 
     
Use a mature floating style class, Clearfix
 
    

   
. clearfix:after,.clearfix:before{content: "";d isplay:table;}. clearfix:after{Clear:both;}. Clearfix{zoom:1;} To clear floating usage:. con2{. Overflow:hidden} or <div class= "Con2 clearfix" >
Positioning

About positioning
We can use CSS's position property to set the element's positioning type, and the postion setting is as follows:

Positioning element Properties
Block elements and inline elements that are absolutely positioned and anchored are automatically converted into inline block elements

Position element level
The anchor element is floating on top of the normal document flow, and you can use the Z-index property to set the level of the element

Typical positioning layouts
1, fixed at the top of the menu
2, horizontal vertical center of the bullet frame
3, fixed side of the toolbar
4, fixed at the bottom of the button


   

 
    
 
     
 
      
Relative generates relative positioning elements where the position of the document stream occupied by the element is unchanged, and the element itself is offset from the position of the document flow
 
      
Absolute generates an absolutely positioned element, which is detached from the document stream and does not occupy the position of the document stream, and can be understood as floating above the document stream, positioned relative to the previous parent element with relative or absolute or fixed positioning, and, if not found, positioned relative to the BODY element.
 
      
Fixed-build anchor element, the element out of the document flow, does not occupy the position of the document flow, can be understood as floating above the document flow, relative to the browser window to locate.
 
      
Static default value, no positioning, element appears in normal document flow, equivalent to canceling positioning property or not setting positioning property
 
      
Inherit inherit the value of the Position property from the parent element
 
     
 
    

   
Background property

Attribute interpretation
Background attribute is a more and more important property in CSS, it is responsible for setting the background picture and background color of the box, background is a composite property, it can be decomposed into the following several settings:


   

 
    
 
     
Background-color Setting the background color
 
     
Background-image setting the background image address
 
     
Background-repeat Setting the background picture how to repeat tiles
 
     
Background-position setting the position of the background picture
 
     
Background-attachment set whether the background picture is fixed or scrolled with the page scroll bar
 
    

   
In practice, we can use the Background property to put all of the above settings together, and it is recommended to do so with higher performance and better compatibility, such as: "Background: #00FF00 URL (bgimage.gif) no-repeat Left center fixed, "#00ff00" is set background-color; "url (bgimage.gif)" is set background-image; "No-repeat" is set background-repeat; "Left center" is set background-position; "Fixed" is set background-attachment, each setting is separated by a space, Some settings do not write, and it is possible to use the default values.

Example:
The following examples use the following image as a background image:


1, "Background:url (bg.jpg)", the default setting of a picture address, the picture will start from the top left corner of the box to fill the box.


2, "Background:cyan url (bg.jpg) repeat-x", Tile the box horizontally, the other parts of the box show the background color "cyan".


3, "Background:cyan url (bg.jpg) repeat-y", Vertical tile box, the other parts of the box display background color "cyan".


4, "Background:cyan URL (bg.jpg) no-repeat", the background is not repeated, the background and box in the upper left corner, the other parts of the box display background color "cyan".


5, "Background:cyan url (bg.jpg) no-repeat left center", the background is not repeated, the background and the box is aligned to the right, the other parts of the box display background color "cyan".


6, "Background:cyan URL (bg.jpg) No-repeat Right Center", the background is not repeated, the background and the box to align, that is, the right side of the background picture to align the box to the right, the other parts of the box to show the background color "cyan".


Related code:

<! DOCTYPE html>
Example Description:
The background image used in the code can be saved directly on the background image on the page, named: "Bg.jpg", and is in the same directory as the Web page file.

About the background image of the background-position settings, set the background image horizontal position has "left", "center", "right", set the vertical position of the background picture has "top", "center", "Bottom", A combination of horizontal and vertical attribute values 22 allows you to set the background image to the center of the Four corners of the box or four sides or the center of the box. You can also set specific pixel values to pinpoint the background image to a location in the box, especially if the background image is larger than the box size, we can use numerical positioning to intercept a piece of the big picture as the background of the box.

For example, we want to use the bottom box with the picture on the right as the background, and let the background show the flower near the bottom of the picture:


Use the middle picture above as the background of the box on the left that is smaller than its size, if you do not set the Background-position, the upper left corner of the default background image will be aligned with the upper left corner of the box, if set, you can position the background image with two numeric values, and the implementation effect on the right of the top is set to: " Background:url (location_bg.jpg) -110px-150px ", the first value indicates that the background image is offset 110px to the left, negative to left, positive to right, The second value indicates that the background image is offset upward from the upper-left corner of 150px, negative values upward, and positive values downward.

Implementation principle:


Corresponding Code:

<! DOCTYPE html>
Feature Layout Example Workshop

Through the consolidation and deepening of the preceding knowledge, we can use the knowledge we have learned to produce some typical layouts encountered in actual development, so as to achieve the purpose of comprehensive application knowledge.

1. Feature layout: page turn (Required Knowledge: box model, inline element

2. Feature layout: Navigation bar 01 (Required Knowledge points: Box model, inline element layout

3, Feature layout: Navigation bar 02 (Required Knowledge Points: Box model, floating, positioning, font alignment)


4. Feature layout: Picture list (Required knowledge: box model, floating)

5. Feature Layout: News list (Required knowledge: box model, floating)