从零开始的毕设--CSS(4)

Div

使用DIV就是在页面中找出逻辑区。逻辑区就是页面上彼此相关的一组元素。
在这里插入图片描述
然后使用DIV标记逻辑区:
在这里插入图片描述
在这里插入图片描述
然后可以为每个div的id赋予样式:
比如,

#cats{
	background-image:url(leopard.jpg);
}
#dogs{
	background-image:url(mutt.jpg);
}

在这里插入图片描述
另外你可能用<div>增加更多的结构,便于别人理解你的页面,以及页面的维护。
在这里插入图片描述
<div>就相当于一个容器,可以把元素放在这个容器里。
选择子孙的方法

#elixirs h2 em{
/**表示div的样式只传递给h2 em*/
	color:black;
}

在这里插入图片描述

Span

Div是一个块元素,会带来换行。
而Span是针对内联元素的,能创建内联字符和元素的逻辑分组。
比如,我想在一堆<li>里设置样式,部分字体斜体加粗。

<li>this <span class="bold">is</span> an apple</li>
<li>this <span class="bold">is</span> a pineapple</li>

当然,这里使用<em> <strong>也可以,不过不是这么准确。

指定链接样式

<a>元素和它的多重人格
比如我想要链接在悬停、已访问、未访问等状态时,链接的显示不同,可以如下:

a:link{
	color:green;
}
a:visited{
	color:red;
}
a:hover{
	color:yellow;
}

这里有点像android里面图片按下悬停松开的状态。
a:xxx 这个称为伪类。他们允许你指定样式,就像他们是类一样。但是没人在html中输入class=“xxx”。

猜你喜欢

转载自blog.csdn.net/No_Game_No_Life_/article/details/82932233