What is CSS?

The CSS definition

CSS, Cascading Syle Sheets, a language for styling structured documents (basically HTML).

For example, select all paragraph elements of an HTML page and change the text to red. The code and result look like this:

<p>red<p>
Copy the code

p{
  color:red;
}
Copy the code

The default style of the browser

As you learn HTML, you can see the default style that the browser gives each tag. The browser renders the HTML file using an internal style sheet, which ensures that the title is larger than normal text and the links are highlighted, as shown below:

With CSS, you can add custom styles and do special effects and animations.

Margin :0; margin:0; margin:0; margin:0; padding:0; }

What can CSS do

• Implement style and document structure separation. Before CSS, all styles were mixed up in HTML. With CSS, styles and document structure can be separated. (In some cases, CSS can still be written in HTML, called inline styles.)
• By isolating CSS as a style language, you can provide more room for expression and achieve more complex and diverse styles.

CSS structure

The entire structure is called a “rule set”, or “rule” for short.

• Selector: Selects one or more elements to add styles to. Selectors have different types and priorities:

  The selector	Selector weight
  Inheritance, *,	0,0,0,0
  Element (tag) selector	0,0,0,1
  Class/pseudo-class selector	0,0,1,0
  The ID selector	0,1,0,0
  Inline style	1,0,0,0
  ! Important	up

• Declaration: A separate rule that specifies the attributes to add style elements

• Property: Specifies the HTML element style to change

• Property value: Selects a value from among the many appearances of the specified property

CSS features – Cascading and inheritance

Cascading sex cascade

When two sibling rules are applied to an element, the ones written below are the ones actually used. Example of executing a hierarchy: there are two rules for h1 that have the same priority, but the order takes effect last:

<h1>This is my heading.</h1>
Copy the code

h1 {
    color:red;
}
h1 {
    color:blue;
}
Copy the code

If the selector has the same priority, the hierarchy is executed. If the rule has different priorities, the hierarchy is executed according to the weight (priority) of the selector

inheritance

Some CSS properties set on parent elements are inherited by quilt elements, and some are not. Example:

<p>text in p <span>text in sppan</span>.</p>
Copy the code

p {
    color: blue;
}
span {
    color: black;
}
Copy the code

CSS Learning Resources

Free classes

1. codecademy.com

Veteran online programming education website. Full interactive self-service learning experience, suitable for CSS learning and practice scenarios.

2. udacity.com

Veteran online programming education website. Foreign language website, Chinese friendly, video teaching + after-class experiment interaction

3. w3schools.com & runoob.com

W3school & Beginner tutorials

4. freecodecamp.org

GitHub’s most popular project on Star, a comprehensive self-taught programmer class contributed by the community.

Continuous learning

1. MDN

-MDN documentation that accompanies a front-end engineer’s career

2. CSS-TRICKS

3. The w3c CSS standards

Explain the principles of CSS rules

Common CSS Rules

CSS layout

Normal document flow

How do you determine the position of an element block in the entire document?

• The default block-level elements are placed in the direction of block flow based on the writing order of their parent elements. Each block-level element will have a new line below the previous block-level element, and will be separated by margins. Block-level elements are organized vertically.
• Inline elements do not start on another line, as long as there is enough space within the width of their parent block element, they are placed on the same line as other inline elements. If there is not enough space, the spilled text or element is moved to a new line.

Elastic box (most commonly used)

A one-dimensional method of laying out elements in rows or columns. Elements can expand to fill additional Spaces and shrink to fit smaller Spaces. Elastic layout can accomplish 90% of layout requirements, very flexible.

1. One click to open the elastic box instead of normal document flow. Declare elastic layout, get a horizontal layout, this is aImplicit box model state, the container is similar to a block, but the width is determined by the child element by default. The child element is similar to inline-block, and the width and height can be set without line breaking:

   .container {
     display:flex
   }
   Copy the code

   

2. Change the spindle of the elastic box. The flex-direction attribute controls the arrangement order of child elements.

   .container {
     display:flex;
     flex-direction: row | row-reverse | column | column-reverse;
   }
   Copy the code

   

3. How the spindles of child elements are aligned. The context-content property determines how space is allocated for child elements.

       .container {
         display: flex;
         justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
       }
   Copy the code

   

4. How the child elements are aligned along the horizontal axis. Align-items determine how vertically aligned child elements are

       .container {
         display: flex;
         align-items: stretch | flex-start | flex-end | center | baseline;
       }
   Copy the code

   

positioning

CSS positioning layout -Static, Relative, Absolute, Fixed, Sticky & Z-index

The positioning of non-static values makes elements very independent and controllable, and is widely used in pop-ups, drop-down options, fixed navigation, and other scenarios.

floating

.

Decoration related

The font

attribute	describe
font-size	Font size, usually px
font-family	Fonts such as Microsoft YaHei
font-weight	The default thickness is normal or 400, and bold is bold
font-style	Style italic
font	Compound attributes, font related attributes, the sequence is: style(optional)→weight(optional)→size→family

A border

attribute	describe
border-style	Double bounding bounding bounding bounding bounding bounding bounding bounding bounding bounding bounding bounding bounding
border-width	Border width, thick(3px)/Medium (2px)/thin(1px)
border-color	Border color
The composite properties	border: 5px solid red

shadow

box-shadow:h-shadow v-shadow blur spread color inset;
Copy the code

value	describe
h-shadow	A necessity. The position of the horizontal shadow, allowing negative values.
v-shadow	A necessity. The position of the vertical shadow, allowing negative values.
blur	Optional. Blur the distance.
spread	Optional. Shadow size.
color	Optional. Shadow color.
inset	Optional. Set outset shadow to Internal shadow

Text shadow

text-shadow: offset-x | offset-y | blur-radius | color;
Copy the code

interaction

cursor-pointer

cursor: help | wait | crosshair | not-allowed | zoom-in | grab ;
Copy the code

:hover

animation

Developer.mozilla.org/zh-CN/docs/…

CSS debugging tips, extensions, and innovations

CSS debugging

Chrome vue debugging tool DevTools can be downloaded and installed in one click without configuration

CSS extensions

CSS preprocessor is a program that allows you to generate CSS using the preprocessor’s own unique syntax. Most CSS preprocessors add features that native CSS does not, such as code mixing, nested selectors, inheritance selectors, and so on. These features make CSS structures more readable and maintainable.

To use the CSS preprocessor, the CSS compilation tool must be installed on the web service server.

Popular CSS preprocessors:

• Less, expanded function: variable type, will be filled to the corresponding position after compilation, function: to achieve the style of mass production.
• scss

CSS innovations

The development of CSS has not necessarily need to write CSS files to style-components represented by CSS-in-JS scheme, through the way of component reuse properties, armed with THE power of JS CSS

//creat a title component that'll render an <h1> tag with some styles
const Title = styled.h1`
    font-size: 1.5 em;
    text-align: center;
    color: palevioletred;
`;
//creat a wrapper component that'll render a <section> tag with some styles
const Wrapper = styled.section`
    padding: 4em;
    background: papayawhip;
`;
Copy the code

//Use title and wrapper like any other React component - expect they're styled!
render(
    <Wrapper>
        <Title>
            Hellow world!
        </Title>
    </Wrapper>
)
Copy the code

Tailwindcss as a representative of the scheme, change the style of the HTML file can be changed, benefits: CSS selection is unlimited, close CSS selection (bg-blue-400)

reference

Css-tricks.com/snippets/cs…

Developer.mozilla.org/zh-CN/docs/…