將內聯樣式轉換爲外部樣式

我已經使用內聯樣式來爲我的索引文件中的五個圖像放置一個圓角邊框。我如何通過在外部樣式表中聲明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; }

來源

2014-04-16 Pedro147

地帶出了內聯樣式的演示，並把這樣的事情在你的外部樣式表：

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

具體到每一個圖像有些款式已經被冷落。對於那些，添加一個類或id到圖像，然後寫入該圖像的樣式。例如。第一圖像可以有一類.lalala，然後你可以這樣做在樣式表：

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

來源

2014-04-16 00:31:09

非常感謝拉爾夫。我看到這些圖像從內容div中繼承了他們的風格，但是對於如何將風格僅應用於圖像而不知所措。 – Pedro147

有很多方法可以做到這一點，但你當前的代碼最簡單的途徑將申報樣式表中的邊框和其他樣式，然後使用內聯樣式定位圖像。

所以在樣式表中，添加：

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

然後在HTML中，刪除所有的每個圖像上的內嵌樣式除了top和left。

來源

2014-04-16 01:15:01

謝謝你的提問，解決問題有兩種不同的方法是很好的。 – Pedro147

將內聯樣式轉換爲外部樣式

回答

相關問題