CSS, the full name of Cascading Style Sheets, is a language used to design web page styles. CSS can separate the content and presentation style in HTML documents, making the page more beautiful and more in line with the designer's requirements. This article will introduce the basic concepts, syntax and practical applications of CSS to help beginners get started.

1. Basic concepts of CSS

CSS consists of selectors and declarations. Selectors are used to specify the HTML elements to which styles are to be applied, while declarations define the styles to be applied. The following are some important basic concepts:

1. Selector

The selector is the code that indicates which HTML element will be styled. Selectors can be tag selectors, class selectors, ID selectors, etc., which are introduced below.

(1) Tag selector

The tag selector is the most commonly used selector, which matches the tag name of the element in the HTML document. For example, the following code will set the text color of all

elements to red:

h1 {
    color: red;
}

Copy after login

Copy after login

(2) Class selector

The class selector uses . plus the class name to match. For example, the following code will center the text of an element with class "text-center":

.text-center {
    text-align: center;
}

Copy after login

(3) ID selector

The ID selector uses # plus the ID name to match. Each element in an HTML document can only have one ID, so there can only be one element matched by the ID selector. For example, the following code will set the background color of the element with the id "main" to white:

#main {
    background-color: white;
}

Copy after login

2. Declaration

The declaration refers to the style description applied to the corresponding HTML element. A declaration consists of attributes and values. For example, the following code will set the text color of all

elements to red:

h1 {
    color: red;
}

Copy after login

Copy after login

Here, color is the attribute name, and red is its attribute value. Each statement needs to be written within curly braces and ended with a semicolon.

2. CSS syntax

The syntax of CSS is very simple, just like key-value pairs. Each CSS rule consists of a selector and a declaration block wrapped in curly braces, as shown below:

选择器 { 属性: 值; 属性: 值; }

Copy after login

In this rule, the selector refers to the HTML element to which CSS styles are applied, and the attributes and The value is the description of the CSS style itself. For easier reading, multi-line rules often use indentation and line breaks to organize code.

The following is some CSS code for applying a gradient background:

body {
    background: linear-gradient(to right, #00bfff, #007fff);
}

Copy after login

This rule indicates that a gradient background is applied to the body element of the document. The style will appear in a gradient from left to right, from #00bfff (light blue) to #007fff (dark blue).

3. Application of CSS

In HTML documents, you can directly use inline styles or use external style sheets to apply CSS styles.

1. Inline style

Inline style attributes are directly embedded into HTML tags in the form of inline styles. For example, the following code will set the text color of the element to red:

<span style="color: red;">Hello, CSS!</span>

Copy after login

However, inline styles only apply to the specified HTML element and cannot be inherited by other elements. Therefore, it inevitably makes the HTML code more complex.

2. External style sheet

In order to avoid using inline styles to cause confusion in HTML code, we can use external style sheets. External style sheets are saved separately from HTML documents in the form of .css files, making page maintenance more convenient. The following is a simple example of an external style sheet:

/* 在style.css文件中定义以下规则 */

h1 {
    color: red;
}

.text-center {
    text-align: center;
}

#main {
    background-color: white;
}

Copy after login

In this example, three rules are defined in the CSS file, corresponding to

, class "text-center" and id in HTML is the element of "main". To use this CSS file, we need to add the following tags to the HTML file:

<!-- 在HTML中引用style.css文件 -->
<link rel="stylesheet" type="text/css" href="style.css">

Copy after login

In this way, the HTML document will automatically apply the styles defined in the rules.

4. Summary

CSS is a very important design language, which makes web pages more beautiful, easy to read and easy to maintain. Understanding the basic concepts, syntax and practical application of CSS is an essential foundation for web design. I hope this article can help you better master the use of CSS.

The above is the detailed content of How to use css. For more information, please follow other related articles on the PHP Chinese website!