Как импортировать css в отдельный файл ?

Roman--1 · January 20, 2009

Подскажите как Как импортировать css из html в отдельный файл ? :rolleyes:

———————————-

не актуально

Edited January 20, 2009 by Roman--1

Vlad · January 20, 2009

А в чем сложности-то? Выделяешь весь текст, который находится между <style...> и </style>, копируешь его в текстовый документ и сохраняешь под именем style.css. Теги <style> затем удаляешь.

Roman--1 · January 20, 2009

Спасибо всё получилось !

P.S Еще один вопросик. Я когда какой то скрипт ставил случайно стили в форме добавления комментариев (да и кнопок тоже) сбил. То есть они были синего под дизайн сайта а стали черные какие то. Не подскажете как они зовутся и где в css их искать ?

Edited January 20, 2009 by Roman--1

Vlad · January 20, 2009

Хм, ну ты и спросил. Откуда же знать, где искать какие-то черные кнопки. Либо код приводи (а лучше ссылку на него), либо используй какой-нибудь плагин под Firefox вроде Firebug или Web Developer. С помощью этих расширений можно легко определить стиль элемента.

Roman--1 · January 20, 2009

не актуально

Edited January 20, 2009 by Roman--1

kalyaka-malyaka · January 20, 2009

вот это

.pollBut, .searchSbmFl, .commSbmFl, .signButton {font-size:7pt;background:url('http://src.ucoz.ru/t/997/3.gif') #6EACCE;color:#FFFFFF;border:1px outset #615E58;}

написано в файле help.css

фоном - синяя картинка

а это

.pollBut, .loginButton, .searchSbmFl, .commSbmFl, .signButton {font-size:7pt;height:18px;background:url('http://src.ucoz.ru/t/831/8.gif');text-transform:lowercase; font-size:10px;color:#FFFFFF;border:1px outset #2C3D52;}

в my.css

фоном - черная картинка

запись

<style type="text/css" media="all">
@import url(/css/help.css);
</style>

у вас в html идет заньше, чем запись

<link type="text/css" rel="StyleSheet" href="http://file-planet.3dn.ru/_st/my.css"><script type="text/javascript" src="/js/vp.js"></script>

когда в css одни и те же свойства одного и того же класса описываются больше одного раза, отрабатывается последняя запись.

и бэкграунд ваш работает так, как описано в my.css, потому что my.css грузится после help.css.

кстати, тег <link> надо ставить в <head>, а не в <body>.

и вы не путаетесь в таком количестве css-файлов с пересекающимися классами?

Roman--1 · January 20, 2009

kalyaka-malyaka

Огромное спасибо ! :rolleyes:

Оказалась что строчка

</style>
<link type="text/css" rel="StyleSheet" href="http://file-planet.3dn.ru/_st/my.css"><script type="text/javascript" src="/js/vp.js"></script>
<style type="text/css">.UhideBlock {display:none}</style>

вообще тут не нужна она от прошлого шаблона осталась.

Edited January 20, 2009 by Roman--1

miklIII · July 30, 2010

Доброго всем времени суток!

Не получается вынести CSS в отдельный файл, в общем, пока CSS находится внутри документа, все работает, как-только выношу, работать перестает...

Подскажите, что неправильно???

Вот код:

CSS документ (лежит в папке с HTML документом и имеет имя: "style.css"):


   min-width {
      min-width: 725px;
      }


   head {
      position:absolute;
      top:0px;
      left:0px;
      width:100%;
      height:140px;
      border:solid 0px;
      background-color:0a0701;
      }


   menu {
      position:absolute;
      top:160px;
      left:5px;
      width:170px;
      height:200px;
      border:solid 0px;
      background-color:0a0701;
      }


   content {
      min-width: 555px
      position:absolute;
      margin-top:161px;
      margin-left:175px;
      margin-right:15px;
      border:solid 0px;
      background-color:#0a0701;
      }



   paragraph {
      text-indent: 0px;
      text-align: justify;
      font-size: 16px;
      color: #cccccc;
      font-family: Corbel;
      }

___________

HTML документ:


<HTML>
    <HEAD>
    <TITLE>Led Zeppelin</TITLE>
    <link rel="SHORTCUT ICON" href="LedZeppelin/img/Icon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css"  href="style.css" media="all" />
    </HEAD>
<BODY bgcolor="#0a0701" link="#a0a000" vlink="#faffda" alink="#a00000">

   <div class="min-width">

   <div class="head" id="head">
      <center><IMG src="LedZeppelin/img/head.jpg" WIDTH="700" HEIGHT="140" ALT="" HSPACE="5"></center>
   </div>

   <div class="menu" id="menu">
      <font size="3" color="1a1a1a" face="Corbel">
      <br>
      <A HREF="LedZeppelin.html" TARGET="_self">Главная</A>
      <br><br>
      <A HREF="LedZeppelin/discography.html" TARGET="_self">Дискография</A>
      <br><br>
      <A HREF="LedZeppelin/biography.html" TARGET="_self">Биографии участников</A>
      <br><br>
      <A HREF="LedZeppelin/Seva_Novgorodtsev.html" TARGET="_self">Сева Новгородцев<br>РОК-ПОСЕВЫ</A>
      </b>
      </font>
   </div>

<div class="content">
<div class="paragraph">
Led Zeppelin — британская рок-группа, образовавшаяся в сентябре 1968 года в Лондоне, Англия, и признанная одной из самых успешных, новаторских и влиятельных в современной истории. Создав собственное звучание (для которого были характерны утяжелённый гитарный драйв, оглушающее звучание ритм-секции и пронзительный вокал), Led Zeppelin стали одной из ведущих групп хард-рока, сыграли основополагающую роль в становлении хэви-метал, свободно интерпретируя фолк- и блюз-классику и обогащая стиль элементами других музыкальных жанров (рокабилли, рэгги, соул, фанка, кантри). Именно Led Zeppelin (согласно Allmusic), отказавшись от выпуска синглов, заложили основу понятия «альбомный рок».
</div>
<br>
<div class="paragraph">
<center><IMG src="LedZeppelin/img/gr_01.jpg" WIDTH="477" HEIGHT="345" ALT="" HSPACE="0"></center>
</div>
<br>
<div class="paragraph">
Led Zeppelin остаются одной из наиболее успешных групп в рок-музыке: общемировой тираж их альбомов превышает 300 миллионов, 112 миллионов было продано в США (четвёртое место). Десять альбомов Led Zeppelin поднимались на вершину Billboard 200.
</div>
<div class="paragraph">
Led Zeppelin занимают первое место в списке VH1 «100 Величайших артистов хард-рока». Журнал Rolling Stone признал их «самой тяжёлой группой» и «лучшей группой 70-х». В 1995 году Led Zeppelin были введены в Зал славы рок-н-ролла, в 2005 году получили Грэмми за выдающийся вклад в музыкальное развитие (англ. Grammy Lifetime Achievement Award), в мае 2006 года — Polar Music Prize, музыкальный аналог Нобелевской премии.
</div>
</div>
</div>
</BODY>
</HTML>

<a href=http://www.areanda.com >продвижение сайта</a>

Edited July 30, 2010 by miklIII

psywalker · July 30, 2010

1) Код в спец. теги для этого, на будущее.

2) Значит путь указываешь неправильный.

miklIII · July 30, 2010

Путь указан верно 100%... CSS документ лежит в папке с HTML документом и имеет имя: "style.css"

Вызов cssиз html документа <link rel="stylesheet" type="text/css" href="style.css" media="all" />

Про спец.теги можно поподробнее, если можно, конкретно на моем коде, укажите где и каких спец.тегов не хватает...

Edited July 30, 2010 by miklIII

psywalker · July 30, 2010

Путь указан верно 100%... CSS документ лежит в папке с HTML документом и имеет имя: "style.css"
Вызов cssиз html документа <link rel="stylesheet" type="text/css" href="style.css" media="all" />

Тогда проверь, чтобы все символы были латинскими, может ошибся где с буквами типа "с"

Про спец.теги можно поподробнее, если можно, конкретно на моем коде, укажите где и каких спец.тегов не хватает...

Я имел ввиду спец. теги на нашем форуме, что весь код должен быть упрятан в них.

miklIII · July 30, 2010

В общем, после того как в html документе теги начал оформлять вместо:


-//-
<div class="paragraph">
...
ололо
...
</div>
-//-

просто:


-//-
<paragraph>
...
ололо
...
</paragraph>
-//-

кое-что начало работать... но далеко не все...

Будем разбираться дальше...

Edited July 30, 2010 by miklIII

psywalker · July 30, 2010

Это ты какую то чушь делаешь. Нужно искать причину в другом месте, а не таким способом выходить из положения.

s0rr0w · July 30, 2010

Этот символ только при доктайпе XHTML

sigma77 · July 30, 2010

Не получается вынести CSS в отдельный файл, в общем, пока CSS находится внутри документа, все работает, как-только выношу, работать перестает...

А что конкретно перестаёт работать? Если картинки, то их нужно прописывать относительно css файла.

И можно ссылку на проблемную страницу?

И, кстати

   paragraph {
	  text-indent: 0px;
	  text-align: justify;
	  font-size: 16px;
	  color: #cccccc;
	  font-family: Corbel;
	  }

Совсем никак не относится к <div class="paragraph">. И все остальные стили также прописаны не верно.

Почитайте CSS по шагам для начала.

Edited July 30, 2010 by sigma77

miklIII · July 30, 2010

Всем спасибо, проблемма решена...

Верный код:

HTML документ:


<HTML>
    <HEAD>
    <TITLE>Led Zeppelin</TITLE>
    <link rel="SHORTCUT ICON" href="LedZeppelin/img/Icon.ico" type="image/x-icon">
     <link rel="stylesheet" type="text/css"  href="LedZeppelin/style.css">
    </HEAD>
<BODY bgcolor="#0a0701" link="#a0a000" vlink="#faffda" alink="#a00000">


   <div class="min-width">

   <div class="head" id="head">
      <center><IMG src="LedZeppelin/img/head.jpg" WIDTH="700" HEIGHT="140" ALT="" HSPACE="5"></center>
   </div>

   <div class="menu" id="menu">
      <font size="3" color="1a1a1a" face="Corbel">
      <br>
      <A HREF="LedZeppelin.html" TARGET="_self">Главная</A>
      <br><br>
      <A HREF="LedZeppelin/discography.html" TARGET="_self">Дискография</A>
      <br><br>
      <A HREF="LedZeppelin/biography.html" TARGET="_self">Биографии участников</A>
      <br><br>
      <A HREF="LedZeppelin/Seva_Novgorodtsev.html" TARGET="_self">Сева Новгородцев<br>РОК-ПОСЕВЫ</A>
      </b>
      </font>
   </div>

<div class="content">
<div class="paragraph">
Led Zeppelin — британская рок-группа, образовавшаяся в сентябре 1968 года в Лондоне, Англия, и признанная одной из самых успешных, новаторских и влиятельных в современной истории. Создав собственное звучание (для которого были характерны утяжелённый гитарный драйв, оглушающее звучание ритм-секции и пронзительный вокал), Led Zeppelin стали одной из ведущих групп хард-рока, сыграли основополагающую роль в становлении хэви-метал, свободно интерпретируя фолк- и блюз-классику и обогащая стиль элементами других музыкальных жанров (рокабилли, рэгги, соул, фанка, кантри). Именно Led Zeppelin (согласно Allmusic), отказавшись от выпуска синглов, заложили основу понятия «альбомный рок».
</div>
<br>
<div class="paragraph">
<center><IMG src="LedZeppelin/img/gr_01.jpg" WIDTH="477" HEIGHT="345" ALT="" HSPACE="0"></center>
</div>
<br>
<div class="paragraph">
Led Zeppelin остаются одной из наиболее успешных групп в рок-музыке: общемировой тираж их альбомов превышает 300 миллионов, 112 миллионов было продано в США (четвёртое место). Десять альбомов Led Zeppelin поднимались на вершину Billboard 200.
</div>
<div class="paragraph">
Led Zeppelin занимают первое место в списке VH1 «100 Величайших артистов хард-рока». Журнал Rolling Stone признал их «самой тяжёлой группой» и «лучшей группой 70-х». В 1995 году Led Zeppelin были введены в Зал славы рок-н-ролла, в 2005 году получили Грэмми за выдающийся вклад в музыкальное развитие (англ. Grammy Lifetime Achievement Award), в мае 2006 года — Polar Music Prize, музыкальный аналог Нобелевской премии.
</div>
</div>
</div>
</BODY>
</HTML>

CSS файл:


      .min-width {
      min-width: 725px;
      }
      .head {
      position:absolute;
      top:0px;
      left:0px;
      width:100%;
      height:140px;
      border:solid 0px;
      background-color:0a0701;
      }
      .menu {
      position:absolute;
      top:160px;
      left:5px;
      width:170px;
      height:200px;
      border:solid 0px;
      background-color:0a0701;
      }
      .content {
      min-width: 555px
      position:absolute;
      margin-top:161px;
      margin-left:175px;
      margin-right:15px;
      border:solid 0px;
      background-color:#0a0701;
      }
      .paragraph {
      text-indent: 0px;
      text-align: justify;
      font-size: 16px;
      color: #cccccc;
      font-family: Corbel;
      }

wanntuzz · March 17, 2011

че та странная тема

Sign In

Как импортировать css в отдельный файл ?

Question

Link to comment

Share on other sites

16 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information