🟣Α-Εφαρμ.5

Εφαρμογή 5: Εμφάνιση… με στυλ

Στο πέμπτο παράδειγμα εφαρμογής δείχνουμε τη μορφοποίηση με οδηγίες διαδοχικών φύλλων στυλ, οι οποίες εφαρμόζονται με τη βοήθεια της παραμέτρου style σε κάθε ετικέτα που θέλουμε να μορφοποιήσουμε.

HTML: Ο σκελετός του ιστότοπου
CSS: είναι το στυλ (style) του ιστότοπου
JavaScript: είναι η λειτουργικότητα (features) του ιστοτόπου

Εικόνα: HTML (σκελετός) - CSS (στυλ) - JavaScript (λειτουργικότητα)

Παράδειγμα: Αφαίρεση CSS από ιστοσελίδα

1️⃣ Πατήστε δεξί κλικ → Έλεγχος (Inspect)

2️⃣ Επιλέξτε την καρτέλα Console

3️⃣ Πατήστε το ματάκι

4️⃣ Κάντε αντιγραφή & επικόλληση τον εξής κώδικα στο πλαίσιο που θα εμφανιστεί:

document.querySelectorAll('style, link[rel="stylesheet"]').forEach(e => e.remove());

5️⃣ Παρατηρήστε ότι μένει μόνο ο «σκελετός» της σελίδας!

Παρουσίαση 🖥: Η CSS στον «Πραγματικό» Κόσμο

Roadmap 🔗, WordPress 🔗 [2🔗], Frontend 🔗, Backend 🔗, Web Development μέσω A.I. 🔗

Στυλ Γραμμής (Inline Style)

Έτσι η κάθε style γραμμής θα έχει τη μορφή:

Η σειρά των κανόνων μέσα στην ετικέτα style δεν έχει σημασία.
Είναι σημαντικό κάθε κανόνας να τελειώνει με ένα ερωτηματικό (;) (χαρακτήρας colon).
Δεν πειράζει αν ο τελευταίος κανόνας δεν τελειώνει σε ερωτηματικό, καθώς εκεί τερματίζει και η συμβολοσειρά που αποτελεί την παράμετρο της style.
Τονίζεται ότι η κάθε ετικέτα style επηρεάζει τη μορφοποίηση του στοιχείου στο οποίο γράφεται.
Έτσι σε διαφορετικές ετικέτες έναρξης μπορούμε να έχουμε διαφορετικές μορφοποιήσεις.
Βέβαια οι μορφοποιήσεις CSS χωρίζονται σε κατηγορίες, καθώς κάθε είδος περιεχομένου έχει τις δικές του ιδιότητες.

Ιδιότητα	Περιγραφή
`text-align:center;`	Στοίχιση του κειμένου στο κέντρο. Είναι επίσης εφικτή η στοίχιση αριστερά (left), δεξιά (right) και πλήρως (justified).
`color:white;`	Λευκό χρώμα των χαρακτήρων. Οι τιμές των χρωμάτων μπορούν να αποδοθούν με τρεις τρόπους: α) Ονομαστικά (π.χ. green, red, lightgreen, coral, κ.λπ.). β) Με τη δεκαδική τιμή τους ως rgb(x,y,z), όπου x μια δεκαδική τιμή από 0 έως 255 που αντιστοιχεί στο κόκκινο χρώμα, όπου y μια δεκαδική τιμή από 0 έως 255 που αντιστοιχεί στο πράσινο χρώμα και z μια δεκαδική τιμή από 0 έως 255 που αντιστοιχεί στο μπλε χρώμα (π.χ. rgb(255,0,0) για το έντονο κόκκινο, rgb(0,255,0) για το έντονο πράσινο, rgb(255,255,0) για έντονο κίτρινο, rgb(255,127,80) για το κοραλλί, κ.λπ.). γ) Με τη δεκαεξαδική τιμή τους ως #ΧΧΥΥΖΖ, όπου ΧΧ μια δεκαεξαδική τιμή από 00 έως FF που αντιστοιχεί στο κόκκινο χρώμα, όπου ΥΥ μια δεκαεξαδική τιμή από 00 έως FF που αντιστοιχεί στο πράσινο χρώμα και ΖΖ μια δεκαεξαδική τιμή από 00 έως FF που αντιστοιχεί στο μπλε χρώμα (π.χ. #FF0000 για το έντονο κόκκινο, #0000FF για το έντονο μπλε, #FF7F50 για το κοραλλί, κ.λπ.). Οι πιθανοί συνδυασμοί χρωμάτων είναι 2563 ≈16,7 εκατομμύρια χρώματα.
`background-color:blue;`	Μπλε χρώμα του υποβάθρου (φόντου) των χαρακτήρων.
`background-color:yellow;`	Κίτρινο χρώμα υποβάθρου χαρακτήρων.
`background-color:lightgreen;`	Ανοιχτό πράσινο χρώμα υποβάθρου χαρακτήρων.
`font-family:courier;`	Επιλογή γραμματοσειράς της οικογένειας Courier. Οι γραμματοσειρές μπορούν εκτός από ονομαστικά, να επιλεγούν και κατά οικογένεια ή κατηγορία (π.χ. serif, sans-serif, monospace).
`font-size:120%;`	Το μέγεθος των χαρακτήρων στο 120% του τυπικού μεγέθους χαρακτήρων. Το τυπικό μέγεθος ενός χαρακτήρα σε μια παράγραφο είναι 16px, δηλαδή 16 pixel (εικονοστοιχεία). Το 120% αφορά το αντίστοιχο ποσοστό των 16 pixel και αντιστοιχεί σε 19px. Υπάρχει και η μονάδα μέτρησης em με 1em να αντιστοιχεί στο τυπικό μέγεθος ενός χαρακτήρα. Έτσι 1em = 16px = 100%. Στο παράδειγμά μας 1.2em = 19px = 120%.
`border:1px solid black;`	Η ενότητα κειμένου θα έχει περίγραμμα συμπαγούς μαύρης γραμμής, πάχους 1px. Άλλες μορφές περιγράμματος είναι οι dashed, ridge, dotted, κ.λπ.
`display:inline-block;`	Η ενότητα κειμένου θα εμφανιστεί ως ένα μπλοκ το οποίο θα περιοριστεί στο πλάτος του περιεχομένου του, επιτρέποντας σε άλλες ενότητες να σταθούν δίπλα της.

Το μοντέλο πλαισίου (box model) του περιεχομένου ενός στοιχείου

Σχήμα: Margin (περιθώριο), Padding (όριο), Content (περιεχόμενο), Border (όριο) μοντέλου πλαισίου στοιχείου HTML

Παράδειγμα,

Σχήμα: Ταψί με μπισκότα για παρομοίωση όρων margin, padding

Πιο αναλυτικά,

Παράδειγμα ολοκληρης σελίδας με πολλά στοιχεία και τα box-model τους:

💪🏻Δραστηριότητα 🧩

Παράδειγμα #01

Το παρακάτω παράδειγμα δείχνει πως μπορεί το κάθε HTML στοιχείο να έχει το δικό του στυλ βάζοντας τον κώδικα CSS (στυλ) μέσα στην ετικέτα του στοιχείου. Αυτό λέγεται στυλ γραμμής.

<!DOCTYPE html>
<html>
   <head>
      <title>Παράδειγμα 01: Στυλ γραμμής</title>
      <meta charset="utf-8">
   </head>
   <body>
      <article>
        <h1 style="color: blue" >
            Τίτλος
        </h1>
        <h2 style="color: green" >
            Υπότιτλος
        </h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
            sed do eiusmod tempor incididunt ut labore et dolore magna 
            aliqua. 
        </p>
        <p>
            Ut enim ad minim veniam, quis nostrud exercitation 
            ullamco laboris nisi ut aliquip ex ea commodo consequat. 
            Duis aute irure dolor in reprehenderit in voluptate velit 
            esse cillum dolore eu fugiat nulla pariatur. 
        </p>
        </p>
            Excepteur sint occaecat cupidatat non proident, sunt in 
            culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </article>  
   </body>
</html>

Αντιγράψτε & επικολλήστε τον παρακάτω πηγαίο κώδικα στον επεξεργαστή (IDE) →

https://www.tpointtech.com/compiler/html-css-javascript

Παράδειγμα #02

Το παρακάτω παράδειγμα δείχνει πως μπορεί ένας επιλογέας (selector) να επηρεάσει πολλά στοιχεία HTML ταυτόχρονα κάνοντας εφαρμογή των κανόνων (Cascading) της CSS.
Στην περίπτωσή μας ο επιλογέας του στοιχείου της παραγράφου p .

<!DOCTYPE html>
<html>
   <head>
      <title>Παράδειγμα 02: Cascading</title>
      <meta charset="utf-8">
      <style>
        p {
            color: orange;
            background-color: grey;
        }
      </style>
   </head>
   <body>
      <article>
        <h1 style="color: blue" >
            Τίτλος
        </h1>
        <h2 style="color: green" >
            Υπότιτλος
        </h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, 	  sed do eiusmod tempor incididunt ut labore et dolore magna 
            aliqua. 
        </p>
        <p>
            Ut enim ad minim veniam, quis nostrud exercitation 
            ullamco laboris nisi ut aliquip ex ea commodo consequat. 
            Duis aute irure dolor in reprehenderit in voluptate velit 
            esse cillum dolore eu fugiat nulla pariatur. 
        </p>
        <p>
            Excepteur sint occaecat cupidatat non proident, sunt in 
            culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </article>  
   </body>
</html>

Αντιγράψτε & επικολλήστε τον παρακάτω πηγαίο κώδικα στον επεξεργαστή (IDE) →

https://www.tpointtech.com/compiler/html-css-javascript

💪🏻Άσκηση 👩🏻‍💻

Αντιγράψτε & επικολλήστε τον παρακάτω πηγαίο κώδικα στον επεξεργαστή (IDE) →

https://www.tpointtech.com/compiler/html-css-javascript

Έπειτα κάντε τις εξής αλλαγές:

τροποποιήστε το στυλ της πρώτης ετικέτας <h2> ώστε να έχει χρώμα μπλε (blue)
συμπληρώστε το κενό ___1___ στον κανόνα css στην ετικέτα <style> ... </style> ώστε όλες οι παράγραφοι <p> να έχουν κείμενο με χρώμα κόκκινο (red). Απαγορεύεται η χρήση στυλ γραμμής (inline css) για το παρόν υπορεώτημα.
εισάγετε κανόνα στυλ (css) όπου τα στοιχεία κώδικα <code> να έχουν χρώμα φόντου (background-color: yellow;) κίτρινο (yellow).
(προαιρετικά) εισάγετε κανόνα στυλ (css) όπου όλες οι επικεφαλίδες <h2> να αλλάξουν γραμματισειρά εισαγάγοντας την τιμή courier στην ιδιότητα font-family.

<!DOCTYPE html>
<html>
   <head>
      <title>Άσκηση 1</title>
      <meta charset="utf-8">
      <style>
         ___1___ { 
             color: red;
         }
         
         h2 {
             border: 1px solid black; 
         }
      </style>
   </head>
   <body>
      <article>
        <h2 style="color: green" >
            Εκφώνηση
        </h2>
        <p>
            Να συμπληρώσετε το παρακάτω τμήμα Python ώστε να <br> 
            διαβάζει 2 ακέραιους αριθμούς και να υπολογίζει <br>
            και να επιστρέφει το άθροισμα <sub>a+b</sub> και το <br>
            άθροισμα των τετραγώνων τους (a+b)<sup>2</sup> τους: <br>
        </p>
        <p>
        	<code>
        		a,b = input("Δώστε 2 αριθμούς: ") <br>
        		sum = ___1___ <br>
        		sum2 = ___2___ <br>
        		print(f"sum={sum} ● sum2={sum2}") <br>
        	</code>
        </p>
        <h2 style="color: green" >Λύση:</h2>
        <p>(1). a+b , (2). a**2+b**2</p>
      </article>  
   </body>
</html>

Αποστείλετε τον κώδικα που τροποποιήσατε προηγουμένως στην ακόλουθη φόρμα ώστε να αξιολογηθεί από τον καθηγητή.

📝🔗 Φόρμα Υποβολής 📝🔗

🏠Άσκηση για το Σπίτι

Να προσθέσετε τον απαραίτητο κώδικα CSS στο HTML αρχείο ώστε να υλοποιούνται τα εξής:

Η ετικέτα <h2> να έχει στυλ γραμμή όπου να της δίνει χρώμα κειμένου κόκκινο.
Όλες οι παράγραφοι να έχουν χρώμα κειμένου μπλέ. Χωρίς τη χρήση στυλ γραμμής.
Στη 2η παράγραφο να υπερισχύσει το χρώμα κειμένου πράσινο τελικά μέσω χρήσης κανόνων CSS.

Αντιγράψτε & επικολλήστε τον παρακάτω πηγαίο κώδικα στον επεξεργαστή (IDE) →

https://www.tpointtech.com/compiler/html-css-javascript

<!DOCTYPE html>
<html>
   <head>
      <title>Άσκηση για το Σπίτι</title>
      <meta charset="utf-8">
   </head>
   <body>
      <article>
        <h1>Τίτλος</h1>
           <h2>Υπότιλος</h2>
              <p>Παράγραφος 1</p>
              <p>Παράγραφος 2</p>
              <p>Παράγραφος 3</p> 
      </article>  
   </body>
</html>

🟣Α-Εφαρμ.5

Εφαρμογή 5: Εμφάνιση… με στυλ

Παράδειγμα: Αφαίρεση CSS από ιστοσελίδα

Παρουσίαση 🖥: Η CSS στον «Πραγματικό» Κόσμο

Στυλ Γραμμής (Inline Style)

Το μοντέλο πλαισίου (box model) του περιεχομένου ενός στοιχείου

Παράδειγμα,

💪🏻Δραστηριότητα 🧩

💪🏻Δραστηριότητα 🧩

Παράδειγμα #01

Παράδειγμα #02

💪🏻Άσκηση 👩🏻‍💻

📝🔗 Φόρμα Υποβολής 📝🔗

🏠Άσκηση για το Σπίτι

📝🔗 Φόρμα Άσκησης για το Σπίτι 📝🔗

Ομαδοσυνεργατική Δραστηριότητα 👫

Kahoot Link 🔗

Ανατροφοδότηση ⭐️⭐️⭐️⭐️⭐️

📝🔗 Φόρμα Ανατροφοδότησης 📝🔗