CSS IDセレクター(3)_html/css_WEB-ITnose
1. ID セレクター
ID セレクターは、「#」プレフィックス識別子を使用して識別し、その後に指定された要素の ID 名を使用します。
など
#box{ width:100px; height:100px;}要素の ID 名は一意であり、ドキュメント内の特定の要素にのみ対応します。 HTML では、フレームワーク全体の構築に使用されるタグで ID 属性を定義する必要があります。これは、ボックスを含むロゴ、ナビゲーション バー、ボックスを含む本文、著作権領域など、これらのオブジェクトは一般に一意で固定されており、ページ上で繰り返されないためです。等
2. ID設定ページのレイアウト
<!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" /><link type="text/css" rel="stylesheet" href="css/test4.css" /><title>测试ID</title></head><body><div id="header"><!--头部模块--> <div id="logo"></div><!--网站logo--> <div id="banner"></div><!--广告条--> <div id="nav"></div><!--导航条--></div><div id="main"><!--主体模块--><div id="left"></div><!--左侧通栏--><div id="content"></div><!--内容--></div><div id="footer"><!--底部模块--><div id="copyright"></div><!--版权信息--></div></body></html>
@charset "utf-8";/* CSS Document */#header{ margin:0 auto; width:960px; height:210px; border:solid 1px #000000;}#logo{ width:100px; height:100px; border:solid 1px #000000; float:left;}#banner{ margin-left:30px; float:left; width:800px; height:100px; border:solid 1px #000000;}#nav{ clear:both; margin:0 auto; width:800px; height:100px; border:solid 1px #000000;}3. 外部ID内部クラス属性
<!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" /><link type="text/css" rel="stylesheet" href="css/test3.css" /><title>ID选择器</title></head><body><div id="father"><div class="child1"></div><div class="child2"></div><div class="child3"></div></div></body></html>
@charset "utf-8";/* CSS Document *//* 父级样式*/#father{ width:500px; height:500px; border:solid 2px blue; margin:5px;}/* 通过父级样式设置父级样式下的标签div模式*/#father div{ width:100px; height:100px; border:solid 1px red; padding:10px; margin:10px; background-color:#0000FF;}/* 通过父级样式设置父级样式下的类*/#father .child1{ width:100px; height:100px; margin:20px; padding:10px; border:solid 5px #FF00FF; background-color:#66FF00;}/* 通过父级样式设置父级样式下的类*/#father .child2{ width:100px; height:100px; margin:10px; padding:10px; border:solid 5px #00FF00; background-color:#FF0000;}/*这里直接设置类样式不起作用因为上面通过#father div已经设置过了，这里的类选择器优先级小于标签选择器*/.child3{ width:100px; height:100px; margin:10px; padding:10px; border:solid 10px #0000FF; background-color:#FF00FF;}
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1655
14
1414
52
1307
25
1253
29
1228
24
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
HTML、CSS、およびJavaScriptの理解：初心者向けガイド
Apr 12, 2025 am 12:02 AM
webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTMLでの開始タグの例は何ですか？
Apr 06, 2025 am 12:04 AM
Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
CSS3とJavaScriptを使用して、クリック後に周囲の写真を散乱および拡大する効果を実現する方法は？
Apr 05, 2025 am 06:15 AM
画像をクリックした後、散乱と周囲の画像を拡大する効果を実現するには、多くのWebデザインがインタラクティブな効果を実現する必要があります。特定の画像をクリックして周囲を作成してください...
HTML、CSS、およびJavaScript：Web開発者に不可欠なツール
Apr 09, 2025 am 12:12 AM
HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。
HTML：構造、CSS：スタイル、JavaScript：動作
Apr 18, 2025 am 12:09 AM
Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。
HTMLの未来：ウェブデザインの進化とトレンド
Apr 17, 2025 am 12:12 AM
HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。
