Ετικέτα: HTML

Δημοσιεύτηκε στισ

Άσκηση για την κατανόηση της γλώσσας CSS – Γ’ ΓΡΑΦ-ΗΛΝ

Ακολουθήστε τα παρακάτω βήματα:

  1. Μπείτε στoν πίνακα ελέγχου του ιστότοπου που έχετε στο wp.w3schools.gr.
  2. Εάν δεν έχετε φτιάξει κανένα άρθρο ακόμα, δημιουργήστε ένα νέο άρθρο και βάλτε του μερικές παραγράφους τυχαίου κειμένου.
  3. Ανοίξτε τον ιστότοπό σας σε μία δεύτερη καρτέλα, από το μενού στην κορυφή της σελίδας.
  4. Στον πίνακα ελέγχου, επιλέξτε το μενού Εμφάνιση >> Custom CSS. Στη σελίδα που θα ανοίξει, μπορείτε να προσθέσετε κώδικα CSS.
  5. Γράψτε τον κανόνα body {font-family:cursive;} και αποθηκεύστε τις αλλαγές.
  6. Γυρίστε στη σελίδα σας και πατήστε “ανανέωση”. Τι συνέβη; Χρησιμοποιήστε τα εργαλεία διαχείρισης του φυλλομετρητή (browser) που ανοίγουν με το F12 για να εντοπίσετε τον κώδικα που μόλις προσθέσατε στη σελίδα.
  7. Κάντε το ίδιο για τους 3 παρακάτω κανόνες:
  • div#content {background-color: yellow;}
  • div {border: 1px solid #0000FF;}
  • p {
    padding-left: 30px;
    color: #FF0000;
    background-color: rgba(50,10,90,0.7);
    }
Δημοσιεύτηκε στισ

Μετασχηματισμός

Κάποτε ήταν ένα τετράγωνο
<div></div>

 
 
Είχε πλευρές 200 pixels και κόκκινο χρώμα
<div style="width: 200px; height: 200px; background: red;"></div>

 

 
 
Το όνομά του ήταν demo
<div id="demo" style="width: 200px; height: 200px; background: red;"></div>

 

 
 
Όταν του έκανες κλικ, πρασίνιζε
<div id="demo" style="width: 200px; height: 200px; background: red;"></div>
 
<script>
document.getElementById("demo").onclick = function() {
document.getElementById("demo").style.background="green";
}
</script>

<div id="demo" style="width: 200px; height: 200px; background: red;"></div>
 
<script>
document.getElementById("demo").onclick = function() {
if (document.getElementById("demo").style.background=="red") {
document.getElementById("demo").style.background="green";
} else if (document.getElementById("demo").style.borderRadius!="100px") {
document.getElementById("demo").style.borderRadius="100px";
} else {
document.getElementById("demo").style.background="red";
document.getElementById("demo").style.borderRadius="0px";
}
}
</script>


 

 
 
Και δε βιαζόταν…
<div id="demo" style="width: 200px; height: 200px; background: red;"></div>
 
<script>
document.getElementById("demo").onclick = function() {
document.getElementById("demo").style.transition = "all 2s";
if (document.getElementById("demo").style.background=="red") {
document.getElementById("demo").style.background="green";
} else if (document.getElementById("demo").style.borderRadius!="100px") {
document.getElementById("demo").style.borderRadius="100px";
} else {
document.getElementById("demo").style.background="red";
document.getElementById("demo").style.borderRadius="0px";
}
}
</script>