2010-10-26 15 views
11

mi chiedevo se ci fosse un modo "facile" per aggiungere tramite CSS permette di dire:CSS - Aggiungi bordo per tutti i div

border: 1px solid red;

a tutti i div non importa ciò che i loro id's sono.

mi rendo conto che questo potrebbe essere una domanda molto molto di base (o nessun possibile a tutti) e spero che sia abbastanza chiaro.

Giusto per chiarire, consente di dire Ive ha ottenuto:

HTML

<div id="one"> 

</div> 

<div id="two"> 

</div> 

e CSS

#one{ 
height: 10px; 
width: 10px; 
} 

#two{ 
height: 10px; 
width: 10px; 
} 

Il risultato Io in realtà voglio è:

#one{ 

height: 10px; 
width: 10px; 
border: 1px solid red; 
} 

#two{ 
height: 10px; 
width: 10px; 
border: 1px solid red; 
} 

Voglio raggiungere questo obiettivo senza havi andare ad uno ad uno.

Grazie in anticipo !!

Si prega di chiedere per qualsiasi chiarimento necessario!

+3

Suggerirei di leggere le nozioni di base su come funzionano i CSS, forse a partire da questo [articolo ospitato da W3, da Dave Raggett] (http://www.w3.org/MarkUp/Guide/Style). –

+0

ora che vedo era piuttosto una domanda stupida :) Ho appena stato bloccato !! grazie a tutti – Trufa

+0

Opera ha un corso gratuito online su HTML e CSS (http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/). È davvero completo e va ad un ritmo rilassato. Un sacco di esempi anche. –

risposta

26
div { 
    border: 1px solid #000000; 
} 
+0

Non riesco a credere che non potrei vederlo arrivare, grazie mille.scusa per la domanda stupida, grazie mille – Trufa

+0

Non è una domanda stupida, semplicemente non capisco completamente come funziona il css. Raccomanderei comunque di usare una classe se questo è pensato per essere utile. la maggior parte delle pagine ha così tanti oggetti div che aggiungono un bordo a ciascuno sarebbe piuttosto folle. – McAden

2

Sono d'accordo con la risposta di @ McAden. In alternativa, è possibile utilizzare jQuery per aggiungere lo stile al volo:

<script type="text/javascript"> 
    $('div').css('border','1px solid #000'); 
</script> 
+0

Il down-voter dovrebbe * davvero * aver spiegato il loro voto negativo, ma azzarderei l'ipotesi che si tratti di complicazioni eccessive. Quello che dici è * true *, ma over-kill per la situazione particolare. –

0

Forse questo vi aiuterà a:

div#one, div#two{ 
    border:1px solid red; 
} 
+1

Non proprio quello che ha chiesto, ma è bene insegnargli la sintassi della virgola. –

0

Come diceva McAden, si consiglia di specificare quali div si desidera stile. Invece di aggiungere una classe per ogni div si consiglia di provare un approccio come questo,

.theseDivs div{ 
    /*styles here*/ 
} 

<div class="theseDivs"> 
    <div>Style applied here</div> 
    <div>and here, </div> 
</div> 
<div>but not here</div> 
1
CSS Using 
#one{ 
height: 100px; 
width: 100px; 
border:1px solid #000; 
} 
// you can use sepertely 
#two{ 
height: 100px; 
width: 100px; 
border-bottom: 1px solid #000; 
border-top: 1px solid #000; 
border-left: 1px solid #000; 
border-right: 1px solid #000; 
} 

JQuery Utilizzando

<script type="text/javascript"> 
    $('#one').css('border','1px solid #000'); 
</script> 
0

$('div').css("border", "1px solid #CCC");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
 
<div> 
 
1 
 
    <div> 
 
    3 
 
    </div> 
 
<div> 
 
2 
 
</div> 
 
</div>

0

Per tutti gli elementi

<style> * { 
    border: 1px solid #000000; 
} 
</style>