ホームページ >ウェブフロントエンド >CSSチュートリアル >div+css Webページレイアウトデザインの新たな始まり(3)

div+css Webページレイアウトデザインの新たな始まり(3)

黄舟オリジナル: 2016-12-29 14:17:131198ブラウズ

以下は組み合わせセレクターの紹介です
組み合わせセレクターとは同じ属性をまとめるという意味です

例えば

<h1>标题</h1>
<h2>标题</h1>
<h3>标题</h1>
<h4>标题</h1>
<h5>标题</h1>

この5種類のタイトルの文字を赤色にしたいのですが、当然ながら1つずつ定義するのは面倒です。
このようにできます



 

<h1>标题</h1>
<h2>标题</h1>
<h3>标题</h1>
<h4>标题</h1>
<h5>标题</h1>

もちろん、ID セレクター、クラスセレクター、ラベルセレクターを組み合わせることもできます

,a,#b,div{
color:red
}

それらはカンマで区切る必要があることに注意してください
カンマで区切られていない場合は、親子セレクターについては以下で説明します

<div id="a">
<h1>标题</h1>
<h1>标题</h1>
<h1>标题</h1>
<h1>标题</h1>
<h1>标题</h1>
<div>

div 内のすべての Hi タグを赤色にしたい場合
方法はたくさんあります。1 つはタグセレクターを使用することですが、すべての H1 タグがオンになります。そうでない場合は、classタグを使用することもできますが、h1タグごとにクラス化するのは面倒です

これで大丈夫です



 

<div id="a">
<h1>标题</h1>
<h1>标题</h1>
<h1>标题</h1>
<h1>标题</h1>
<h1>标题</h1>
<div>

これ大丈夫です

<div id="a">
<a><h1>标题</h1></a>
<a><h1>标题</h1></a>
<div>

それは非常に簡単です、実際、親の選択はそれを制御できます以下の任意のタグ、クラス、またはIDセレクター、つまり孫または曾孫です
したがって、これも可能です



 

<div id="a">
<a><h1>标题</h1></a>
<a><h1>标题</h1></a>
<div>

しかし、それは可能ですこれを行わないことをお勧めします。レベルが明確でないと混乱しやすいためです

もう 1 つの属性セレクターですが、あまり一般的には使用されません



 

<div id="a">
<a><h1>标题</h1></a>
<a><h1>标题</h1></a>
<div>

もっと学習する必要があります

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
[title]{
color:red;
}
</style> <head>
<body>
<div id="a">
<a title="a"><h1>标题</h1></a>
<a title="b"><h1>标题</h1></a>
<div>
</body>
</html>

ドキュメントの説明は役に立つだけです

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

のみ有効です

属性セレクターは、クラスや ID のないフォームのスタイルを設定する場合に特に役立ちます:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


 


标题
标题

ただし、コンテンツを習得するために必要なトレーニングを行う必要はありません

隣接セレクターの紹介
これは難しいかもしれません理解してください

input[type="text"]
{ width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial; } 
input[type="button"] { width:120px; margin-left:35px; display:block; font-family: Verdana, Arial; }

これは実際には最初のpのスタイル用です Margin-top:50pxは外側のマージン50ピクセルを意味します

サブ要素セレクターもあります。これも理解するのが難しいです

まず下を見てください

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 + p {margin-top:50px;} </style> <head>
<body>
<h1>标题</h1>
<p>我离上面标题50px</p>
<p>不变</p>
<p>不变</p>
</body>
</html>

これは非常におなじみの、親子セレクターです。父親は以下の子要素を制御できると言いましたので、両方とも赤色になります
私が望むだけであれば。 a を p の子要素にし、もう 1 つの a をspan 要素の子にする、これがそのはずです

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p a {color:red;} </style> <head>
<body>
<p>你<a>好</a>吗</p>
<p>你<span><a>好</a></span>吗</p>
</body>
</html>

これらのセレクターの両方にを追加する必要があります (もちろん、これが唯一のものではありません)。 )、そうでない場合は無効になります

これら 2 つのセレクターは非常に柔軟性があり、専門家として進歩することができ、初心者としても他のセレクターのための強固な基礎を築きましょう

ここで重要なコンテンツ div ボックスモデルです

これはW3Cの写真です、別の写真を見ています

div+css Webページレイアウトデザインの新たな始まり(3) 実際、見るだけで理解できます

div+css Webページレイアウトデザインの新たな始まり(3) 上記はdivの新たな始まりの内容です+css Web レイアウト設計 (3) 関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：div+css Webページレイアウトデザインの新たな始まり(2)次の記事：div+css Webページレイアウトデザインの新たな始まり(2)

続きを見る

div+css Webページレイアウトデザインの新たな始まり(3)

标题

标题

関連記事