Summarize what are the common CSS formats-Front-end Q&A-php.cn

Summarize what are the common CSS formats

PHPz

Release： 2023-04-06 09:18:53

Original

4308 people have browsed it

CSS is an integral part of web design. It comes in many different text formats and languages and can be used to create, lay out, and design web pages. This article will introduce some common CSS formats and languages and their applications.

1. CSS text format

Inline style

Inline style is a method of directly specifying styles in HTML tags. It is usually used on a single element with a specific effect.

Example:

<p style="color: red">这是一个红色段落</p>

Copy after login

Embedded style sheet

An embedded style sheet is a style that specifies what multiple elements should have in the same document Methods. Embedded style sheets are usually placed in the HTML header.

Example:

<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>
<body>
  <p>这是一个红色段落</p>
</body>

Copy after login

External style sheet

An external style sheet is a CSS file that is separate from the HTML document. Multiple HTML documents can use the same external style sheet.

Example:

CSS file (style.css):

p {
  color: red;
}

Copy after login

HTML file:

<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>这是一个红色段落</p>
</body>

Copy after login

2. CSS language

Except In addition to these text formats, CSS also comes in a number of different languages that can be used in different applications.

Sass

Sass is a popular CSS preprocessor. It allows you to use advanced features like variables, nesting, functions, mixers, and more to write CSS faster and easier.

Example:

$primary-color: #333;
$secondary-color: #444;

body {
  font-family: Arial, sans-serif;
}

h1 {
  color: $primary-color;
  font-size: 24px;
}

a {
  color: $secondary-color;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

Copy after login

Less

Less is another CSS preprocessor that is similar to Sass but has a different syntax. Less allows you to use various features such as variables, nesting, functions, mixers and more.

Example:

@primary-color: #333;
@secondary-color: #444;

body {
  font-family: Arial, sans-serif;
}

h1 {
  color: @primary-color;
  font-size: 24px;
}

a {
  color: @secondary-color;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

Copy after login

PostCSS

PostCSS is a "converter" that allows developers to write plugins using JavaScript so that when writing CSS Use more complex functions.

Example:

/* 在PostCSS中使用自动前缀插件 */

display: flex;

Copy after login

Generation:

/* 自动前缀后的代码 */

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;

Copy after login

3. Summary

CSS is constantly evolving. It can not only establish the appearance and format of web pages, but also Allows you to write CSS faster and easier. Whether you use pure CSS or use CSS preprocessors, they help create more efficient and maintainable CSS code. Hopefully this article helps you better understand CSS text formatting and language.

The above is the detailed content of Summarize what are the common CSS formats. For more information, please follow other related articles on the PHP Chinese website!