Python CSS Basic operations

1. Overview

CSS is an abbreviation for the English cascading style sheets, called Cascading style sheets, to beautify the page.

There are three ways to exist: element inline, page embedding, and external introduction, comparing the pros and cons of three different ways.

Syntax: style = ' key1:value1;key2:value2; '

• In-line:

Use style= ' xx:xxx in the label; ' Added separately to a label, style adds other attributes that need to be separated by semicolons;

<div style= "background-color:darkgrey;height:100px;width:100px" > I am div</div>

　　

• Embedded:

Embed < style type= "Text/css" > </style > blocks in the page

　　

 
 

  
  
 
   
LINK Type:
 
  
 
 
Introduce a. css file into an HTML file, create a. css file, put the CSS file in the link tag
　　

 
  

  
   
 
    
Import Type:
 
   
 
  
Introduce a standalone. css file into an HTML file, import using CSS rules to introduce external CSS files,<style> tags are also written in the 
　　Note: Import will parse all the page information first, will not render the page, wait for all information to load and then render the page, if the load is slow will appear no rendering page, resulting in a bad user experience, we recommend the use of embedded and linked
2. CSS selector2.1 Base Selector2.1.1 Universal Element Selector
Universal element selector to match any element
*{color:darkgrey;}
　　
2.1.2 Tag Selector
Match all elements that use XX tags;
For example, you need to select all the elements of a div to set the style
Div{color:grey;background-color:antiquewhite;}
　　
2.1.3 Class Selector
The. Info or E.info:class property selector matches all elements of the class attribute that contain info, and the class attribute can be repeated, i.e. multiple elements of the same class attribute;
. Cs1{color:grey;background-color:antiquewhite;} <div class= "CS1" > I am div1 label </div><div class= "CS1" > I am div2 label </div><p class= "CS1" > I am P tag </p> <!--above three tags will become. CS1 Style--
　
2.1.4 ID Selector
#info或E the #info:id property selector to match all elements of the id attribute equal to info
　
#cs1 {color:grey;background-color:antiquewhite;} <div id= "CS1" > I am div1 label </div><div class= "CS1" > I am div2 tag </div> <!--above label, only ID=CS1 label will become # CS1 Style--
　
2.2 Combo Selector2.2.1 Multi-element selector
E,f: A multi-element selector that matches all e-tag elements or F-tag elements, separated by commas between E and F
Div,p{color:grey;background-color:antiquewhite;} <div id= "CS1" > I am div1 label </div><p class= "CS1" > I am P tag </p><span> I am span</span> <! --The above tag, except for the span tag, that is, the div and P tags, will be set style--
　　
2.2.2 Descendant element selector
E F: Descendant element selector, matching all F tag elements belonging to the descendants of the e tag element, i.e. all descendants of all similar forms, children and grandchildren, E and F separated by a space;
　
Div P{color:grey;background-color:antiquewhite;} <div id= "CS1" > <p class= "CS1" > I am P1 tag </p> <div class= "cs3" > <p class= "CS1" > I am P2 label </p&　　　　Gt <div class= "CS2" > <p id= "CS1" > I am P3 tag </p> </div> </div></div> <!--above tags, p1, P2, P3 will change to a set style--><!--extension: Can be used in conjunction with the base selector, such as Div #cs1, Div. CS1, etc.---
　　
2.2.3 child element Selector
e > F: child element selector, matching all e elements of the child element F, matching only to child elements, child elements of sub-elements cannot match;
<style> #outer >.c1{color:aqua;} </style><div id= "outer" >    <p class= "C1" >p1.....</p>    <div class= "C2" >        <p class= "C1" >p2....</p>    </div></div> <!--above tags, p1 will become the style of the settings, P2 will not change, that is, the son's generation will change, The offspring of your son will not change.
　　
2.2.4 Adjacent element selector
E + F: adjacent to the element selector, matching all of the sibling elements immediately following the E element F, that is, matching only the next F element next to each other, such as not adjacent also does not work;
<style> #outer +.c1{color:aqua;} </style><p class= "C1" >p1....</p><div id= "outer" ></div><p class= "C1" >p2 ..... </p><div class= "C1" >div1...</div> <!--above tag, p1 will not change style, P2 will be next to class=c1 element, so P2 changes style, Div1 's class attribute also satisfies but is not next to the id=outer element, so it doesn't work--
　
2.3 Property Selector
Filter matching based on attributes, only the first input tag matches the corresponding style
　　
3. Common Properties3.1 Color Properties
Color
① English word form, for example: Red,yellow
② encoded form, for example: #cc3399, such as double shorthand #c39
③ tone color Transparency settings, for example: RGB (255,255,255,0.5), red, green, blue three-color transparency settings, last value set transparency
3.2 Font Properties
Font-size:20px/50%/larger set the font size;
font-family: ' Lucida Bright ' text font series;
font-weight:lighter/bold/border/the weight of the font;
The font style of the font-style:normal/oblique/italic text;
3.3 Background Properties
Font-family:verdana, Arial, Helvetica, Sans-serif; Background-color:rgb (238, 238, 238); " >background-image: Background image;
Background-repeat: Tiling way, no-repeat uneven, repeat tiled full;
Background-size: Image size setting, auto;
Background-position:center Center, left center center, top,bottom,right similar;
　
<! DOCTYPE html>
　　
3.4 Text Properties
Text-align:center Text Center
Line-height:xxpx; line height, for text processing
Width:xxpx; wide%50
Height:xxpx; High%50
Text-indent:xxpx first line indent, based on parent element
LETTER-SPACING:XXPX; distance between letters and letters
Word-spacing:xxpx; distance between words
Direction:rt1
Text-transform:capitalize; capitalize the first letter of a word
Min-height: Set Default minimum height
Height:auto! Important is based on this style
VERTICAL-ALIGN:XXPX; Vertical Center
opacity:0.3 Transparency
3.5 CSS style border
Border-style:solid; border Style
border-color:red; border color
border-width:1px; border width
border-radius:20% the border into rounded corners

 
      

  
       
 
        
 
         
Border
 
         
Sets all the border properties in a declaration.
 
        
 
        
 
         
Border-bottom
 
         
Sets all the bottom border properties in a declaration.
 
        
 
        
 
         
Border-bottom-color
 
         
Sets the color of the bottom border.
 
        
 
        
 
         
Border-bottom-style
 
         
Sets the style of the bottom border.
 
        
 
        
 
         
Border-bottom-width
 
         
Sets the width of the bottom border.
 
        
 
        
 
         
Border-color
 
         
Sets the color of the four border.
 
        
 
        
 
         
Border-left
 
         
Sets all the left border properties in a declaration.
 
        
 
        
 
         
Border-left-color
 
         
Sets the color of the left border.
 
        
 
        
 
         
Border-left-style
 
         
Sets the style of the left border.
 
        
 
        
 
         
Border-left-width
 
         
Sets the width of the left border.
 
        
 
        
 
         
Border-right
 
         
Set all the right border properties in a declaration.
 
        
 
        
 
         
Border-right-color
 
         
Sets the color of the right border.
 
        
 
        
 
         
Border-right-style
 
         
Sets the style of the right border.
 
        
 
        
 
         
Border-right-width
 
         
Sets the width of the right border.
 
        
 
        
 
         
Border-style
 
         
Sets the style of the four border.
 
        
 
        
 
         
Border-top
 
         
Sets all the top border properties in a declaration.
 
        
 
        
 
         
Border-top-color
 
         
Sets the color of the top border.
 
        
 
        
 
         
Border-top-style
 
         
Sets the style of the top border.
 
        
 
        
 
         
Border-top-width
 
         
Sets the width of the top border.
 
        
 
        
 
         
Border-width
 
         
Sets the width of the four-bar border.
 
        
 
        
 
         
Outline
 
         
Set all the profile properties in a declaration.
 
        
 
        
 
         
Outline-color
 
         
Sets the color of the outline.
 
        
 
        
 
         
Outline-style
 
         
Sets the style of the outline.
 
        
 
        
 
         
Outline-width
 
         
Sets the width of the outline.
 
        
 
        
 
         
Border-bottom-left-radius
 
         
Defines the shape in the lower-left corner of the border.
 
        
 
        
 
         
Border-bottom-right-radius
 
         
Defines the shape in the lower-right corner of the border.
 
        
 
        
 
         
Border-image
 
         
Shorthand property, set all border-image-* properties.
 
        
 
        
 
         
Border-image-outset
 
         
Specifies the amount of border image area beyond the border.
 
        
 
        
 
         
Border-image-repeat
 
         
Whether the image border should be tiled (repeated), covered (rounded), or stretched (stretched).
 
        
 
        
 
         
Border-image-slice
 
         
Specifies the inward offset of the image border.
 
        
 
        
 
         
Border-image-source
 
         
Specifies a picture to use as a border.
 
        
 
        
 
         
Border-image-width
 
         
Specifies the width of the picture border.
 
        
 
        
 
         
Border-radius
 
         
Shorthand property, set all four Border-*-radius properties.
 
        
 
        
 
         
Border-top-left-radius
 
         
Defines the shape in the upper-left corner of the border.
 
        
 
        
 
         
Border-top-right-radius
 
         
Defines the shape in the lower-right corner of the border.
 
        
 
        
 
         
Box-decoration-break
 
         
 
        
 
        
 
         
Box-shadow
 
         
Add one or more shadows to the box.
 
        
 
       
 
      
3.6 CSS Style floating
normal flow of documents: the flow of elements (labels) that are distributed from top to bottom and left to right in the layout;
out of document flow: takes an element out of the document stream, overwrites it, and the other element is re-laid out in the document flow without the element;
Float Floating Label property (not completely detached):
If a DIV element A is floating, if the previous element of a element is also floating, then a element will follow the previous element (if the two elements are not placed in a row, the a element will be squeezed to the next line), and if the previous element of a element is an element in the standard flow, the relative vertical position of a will not change. This means that the top of a is always aligned with the bottom of the previous element.
Note: The original float is designed to complete the text wrapping effect, so the text will not be blocked, this is float the characteristics, namely float is a non-exhaustive way to get out of the document stream. 
float :  Left ,  Right , both
Clear float: clear:none | Left | Right | Both
None: Default value. Allowed to have floating objects on both sides
Left: does not allow floating objects
Right: Do not allow floating objects
Both: Floating objects are not allowed
<style>    #div4 {        border:solid 1px lavender;        Background-color:rebeccapurple;        height:100px;    }    #div1 {        background-color:darkolivegreen;        height:100px;        width:980px;        Margin:auto;    }    #div2 {        border-left:solid 1px lavender;        height:100px;        width:100px;        Background-color:darkgray;        Float:left;    }    #div3 {        border-left:solid 1px lavender;        height:100px;        width:100px;        Background-color:darkgray;        Float:left;    }    #clear {        clear:both;    } </style><div id= "Div4" >    <div id= "Div1" >        <div id= "Div2" >div2</div>        <div id= "Div3" >div3</div>    </div>    <div id= "Clear" ></div></div>
　　
Note: Div2 and Div3 float with float, if you want to display the DIV4 style, add a clear label to prop up the shelf, clear the float
Clear floating the second method, overflow:hidden the overflow information hidden
Overflow:auto; not only hide and scroll bars
Python CSS Basic operations