Divs, working status

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Divs, working status

Δημοσίευση από Basilakis » 15 Μαρ 2008 12:58

Exw mia erwtisi na kanw sxetika me to tree twn divs, kai tin epektasi pou pernoune.

Κώδικας: Επιλογή όλων

.eksoteriko .div1 h2 { color:#ffffff; font-size: 14px; border-bottom: solid 1px #ffe0bf; padding: 0px 0px 5px 0px; margin: 0px;}

kai exw afto ton kwdika

Κώδικας: Επιλογή όλων

<div class="eksoteriko">
<div class="div1">
<h2>Categories</h2>
 <ul>
  <?php wp_list_cats&#40;'show_count=1'&#41;; ?>
 </ul>
</div>
Afto pou den mporw na katalavw, einai giati xreiazomai mesa sto CSS, na orisw pws to tag .div1 h2, vriskete mesa sto eksoteriko. Ipopsin, to eksoteriko kanei include kai alla divs mesa, afou einai as poume to megalo DIV pou vriskontai ola ta ipoloipa DIVS mesa.

sibas
Honorary Member
Δημοσιεύσεις: 1853
Εγγραφή: 21 Φεβ 2003 01:21
Τοποθεσία: Μια εδώ.. Μια εκεί.. Σήμερα είμαι εδώ!!!
Επικοινωνία:

Divs, working status

Δημοσίευση από sibas » 15 Μαρ 2008 13:39

Δες αυτό το style
<html>
<head>
<title></title>
<style>
.eksoteriko h2 {
color:#000000;
font-size: 28px;
border-bottom: solid 1px #ffe0bf;
padding: 10px;
margin: 0px;
}

.eksoteriko li{
color:#000000;
font-size: 22px;
}

.eksoteriko .div1 h2 {
color:#808000;
font-size: 14px;
padding: 0px 0px 5px 0px;
}

.eksoteriko .div1 li{
color:#FF0000;
}
</style>
</head>
<body>
<div class="eksoteriko">
<h2>Categories</h2>
<ul>
<li>something</li>
</ul>
<div class="div1">
<h2>Categories</h2>
<ul>
<li>something</li>
</ul>
</div>
</div>
</body>
</html>
Ότι βάλεις μέσα στο εξωτερικό κληρονομείτε και στο div1, εκτός και αν το δηλώσεις διαφορετικά, στην παραπάνω περίπτωση το div1 li και h2 κληρονομεί το font-size, border και margin από το εξωτερικό.

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Divs, working status

Δημοσίευση από Basilakis » 15 Μαρ 2008 17:21

HMmm... parola afta tha mporousa na to orisw kai san div1 mono, me ola ta ipoloipa, xwris na kanw add kai to ekswteriko swsta?

DLD, na grapsw mesa sto div1, ola osa thelw, kai na min to kanw

Κώδικας: Επιλογή όλων

.eksoteriko .div1 h2 &#123;
color&#58;#808000;
font-size&#58; 14px;
padding&#58; 0px 0px 5px 0px;
&#125; 
alla

Κώδικας: Επιλογή όλων

.div1 h2 &#123;
color&#58;#808000;
font-size&#58; 14px;
padding&#58; 0px 0px 5px 0px;
&#125; 
Is that right?

sibas
Honorary Member
Δημοσιεύσεις: 1853
Εγγραφή: 21 Φεβ 2003 01:21
Τοποθεσία: Μια εδώ.. Μια εκεί.. Σήμερα είμαι εδώ!!!
Επικοινωνία:

Divs, working status

Δημοσίευση από sibas » 15 Μαρ 2008 18:36

Μα φυσικά
Το θέμα είναι ότι αν έχεις πολλά h2 ul li κλπ αντί να γράφεις όλα τα στοιχεία τα γράφεις μια φορά και αλλάζεις μόνο τις παραμέτρους που θέλεις να αλλάξεις
πχ
.eksoteriko h2 {
color:#808000;
font-size: 14px;
padding: 0px 0px 5px 0px;
}
τώρα θέλεις να αλλάξεις το χρώμα μόνο και να έχεις τα ίδια font και padding
.eksoteriko .div1 h2 {
color:#ffffff;
}
Αλλάζεις μόνο το font-size και έχεις το ίδιο χρώμα και padding με το .eksoteriko
.eksoteriko .div2 h2 {
font-size: 24px;
}
και πάει λέγοντας..

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης