Python full stack development 13, CSS

I. Introduction of CSS

CSS is the abbreviation of cascading style sheets, used to design the layout of the Web page style, and size to adapt to different screens, so that the style of the Web page and page data separation,

Second, import CSS

There are 4 ways of importing CSS:

1. In-line
Inline is a CSS style that is set in the Style property of the tag. This approach does not reflect the advantages of CSS, is not recommended to use.

2. Embedded
Embedded is a set of CSS styles that are written in the

<style type= "Text/css" >

... Write CSS style here

</style>

3. 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

<style type= "Text/css" >

@import "Mystyle.css"; Note the path to the. css file here

</style>

4. Link-type
Also introduce a. css file into an HTML file <link href= "mystyle.css" rel= "stylesheet" type= "Text/css"/>

Attention:

The import will load the entire Web page after loading the CSS file, so this leads to a problem, if the page is larger then appear in the first page without style, flashing a bit, then appear the page style. This is a flaw inherent in the import. The use of the link is different from the import is that it will be loaded with the Web page file body before loading CSS files, so the displayed page from the beginning is a style of effect, it does not appear as imported as the first page without style, and then display the style of the page, which is the advantage of linking. In addition, the style level within the row is highest

Third, CSS Selector

1. Tag Selector p {color:green;}
2. ID selector #info {background: #ff0;}
3. Class Property Selector. info {background: #ff0;}
4. * Universal element Selector matches all tags

The above 4 types are the basis of the selector, are to choose a single label, if you want to select multiple elements, you should use the combination selector below to see the common combination selector

1. Multi-element selector that matches multiple elements, separated by commas
2. descendant element selectors, such as E F, match all F elements that are descendants of e elements, separated by spaces between E and F
3. The child element selector, such as e>f, matches all elements of the E element F
4. Adjacent element selector, e+f matches all sibling elements immediately following E element F

In addition to the property selector, here's a look at what property selectors

E[att] matches all e elements that have the ATT attribute, regardless of its value. Note: E can be omitted here, such as "[cheacked]". to the same. ) P[title] {color: #f00;}

E[att=val] match all att attributes equal to "Val" e element div[class= "error"] {color: #f00;}

E[att~=val] matches all ATT attributes with multiple space-delimited values, one with a value equal to "Val" for the e element td[class~= "name"] {color: #f00;}

E[att|=val] matches all ATT attributes with multiple hyphen delimited (hyphen-separated) values, one of the e elements with a value beginning with "Val", primarily for the lang attribute,

such as "en", "en-us", "EN-GB" and so on p[lang|=en] {color: #f00;}

E[attr^=val] matches the attribute value to specify the value at the beginning of each element div[class^= "test"]{background: #ffff00;}

E[attr$=val] matches the attribute value to specify each element at the end of the value div[class$= "test"]{background: #ffff00;}

E[attr*=val] matches each element of the attribute value that contains the specified value div[class*= "Test"]{background: #ffff00;}

p:before Insert content before the contents of each <p> element p:before{content:"H Ello "; color:red}

P:after Insert content before each <p> element content p:after{contents: "Hello"; color:red}

　　　　 . A p{descendant selector, where all P tags are selected to be background-color:blue;        font-size:40px; }. a>p {descendant selector, <p>hello 3</p> selected here background-color:b            Lue        font-size:40px;            }. b+p {brother Selector, select the label of the sibling Background-color:blue;        font-size:40px;        } [class] {attribute selector, Clas properties are selected Background-color:blue;        } [class= ' B '] {The choice of class = ' B ' is background-color:blue;        } [Class |= ' B '] {matches the class attribute with a hyphen-beginning with b background-color:blue;        } [Class ^= ' B '] {matches the class attribute background-color:blue beginning with B;        } [Class ~= ' C '] {matches a value with multiple spaces separated, one with a value equal to ' C ' of class attribute background-color:blue;            } p:before {content: ' 666 '; Color Blue }

In addition to the several selectors mentioned above, there is a special pseudo-class selector specifically designed to control the display of links:

A:link (links that have not been contacted) are used to define the general state of the link.

A:hover (the state on which the mouse is placed on the link) for creating visual effects.

A:visited (visited links), used to read articles, can clearly judge the links that have been visited.

A:active (the state when the mouse is pressed on the link), which is used to show the link state when the mouse is pressed.

Note The order of the 4 pseudo-classes in the order LVHA

Iv. Common Properties of CSS

1 Color Properties:

<div style= "Color:blueviolet" >ppppp</div>

<div style= "color: #ffee33" >ppppp</div>

<div style= "Color:rgb (255,0,0)" >ppppp</div>

<div style= "Color:rgba (255,0,0,0.5)" >ppppp</div>

2 Font properties:

Font-size:20px/50%/larger

font-family: ' Lucida Bright '

font-weight:lighter/bold/border/

<H1 style= "Font-style:oblique" > Old boy

3 Background properties:

Background-repeat:no-repeat; (repeat: Tiled full)

Background-position:right Top (20px 20px);(Landscape: Left center right) (portrait: Top Center bottom)

Shorthand: <body style= "background:20px 20px no-repeat #ff4 url (' 1.jpg ')" >

<div style= "width:300px;height:300px;background:20px 20px no-repeat #ff4 url (' 1.jpg ')" >

4 Text properties:

font-size:10px;

Text-align:center; horizontal arrangement

line-height:200px; High-level text line, text height plus text up and down the space of the height of 50%: Based on the percentage of font size

text-indent:150px; First Line indent,

letter-spacing:10px;

word-spacing:20px;

Direction:rtl, right-to-left, default left-to-right

Text-transform:capitalize;

　

5 Border Properties:

Border-style:solid;

Border-color:chartreuse;

border-width:20px;

Shorthand: border:30px rebeccapurple solid;

6 List Properties

ul,ol{

List-style:decimal-leading-zero; 0 The number marks that begin with. (01, 02, 03, etc...) )

List-style:none;

List-style:circle; Mark is a hollow circle

List-style:upper-alpha; Capital

List-style:disc; Default. Mark is a solid circle

}

7 Dispaly Properties

• None
• Block
• Inline

8 Box model

padding: used to control the distance between the content and the border;

margin: Used to control the distance between elements and elements, the most basic use of margin is to control the space around the elements, from a visual angle to achieve the purpose of separation.

The inner margin affects the size of the box, the margin does not affect the size of the box, and you need to set up the exercise: 300px*300px box with 100px*100px box, respectively, through the margin and padding settings to move the small box to the middle of the large box

Note One,

The border is positioned by default in the upper-left corner of the browser window, but does not have a border to the browser's window, because the body itself is also a box (with the outer HTML), and by default, the body is a number of pixels away from the HTML, The specific values are different for each browser, so the box in the body does not close to the border of the browser window.

Note Two,

Margin collapse (boundary collapse or boundary overlap)

The overlap of the margins is only generated between the upper and lower margins of the normal flow document, and this seemingly odd rule has its practical significance. Imagine that when we arrange a block-level element of a series of rules, such as paragraph p, there is no double distance between the blocks because of the margin overlap.

1, Brother Div:

The margin-bottom of the above div and the margin-top of the div below will collapse, which will take the maximum value of the upper and lower margin as the display value.

2. Parent-Child Div:

If there is no border,padding,inline content in the parent Div, the margin of the child div is searched upward until a label is found that includes one of the border,padding,inline content, Then press this div for margin;

<!    DOCTYPE html>Six, float
Floating can be understood as leaving a DIV element out of the standard flow, floating above the standard stream, and not a level of standard flow that overrides the standard flow of things.
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.
The order of the DIV is determined by the order of the div in the HTML code.  near the edge of the page is the front, away from the edge of the page after the end. 
Before the element floats, that is, in the standard flow, it is vertically arranged, and floating can be understood as a horizontal arrangement.
There are floats of course there are clear floats, clear floating with clear, for CSS clear floating (clear), it must be remembered that only affect the use of the cleared elements themselves, can not affect other elements.
<!    DOCTYPE html>Vii. position 1 static
Default value static: No special positioning, objects follow normal document flow. Attributes such as top,right,bottom,left are not applied. Speaking of which, we have to mention a definition--the document flow, the document flow is actually the output order of the document, that is, we usually see from left to right, up and down the output form, in the page each element is sorted and displayed in this order, The float and position two attributes allow the element to be detached from the document stream. The default value is to have the element continue to appear in the document flow without making any changes.
2 fixed
In theory, the element that is set to fixed is placed in a specified coordinate in the browser window, which is fixed in this position, regardless of whether the window is scrolled or not.
Fixed: object is out of normal document flow, use attributes such as top,right,bottom,left to position the window as a reference point, and when scroll bars appear, the object does not scroll. And its cascade is defined by the Z-index property. Note: If an element is set to Position:absolute | Fixed Then the element cannot set float. This is a common-sense point of knowledge because it is two different streams, one is a floating stream and the other is "location flow". But relative can. Because the space it originally occupies still occupies the document stream.
3 Relative
Objects follow normal document flow and do not detach from the document flow, but are offset from the normal document stream by attributes such as Top,right,bottom,left. And its cascade is defined by the Z-index property.
If you set position:relative, you can use Top,bottom,left and right to move this element relative to where the element should appear in the document. [meaning that the element actually still occupies the original position in the document, but is visually moved relative to its original position in the document]
4 Absolute
 Absolute: objects are out of normal document flow and are absolutely positioned using attributes such as Top,right,bottom,left. And its cascade is defined by the Z-index property. When Position:absolute is specified, the element is detached from the document [i.e. it is no longer occupied in the document] and can be positioned exactly as set top,bottom,left and right. If an element is absolutely positioned, the reference is based on whether the nearest element is set relative to its position, and if there is a setting that will be positioned near its nearest element, the HTML will always be found if there is no relative positioning element for its ancestor element. 
<!    DOCTYPE html>Miscellaneous
1, the CSS document from top to bottom execution, the last one to prevail
a {    font-size:10px;} b {    font-size:40px;} <p class = "A B" > DDD </p>
2. There are several special block-level elements that can contain only inline elements and cannot contain block-level elements. As H1,h2,h3,h4,h5,h6,p,dt remember
　
Python full stack development 13, CSS