页面中,有很多样式标签:div标签,对标签定位的地方有:
1.<head>标签里加<style>标签,在<style>标签中添加样式。如:
<style> .c1{ background-color: pink; height: 100px; width: 100px; } </style>
2.在<div>标签里直接加sytle属性,在属性中添加style样式。如:<div style=‘xxx’>
3.在head标签里添加<link>标签,如: <link rel='stylesheet' href='xxx.css'>
对div定位的方式分:
1.id选择器:用#标记,对id为il块进行定义样式,首先保证body中必须定义一个id='il'。注:一个html页面中,不可用存在相同的Id
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #il{ border: 1px red solid; height: 20px; width: 20px; background-image: url('http://ui.imdsx.cn/static/image/icon.png'); background-repeat: no-repeat; background-position: 0 0; } </style> </head> <body style="margin: 0 auto"> <div id="il"></div> #必须在body中定义一个id为il </body> </html>
预览图如下:
2.class选择器。用点.来标记,在body中对class属性进行定义,然后再style样式里定义属性的样式。如图:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ height: 100px; width: 100px; border: 1px red solid; text-align: center; line-height: 100px } </style> </head> <body style="margin: 0 auto"> <div class="c1">1</div> #必须在body中定义class的属性 </body> </html>
显示样式如图:
3.标签选择器。在style里定义标签后,这个样式将会影响所有的相同标签的样式,只是假如有其他Id或class属性同时定义时,标签选择器的优先级将低于id或class的定义方式。假如在style定义一个div{}的标签,那么body中所有的div标签将会应用该样式。
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ #这里定义标签选择器div,在body里的所有的div标签将会受到影响,但是当div标签里有定义id或class时,div定义的样式优先级低于id或class标签的样式 height: 100px; width: 100px; border: 1px red solid; background-color: greenyellow; }
.c1{
height: 50px;
width: 50px;
background-color: greenyellow;
border: 1px solid rebeccapurple;
}
</style> </head> <body style="margin: 0 auto"> <div> </div> <div class="c1"></div> #这里定义class="c1",因此在style里.c1的样式定义优先级要高于style中div的样式 <div style="width: 100px;height: 48px;background-color: red;float: left"></div> </body> </html>