This is the sixth day of my participation in the November Gwen Challenge. See details: The Last Gwen Challenge 2021.

preface

This article needs a little HTML foundation, no basic partners can see my article: front-end HTML swastika blood book summary, to see you get started?

1. Getting to know the CSS

1.1. Disadvantages of HTML

Speaking of HTML, this is a very simple guy who only cares about the semantics of the content, such as

to indicate that it’s a headline,

to indicate that it’s a paragraph, to indicate that there’s an image, and to indicate that there’s a link. In the early days, there were many websites in the world, but they all had one common characteristic: ugly. Let’s look at the early days of Google. To summarize the disadvantages of HTML:

  1. HTML does not meet the needs of designers

  2. Manipulating HTML attributes is inconvenient

  3. Adding styles to HTML creates a lot of bloat and complexity

1.2 introduction to CSS

CSS(Cascading Style Sheets), commonly referred to as CSS Style Sheets or Cascading Style Sheets, is used to set the text content of an HTML page (font, size, alignment, etc.), the shape of the image (width, height, border Style, margins, etc.), and the layout and appearance of the page. Based on HTML, CSS provides rich functions such as font, color, background control and overall layout, and can be set to different styles for different browsers.

  1. The selector is used to specify the HTML tag that the CSS style will apply, with the specific style set to the object in curly braces.
  2. Properties and property values appear as key-value pairs.
  3. Properties are style properties, such as font size, text color, and so on, set for a specified object.
  4. Attributes and attribute values are connected by colons.
  5. The English “; “is used between multiple” key-value pairs “. Make a distinction.

1.3. Introduce the CSS

With all the benefits of CSS mentioned above, how do we introduce CSS? We can introduce CSS in three ways:

  1. Inline style (inline style)
  2. Internal style Sheets (inline style sheets)
  3. External style sheets (external chain)

1.3.1 Inline style (Inline Style)

In-line style, in-line style, is to set the style of the element through the style attribute of the tag, that is, write directly in the tag, it is only suitable for learning or small projects, generally not recommended. Any HTML tag has the style attribute, which sets the inline syntax:

< p style=" margin-top: 1em; margin-bottom: 1em; Attribute 2: Attribute value 2; Attribute 3: Attribute value 3; > Content </ tag name ><! -- -- -- > demonstration
<div style="color: red; font-size: 12px;">XiaoLin</div>
Copy the code

To sum up:

  • Style is the attribute of the tag.
  • Between the style property and the value:.
  • Between groups of attribute values;Separated.
  • Only the current tag and the word tag nested within it can be controlled, resulting in code redundancy.
  • No separation of style and structure is implemented (fatal drawback).

1.3.2 Internal Stylesheets (Embedded Stylesheets)

Inline is to write CSS code in the HEAD tag of an HTML document and define it with the style tag. This is also ** only suitable for learning or small projects and is not recommended. ** However, the inline style has the advantage of separating the style from the tag, making it less coupleable. His basic grammar is as follows:

<head>
<style type="text/CSS">Selector (selected tag) {property1: attribute values1; attribute2: attribute values2; attribute3: attribute values3;
    }
</style>
</head>
Copy the code

For example, we could write:

<style>
	 div {
	 	color: red;
	 	font-size: 12px;
	 }
</style>
Copy the code

To sum up:

  • The style tag is normally located in the head tag, but it could theoretically be placed anywhere in an HTML document.
  • Type =”text/ CSS “can be omitted in HTML5.
  • You can only control the current page.
  • The disadvantage is that there is no complete separation.

1.3.3 External Stylesheets (External Chain)

**.css ** * is the extension of all styles in one or more external style sheet files, using the link tag to link the external style sheet files to the HTML document.

<head>
  <link rel="stylesheet" type="text/css" href="CSS file path">
</head>
Copy the code

There are about three common attributes and functions.

attribute role
rel Defines the relationship between the current document and the linked document, in this case specifying “stylesheet” to indicate that the linked document is a stylesheet file.
type Define the type of document to be linked, in this case “text/CSS”, to indicate that the linked external file is a CSS style sheet. We can omit them all
href Defines the URL of the linked external stylesheet file, which can be a relative or absolute path.

Points to note:

  • Link is a single tag.
  • The link tag needs to be placed in the head header tag, and three attributes of the link tag are specified.

1.3.4 Summary of the three style sheets

The stylesheet advantages disadvantages usage Control range
Inline style sheets Easy to write, high weight No separation of style and structure is implemented less Control a label (less)
Internal style sheet Some structure and style are separated Not completely separated more Control a page (middle)
External style sheets Complete separation of structure and style Need to introduce Most, highly recommended Control the entire site (multiple)

1.4. Three features of CSS

1.4.1 Cascading CSS

The ability to stack multiple CSS styles is the ability of browsers to handle conflicts. If a property is set to the same element using two identical selectors, then one property will stack the other. He had two principles, a bit like the Yangtze River where the waves behind push on the waves before, and the waves before die on the beach.

  1. Style conflicts follow the proximity principle. If that style is near the structure, execute that style.

  2. Styles do not clash and do not cascade

1.4.2 CSS inheritance

CSS inheritance means that child tags inherit certain styles, such as text color and font size, from parent tags. To set an inheritable property, you simply apply it to the parent element.

  1. Inheritance, used properly, can simplify code and reduce the complexity of CSS styling. For example, if there are many children who need a style, you can assign one to the parent, and the child will inherit it.

  2. Child elements can inherit the style of the parent element (text-, font-, line- at the beginning of these elements can inherit, as well as the color attribute)

1.4.3 CSS Priority

When defining CSS styles, it is common for two or more rules to apply to the same element, which can be divided into the same and different options:

  • If the selectors are the same, cascade is performed.
  • Different selectors can lead to priority issues.

1.5. CSS comments

The CSS is commented as follows:

p {
 /* All fonts are 14 pixels */
  font-size: 14px;                 
}
Copy the code