一般的な CSS 形式とは何かを要約する-フロントエンドQ&A-php.cn

一般的な CSS 形式とは何かを要約する

PHPz

リリース： 2023-04-06 09:18:53

オリジナル

4185 人が閲覧しました

CSS は Web デザインに不可欠な部分です。さまざまなテキスト形式と言語が用意されており、Web ページの作成、レイアウト、デザインに使用できます。この記事では、いくつかの一般的な CSS 形式と言語、およびそのアプリケーションを紹介します。

1. CSS テキスト形式

インラインスタイル

インラインスタイルは、HTML タグ内でスタイルを直接指定する方法です。通常、特定の効果を持つ単一の要素に対して使用されます。

例:

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

ログイン後にコピー

埋め込みスタイルシート

埋め込みスタイルシートは、同じドキュメントのメソッド内で複数の要素に何を持たせるかを指定するスタイルです。埋め込みスタイルシートは通常、HTML ヘッダーに配置されます。

例:

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

ログイン後にコピー

外部スタイルシート

外部スタイルシートは、HTML ドキュメントとは別の CSS ファイルです。複数の HTML ドキュメントで同じ外部スタイルシートを使用できます。

例:

CSS ファイル (style.css):

p {
  color: red;
}

ログイン後にコピー

HTML ファイル:

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

ログイン後にコピー

2. CSS 言語

Exceptこれらのテキスト形式に加えて、CSS にはさまざまなアプリケーションで使用できるさまざまな言語もあります。

Sass

Sass は、人気のある CSS プリプロセッサです。変数、ネスト、関数、ミキサーなどの高度な機能を使用して、CSS をより速く簡単に作成できます。

例:

$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;
  }
}

ログイン後にコピー

Less

Less は、Sass に似ていますが、構文が異なる別の CSS プリプロセッサです。 Less を使用すると、変数、ネスト、関数、ミキサーなどのさまざまな機能を使用できます。

例:

@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;
  }
}

ログイン後にコピー

PostCSS

PostCSS は、開発者が JavaScript を使用してプラグインを作成できるようにする「コンバーター」です。これにより、CSS を作成するときにより複雑なコードを使用できるようになります。機能。

例:

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

display: flex;

ログイン後にコピー

生成:

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

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

ログイン後にコピー

3. 概要

CSS は常に進化しており、Web ページの外観と形式を確立するだけではありません。だけでなく、CSS をより速く簡単に作成できるようになります。純粋な CSS を使用する場合でも、CSS プリプロセッサを使用する場合でも、より効率的で保守しやすい CSS コードを作成するのに役立ちます。この記事が CSS テキストの書式設定と言語についての理解を深めるのに役立つことを願っています。

以上が一般的な CSS 形式とは何かを要約するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。