Question

我觉得我做的事情是愚蠢的。我有一个现有的网站，我正在努力将尽可能多的演示代码移动到样式表中。我对html和css都有一些过时的经验。

我有一个样式表，其中包括以下内容......

.social-sites-img {
  width:24px;
  height:24px;
  vertical-align:bottom; 
}

和

.social-sites {
  margin: 0;
  padding: 0;
  position: absolute;
 right: 3px;
 top: 10px;
}

...我有一段HTML，其中包括以下内容......

<body class="window">
    <div class="wrapper">
        <div class="page">
            <!-- ==== START MASTHEAD ==== -->
            <header class="masthead" role="banner">
                <div class="logo"><img src="images/xxxxx.gif" alt="xxxxx" /></div>
                <div class="social-sites">
                    <a href="https://www.facebook.com/xxxxx" target="_blank">
                        <img class="social-sites-img" src="images/facebook.png" alt="Visit xxxxx on Facebook" />                
                    </a>
                    <a href="http://www.linkedin.com/in/xxxxx" target="_blank">
                        <img src="images/linkedin-icon.png" alt="View xxxxx's LinkedIn profile" align="bottom" width="24" height="24"/>             
                    </a>            
                </div>

计划是在页面的右上角显示几个社交媒体图标和链接。

在我开始搞乱之前，两个图标的html看起来都一样，就像上面的“LinkedIn”元素一样。因此，硬连线的高度，宽度和对齐方式。 Ant按预期显示的代码。将“Facebook”元素移动到CSS后，我看到以下内容：

enter image description here

换句话说，看起来样式表数据没有被提取。唯一的问题是，查看应用于页面其余部分的样式，样式表中的其他内容被选中。

在此背后，我真的有两个问题：

对任何人来说，这里发生的事情是否立即显而易见？如果它有帮助，我在开发框中使用Chrome，但希望完成的网站全面运作
是否有我可以使用的现成工具，例如浏览器插件，这将帮助我更好地了解哪些样式应用于特定元素？如果再次出现，我有一个良好的开端？

到目前为止我尝试过的事情主要是关于类的名称，也使用一个独特的类（social-sites-img）而不是捎带例如social-sites.a.img。但是我对整个主题缺乏了解，这也让我有所回头。

Answer 1

好吧，我只是通过以下小调整对它进行了排序：

.social-sites img {
width: 24px;
height: 24px;
vertical-align: bottom;
}

和

<div class="social-sites">
    <a ...
        <img src="images/facebook.png" alt="Visit xxxx on Facebook" />              
    </a>
    <a ...
        <img src="images/linkedin-icon.png" alt="View xxxx's LinkedIn profile" />               
    </a>
</div>

所以我有点离开了它的工作情况，但我不确定我做了什么让它发挥作用。

我确实记得这种情况发生在我以前经常进行网络编程时（10年前以前），但我想我希望有更少的＆＃34;随机＆＃34;这些天的影响。我仍然无法看到我的原始代码有什么问题（我最后搜索了大量的css代码，d＆＃39;哦！）。

无法使用CSS设置图像属性

1 个答案: