HTML和CSS学习笔记第10章——div和span

最新推荐文章于 2022-08-29 17:40:09 发布

BCadillac

最新推荐文章于 2022-08-29 17:40:09 发布

阅读量287

点赞数

分类专栏： HTML和CSS学习笔记文章标签： css html

本文链接：https://blog.youkuaiyun.com/BCadillac/article/details/107452877

版权

HTML和CSS学习笔记专栏收录该内容

11 篇文章

订阅专栏

本文深入探讨了CSS中div和span元素的使用技巧，包括如何利用text-align进行元素对齐，以及span元素在文本样式变化中的作用。同时，详细解析了a元素的链接状态及其对应的伪类样式，如:link、:visited和:hover，以及如何通过!important声明提高样式的优先级。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

返回主目录

<div>

可以使用<div>分隔区域。

在块元素中用text-align来设置其中的所有元素对齐样式。内联元素无法使用text-align。想让图片居中就需要将图片加入块元素。

text-align:center;

内联的分块元素：<span>

使用<span>可以很方便地在一个文本中使用不同的样式。

<ul>
  <li><span class="cd">Buddha Bar</span>,<span class="artist">Claude Challe</span></li>
  <li><span class="cd">When It Falls</span>,<span class="artist">Zero 7</span></li>
  <li><span class="cd">Earth 7</span>,<span class="artist">L.T.J. Bukem</span></li>
  <li><span class="cd">Le Roi Est Mort</span>,<span class="artist">Vive Le Roi!, Enigma</span></li>
  <li><span class="cd">Music for Airports</span>,<span class="artist">Brian Eno</span></li>
</ul>

/*在样式表中*/
.cd{
  font-style:italic;
}
.artist{
  font-weight: bold;
}

效果：
在这里插入图片描述

<a>元素和它的几个特征

链接有几个状态：未被访问的（默认蓝色）、已访问的（默认紫色）、鼠标停留在链接上（hovering、此时显示title工具条、样式不固定）及其他。


a:link{	/*未被访问*/
  color:green;
}
a:visited{/*已被访问*/
  color:red;
}
a:hover{/*鼠标停留*/
  color:yellow;
}

如果直接对<a>样式化，如

a{color:red;}

这样会使链接各种状态都是红色。

其他的链接状态
focus聚焦状态、active激活状态。在这里插入图片描述

伪类

伪类（pseudo-class），也就是假的类。之前提到的css类，是当某个元素处于某种状态时，就属于该类，就会让该类的样式应用到该元素上。现在，假如当<a>处于不同的状态，就会采用相应状态的样式，就好像采用了不同的类一样。

优先级

可以在属性声明末尾添加“!important”，忽略一种样式。比如

h1{
	fat-size:200%!important;
}

这就会忽略所有同属性的样式，使该语句具有最高优先级。

一个选择符的具体度：有id的 > 有类或伪类的 > 有元素名