Gestione di piu file CSS inclusi

[Valeria75_bis]

Ciao a tutti ho una pagina che include una serie di CSS (4) uno dei quali serve solo per una specifica area... come posso fare in modo che un CSS venga utilizzato solo per un'area mentre per tutto il resto vengano utilizzati gli altri CSS

praticamente la visualizzazione della pagina dovrebbe essere


uso di 3 CSS standard

visualizzazione parti di pagina

uso del quarto CSS

visualizzazione area che usa il quarto CSS

ritornare ad usare i 3 CSS iniziali per la pagina restante

Grazie mille

[fcaldera]

non ti conviene modificare uno dei restanti 3 CSS in modo da contenere le regole del quarto che servono appositamente per quella pagina?

Supponiamo tu abbia i css
a, b e c

il quarto css è
d

tu puoi ad esempio modificare 'b' con le regole che ti servono di 'd'
in modo da caricare sempre a+b+c

oppure crei un foglio di stile 'e' che sia ad esempio regole che ti servono di 'b' + regole che ti servono di 'd'
e carichi in pagina a+e+c

[Valeria75_bis]

Il problema è che nel mio quarto CSS ho delle impostazioni per table, margini, li, h ... che stravolgono invece la struttura standard della pagina (determinata dagli altri 3 CSS), il quarto mi serve solo per gestire una specifica area

Grazie

[fcaldera]

Originariamente inviato da fcaldera
oppure crei un foglio di stile 'e' che sia ad esempio regole che ti servono di 'b' + regole che ti servono di 'd'
e carichi in pagina a+e+c

prendi solo ciò che ti serve da 'd'
e modifichi le regole in modo che agiscano solo in base alla presenza di un certo macrocontenitore

#areaspecifica h1,
#areaspecifica h2,
...
#areaspecifica ul,
...


etc

[Valeria75_bis]

Scusa ma non ho capito, se nel mio quarto foglio di stile ho qualche cosa del tipo

/* ========== */
/* = RESET  = */
/* ========== */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, input, button { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }

/* remember to define focus styles! */
:focus { outline: 0; }
body { line-height: 1; color: black; background: white; }
ol, ul { list-style: none; }

/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
blockquote:before, blockquote:after,
q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
a { outline: none; }

/* ========== */
/* = GLOBAL = */
/* ========== */
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: block; }
* html .clearfix { height: 1%; }
div#wrap { width: 100%; }
a.more { display: block; padding: 0.5em 0; }
.left { float: left; }
.right { float: right; }


/* COLUMNS SIZE */
div#col1 { width: 28em; float: right; margin-right: 0; }
div#col2 { width: 52em; margin-left: 0; float: left; }

h2 { padding: 0.8em; margin-bottom: 0.5em;}
div.module { margin-bottom: 1em; }

/* TABS */
ul.tabs li { float: left; margin-bottom: -1px; }
ul.tabs li a { display: block; padding: 0.8em 1em; }
ul.tabs li.selected a:hover { padding-bottom: 0.8em; }
ul.tabs li.selected { margin-bottom: -1px; }


/* =================== */
/* = ROUNDED CORNERS = */
/* =================== */
div.b div div,
div.tb div div, 
div.bb div div{ height: 5px; margin: 0 4px; font-size: 0; }
div.mb { padding:0.1em 0.5em; }

.... 

Come posso fare in modo che non stravolga la pagina restante??


Grazie

[fcaldera]

Di quel css ti servono tutte quelle regole?
Ti serve la parte di reset? Suppongo di no
I tabs? I rounded corners?

facciamo un esempio
1) supponiamo ti serva ad esempio questo pezzo

/* COLUMNS SIZE */
div#col1 { width: 28em; float: right; margin-right: 0; }
div#col2 { width: 52em; margin-left: 0; float: left; }

prendilo e copialo dentro uno degli altri tre file css
copia il tutto alla fine del file

2) Poi: nella tua pagina speciale assegna un qualche id particolare al body ad esempio

<body id="pagina_particolare">
...



infine
3) vai sul file che hai modificato e cambia le regole che hai copiato dentro così

/* COLUMNS SIZE */
#pagina_particolare div#col1 { width: 28em; float: right; margin-right: 0; }
#pagina_particolare div#col2 { width: 52em; margin-left: 0; float: left; }

se usi 'pagina_particolare' solo ed esclusivamente in quella pagina e da nessun'altra parte la cosa funziona