Question

我使用内联样式在我的索引文件中的五个图像周围放置一个圆角边框。如何通过在外部样式表中声明css属性/值来将此样式应用于它们。以下是索引文件http://jsfiddle.net/23nfM/embedded/result/

的演示

    !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
   <head>
      <title>pedrosdigitalsolutions.com</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <link type="image/x-icon" href="/custom pds/images/cheat_1.ico" rel="shortcut icon">
      <link media="screen" type="text/css" href="style.css" rel="stylesheet">
   </head>
   <body>
      <?php include 'header.php' ?>
      <div id="content">

           <p class="tab"><font size="7"><b>For all things</b></font><br>
            <font size="7"><b>Electronic Arduino</b></font><br>
            <font size="7"><b>and "other stuff"</b></font><br>
            <font size="6"><b>Love ♥ The Duino</b></font>
         </p>
         <img style="position:absolute; top:515px; left:692px; width:300px; height:225px; border: 1px solid #000000; border-radius: 8px" 
            src="http://www.pedroduino.com/custom pd/images/Manual Shift Register 300x225.gif">

         <img style="position:absolute; top:215px; left:692px; width:300px; height:225px; border: 1px solid #000000; border-radius: 8px" 
           src="http://www.pedroduino.com/custom pd/images/Manual LCD 300x225.gif">

         <img style="position:absolute; top:515px; left:150px; width:300px; height:225px; border: 1px solid #000000; border-radius: 8px" 
            src="http://www.pedroduino.com/custom pd/images/LCDBitmap_via_SR.gif">

         <img style="position:absolute; top:815px; left:150px; width:300px; height:225px; border: 1px solid #000000; border-radius: 8px" 
            src="http://www.pedroduino.com/custom pd/images/8_LED_Array.gif">

        <img style="position:absolute; top:815px; left:692px; width:300px; height:225px; border: 1px solid #000000; border-radius: 8px" 
            src="http://www.pedroduino.com/custom pd/images/Nicks Clock 300x225.gif">    

       </div>
     <?php include 'footer.php' ?>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" charset="utf-8"></script>
   <script type="text/javascript" src="nagging-menu.js" charset="utf-8"></script>
   </body>
</html>



    body {
    background: #efefef;
    border: none;
    color: #3F4C6B;
    font: normal 13px Verdana, sans-serif;
    margin: 0;
    padding: 0;
    text-align: center; }


#content {
    height: 950px;
    margin-bottom: 25px;
    margin: 0 auto;
    padding: 30px 0;
    text-align: justify;
    width: 950px;

     }


.default {
    -moz-box-shadow: 0 5px 20px #888;
    -webkit-box-shadow: 0 5px 20px #888;
    box-shadow: 0 5px 20px #888;
    height: 50px;
    width: 100%; }


.fixed {
    -moz-box-shadow: 0 0 40px #222;
    -webkit-box-shadow: 0 0 40px #222;
    box-shadow: 0 0 40px #222;
    left: 0px;
    position: fixed;
    top: -5px;
    width: 100%; }


#footer {
     -moz-box-sizing: border-box;
     background: none repeat scroll 0 0 #98B0D9;
     background: -webkit-linear-gradient(#98B0D9);

     height: 70px;
     position: relative;
     z-index: 1;
}


h1 { line-height: 15px; }


#header {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: linear-gradient(#606C88, #3F4C6B) repeat scroll 0 0 rgba(0, 0, 0, 0);
    background: -webkit-linear-gradient(#606C88, #3F4C6B);
    border-color: #0F1620 #000000;
    border-image: none;

    height: 93px;
    margin: 0;
    width: auto; }


#logo {
    border: medium none;
    float: left;
    margin: 0; }


#menu {
        -moz-border-radius: 5px;
        background: -webkit-linear-gradient(#c3d9ff, #98b0d9);
        background: linear-gradient(#c3d9ff, #98b0d9) repeat scroll 0 0 rgba(0, 0, 0, 0);
        border-radius: 5px;
        line-height: 50px;
        margin: 0 135px;
        margin: 0 auto;
        width: 100%;
        padding: 0;
        text-align: center;
        z-index: 5;
        float: center;
         }


#navi {
    height: 50px;
    margin-top: 0; }


ul { padding: 0; }

    ul li {
        display: inline;
        list-style-type: none;
        margin-right: 15px; }

        ul li a {
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            -webkit-transition-duration: 0.5s, 0.5s;
            -webkit-transition-property: color, background;
            border-radius: 5px;
            color: #fff;
            padding: 3px 7px;
            text-decoration: none;
            text-shadow: 1px 1px 1px #000; }

            ul li a:hover {
                -webkit-transition-duration: 0.5s, 0.5s;
                -webkit-transition-property: color, background;
                background: #606C88;
                color: #ff0; }

Answer 1

去掉内联样式，并在外部样式表中添加这样的内容：

#content img {position:absolute; width:300px; height:225px; border: 1px solid #000000; border-radius: 8px}

某些特定于每张图片的样式都被遗漏了。对于那些，向图像添加类或id，然后为该图像编写样式。例如。第一张图片可以有一个.lalala类，然后你可以在样式表中执行此操作：

.lalala {top:515px; left:692px;}

Answer 2

有很多方法可以做到这一点，但是当前代码的最简单路径是在样式表中声明边框和其他一些样式，然后使用内联样式定位图像。

所以在样式表中添加：

#content img { position:absolute; width:300px; height:225px; border: 1px solid #000000; border-radius: 8px; }

然后在html中，删除除top和left之外的每个图片上的所有内嵌样式。

将内联样式转移到外部样式表

2 个答案: