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

CSS IDセレクター(3)_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:46:39

オリジナル

1175 人が閲覧しました

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;}

ログイン後にコピー