This is the second day of my participation in the August Text Challenge.More challenges in August

Introduction to CSS (Cascading Style Sheets)

CSS can be used to create style sheets for the web page, through the style sheet can modify the web page, such as the size of the picture we see in a web page, background color and so on are set using CSS.

Cascading means that we can think of the entire web page as a layer upon layer structure, the higher layer will cover the lower layer, and CSS can set styles for each layer separately.

We can write CSS styles into the style attribute of an element. This style is called inline style. It only works on the content of the current element and is not convenient for repeated use.

The format is as follows:

<div style="color: aqua;" > hello < / div > >Copy the code

We can also write CSS styles to the style tag of the head tag, and then write styles to the style tag, adding styles to the specified elements by selecting them through the CSS selector.

This approach separates structure from presentation and is recommended.

The format is as follows:

<div style="color: aqua;" > hello < / div > >Copy the code

External style sheets

In addition to the above two methods, we can also write the style sheet in an external CSS file and then introduce it into the current page with the link tag in the head tag, so that the CSS style sheet from the external file will be applied to the current page.

This approach completely separates structure from presentation, allowing stylesheets to be used on different pages and maximizing the reuse of stylesheets. At the same time, this method can use browser cache to speed up user access and improve user experience, which is the most recommended way in development.

The syntax is as follows:

<link rel="stylesheet" href="a.css">
Copy the code

The CSS syntax

Comments in CSS are similar to HTML, except that they must be written in a style tag or in a CSS file

Comments are written in /**/ in the following format:

/* I am a comment in CSS */Copy the code

CS syntax: selector declaration block

Selector: The selector allows you to select the element specified in the page and apply the style in the declaration block to the element corresponding to the selector.

Declarative block: The declarative block is immediately following the selector, enclosed by a pair of {}. The declarative block is actually a group of name-value pair structures, called declarations.

Multiple declarations can be written in a single declaration block. separated

Common selector

Element selector

Selects the specified element on the page based on the tag name

Syntax: Tag name {}

Example: p {}

The id selector

Select the unique element based on its ID value

Syntax: #id value {}

Example: First we need to set the id value for the element, such as:

I’m a P tag

Class selectors

Selects a set of elements based on their class attribute

Syntax:.class value {} (one before.)

Example: First we need to set the class value for the element, as in:

I’m a P tag

Unlike id values, class is not unique. You can set multiple of the same class values to select a set of elements.

Wildcard selector

Select all elements on the page

Grammar: * {}

This method can be used to set the default style of some elements to be cancelled.

Union selector

Multiple conditional elements can be selected

Syntax: selector 1,, selector 2, selector 3

Example: p, # a1, a2

Intersection selector

You can select elements that meet multiple criteria

Syntax: selector 1 selector 2 selector 3

Example: p# a1, a2

The union selector can be selected only if one condition is met, while the intersection selector can be selected only if multiple conditions are met.

Child element and descendant selectors

Relationships between elements Parent element: An element that directly contains child elements

Child element: An element directly contained by a parent element

Ancestor element: An element that directly or indirectly contains a descendant element whose parent is also an ancestor element

Descendant element: An element that is directly or indirectly contained by an ancestor element and whose children are also descendants

Sibling elements: Elements that have the same parent are called sibling elements

Descendant element selector

Action: Selects the specified descendant selector for the specified element

Syntax: ancestor element descendant element {}

Child element selector

Action: Selects the specified child element of the specified parent element

Syntax: Parent element > child element {}

(IE6 and below do not support child element selectors)