根据web标准结构,样式,行为相分离,会使用外部引用.
外部css文件与html关联
1.id关联(适用于一一对应)
html中:
<div id="one">一号</div>
css中:
#one{background-color: blue;}
2.class关联(可用于多对多)
html中:
<div class="one">一号</div>
<div class="one">1号</div>
css中:
.one{background-color: blue;}
.two{color: #F40;}
3.标签关联:
html中:
<div>一号</div>
css中:
div{color:#F40;}
4.父子标签关联:
html中:
<div> <em> <span>inner</span> </em> </div> <span>outer</span>
css中:
em span{color:#F40;}
或
div span{color:#F40;}结果一样
5.直接子元素
<div>
<em>son</em>
<span>
<em>inner</em>
</span>
</div>
<span>outer</span>
css中:
div > em{color:#F40;}(作用对象为son)
6.并列关联
html中:
<div>一号</div>
<div class="one">one</div>
<p class="one">1</p>
css中:
div.one{color:#F40;}
7.多组关联
html中:
<div>1</div>
<em>2</em>
<p>3</p>
css中:
div,em,p{color:#F40;}
8.html使用link标签
<head>
<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
</head>
<body>
<h1>我通过外部样式表进行格式化。</h1>
<p>我也一样！</p>
</body>
以上关联方式优先性:!important>行间样式(html标签中使用style属性)>id>class>标签>伪元素>通配符(*).
扫一扫
580
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
