CSSタグセレクター(2)_html/css_WEB-ITnose-htmlチュートリアル-php.cn

1. CSS セレクターの概要

1.1. CSS 関数

1.2、CSS選択タイプ

1.3、CSSの基本構文

2. タグセレクター

2.1 タグセレクターの概要

2.2. タグセレクターを使用する利点と欠点:

2.3. では、タグセレクターはどのような状況で使用する必要があるのでしょうか?

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSSタグセレクター(2)_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:46 AM

1. CSS セレクターの概要

1.1. CSS 関数

CSS 言語には、マッチングとレンダリングという 2 つの基本的な機能があります

ブラウザは、CSS スタイルを解析するときに、どの要素をレンダリングする必要があるかを最初に決定する必要があります。どの要素を一致させる必要があるか、この操作は CSS スタイルのセレクターによって識別されます。

特定のオブジェクトと一致した後でのみ、ブラウザーは CSS スタイル宣言に基づいてレンダリング効果を決定し、適切なタイミングでページ上に表示できます。

1.2、CSS選択タイプ

タグセレクター

IDセレクター

クラスセレクター

特殊セレクター

1.3、CSSの基本構文

2. タグセレクター

2.1 タグセレクターの概要

p、div、span などのドキュメントオブジェクトタイプの要素をセレクターとして使用します。

最も一般的に使用されるセレクターはラベルセレクターです。タグセレクターを使用すると、スタイルを適用する要素の名前を指定するだけで、段落、ハイパーリンク、見出し要素などの特定の種類の要素を検索できます。

タグセレクターは、要素セレクターまたは単純セレクターとも呼ばれます。

例:

/*段落字体颜色为黑色*/p{    color:black;}/*超链接显示下划线*/a{    text-decoration:underline;}/*一级标题显示为粗体效果*/h1{    font-weight:bold;}

ログイン後にコピー

2.2. タグセレクターを使用する利点と欠点:

利点: ページ上の同じタイプのタグのスタイルをすばやく統一できます。

短所: 差別化されたスタイルは設計できず、場合によっては相互に干渉します

例: 次のスタイルが Web ページのスタイルシートで定義されている場合、すべての div 要素オブジェクトの幅は 774px になるように定義されます

/*所有div元素对象定义为宽度为774px*/div{      width:774px;       }

ログイン後にコピー

次に、レイアウトに div を使用します。これを行う場合、ページ内のすべての div 要素オブジェクトの幅が 774px であるわけではないため、ページ内の各 div オブジェクトの幅を再定義する必要があります。そうしないと、非常に面倒になります。

2.3. では、タグセレクターはどのような状況で使用する必要があるのでしょうか?

ラベルにデフォルトのスタイルを定義したい場合は、ラベルセレクターを使用できます。たとえば、ul 要素を使用すると、自動的にインデントされ、リスト記号が表示されます。このスタイルでは、ラベルセレクターとして ul 要素を選択し、事前定義をクリアできます。スタイル。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>标签选择器</title><link type="text/css" rel="stylesheet" href="css/test2.css" /></head><body><h1>标签选择器</h1><p>段落设置字体为蓝色</p><a href="#">超链接没有下划线</a><ul><li><a href="#">列表1</a></li><li><a href="#">列表2</a></li><li><a href="#">列表3</a></li></ul><img alt="狗粮" src="images/003.jpg" /><a href="#"><img alt="小狗" src="images/408330.jpg" /></a><table><tr><td>姓名：</td><td><input type="text" name="username" /></td></tr><tr><td>密码 ：</td><td><input type="password" name="password" /></td></tr><tr><td><input type="submit" value="提交" /></td><td><input type="reset"  value="重置" /></td></tr></table></body></html>

ログイン後にコピー

@charset "utf-8";/* CSS Document *//*统一文档字体大小，行高，字体*/body{    font:12px Arial, Helvetica, sans-serif;    color:#000000;}/*段落字体颜色为蓝色*/p{    color:#0000FF;}/*一级标题显示为粗体效果*/h1{    font-weight:bold;}/*设置a标签的下划线为没有*/a{    text-decoration:none;}/*清除预定义样式*/ul{    margin:0px;    list-style:none;    }/*设置图像的边框为0*/img{    border:0px;}/*统一表格字体和行高*/table{    border:solid 5px #000000; /*边框实线，宽度为5px，颜色为黑色*/    font-size:12px;        /*字体大小为12px*/            color:#666;            /*字体颜色为中灰*/    line-height:200%;    /*行主为默认值的2倍*/}/*设置input标签的边框为实线，1个像素，颜色为浅灰*/input{    border:solid 1px #ddd;}

ログイン後にコピー

/*清除预定义样式*/ul{    margin:0px;    list-style:none;    }

ログイン後にコピー

ドキュメントタグ内のスタイルを統一したい場合は、タグセレクターを使用することもできます。

たとえば、ドキュメントのフォントサイズ、行の高さ、フォントを統一し、表タグセレクターを使用して表のフォントスタイルを統一し、a タグセレクターを使用してすべてのハイパーリンクの下線をクリアし、Web ページ画像の境界線をクリアします。 img タグセレクターを使用すると、a 要素に画像が埋め込まれている場合、つまりハイパーリンクオブジェクトとして使用される場合、入力タグセレクターを使用すると、統一された入力フォームの境界線が薄い灰色になります。

/*统一文档字体大小，行高，字体*/body{    font:12px Arial, Helvetica, sans-serif;}/*统一表格字体和行高*/table{    font-size:12px;        /*字体大小为12px*/            color:#666;            /*字体颜色为中灰*/    line-height:200%;    /*行主为默认值的2倍*/}/*设置a标签的下划线为没有*/a{    text-decoration:none;}/*设置图像的边框为0*/img{    border:0px;}/*设置input标签的边框为实线，1个像素，颜色为浅灰*/input{    border:solid 1px #ddd;}

ログイン後にコピー

div や span などの共通の構造要素については、タグセレクターの使用は推奨されません。共通の構造要素には幅広い用途があり、タグセレクターを使用すると相互に干渉するためです

このウェブサイトの声明

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

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

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

7363

Java チュートリアル

1628

CakePHP チュートリアル

1353

Laravel チュートリアル

1265

PHP チュートリアル

1214

Related knowledge

公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？ Mar 04, 2025 pm 12:32 PM

公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、