How to write good css-Front-end Q&A-php.cn

How to write good css

PHPz

Release： 2023-04-06 14:00:30

Original

860 people have browsed it

CSS (Cascading Style Sheets) is a language used to control the layout and style of web pages. How to write CSS is a skill that every front-end developer needs to master. This article will introduce how to write CSS well.

1. Understand basic syntax

Before starting to learn CSS, we need to understand some basic syntax. CSS can be divided into internal style sheets, external style sheets and inline style sheets. Among them, internal style sheets are written directly in HTML files, external style sheets are written in independent CSS files, and inline style sheets are written directly in HTML tags.

For example:

<!DOCTYPE html>
<html>
  <head>
    <title>示例</title>
    <style type="text/css">
      p {
        color: red;
      }
    </style>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <p style="color: blue;">这是一段文字</p>
  </body>
</html>

Copy after login

In this example, we use both internal style sheets and external style sheets, and also use inline style sheets.

CSS syntax is mainly composed of selectors and attributes. Selectors are used to select HTML elements, and attributes are used to control the style of elements. Common properties include background, color, font size, borders, margins, etc.

2. Use of selectors

Selectors are one of the most basic concepts in CSS. Different selectors can select different HTML elements. The following are some common selectors:

tag selector

The tag selector is one of the most commonly used selectors. For example:

p {
  color: red;
}

Copy after login

This selector will select all  elements.

Class selector

The class selector is identified by . and is applied to elements with the same class name. For example:

.red {
  color: red;
}

Copy after login

This selector will select all HTML elements with class="red".

ID Selector

The ID selector is identified by the # number and applies to unique HTML elements. For example:

#header {
  background-color: gray;
}

Copy after login

This selector will select the HTML element with id="header".

Descendant selector

The descendant selector uses spaces to select child elements in the parent element. For example:

div p {
  color: red;
}

Copy after login

This selector selects all  elements within the <div> element.

Pseudo-class selector

Pseudo-class selector is used to select HTML elements in a special state or position. For example:

a:hover {
  text-decoration: underline;
}

Copy after login

This selector selects the state when the mouse is hovering over the <a> element.

3. Master common attributes

There are many attributes in CSS, but some are more commonly used and we need to master them proficiently. The following are some common attributes:

Background attribute

The background attribute is used to control the background of the element, including color, picture, repeatability, etc. For example:

body {
  background-color: #f1f1f1;
  background-image: url('background.jpg');
  background-repeat: no-repeat;
}

Copy after login

This style places a background image named background.jpg in the lower right corner of the page.

Font properties

Font properties are used to control the font, font size, color, etc. of text. For example:

h1 {
  font-family: Arial;
  font-size: 24px;
  color: #333333;
}

Copy after login

This style sets the font of all <h1> title elements to Arial, the font size to 24px, and the color to #333333.

Border attribute

The border attribute is used to control the border of the element. For example:

div {
  border: 1px solid #e5e5e5;
  border-radius: 10px;
}

Copy after login

This style sets the border of the <div> element to 1px wide, the color to #e5e5e5, and the border rounded corners to 10px.

Size attributes

The size attributes are used to control the size of HTML elements, including width, height, outer spacing, inner spacing, etc. For example:

img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  padding: 5px;
}

Copy after login

This style sets the width of all images to 100%, the height to automatically adjust, the outer bottom margin to 10px, and the inner margin to 5px.

4. Use style inheritance

Style inheritance in CSS can reduce code duplication and improve code maintainability. For example:

body {
  color: #333333;
  font-size: 16px;
}

h1 {
  font-size: 24px;
  font-weight: bold;
}

Copy after login

This style defines the color of all text to be #333333 and the font size to be 16px. <h1>The title element inherits the same color, but different font size and weight.

5. Use composite styles

In CSS, multiple attribute values can be combined into a composite style. This can reduce the amount of code and make the code more concise. For example:

border: 1px solid #e5e5e5;

Copy after login

This style defines a composite style composed of three attribute values: border width is 1px, border style is solid line, and border color is #e5e5e5.

6. Use CSS preprocessor

The CSS preprocessor is a tool that compiles CSS code into a more advanced CSS language. They extend the functions of CSS, including variables, functions, nesting, etc., making writing CSS more convenient and faster. Currently, the more popular CSS preprocessors include Sass, Less, Stylus, etc.

7. Summary

The above are some basic points on how to write CSS well. Mastering basic syntax, selectors, common attributes, style inheritance and composite styles can enable us to write concise, flexible and easy-to-maintain CSS code.

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