Перенос встроенного стиля во внешнюю таблицу стилей

Я использовал встроенный стиль, чтобы поместить рамку вокруг пяти изображений в моем индексном файле. Как применить этот стиль к ним, объявив атрибуты/значения 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}

Некоторые стили, специфичные для каждого изображения были оставлены , Для них добавьте класс или идентификатор изображения, а затем напишите стили для этого изображения. Например. первое изображение может иметь класс .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

Перенос встроенного стиля во внешнюю таблицу стилей

ответ

Смежные вопросы