CSS Basic knowledge

* css, English Cascading Style Sheets, Chinese name : Cascading style sheets . Cascading style sheets .
* css It's an expressive language , Is a supplement to web language .
* css Style design for web pages , Include fonts , colour , Location, etc .
* css Used 4 Medium mode : Import external style file , Import external style file , Use internal style definitions , Use inline style definitions .
Import external style file :
<link type="text/css" rel="stylesheet" href="css Style file's url"/>

Import external style file :
<style type="text/css">
@import "css Style file's url";

Use internal style definitions :
<style type="text/css">
div {
background-color: #ffffff;
width: 300px;
height: 300px;

Use inline style definitions :
<div style="background-color: #ffffff; width: 100px; height: 100px;">

css Two characteristics of : Cascading , inherit

Cascading : Priority for cascading styles to take effect :

inline style -> Interior style -> External style -> Browser default .

inherit , Namely css Attributes can be passed down from the parent to the child .

css Selector for

* element selector , Is the simplest selector .
* Wildcard selector , use "*" Express , Representation is valid for any element .
* attribute selectors
format :
E[attribute]{property1:value1; property2:value2;...}

grammar Explain
E[attribute] Used to pick an element with the specified attribute
E[attribute=value] Used to pick elements with specified attributes and values
E[attribute~=value] Select the element whose attribute value contains the specified value , The value must be the whole word , Can have spaces before and after
E[attribute\|=value] Used to pick an element with an attribute value that starts with the specified value , The value must be the whole word or a hyphen after it “-”
descendent selector

Derived selectors define styles based on the context of an element's location

Derived selector sub 3 species : Descendant Selectors , Child Selector , Adjacent Sibling Selectors

The descendant selector is all elements of the descendant of an element .

The child element selector is qualified relative to the first child element of the parent element .

Adjacent Sibling Selectors , The element targeted is a sibling element , Have the same parent element , And the two elements are adjacent .

id selector , With specific id Valued HTML Element specifying style .

Class selector , To specify class Of HTML Element specifying style .

Pseudo class selector

Pseudo class selector : Pseudo class selector and pseudo element selector

Pseudo class with colon (:) Start , No space between element selector and colon , Pseudo class names cannot have spaces between them .

css The commonly used pseudo classes in are shown in the following table :

Pseudo class name Explain
:active Add a style to the active element
:focus Add styles to elements with input focus
:hover Add a style to the hover over element
:link Add styles to links that are not accessed
:visited Add styles to visited links
:first-child Add styles to elements , And this element is the first child of its parent element
:lang Assign to lang Add style to element of attribute
Pseudo element selector

css The commonly used pseudo elements in are shown in the following table :

Pseudo element name Explain
:first-letter Add a style to the first letter of the text
:first-line Add a style to the first line of text
:after Add content after element
:before Add content before element
css background

css The background properties are as follows :

attribute Explain
background-color Define background color
background-image Define background picture
background-repeat Define whether and how background images are repeated
background-attachment Define whether the background image follows the content
background-position Define the horizontal and vertical position of the background image
background You can define various background properties with one style

* background-color Used to set the background color , The initial value is transparent transparent color .
* Color value 3 Such as : Color name , Hex color ,rgb function .
* background-image Background picture for setting elements , The default value is none.
* background-repeat Control image tiling .
background-repeat The default value is repeat, I.e. image along x Axis and y Axis tiling , You can also specify the x Axis tiling rpeat-x, Along y Axis tiling repeat-y
, Or not tiled no-repeat, Inherit the parent element this attribute setting inherit.

* background-attachment Used to set whether the background image is fixed or scrolls with the rest of the page . The default value is :scroll
, Indicates that you can scroll with the rest of the page . Set up fixed, Indicates when the rest of the page scrolls , Background picture does not scroll , Set up inherit, Inherit parent element .
* background-position Used to set the position of the background image dots .
background You can background-color,background-position,background-attachment,
background-repeat,background-image Set all .

css Font properties

css Common font property sheet :

attribute Explain
font-family Define font family for text
font-size Define font size for text
font-variant Defines whether to display text in small uppercase fonts
font-style Defines whether the font of the text is italicized
font-weight Define the thickness of the font
font You can define various font properties in one style
* font-family Font used to set elements , The attribute value of this element can generally set multiple fonts .
* font-size Used to set font size .
* font-style Used to set whether the font is italicized , The default value is normal, When set to italic, Display as a italicized style , When set to oblique
, Show as a sloped style .
* font-variant Used to set the font to use lowercase font , Default is normal, Once set to small-caps, Change all lowercase letters to uppercase .
* font-weight Used to set font weight ,normal Value equal to 400,bold The value of is equal to 700.
* font, Can be set font-family,font-size,font-style,font-variant,font-weight.
css Text property sheet :

attribute Explain
color text color
direction Text direction or writing direction
letter-spacing Space between characters
line-height Line height of text
text-align Horizontal alignment property of text , Set the level of text in an element , Value has left,right,center,inherit.
text-decoration Add embellishment to text , Value has
underline Underline for add ,overline Add top line ,line-through Add strikethrough ,blink Add flicker effect ,none How to decorate ,inherit.
text-indent Define how the first line of text is indented , The default value is 0
text-shadow Shadow text
text-transform Toggle case of text
white-space Set how to handle whitespace within an element
word-spacing Define the distance between words
css Dimension property sheet :

attribute Explain
width Set the width of the element
min-width Set the minimum width of an element
max-width Set the maximum width of an element
height Set the height of the element
min-height Set the minimum height of the element
max-height Set the maximum height of an element
css List property sheet :

attribute Explain
list-style-image Set list item marker style to image ,none/inherit/url
list-style-position Set the location of list item Tags ,inside/outside/inherit
list-style-type Set the type of list item tag
list-style You can define various list properties in one style

value Explain
disc disc
circle Hollow circle
square block
decimal number
low-roman Small Roman numeral
upper-roman Capital Roman numeral
low-alpha Lowercase letters
upper-alpha capital
none Unmarked
inherit Inherit this setting from the parent element
css Table property sheet :

attribute Explain
border-collapse Set whether to merge table borders
border-spacing Set the distance between adjacent cell borders
caption-side Set the position of the table title
empty-cells Sets whether borders and backgrounds on empty cells in a table are displayed
table-layout Set the setting method for table cell column width
Box model

* css Box model , Include element content content, padding padding, Frame border, External distance margin.
css Inside margin attribute , The inner margin of an element is between the border and the content .

css Properties of inner margin :

attribute Explain
padding-top Top inner margin of element
padding-right Right inner margin of element
padding-bottom Bottom inner margin of element
padding-left Left inner margin of element
padding Define all inner margin properties with one declaration
The setting sequence is top right bottom left .
padding: 10px 10px 10px 10px;

css Properties of outer margin :

attribute Explain
margin-top Defines the top outer margin of an element
margin-right Defines the right outer margin of an element
margin-bottom Defines the bottom outer margin of an element
margin-left Defines the left outer margin of an element
margin Define all outer margin properties with one declaration
css Border properties :

attribute Explain
border-top-style Style properties for top border
border-right-style Style properties for the right border
border-bottom-style Style properties for bottom border
border-left-style Style properties for left border
border-style Set up 4 Style properties of the border
border-top-width Set the width property of the top border
border-right-width Set the width property of the right border
border-bottom-width Set the width property of the bottom border
border-left-width Set the width property of the bottom border
border-width Set up 4 Width property of the border
border-top-color Set the color property of the top border
border-right-color Set the color property of the right border
border-bottom-color Set the color properties of the bottom border
border-left-color Set the color property of the left border
border-color Set up 4 Color properties of the border
border-top Define properties of all top borders with one declaration
border-right Define all right border properties with one declaration
border-bottom Define all properties of the bottom border with one declaration
border-left Define the properties of all left borders with one declaration
border Define the properties of all borders with one declaration
border-width Primary definition 4 Width of the border
border-color Primary definition 4 Border color
Style of border

* none, Borderless effect
* hidden, And none identical
* dotted, Dotted line border effect
* dashed, Dotted border effect
* double, Double line border effect
* solid, Solid border effect
* groove,3D Groove border effect
* ridge,3D Convex groove border effect
css A profile is a line drawn around an element , Around the edge of the border , Play the role of highlighting elements .

attribute Explain
outline-style Defining style properties for a profile
outline-color Define the color properties of the profile
outline-width Define the width attribute of the profile
outline All profile properties defined in the same declaration
Layout properties

* Layout properties are the rules for the arrangement and display of elements in a document
* Layout 3 species : Normal document flow , Float , Location
css Properties involved in floating

attribute Explain
float Whether the setting box needs to float and the floating direction
clear Set which side of the element does not allow other floating elements
clip Crop absolute positioning elements , The element must be absolute , Top right bottom left principle
overflow How to handle content overflow element box , value :visible,auto,hidden,scroll
display Set how elements are displayed , value none,block,inline,inline-block,inherit
visibility Define whether the element is visible ,visibility Set as hidden , The space occupied by the element remains , but display:none Do not reserve occupied space , value :
css Properties for positioning

attribute Explain
position Location type of element , value static,absolute Absolutely ,relative Relative
top Element top outer margin
right Element right outer margin
bottom Element bottom outer margin
left Left outer margin of element
z-index Stacking order of elements
z-index Used to set the positioning sequence of the target object , The larger the value , Higher level . This property is only available in position:absolute Effective at .

©2019-2020 Toolsou All rights reserved,
Image format conversion Count the number of letters (java Language implementation ) Using orthogonal table method to design test cases One is called “ Asking for the train ” A small village Finally got the train VaR - Value at risk - Monte Carlo method - Python How to build data security system ?python: Convert a file to a binary file (binary)vue use vue-clipboard2 Realize the function of copy link 13. solve git Merge conflict uniapp Summary of page value transfer