Return to CSS 3

CSS: 2ο Μάθημα

Επίδειξη ασκήσεων επιμορφούμενων

https://evasworkspace.w3spaces.com/

Άσκηση Μάνου

Παράδειγμα χρήσης δωρεάν φιλοξενίας για την άσκηση στο w3schools

  • https://html-master.w3spaces.com/exersise1/
  • Σύντομη παρουσίαση δυνατοτήτων περιβάλλοντος με χρήση δωρεάν λογαριασμού
    • Προσοχή: είναι μόνο για δοκιμαστική χρήση με αρκετούς περιορισμούς!
  • 2η περίπτωση: αγορά domain name για 1 ή 2 έτη (περίπου από 7-20€, ανάλογα με την κατάληξη) και δωρεάν web hosting. Μας καλύπτει πλήρως για απλή στατική ιστοσελίδα: (ιατρείο, εστιατόριο, cafe, κομμωτήριο, αρχιτεκτονικό γραφείο, αντιπροσωπεία, τουριστικά καταλύματα  κλπ). Παράδειγμα: http://html-master.in/index.html

  1. https://strawpoll.com/polls/PbZqo527KnN (HTML?)
  2. https://strawpoll.com/polls/e7ZJO0AKYy3 (Αναλυτική επίλυση της άσκησης)

Πλεονεκτήματα χρήσης εξωτερικού αρχείου css (external css)

  1. Όλες οι σελίδες χρησιμοποιούν το ίδιο external css
  2. Αλλάζοντας το css, αυτόματα αλλάζουν όλες οι σελίδες (συνέπεια εμφάνισης)
  3. Ευκολότερη η αλλαγή ενός αρχείου αντί του internal css (στο head του html αρχείου)  σε όλες τις σελίδες ή ακόμη χειρότερα στα πάρα πολλά inline style κάθε σελίδας (πραγματικός εφιάλτης και για τις παραμικρές αλλαγές στην εμφάνιση)
  4. Το εξωτερικό αρχείο css το κατεβάζει ο browser με την 1η html σελίδα που το χρησιμοποιεί και αποθηκεύεται στην cache του υπολογιστή. Άρα έχουμε γρηγορότερη φόρτωση σελίδων και μικρότερη κατανάλωση δεδομένων!

Επανάληψη +

  • HTML = περεχόμενο
  • Css = εμφάνιση

Είδη χρήσης css

  • inline: μέσα στις ετικέτες html. Αποφεύγεται εντελώς! Μπερδεύει html με css.
  • internal: στην περιοχή head (συνήθως) μιας html σελίδας. Αποφεύγεται όταν έχουμε περισσότερες από μια σελίδες!
  • external: σε εξωτερικό αρχείο. Διαχωρίζεται εντελώς η γλώσσα CSS από την HTML. Είναι η προτιμώμενη μέθοδος.

Παραδείγματα όπου γράφουμε CSS:

inline [μπλέκουμε html – css]:

  • Δύο Η1 και inline style=”background-color:red;” μόνο στην μία.
  • Θέλει αντιγραφή στη δεύτερη h1.

internal [μπλέκουμε html – css λιγότερο] :

  • Με to element <style> μέσα στο head ενός html αρχείου.
  • Δύο h1 και h1{background-color:red;}
  • Εφαρμόζεται σε όλα τα h1
  • Δημιουργία 2ου αρχείου. Εκεί δεν έχει επιρροή η css του 1ου αρχείου.

external [απόλυτος διαχωρισμός html-css]

  • δημιουργία styles.css

σύνδεση και με τα 2 αρχεία html με το element:

 linkrel="stylesheet"href="style.css"
  • παρατηρώ ότι αλλάζουν όλα τα h1 και στις 2 html σελίδες.

2ο Παράδειγμα:

  • δημιουργώ τρεις  p με lorem
  • αλλάζω την 1η μόνο, με id=”… “. Προσοχή το id χρησιμοποιείται μόνο μια φορά
  • Σβήνω id και δημιουργώ class
  • ορίζω την παραπάνω class και στις 2 παραγράφους και βλέπω ότι πλέον με το class που είναι Global Attribute μπορώ και ορίζω μορφοποίηση παράλληλα για όσα αντικείμενα θέλω.

 


Κληρονομικότητα: μια εισαγωγή

<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
</head>
<body>
<h1>Αρχική σελίδα</h1>
<div> 
<h2>Μέσα στο div-space</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium, numquam quaerat? 
Repellat commodi laudantium quis nobis placeat distinctio. Quam voluptatem non maxime exercitationem, 
cum unde quos ducimus consequatur qui quia. </p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptas asperiores, 
<b>officiis exercitationem</b> quibusdam cum neque deserunt commodi nesciunt autem sit obcaecati 
quos sequi impedit quaerat, minima vero, pariatur libero. Vitae? <br>
</div>
</body>
</html>

        div{
            border: 10px solid red;
            color: blue;
            overflow: hidden;
            width: 80%;
        }
        p{
            color: red; 
        }
        b{
            color: green;
        }

To αποτέλεσμα των παραπάνω:

Προτεραιότητα:

Το 1. Inline style (που αποφεύγουμε…) έχει τη μέγιστη προτεραιότητα. To 3. Browser default (οι εξορισμού τιμές του browser) έχουν την μικρότερη.

  1. Inline style
  2. External and internal style sheets
  3. Browser default

Selector ή επιλογέας

A CSS selector selects the HTML element(s) you want to style.

ή

Ένας CSS επιλογέας, επιλέγει ποια στοιχεία της HTML θα μορφοποιήσουμε.

 


Γενικά ισχύει ότι:


ΠΡΟΣΟΧΗ!: Στη διαφορετική σύνταξη όταν αναθέτουμε τιμές:

Α/ στα attributes  των element της html, π.χ.

 img src="logo1.jpg" alt="Το λογότυπο"

Β/ στις  properties των declarations στη css

p{
    background-color:antiquewhite;
    color: blue;
}

 

Γενικοί κανόνες σύνταξης:

  • Ανάμεσα στην τιμή και στις μονάδες μέτρησης δεν βάζουμε κενό π.χ.: font-size: 40px;

Έως τώρα είδαμε τους selectors:

  • ετικέτες (tags) των elements π.χ. h1, p, div
  • id
  • class

οι οποίοι ανήκουν στους απλούς επιλογείς (simple selectors).


Κατηγορίες Selectors

Γενικά υπάρχουν πέντε κατηγορίες selectors:

  • Simple selectors
  • Combinator selectors
  • Pseudo-class selectors
  • Pseudo-elements selectors
  • Attribute selectors

 

Γενικότερα υπάρχουν πολλοί επιλογείς που ανήκουν στις παραπάνω κατηγορίες:

https://www.w3schools.com/cssref/css_selectors.asp


Είναι πολύ χρήσιμη η σελίδα: https://www.w3schools.com/cssref/trysel.asp

η οποία παρουσιάζει τους selectors και πως μπορούν να συνδυαστούν!


Άσκηση:

α) Συνδυασμός class και element π.χ. p.center

Ερώτηση: αν έχω κλάση center και γράψω <p class=center>, είναι διαφορετικό από το να δημιουργήσω τον selector p.center; 

β) χρήση * (Universal Selector)

γ) συνδυασμός πολλών selectors που μοιράζονται τα ίδα declarations (δεν χρειάζεται να ξαναγράφουμε τα ίδια declarations)   για κάθε έναν selector:

 h1 {
  background-text: black;
  color: white;
}
h2 {
 background-text: black; 
 color: white;
}
p {
 background-text: black;
 color: white;
}
/* --------------------------    */
/* Μπορώ να τα γράψω γρήγορα ως: */
h1, h2, p {
 background-text: black;
 color: white;}

Άσκηση:

HTML: δημιουργώ h1 και 3 p

CSS: Ορίζω  body{ font-size:8px}.

Δημιουργώ κλάσεις:

p1{ font-size:1em}

p2{font-size:1.5em} άρα 1.5em = 12px = 120%,

p3{font-size: 200%}

Εάν θέλω και h2 ίδιο μέγεθος με p3 τότε γράφω:

CSS: p3, h2 {}

CSS: δημιουργώ  news {border: 1px solid black}

HTML: <div  class=”news”>

Εάν μέσα στο div βάλω και h1 και θέλω να αλλάξω το χρώμα των γραμμάτων τότε:

CSS+HTML

  • ορίζω νέα class .greentext{} ή
  • ορίζω .news h1 {…}

Συνεχίζουμε βάζοντας μέσα στο h1 και το <i>

CSS: .news h1 i{text-decoration:underline}

 

Permanent link to this article: http://users.sch.gr/nikmavr/%cf%80%cf%81%ce%bf%ce%b3%cf%81%ce%b1%ce%bc%ce%bc%ce%b1%cf%84%ce%b9%cf%83%ce%bc%cf%8c%cf%82/css/css-2%ce%bf-%ce%bc%ce%ac%ce%b8%ce%b7%ce%bc%ce%b1/