Styles - SUMMARY of CSS basics - Moment For Technology

Cascading Style Sheets (abbreviated CSS) is a Style sheet language used to describe the presentation of HTML or XML documents, including XML branch languages such as SVG, MathML, AND XHTML. CSS describes how elements should be rendered on screen, paper, audio, and other media.

CSS is one of the core languages of the open Web and is standardized across browsers by W3C specifications. CSS saves a lot of work. Styles can be saved by definition in external.css files and control the layout of multiple pages at once, meaning developers don’t have to go through the hassle of editing layouts on all pages. CSS is divided into different levels: CSS1 is now deprecated, CSS2.1 is recommended, and CSS3 is divided into smaller modules and is being standardized.

— — MDN

Introducing way

1. Inline style — Write in`html`In the label

<div style="width: 100px; height: 100px;"></div>
Copy the code

2. Inline style — Write in`style`Such as:

<style type="text/css">
	div {
		width: 200px;
	}
</style>
Copy the code

3. Link styles — use`link`Labels, such as:

<link type="text/css" rel="stylesheet" href="style.css" />
Copy the code

4. Import styles

@import url("style.css")
Copy the code

If you use the second option, written in the style tag, it is best to introduce it in the head tag.

The selector

Grammar:`Selector {rule}`

Label selector (element selector)

div {
  width: 100px;
}
Copy the code

Wildcard selector

* {
  margin: 0;
  padding: 0;
}
Copy the code

The id selector

#box1 {
  width: 100px;
}
Copy the code

Class selectors

.box {
   width: 200px;
}
Copy the code

Another case:

/* Select the div element */ whose class is box
div.box {
   width: 100px;
}
Copy the code

Include selector – Nested selection by include, as long as it is included

/* Select the element a under the element p under the element class box */
.box p a {
	color: red;
}
Copy the code

Generally, there are no more than four layers of selector, and the relationship between the upper and lower layers is not necessarily parent-child.

Child selectors – direct children of an element

.box > p {
  color: red;
}
Copy the code

The weight of the selector

* Wildcard selector0.5Element selector1Class selectors10The id selector100Inline style1000! A. important B. important C. important D. importantCopy the code

Units of length and color

The length of the unit

px  /* pixels. For normal screens, this is usually a device pixel */
em  /* Multiple of the height of the current font, influenced by the parent element. For example, the current value is 12px; Then 1em = 12px */
rem  /* HTML {font-size: 16px; }, then 1rem = 16px, mostly used for media query, mobile adaptation */
vw  /* The viewport initially contains 1% of the block width, which is simply 100vw = the width of 1 viewport */
vh  /* The viewport initially contains 1% of the block height, which is simply 100vh = 1 viewport height */
Copy the code

Color said

element { color: red }
element { color: #f00 }
element { color: #ff0000 }
element { color: rgb(255.0.0) }
element { color: rgb(100%.0%.0%) }
element { color: hsl(0.100%.50%)}/* 50% translucent */
element { color: rgba(255.0.0.0.5) } 
element { color: hsla(0.100%.50%.0.5)}Copy the code

Font text style

font-familySets the font for the selected element by giving a sequential list of font names or font family names.

The font-family property specifies a list of alternative fonts with a descending priority. Font selection does not stop when the first font in the list installed on the user’s computer is found. Instead, font selection is word-for-word. That is, even if all around a character can be displayed in a font, but the character does not have a suitable graphic in the current font file, it will continue to try fonts lower in the list. (This doesn’t work in Internet Explorer 6 or earlier versions.) When a font is valid only for certain values of the font-variant, font-variant, or font-size attributes, the values of these attributes may also affect the font family selection. – the MDN

/* One font family name and one universal font family name */
font-family: "Gill Sans Extrabold", sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;

/* Global value */
font-family: inherit;
font-family: initial;
font-family: unset;
Copy the code

font-sizeSpecifies the font size. Because the value of this attribute is used to calculate em and EX length units, defining this value may change the size of other elements.

/* 
      
       , absolute size */
      
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;

/* 
      
       , relative size */
      
font-size: larger;
font-size: smaller;

/* 
      
       , length value */
      
font-size: 12px;
font-size: 0.8 em;

/* 
      
        specifies the percentage */
      
font-size: 80%;
font-size: inherit;
Copy the code

font-styleAllow you to choosefont-familyUnder the fontitalic 或 obliquestyle

font-style: normal;        /* Regular body */
font-style: italic;        /* Italics are generally written and usually take up less height than unstyled fonts */
font-style: oblique;       /* Slants are simply slant versions of regular glyphs */
font-style: oblique 10deg; /* If oblique is used, incline Angle */ can be appended

/* Global attributes */
font-style: inherit;
font-style: initial;
font-style: unset;
Copy the code

font-weightSpecifies the size of the font. Some fonts are available onlynormal 和 boldTwo kinds of value.

font-weight: normal;      / * * /
font-weight: bold;        / * * / in bold
font-weight: bolder;      /* bold */
font-weight: lighter;     / * * / thin body
font-weight: 400;         /* The number from 100 to 900, the larger the value, the thicker, 400 is normal */

/* Global attributes */
font-weight: inherit;
font-weight: initial;
font-weight: unset;
Copy the code

text-transformSpecifies how to capitalize the text of an element. It can be used to make text appear all uppercase or all lowercase, or to operate on each word individually

text-transform: capitalize;     /* Uppercase */
text-transform: uppercase;      /* All caps */
text-transform: lowercase;      /* All lowercase */
text-transform: none;           /* Prevents all character cases from being converted */
text-transform: full-width;     /* This keyword forces characters -- mostly ideograms and Latin characters -- to be written into a square and allows them to align with normal East Asian characters (such as Chinese or Japanese). --MDN */
Copy the code

text-decorationIt is used to set the appearance of the modifier line (underline, underscore, strikethrough/strikeout, or flicker) of the texttext-decoration-line.text-decoration-color.text-decoration-style, and new onestext-decoration-thicknessProperty abbreviation.

1, the position of text decoration, underline as follows, delete line line-through.

text-decoration-line: none;              /* No text modifier */
text-decoration-line: underline;         /* There is a modifier line */ below the text
text-decoration-line: overline;          /* There is a modifier line */ above the text
text-decoration-line: line-through;      /* There is a modifier line running through the middle of the text */
text-decoration-line: blink;             /* Text flicker (text alternately shown and hidden), browsers do not seem to implement */
text-decoration-line: underline overline;               /* Two modifiers */
text-decoration-line: overline underline line-through;  /* Multiple lines */
Copy the code

2, text-decoration-color Specifies the color of the text decoration. The line of text decoration is specified by the text-decoration-line property

text-decoration-color: currentColor;
text-decoration-color: red;
text-decoration-color: #00ff00;
text-decoration-color: rgba(255.128.128.0.5);
text-decoration-color: transparent;
Copy the code

3, text-decoration-style Used to set the line style set by the text-decoration-line. Such as the wavy line wavy solid line solid dashed line dashed line.

text-decoration-style: solid;      /* Draw a solid line */
text-decoration-style: double;     /* Draw a double solid line */
text-decoration-style: dotted;     /* Draw a dash */
text-decoration-style: dashed;     /* Draw a dotted line */
text-decoration-style: wavy;       /* Draw a wavy line */
text-decoration-style: none;       /* No lines */
Copy the code

4. The text-decoration-thickness property is used to set the thickness or width of the decorative line used in the element such as line-through, underline, or overline.

text-decoration-thickness: auto;            /* The browser selects the appropriate width for the text trim */
text-decoration-thickness: from-font;       /* If the font file contains the preferred thickness value, the font file thickness value will be used. If there is no setting in the font file, the effect is the same as if it were set to Auto, and the browser chooses an appropriate thickness value */

/* length */
/* Specifies the length of the trim, which overrides the font file or browser default value */
text-decoration-thickness: 0.1 em;
text-decoration-thickness: 3px;
Copy the code

5, text-decoration is the abbreviation of the above four properties

.wavy { 
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

.wavy { 
  text-decoration: underline wavy red;  /* has the same effect as above */
}
Copy the code

text-indentDefines the amount of indentation before the first line of text content of a block element.

/* 
      
        Length value */
      
text-indent: 3mm;
text-indent: 40px;

/* 
      
        The percentage value depends on the width of the containing block */
      
text-indent: 15%;

/* Keyword */
text-indent: 5em each-line;  /* Text indentation affects the first line, as well as the first line after a 

 force break */
text-indent: 5em hanging;    /* This value inverses all lines: all lines except the first line are indented, making it look like the first line has a negative indentation value */
text-indent: 5em hanging each-line;
Copy the code

letter-spacingUsed to set the spacing of text characters.

letter-spacing: normal;  /* The spacing is based on the normal spacing of the current font. Unlike 0, the user agent uses this property to determine the default alignment of the text */
/* 
      
        Specifies the spacing between the text in place of the default spacing. It can be negative */
      
letter-spacing: 0.3 em;
letter-spacing: 3px;
letter-spacing:.3px;
Copy the code

word-spacingSet the spacing between words and labels

word-spacing: normal;    /* Normal word spacing, defined by the current font and/or browser */
word-spacing: 3px;       /* <length> values */
word-spacing: 0.3 em;
word-spacing: inherit;
Copy the code

line-heightUsed to set the amount of space for multi-line elements, such as the spacing of multiple lines of text.

line-height: normal;
line-height: 3.5;  /* Sets the value of the attribute times the font size of the element */
line-height: 3em;  /* Specifies that < length > is used to calculate the height of line box */
line-height: 34%;  /* The computed value is the given percentage value multiplied by the computed font size of the element. * /

/* Global attributes */
line-height: inherit;
line-height: initial;
line-height: unset;
Copy the code

You can use line-height to be equal to height to center text vertically on a line.

text-alignDefines how in-line content (such as text) is aligned relative to its block parent. Text-align does not control the alignment of the block element itself, only its in-line content.

/* Keyword values */
text-align: left;        /* Align the contents of the line to the left */
text-align: right;       /* Align the contents of the line to the right */
text-align: center;      /* Line content is centered */
text-align: justify;     /* Text is aligned to the sides, not for the last line. * /
text-align: justify-all; /* Is consistent with justify, but forces both ends of the last line to be aligned. * /
text-align: start;       /* If the content direction is left to right, it equals left; otherwise, it equals right */
text-align: end;         /* If the content direction is left to right, it equals right; otherwise, it equals left */
text-align: match-parent;/* Is similar to inherit, except that the start and end values are determined by the direction of the parent element and are replaced with appropriate left or right values. * /

/* Global attributes */
text-align: inherit;
text-align: initial;
text-align: unset;
Copy the code

Effect:

vertical-alignSpecify inline elements (inline) or table cells (table-cellThe vertical alignment of the element

/* Keyword values */
vertical-align: baseline;  /* Align the element's baseline with the parent element's baseline. * /
vertical-align: sub;  /* Aligns the element's baseline with the parent element's subscript baseline */
vertical-align: super;/* Aligns the element baseline with the superscript baseline of the parent element */
vertical-align: text-top;/* Align the top of the element with the top of the font of the parent element */
vertical-align: text-bottom;/* Align the bottom of the element with the bottom of the font of the parent element */
vertical-align: middle;  /* Align the middle of the element with the parent element's baseline plus half of the parent element's x-height */
vertical-align: top;  /* Aligns the top of the element and its descendants with the top of the entire line */
vertical-align: bottom;/* Align the bottom of the element and its descendants with the bottom of the entire line */

/* The given length that aligns the element's baseline to the parent element's baseline. It could be negative. * /
vertical-align: 10em;
vertical-align: 4px;

/* Percentage, the given percentage that aligns the element's baseline above the parent element's baseline. The percentage is the percentage of the line-height attribute. It could be negative. * /
vertical-align: 20%;

/* Global attributes */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;
Copy the code

X-height Portal: X-height

The box model

For details, see CSS Basic box model introduction. Simply put, the box model is an abstract model composed of content, padding, border and margin.

Generally divided into IE model and conventional model, specific differences on their own Baidu or Google

paddingPadding area refers to the space between the content of an element and its boundary. This property cannot be negative.

padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
Copy the code

Abbreviations:

padding: 20px;                  /* The top, bottom, left, and right are 20px */
padding: 20px 30px;             /* Up and down 20px, left and right 30px */
padding: 20px 30px 40px;        /* Up around 20px down around 40px */
padding: 20px 30px 40px 50px;   /* Top right, bottom left */
Copy the code

borderA shorthand property used to set various individual boundary properties.borderCan be used to set the value of one or more of the following properties:border-width.border-style.border-color.

border: none;          /* No border */
border-width: 10px;    /* Width of the border */
border-color: red;     /* The border color */
border-style: solid;   /* The 'solid' field indicates that the 'dotted' field indicates that the 'err' field corresponds to the 'err' field. * /

* / / * style | color
border: outset #f33;

/ * * / width | | style color
border: 10px solid red;

/* Set the border in one direction separately */
border-right: 10px solid red;
Copy the code

marginGiven the element sets all four (up, down, left, and right) directional margin attributes. This is short for four margin property Settings. The four margin property Settings are:margin-top.margin-right.margin-bottom 和 margin-left. The specified margin is allowed to be negative.

margin: style /* single-value syntax for all edges */ example: margin:1em; 
margin: vertical /* Binary syntax */ example: margin:5% auto; 
margin: horizontal bottom /* horizontal bottom */ example: margin:1em auto 2em; 
margin: top right bottom left /*2px 1em 0 auto; 
margin: inherit
Copy the code

Note:

The spacing between the left and right horizontal boxes is the sum of their margins

The space between the top and bottom boxes should be whichever is the largest (the larger ones cover up the smaller ones)

Two nested boxes, they both havemargin-topWhichever is the largest will cover the smaller

Solution: Add overflow: Hidden to the parent element;

More: BFC (Block-level Formatting Context)

margin: 0 auto;  /* Block level elements are horizontally centered */
Copy the code

background

background-colorSets the background color of the element. The value of the property is the color value or keyword.

/* Color value */
background-color: red;
background-color: #bbff00;
background-color: rgb(255.255.128);
background-color: hsla(50.33%.25%.0.75);

/* Special value */
background-color: currentColor;
background-color: transparent;

/* Global attributes */
background-color: inherit;
background-color: initial;
background-color: unset;
Copy the code

background-imageProperty to set one or more background images for an element, each of which is explicitly specified as a keywordnoneOr a<image>Value, which can provide multiple values separated by commas to specify multiple background images

background-image:
  linear-gradient(to bottom, rgba(255.255.0.0.5), rgba(0.0.255.0.5)),
  url('https://mdn.mozillademos.org/files/7693/catfront.png');
Copy the code

background-repeatDefines how the background image repeats. The background image can be repeated along the horizontal axis, vertical axis, both axes, or not at all.

Value:

Repeat: The image is repeated as needed to cover the entire area of the background image. If the last image is not the right size it will be clipped.

Space: Images are repeated as much as possible, but not cropped.

Round: As the allowed space increases in size, the image being repeated will stretch out (without gaps) until there is enough space to add an image.

No-repeat: The image will not be repeated

/* Single-value syntax */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/ * double value syntax: level horizontal vertical vertical | * /
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

background-repeat: inherit;
Copy the code

background-positionSet the initial position for each background image. This position is relative to the position layer defined by background-Origin.

background-position: 20px 30px;    /* 20px to the left, 30px to the top */
background-position: left top;     /* Left right center top bottom */
background-position: 50% 100%;     /* is equivalent to center bottom */
Copy the code

background-sizeSet the background image size. Images can keep their original size, stretch to a new size, or scale to the size of the element’s available space while keeping their original proportions.

background-size: 20px 20px;  /* If the width and height are 20px and the width and height are the same, you can write only one value */
background-size: 100%; background-size: cover;/* Expand the background image to a large enough size to completely cover the area, scaling up to equal proportions may cut the image (display incomplete) */
background-size: contain;  /* Scale to large enough to make the image complete (may cause area blank) */

/* Comma-separated multiple values: set multiple backgrounds */
background-size: auto, auto;     /* Different from background-size: auto auto */
background-size: 50%.25%.25%;
background-size: 6px, auto, contain;
Copy the code

Effect:

Note: areas of the background that are not covered by the background image will still show the background color set with the background-color property. In addition, if the background image is set to transparent or translucent, the background color behind the background image will also be displayed.

background-originSpecifies the specified background imagebackground-imageThe background relative region of the origin position of the property.

background-origin: padding-box;                /* (default) Render from padding */
background-origin: content-box;                /* Render in the content */
background-origin: border-box;                 /* Render from the border */
background-origin: content-box, padding-box;   /* Multiple backgrounds */
Copy the code

background-attachmentSpecifies that the position of the background image is fixed within the viewport or scrolls along the block containing it.

background-attachment: scroll;  /* The default background is fixed relative to the element itself, rather than scrolling with its content (which is valid for element borders) */
background-attachment: fixed;  /* Background fixed relative to viewport */
background-attachment: local;  /* The background is fixed relative to the content of the element. If an element has a scrolling mechanism, the background will scroll along with the content of the element, and the drawing and positioning areas of the background are relative to the scrollable areas rather than the borders that contain them. * /

Copy the code

Abbreviations:

background: #f00 url('path') no-repeat center center;
Copy the code

floating

float: left;      /* Left float */
float: right;     /* Float right */
float: none;      /* Not floating (default) */
Copy the code

Floating labels float, affecting the normal document flow space. Leaving the normal document flow will affect the following elements, but not the preceding elements. The element automatically becomes a block-level element when floated

Remove the floating

Add to the parent elementheight

.parent {
  height: 100px;  /* Fixed height, spread space */
}
Copy the code

Add overflow: Hidden to the parent element
Clear: both clear(left clears left float, right clears right float, both clears left float, right float)

.clear {
  clear: both | left | right;
}
Copy the code

Append false elements to parent elements::after

.parent::after {
  content: "";
  display: block;
  clear: left;
}
Copy the code

positioning

positionUsed to specify how an element is positioned in a document.top,right,bottom 和 leftAttribute determines the final position of the element.

position: static;        /* Not located (normal document flow by default) */
position: relative;      /* Position relative to itself */
position: absolute;      /* Absolute positioning (relative to the outer positioning element, or relative to the browser if not) */
position: fixed;         /* Fixed positioning (relative to the browser) */
position: sticky;        /* Sticky positioning */
Copy the code

The coverage order of multiple positioning elements is determined by z-index, whose value is a number without units. Whoever has a larger Z-index value is at the top

other

Conversion of element type

display: block;          /* Convert any element to a block-level element */
display: inline-block;   /* Any element is converted to an inline block-level element (not supported in IE7 and below) */
display: inline;         /* Any element is converted to an inline element */ 
display: none;           /* Any elements are missing */   
Copy the code

box-sizingBox size (CSS3 property)

box-sizing*/ box-sizing: border-box /* Padding inside the border does not make the box larger */Copy the code

Content of the overflow

overflow: visible;      /* (default) visible */
overflow: hidden;       / * * /
overflow: scroll;       /* The scroll bar */ appears
overflow: auto;         /* The browser automatically handles */
Copy the code

text-overflowText overflow processing

text-overflow: clip;      /* Does not display the ellipsis flag */
text-overflow: ellipsis;  /* Displays the ellipsis flag */
Copy the code

white-spaceElement whitespace handling

white-space: normal;      / * * / by default
white-space: nowrap;      /* No newline */
white-space: pre;         /* Whitespace is reserved */

/* Single-line text overflow displays ellipsis */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

/* Multiline text overflow displays ellipsis */
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;  /* After 2 lines, an ellipsis */ is displayed at the end
-webkit-box-orient: vertical;
Copy the code

In general, text overflow is handled by combining all three with a new tag:
enforces no line breaks

Element disappears (not visible)

display : none;        /* The element is not displayed on the page and is missing */
visibility: hidden;    /* The element is not displayed on the page at the */ location
opacity: 0;            /* The element is not visible on the page */
z-index : -999999;     The /* element is also invisible on the page and needs to be used in conjunction with the position attribute
Copy the code

A list of the style

list-style-typeList style type

Value:

list-style-type: disc;       /* Solid origin */
list-style-type: none;       /* Remove the style */
list-style-type: circle;     /* Hollow circle */
list-style-type: square;     /* Solid square */
Copy the code

list-style-imageList style image

list-style-image: url('test.png');
Copy the code

list-style-positionThe position of the list style

list-style-position: outside;   /* List styles are outside the content */
list-style-position: inside;    /* Make the list style inside the content */
Copy the code

CSS content is too much, for the moment here, there are mistakes welcome to point out, thank you very much!!

* If you feel useful or like it, you can like it + favorites oh *

CSS reference developer.mozilla.org/zh-CN/docs/…

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Styles – SUMMARY of CSS basics

Introducing way

1. Inline style — Write in`html`In the label

2. Inline style — Write in`style`Such as:

3. Link styles — use`link`Labels, such as:

4. Import styles

The selector

Grammar:`Selector {rule}`

Units of length and color

The length of the unit

Color said

Font text style

The box model

background

floating

Remove the floating

positioning

other

Styles – SUMMARY of CSS basics

Introducing way

1. Inline style — Write inhtmlIn the label

2. Inline style — Write instyleSuch as:

3. Link styles — uselinkLabels, such as:

4. Import styles

The selector

Grammar:Selector {rule}

Units of length and color

The length of the unit

Color said

Font text style

The box model

background

floating

Remove the floating

positioning

other

Related Posts

Git git

1px solution for mobile terminal

Record wechat applets JSON configuration

1. Inline style — Write in`html`In the label

2. Inline style — Write in`style`Such as:

3. Link styles — use`link`Labels, such as:

Grammar:`Selector {rule}`