Making source: for CSS stars ✨ say | o | give a ❤ ️ attention, ❤ ️ thumb up, ❤ ️ encourages the author

Hello everyone, I’m Nezha. Nice to meet you ~~

Nezha’s life creed: If you like what you learn, there will be strong motivation to support it.

Learn programming every day, so that you can get a step away from your dream. Thank you for not living up to every programmer who loves programming. No matter how strange the knowledge point is, work with me to calm down the wandering heart and keep going. Welcome to follow me vx:xiaoda0423, welcome to like, favorites and comments

preface

If this article is helpful to you, give ❤️ a follow, ❤️ like, ❤️ encourage the author, accept the challenge? Article public account launch, concern programmer Doraemon first time access to the latest article

❤ ️ cartridge ❤ ️ ~

Use CSS

Example:

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style></style> </head> <body> <div id="header"> < h1 > navigation < / h1 > < ul > < li > < a href = "#" > directory 1 < / a > < / li > < li > < a href = "#" > 2 directory < / a > < / li > < li > < a href = "#" > directory 3 < / a > < / li > < li > < a Directory href = "#" > 4 < / a > < / li > < / ul > < / div > < / body > < / HTML >Copy the code

Effect:

  • Remove the list symbol from the navigation bar
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #header ul { list-style: none; padding: 0; margin: 0; } < / style > < / head > < body > < div id = "header" > < h1 > navigation bar < / h1 > < ul > < li > < a href = "#" > directory 1 < / a > < / li > < li > < a href = "#" > 2 directory < / a > < / li > < li > < a href = "#" > directory 3 < / a > < / li > < li > < a href = "#" > directory 4 < / a > < / li > < / ul > < / div > < / body > < / HTML >Copy the code

Effect:

Change 1:

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #header ul { list-style: none; padding: 0; margin: 0; } #header li { display: inline; border: solid; border-width: 1px 1px 0 1px; Margin: 0 0.5em 0 0; } < / style > < / head > < body > < div id = "header" > < h1 > navigation bar < / h1 > < ul > < li > < a href = "#" > directory 1 < / a > < / li > < li > < a href = "#" > 2 directory < / a > < / li > < li > < a href = "#" > directory 3 < / a > < / li > < li > < a href = "#" > directory 4 < / a > < / li > < / ul > < / div > < / body > < / HTML >Copy the code

Effect:

Change 2:

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #header ul { list-style: none; padding: 0; margin: 0; } #header li { display: inline; border: solid; border-width: 1px 1px 0 1px; Margin: 0 0.5em 0 0; } #header li a { padding: 0 1em; } < / style > < / head > < body > < div id = "header" > < h1 > navigation bar < / h1 > < ul > < li > < a href = "#" > directory 1 < / a > < / li > < li > < a href = "#" > 2 directory < / a > < / li > < li > < a href = "#" > directory 3 < / a > < / li > < li > < a href = "#" > directory 4 < / a > < / li > < / ul > < / div > < / body > < / HTML >Copy the code

Effect:

Creating a selector

  • HTML selector
  • Flag selector
  • Class selectors
// Derive selector h1 h2 {} // flag selector #text {} // class selector. }Copy the code

Pseudo classes:

  • :activeAdds the style to the activated element
  • :focusAdds the style to the selected element
  • :hoverAdds a style to a page object when the cursor hovers over it
  • :linkTo add styles to links that have not been accessed
  • :visitedTo add styles to the links that have been visited
  • :first-childAdds a special style to the first child of the page object
  • :langAllows the designer to define the language to be used in a given page

The text font size

The font size property changes the size of a font.

Common:

  1. px;
  2. em;
  3. %.

1. The unit of pixels is PX. The font size is defined in absolute units, such as 12px.

2. Font size em, a font size is 1em, the default font size in any browser is 1em.

3. Percentage %, the size defined as a percentage of the current text.

Modifies the properties of the page text and page background

  • backgroundTo set the background property in a declaration
  • background-color, sets the background color of the page object
  • background-image, reference the image and set it as the background
  • background-repeatTo set the way the background image is repeated
  • background-positionTo set the location of the background image
  • background-attachmentTo set whether the background image is fixed or scrolls with the rest of the page
  • color, sets the text color
  • line-height, set the row height
  • white-spaceSets the way paragraphs in the element are typeset
  • word-spacing, set the word spacing
  • font-familyTo set the text font
  • font-size, set the font size
  • font-style, set the font style
  • font-weight, set the font size
  • directionTo set the text direction
  • letter-spacingTo set the character spacing
  • text-alignTo align the text on the page
  • text-decorationAdd a underline to the text
  • text-transformControls the letters in the element

Browser support

Webkit-engine browsers like Safari,Chrom’s private property prefix is -webkit-, Gecko’s private property prefix is -moz- for Firefox, Opera’s private property prefix is -O -, Internet Explorer, The prefix for private attributes limited to IE 8+ is -ms-.

Range of new features

The introduction of wildcards in attribute selectors, flexible pseudo-class selectors such as nth-child(), etc.

Property selector

  • E[attr], choose to haveattrProperties of theEElements.
  • E[attr="val"], choose to haveattrProperty and the property value is equal tovaluetheEElements.
  • E[att~="val"], choose to haveattrProperty and the property value is a whitespace separated list of words, one of which is equal tovaltheEThe element
  • E[attr|="value"], choose to haveattrProperty, and the property value is a hyphenated list of words, indicating thatvalThe start of theEThe element
  • E[attr^="val"], choose to haveattrProperty and the property value isvalOf the string at the beginningEThe element
  • E[attr$="val"], choose to haveattrProperty and the property value isvalThe end of the stringEThe element
  • E[attr*="val"], choose to haveattrProperty and the property value is containedvalOf the string ofEThe element
^ Indicates the start of the match. $indicates the end of the match. * indicates any characterCopy the code

CSS structure pseudo-class selector

  • E:root, select matchEThe root element of the document
  • E:not(s), select match all unmatched simple selectorsstheEThe element
  • E:emptyMatches elements that do not have any child elementsE
  • E:targetMatches the current link address pointing toEThe element
  • E:first-childMatches the first child of the parent elementE
  • E:last-childMatches the last child of the parent elementE
  • E:nth-child(n)Matches the NTH child of the parent elementE
  • E:nth-last-child(n)Matches the penultimate NTH child of the parent elementE
  • E:only-childMatches only one child of the parent elementE
  • E:first-of-typeMatches the first sibling element of the typeE
  • E:last-of-typeMatches the last sibling element of the same typeE
  • E:only-of-typeMatches the only sibling element of the same typeE
  • E:nth-of-type(n)Matches the NTH sibling element of the same typeE
  • E:nth-last-of-type(n)Matches the penultimate sibling element of the same typeE

CSS structure pseudo-class selector

  • E:link, set up hyperlinksaThe style before it is accessed
  • E:visited, set up hyperlinksaOutdated style in which the link address has been accessed
  • E:hoverSets the style of the element when the cursor is hovering
  • E:activeSets the style of the element when activated by the user
  • E:foucsSets the style of the element when it becomes the focus of input
  • E:checkedMatches all elements in the selected state of the user interfaceE
  • E:enabledMatches all elements in the available state of the user interfaceE
  • E:disabledMatches all elements whose user interface is disabledE

Pseudoelement selector

  • E:first-letter/E::first-letter, sets the style of the first character in the object
  • E:first-line/E::first-lineTo set the style of the first line in the object
  • E:before/E::beforeSet the content that occurs before the object to be used with the Content property
  • E:after/E::after, sets what happens after the object, used with the Content property
  • E::selection, sets the selected color

The text

Text shadow

text-shadow: length || lenth || opacity || color
// text-shadow: 5px 5px 3px #333
text-shadow: -1px 0 #333, 0 -1px #333, 1px 0 #333, 0 1px #333;
Copy the code

Text overflow processing:

Text - overflow: clip | ellipsis | overflow text ellipsis - word / / omit tag overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 200px; Set the width, hide the overflow, force the text to be displayed on a single line, and set the overflow to be displayed as an ellipsis flagCopy the code

Boundary line wrap property: word-wrap, used to set or index whether the current line breaks when it exceeds the boundary of the specified container

word-wrap: normal | break-word
Copy the code
  • normalRepresents the default continuous text wrap, allowing content to go beyond boundaries,
  • break-wordIndicates that content will be wrapped inside the boundary
word-break: normal | break-all | keep-all
Copy the code

Word-break sets or retrieves the in-word wrapping behavior of text within an object

@font-face Syntax rules

Use it to load font files on the server side

@font-face: {attribute: value; Font-size: medium; variant: medium; font-size: medium; font-size: medium; Font-stretch: sets whether the text is stretched horizontally. Fontsize: sets the size of the text font. SRC: sets the relative or absolute path of the customized fontCopy the code

Opactity properties

Opacity: < alpha > | inherit / / opacity, inherited the opacity of the parent elementCopy the code

Background

background: [background-image] | [background-origin] | [background-clip] | [background-repeact] | [background-size] | [background-position]
Copy the code
background-origin: border-box | padding-box | content-box
Copy the code
background-clip: border-box | padding-box | content-box
Copy the code
Background - size: [< length > | < percentage > | auto] {1, 2} | cover | containCopy the code

Go back to my previous articles and you may get more!

  • A qualified junior front-end engineer needs to master module notes
  • Vue.js pen test questions Solve common business problems
  • [Primary] Personally share notes of Vue front-end development tutorial
  • A long summary of JavaScript to consolidate the front end foundation
  • ES6 comprehensive summary
  • Dada front-end personal Web share 92 JavaScript interview questions with additional answers
  • [Illustrated, like collection oh!] Re-study to reinforce your Vuejs knowledge
  • 【 Mind Mapping 】 Front-end development – consolidate your JavaScript knowledge
  • 14 – even liver 7 nights, summed up the computer network knowledge point! (66 items in total)

❤️ follow + like + favorites + comments + forward ❤️, original is not easy, encourage the author to create better articles

Likes, favorites and comments

I’m Jeskson, thanks for your talent: likes, favorites and comments, and we’ll see you next time! ☞ Thank you for learning with me.

See you next time!

This article is constantly updated. You can search “Programmer Doraemon” on wechat to read it for the first time, and reply [information] there are materials of first-line big factories prepared by me, which have been included in this article www.dadaqianduan.cn/#/

Star: github.com/webVueBlog/…

This article is participating in the “Nuggets 2021 Spring Recruitment Campaign”, click to see the details of the campaign