CSS スタイルの基本

jackloveオリジナル: 2018-05-21 11:24:431922ブラウズ

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

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

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

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

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

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

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

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 サイトに注目してください。

CSS スタイルの基本

関連記事