2 fichier css dans un seul

Résolu
or3li3n Messages postés 212 Statut Membre -  
or3li3n Messages postés 212 Statut Membre -
Bonjour,

Voilà C quelque chose de trés simple mais je ne trouve pas de solution.

J'aimerai faire comme en PHP un include(''), mais en CSS.

jaurai un fichier style.css et a l'intrieur j'importe tout mes autres fichiers .css

Merci pour vos prochianes réponses.
A voir également:

7 réponses

Réponse 1 / 7
RAD ZONE Messages postés 5362 Statut Contributeur 1 360
 
SALUT

Petite correction :-))

cela peux ce faire en utilisant 
@import url("second.css");
dans ton css !

a+
1
Réponse 2 / 7
or3li3n Messages postés 212 Statut Membre 6
 
Ca yé ca marche...

Le import doit absolument etre avant toutes autres declaration CSS

DONC :

body{font-family:calibri;margin:0;background:url('../img/nua­ges.jpg');}
@import url("menu.css");

NE FONCTIONNE PAS

@import url("menu.css");
body{font-family:calibri;margin:0;background:url('../img/nua­ges.jpg');}

FONCTIONNE PARFAITEMENT
1
Réponse 3 / 7
arthezius Messages postés 3756 Statut Membre 475
 
Le truc c'est que justement le fichier .css n'est pas du PHP. Tu ne peux donc pas l'utiliser pour y placer du PHP.
Toutefois, rien ne t'empêche de placer plusieurs balises de ce type: 
<link href="style.css" rel="stylesheet" type="text/css" />
0
Réponse 4 / 7
arthezius Messages postés 3756 Statut Membre 475
 
Ah bah je l'ignorai.
On en apprends donc tout les jours !! :)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 7
or3li3n Messages postés 212 Statut Membre 6
 
Ca ne marche pas le @import

pourtant les deux fichiers sont a la mm racine
0
moi
 
Fais comme Arthezius t'as dit...
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="style1.css" rel="stylesheet" type="text/css" />
<link href="style2.css" rel="stylesheet" type="text/css" />
...
et tu mets ca sur toutes tes pages.
0
Réponse 6 / 7
RAD ZONE Messages postés 5362 Statut Contributeur 1 360
 
Ca ne marche pas le @import

pourtant les deux fichiers sont a la mm racine

tu as du faire une erreur ! je t assure que cela fonctionne !

voila un exemple vite fait avec les fichiers de mon site http://radservebeer.free.fr/ qui normalement est en 1 seul css !

cela donne

HTML 

<!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" xml:lang="en" lang="en">
  <head>
  <title>RAD ZONE webcreation
    </title>
    <link rel="icon" type="image/gif" href="http://radservebeer.free.fr/favicon.gif" /><!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /><![endif]-->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Language" content="fr, en" />
    <meta name="title" content="RAD ZONE webcreation" />
    <meta name="author" content="Taro Rad" />
    <meta name="subject" content="Rad Zone give some help tuto demo flash and dreamweaver you can find download free and and private server,chargement,webmaster,kits graphiques" />
    <meta name="rating" content="private site" />
    <meta name="description" content="Rad Zone give some help tuto demo flash and dreamweaver you can find download free and and private server,chargement,webmaster,kits graphiques" />
    <meta name="abstract" content="Rad Zone give some help tuto demo flash and dreamweaver you can find download free and and private server,chargement,webmaster,kits graphiques" />
    <meta name="keywords" content="Rad zone ,webcreation,rad,help,tuto,demo,flash,dreamweaver,download,webmaster,css,style,standards web,site Internet,chargement,webmaster,kits graphiques,templates,screensavers,gratuit,outils en ligne,photo,web,design,creation artistique et photographie,peinture,internet,art,exposition,galerie,artistique,graphisme,css,menu css,Cascading Style Sheets,apprendre les css,page d'accueil,styles CSS,web,w3c,xhtml,html,tutoriels,tutorial,faire une mise en page,HTML,html,style,style sheet,tableaux,gabarit,feuille de style,standards" />
    <meta name="revisit-after" content="15 DAYS" />    
    <meta name="copyright" content="RAD ZONE 2006" />
    <meta name="robots" content="index, follow,All" />
    <meta name="googlebot" content="index, follow, all" />
    <meta name="expires" content="never" />
    <meta name="publisher" content="RAD ZONE" />
    <meta name="audience" content="Tous" />
    <meta name="Identifier-URL" content="http://radservebeer.free.fr" />
    <meta name="location" content="France, FRANCE" />
    <link rel="stylesheet" type="text/css" href="radzone.css" />
  </head>
  <body>
    <div id="outer">
      <div id="inner">
        <div class="bgtext">Rad Zone<br />
         <p class="webmaster">
          </p>
        </div>
        <div id="text1">
          <a href="home.html">Home 
            <span>&#8486; Enter the Rad Zone &#8486;
            </span></a>
        </div>
        <div id="text2">
          <a href="videodem.html">Video Demo 
            <span>&#8486; Video demo for Html, PHP, Flash 8 and Dreamweaver 8 web site creation &#8486;
            </span></a>
        </div>
        <div id="text3">
          <a href="http://raddemo.free.fr/phpBB3/">Forum 
            <span>&#8486; let your questions ! &#8486;
            </span></a>
        </div>
        <div id="text4">
          <a href="tuto/index.html">Tuto 
            <span>&#8486; the basic of html, css, flash, js, java, php &#8486;
            </span></a>
        </div>
        <div id="text5">
          <a href="tuto/dhtml/index.html">DHTML 
            <span>&#8486; see the power of dhtml [DOM] &#8486;
            </span></a>
        </div>
        <div id="text6">
          <a href="webmaster.html">Webmasters 
            <span>&#8486; All you need to create Web site &#8486;
            </span></a>
        </div>
        <div id="text7">
          <a href="download.html">Download 
            <span>&#8486; Free and private server &#8486;
            </span></a>
        </div>
      </div>
    </div>
    <div id="w3c">
      <p>
        <a href="http://validator.w3.org/check?uri=referer">
          <img src="images/w3c.png" alt="Rad Zone is Valid XHTML 1.0 Strict" height="15" width="80" /></a>
      </p>
    </div>
    <div id="css">
      <p>
        <a href="http://jigsaw.w3.org/css-validator/check/referer">
          <img src="images/css.png" alt="Rad Zone is Valid CSS level 2" height="15" width="80" /></a>
      </p>
    </div><script type="text/javascript">
//<![CDATA[
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var pageTracker = _gat._getTracker("UA-2874236-1");
pageTracker._initData();
pageTracker._trackPageview();
//]]>
</script>
  </body>
</html>


CSS
radzone.css 

@import url("Copie de radzone.css");

.bgweb {
  font-size: 150px;
  position: absolute;
  top: 50px;
  left: -200px;
  right: -80px;
}

.bgtext, .footertext, .bgweb {
  color: #222;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  cursor: default;
  position: absolute;
  font-style: italic;
}

.webmaster{
  margin-left: -230px;
  width: 401px;
  left: 50%;
  position: absolute;
  margin-top: -10px;
  background-image: url(images/webmaster.jpg);
  height: 113px;
}

.footertext {
  font-size: 12px;
  position: absolute;
  top: 320px;
  text-align: center;
  width: 500px;
}

div#text1, div#text2, div#text3, div#text4, div#text5, div#text6, div#text7, div#text8, div#text9, div#text10 {
  color: #353535;
  position: absolute;
  font-size: 2em;
  left: -129px;
  top: 236px;
  cursor: default;
  border: none;
}

div#text1 {
  font-size: 29px;
  top: 0px;
  left: 0;
}

div#text2 {
  font-size: 45px;
  top: 115px;
  left: 35px;
}

div#text3 {
  font-size: 35px;
  top: 100px;
  left: 340px;
}

div#text4 {
  font-size: 50px;
  top: 230px;
  left: -25px;
}

div#text5 {
  font-size: 39px;
  top: 200px;
  left: 260px;
}

div#text6 {
  font-size: 60px;
  top: -5px;
  left: 200px;
}

div#text7 {
  font-size: 32px;
  top: 280px;
  left: 360px;
}

div#text8 {
  font-size: 36px;
  top: 245px;
  left: -20px;
}

div#text9 {
  font-size: 40px;
  top: 140px;
  left: -115px;
}

div#text10 {
  font-size: 50px;
  top: 120px;
  left: -115px;
}
a:hover span {
  border: none;
}

div#text1 a:hover span {
  top: -3px;
  left: 0;
}

div#text2 a:hover span {
  top: -10px;
  left: 0;
}

div#text3 a:hover span {
  top: -4px;
  left: 50px;
}

div#text4 a:hover span {
  top: -6px;
  left: 0;
}

div#text5 a:hover span {
  top: -6px;
  left: 0;
}

div#text6 a:hover span {
  top: -4px;
  left: 0;
}

div#text7 a:hover span {
  top: -4px;
  left: 0;
}

div#text8 a:hover span {
  top: -5px;
  left: 25px;
}

div#text9 a:hover span, div#text10 a:hover span {
  top: -1px;
  left: 25px;
}

div#inner a:hover, div#inner2 a:hover {
  background: none;
  cursor: crosshair;
}

div#inner a span {
  display: none;
}

div#inner a:visited span {
  display: none;
}

div#inner a {
  text-decoration: none;
  color: #3b3b4f;
  font-family: Times, "Times New Roman", serif;
}

div#inner a:hover span {
  display: block;
  position: relative;
  background: none;
  font-size: 14px;
}

div#inner a:link, div#inner a:visited {
  text-decoration: none;
}

div#inner a:hover {
  text-decoration: none;
}

div#content {
  position: absolute;
  top: -50px;
  left: -70px;
  width: 635px;
  height: 400px;
  overflow: auto;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #effff5;
  text-align: justify;
  margin: 3px;
  margin-left: 0;
  padding-right: 8px;
  background-image: url(images/bckgnd.png);
}

div#inner div#content a:hover {
  text-decoration: underline;
}

div#close, div#haut {
  width: 17px;
  height: 17px;
  background: none;
  text-align: center;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 12px;
  border: 1px solid #222;
}

div#haut {
  position: relative;
  left: 573px;
  top: 319px;
}

div#close {
  position: relative;
  left: 573px;
  top: -47px;
}

div#inner div#close a:link, div#inner div#haut a:link {
  color: #fff;
  cursor: default;
}

div#inner div#close a:visited, div#inner div#haut a:visited {
  color: #fff;
  cursor: default;
}

div#inner div#close a:hover, div#inner div#haut a:hover {
  color: #ff7c11;
  cursor: crosshair;
}

div#urltext {
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: 30px;
  position: absolute;
  top: -87px;
  left: -69px;
}

div#urltext, div#inner div#content a:link, div#inner div#content a:visited, div#inner a:hover, div#inner a:hover span {
  color: #ff7c11;
}

div#content div#titlebar {
  border: 1px solid #222222;
  background: #000;
  font-weight: normal;
  color: #ff7c11;
}

.titleblock {
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: 12px;
  color: #ff7c11;
  margin-right: 6px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 2px;
  border: 1px solid #222;
  padding: 4px;
}

.titleblock span {
  color: #ff7c11;
}

#urltext a:link {
  color: #444;
}

#urltext a:visited {
  color: #444;
}

#urltext a:hover {
  color: #444;
}

#urltext a:active {
  color: #444;
}

a img {
  border: 0;
}


et le css
Copie de radzone.css 

body {
  background: #000;
  margin: 0;
}

div#w3c {
  position: absolute;
  left: 0;
  bottom: 0px;
}

div#css {
  position: absolute;
  right: 0;
  bottom: 0px;
}

#outer {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
}

#inner {
  margin-left: -250px;
  position: absolute;
  top: -150px;
  left: 50%;
  width: 580px;
  height: 300px;
}

.bgtext {
  font-size: 150px;
  position: absolute;
  top: 50px;
  left: -110px;
  right: -80px;
}


essaye tu verras !
0
Réponse 7 / 7
or3li3n Messages postés 212 Statut Membre 6
 
voila mon .css

body{font-family:calibri;margin:0;background:url('../img/nuages.jpg');}
table.centre{width:800px;height:1000px;position:relative;z-index:1;margin-top:20px;margin-left:auto;margin-right:auto;background:#FFFFFF;}
div.ombre{width:840px;height:1040px;position:relative;z-index:2;margin-top:25px;margin-left:auto;margin-right:auto;background:url('../img/ombre_blanche.png');}

@import url("menu.css");

et il ne m'import que le début et pas la suite qu'il y a dans le fichier menu.css
0