ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSスタイルセレクター
CSSスタイルセレクター
- 高洛峰オリジナル
- 2017-02-14 15:04:321753ブラウズ
cssとは英語のCascading Style Sheetsの略で、カスケードスタイルシートと呼ばれ、ページを美しくするために使われます。
要素インライン、ページ埋め込み、外部導入の3つの存在方法があります。 3 つの方法の長所と短所を比較してください。
構文: style='key1:value;key2:value2;'
タグ内で style='xx:xxx;' を使用します
ページに埋め込む: e7984a4dc276f433f24883c17fc6c00d ブロック
は外部 CSS ファイルを導入します
必要性: ページのカラー マッチングと画像の美化はアーティストが担当し、開発者はその実装方法を知っている必要があります。
上記の 3 つの方法をそれぞれ使用する方法を見てみましょう:
1. タグ内に 8c32cecf4c8e7662a6044b98e4902fed を埋め込みます。ページの 8c32cecf4c8e7662a6044b98e4902fed
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/css"; charset="UTF-8">
<title>页面一</title>
<link rel="stylesheet" href="commom.css" />
</head>
<body>
<div style="background-color:red;">123</div>
</body>
</html>は、コードに c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 のコード ブロックを追加してから、次のコードは繰り返し呼び出すことができます
3. 外部 CSS ファイルを導入します
カスタム CSS スタイルを参照する必要がある HTML ファイルが複数ある場合、2 番目の方法に従って、各 HTML でスタイルを定義する必要がありますこの問題を解決するには、ファイルを定義し、カスタム スタイルを記述し、そのファイルからこのスタイルを呼び出すことができます。
styleの書き方:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/css"; charset="UTF-8">
<title>页面一</title>
<link rel="stylesheet" href="commom.css" />
<style>
.logo{
background-color:red;
}
</style>
</head>
<body>
<div class='logo'>123456</div>
<div class='logo'>aaa</div>
</body>
</html>1. クラスセレクター
.logoがclass='logo'を意味する場合、idセレクター
#logoはid='logoを意味します。 ' 、このスタイルを参照します
3. 組み合わせセレクター セレクター
a、div はすべての a タグと div タグがこのスタイルを参照することを意味します
4. アソシエーション セレクター
a div は階層関係を意味します、つまり、a タグの下にあるすべての div タグがこのスタイルを適用します。
5. 属性セレクター
input[type='text']、タイプ「text」のすべてのタグがこのスタイルを参照することを示します
CSS スタイル セレクター関連の記事については、PHP 中国語 Web サイトに注目してください。