CSS スタイルの基本-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS スタイルの基本

jacklove

May 21, 2018 am 11:24 AM

css 基本知識スタイル

この記事では、CSS スタイルの基本的な知識を紹介します。

スタイルを導入する方法は何通りありますか? link と @import の違いは何ですか?

スタイルを導入するには次の 3 つの方法があります:

外部導入
を導入するには主に link タグまたは @import タグを使用します。外部スタイルファイルから .css という接尾辞を付けます。構文は次のとおりです:

@import url(path+### .css) ;

埋め込み
現在のタグにスタイルを書き込みます。構文は次のとおりです:

<style>
   p {color:red;    text-align:center;
 }</style>

ログイン後にコピー

Inline
追加するスタイルの開始タグにスタイルを追加します (追加することはできません)。終了タグに追加されます)、構文は次のとおりです:

I am the P タグの内容

link と @ の主な違いインポートは次のとおりです:

ブラウザの読み込み順序の違い。 (最初にリンクをロードし、次に @import をロードします)

link は @import よりも優れた汎用互換性を持っています

link はスタイルを変更するための DOM の制御に JS を使用することをサポートしていますが、@import は

ファイルパス ../main.css をサポートしていません。 , ./main.css と main.css の違いは何ですか?

../main.css は上位ディレクトリにある main.css ファイルを表します

./main.css は、次のディレクトリにある main.css ファイルを表します現在のディレクトリ

main.css は現在のディレクトリを表します main.css ファイルは ./main.css に相当します

console.log は何に使用されますか? Console.log は主に開発とデバッグに使用され、デバッグされた内容が表示されます検査要素のコンソール内のオブジェクト。この関数は、alert() と同等です (あまり理解できていないため、詳しく学ぶ必要があります)

text-align: justify とは

主に、レイアウトの両側を揃えるために中央の隙間を調整するために使用されます。大きな段落のテキスト。

px、em、rem とはそれぞれ何ですか?違いは何ですか?

px をピクセル単位として使用する方法は通常ハードコードされており、他の干渉要因はありません。

em と rem は相対単位であり、変更可能です。 em は親要素を基準としたユニットサイズの変化、rem はルートノードを基準としたユニットサイズの変化です。例:

<!DOCTYPE html><html style="font-size:15px"> <!--这里是根节点，设置为15px--><head>
  <title>px.em.rem区别</title></head>
  <body>我是body内容  
  <h1>我是标题内容</h1>
  <div  style="font-size:2em;border:red 1px solid"><!--em相对于父级html，html为15px，2em相当于30px-->
  我是div内容  <p style="font-size:2em">我是em</p>  <!--em相对于父级div,div为30px，2em相当于60px--><p style="font-size:2rem">我是rem</p><!--rem是相对于根节点，根节点为15px，2rem相当于30px--></div></body></html>

ログイン後にコピー

この記事では CSS スタイルの基礎知識を紹介します。その他の関連コンテンツについては、php 中国語の Web サイトに注目してください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7751

Java チュートリアル

1643

CakePHP チュートリアル

1397

Laravel チュートリアル

1293

PHP チュートリアル

1234

Related knowledge

VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。

HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTML、CSS、およびJavaScriptの理解：初心者向けガイド Apr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

ブートストラップにスプリットラインを書く方法 Apr 07, 2025 pm 03:12 PM

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

ブートストラップのフレームワークをセットアップする方法 Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。

ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。