css文件中如何设置<a>标签的各种属性？

Posted 2023-05-11

标签属性：id, class, title, style, dir, lang, xml:lang, tabindex, accesskey
可选属性：href,target,name等
事件属性：onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup,
onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

参考资料：http://www.w3school.com.cn/tags/tag_a.asp

参考技术A a:link，定义正常链接的样式；
a:visited，定义已访问过链接的样式；
a:hover，定义鼠标悬浮在链接上时的样式；
a:active，定义鼠标点击链接时的样式。
顺序是 L V H A 参考技术B 各种属性，你是指各种状态吗？
a:link
a:visited
a:hover
a:active
定义的时候要按这种顺序。

如何在 <div> 标签内的 <a> 标签内显示图像？

【中文标题】如何在 <div> 标签内的 <a> 标签内显示图像？

【英文标题】：How to show images inside <a> tags inside <div> tags?

【发布时间】：2021-11-22 18:34:10

【问题描述】：

我正在尝试在页脚中使用 svg 文件创建社交媒体图标。如果我使用内联 CSS，它可以工作。如果我不这样做，它不会显示。我正在使用 styled-components 包。

知道如何在没有内联 css 的情况下让它工作吗？

这行得通：

<div style= width: '25px', margin: '0 5px' >
  <a href=link>
    <img src=iconName alt=(iconName, 'icon') />
  </a>
</div>

这不起作用：

const iconSocial = styled.div`
  width: 25px;
  margin: 0 5px;
`;

<iconSocial>
  <a href=link>
    <img src=iconName alt=(iconName, 'icon') />
  </a>
</iconSocial>

这也不起作用：

<div>
  <a href=link>
    <img src=iconName alt=(iconName, 'icon') />
  </a>
</div>

【参考方案1】：

.svg-img
  width: 100px;
  height: 100px

<div>
  <a href="">
    <img class="svg-img" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xNC44NTEgMTEuOTIzYy0uMTc5LS42NDEtLjUyMS0xLjI0Ni0xLjAyNS0xLjc0OS0xLjU2Mi0xLjU2Mi00LjA5NS0xLjU2My01LjY1NyAwbC00Ljk5OCA0Ljk5OGMtMS41NjIgMS41NjMtMS41NjMgNC4wOTUgMCA1LjY1NyAxLjU2MiAxLjU2MyA0LjA5NiAxLjU2MSA1LjY1NiAwbDMuODQyLTMuODQxLjMzMy4wMDljLjQwNCAwIC44MDItLjA0IDEuMTg5LS4xMTdsLTQuNjU3IDQuNjU2Yy0uOTc1Ljk3Ni0yLjI1NSAxLjQ2NC0zLjUzNSAxLjQ2NC0xLjI4IDAtMi41Ni0uNDg4LTMuNTM1LTEuNDY0LTEuOTUyLTEuOTUxLTEuOTUyLTUuMTIgMC03LjA3MWw0Ljk5OC00Ljk5OGMuOTc1LS45NzYgMi4yNTYtMS40NjQgMy41MzYtMS40NjQgMS4yNzkgMCAyLjU2LjQ4OCAzLjUzNSAxLjQ2NC40OTMuNDkzLjg2MSAxLjA2MyAxLjEwNSAxLjY3MmwtLjc4Ny43ODR6bS01LjcwMy4xNDdjLjE3OC42NDMuNTIxIDEuMjUgMS4wMjYgMS43NTYgMS41NjIgMS41NjMgNC4wOTYgMS41NjEgNS42NTYgMGw0Ljk5OS00Ljk5OGMxLjU2My0xLjU2MiAxLjU2My00LjA5NSAwLTUuNjU3LTEuNTYyLTEuNTYyLTQuMDk1LTEuNTYzLTUuNjU3IDBsLTMuODQxIDMuODQxLS4zMzMtLjAwOWMtLjQwNCAwLS44MDIuMDQtMS4xODkuMTE3bDQuNjU2LTQuNjU2Yy45NzUtLjk3NiAyLjI1Ni0xLjQ2NCAzLjUzNi0xLjQ2NCAxLjI3OSAwIDIuNTYuNDg4IDMuNTM1IDEuNDY0IDEuOTUxIDEuOTUxIDEuOTUxIDUuMTE5IDAgNy4wNzFsLTQuOTk5IDQuOTk4Yy0uOTc1Ljk3Ni0yLjI1NSAxLjQ2NC0zLjUzNSAxLjQ2NC0xLjI4IDAtMi41Ni0uNDg4LTMuNTM1LTEuNDY0LS40OTQtLjQ5NS0uODYzLTEuMDY3LTEuMTA3LTEuNjc4bC43ODgtLjc4NXoiLz48L3N2Zz4=">
  </a>
</div>

【参考方案2】：

如果您想在标签之间显示图像，那么我们有两个选项，第一个是我们的自定义图像（您还需要为其样式编写一些 css），第二个是使用 fa 图标，您可以根据您的要求使用任何方法。

<a href="">
       <img src="https://static.vecteezy.com/system/resources/thumbnails/001/993/889/small/beautiful-latin-woman-avatar-character-icon-free-vector.jpg"  srcset=""> Profile
   </a>
   <hr>
   <a href=""><i class="fa fa-facebook-square" aria-hidden="true"></i>Facebook</a>
  <a href=""> <i class="fa fa-twitter" aria-hidden="true"></i> Twitter</a>
   <a href=""> <i class="fa fa-linkedin" aria-hidden="true">Linkdin</i> </a>