Return to CSS 3

CSS: 7ο Μάθημα

Επανάληψη

CSS – 6o μάθημα

 

Ύλη

Position

https://www.w3schools.com/css/css_positioning.asp

Δημιουργούμε 4 p με bgrd-clr.

Προφανώς έχει position static εξορισμού και τοπθετείται με τη φυσιολογική ροή των στοιχείων της ιστοσελίδας.

Για τη 3η p δημιουργώ class .move

</p>
.move{
    background-color: dodgerblue;
    left:100px;

}
<p>

chrome > F12 για devtools > Computed > γράφω position + check “Show all”:
βλέπω ότι για την παράγραφο η εξ’ ορισμου τιμή είναι static.

Για static ΔΕΝ δουλεύουν τα top, bottom, left, right.

Προσθέτω στο .move{
top:30px και φυσικά δεν βλέπω καμία διαφορά.

Προσθέτω στο .move{
position: fixed και βλέπω ότι ανεβαίνει στα 30px από την κορυφή της σελίδας.

Προσθέτω στο body:

</p>
body{
    margin: 0px;
    height:2000px;
}
<p>

ώστε να εμφανιστεί μπάρα κύλισης για τη σελίδα. Όταν την χρησιμοποιώ τότε η παραγραφος .move μένει στη θέση της.

Στo devtools βλέπω (το ξέραμε, απλά επισημαίνεται…) ότι η p είναι block element. Οπότε διαδοχικά προσθέτω:

</p>
.move{
    background-color: rgba(30, 143, 255, 0.856);
    position: fixed;
    right: 0;
    bottom: 30px;
    width: 300px;
    border: 2px solid red;
}
<p>

Άρα position: fixed σημαίνει ότι πηγαίνει όπου ορίσουμε με top, left, bottom, right και δεν πιάνει τον δικό του χώρο αλλά υπερκαλύπτει!


position:relative

Όταν έχουμε position:relative, σημαίνει ότι με τα top, bottom, left, right μεταφέρουμε το αντικείμενο σε σχέση με την static (κανονική) του θέση. Παραδείγματα με top, bottom (όπου υπερκαλύπτει τις άλλες p) και right, left.
Τα γειτονικά στοιχεία δεν αναδιατάσσονται για να καλύψουν τα κενά. Άρα τα άλλα στοιχεία δεν ξέρουν που βρίσκεται το relative.
Αν βάλω και margin τότε αυτό μπαίνει στην αρχική θέση (που είναι κενή) και όχι στη νέα θέση που βρίσκεται…
Συνήθως το χρησιμοποιούμε σε συνδυασμό με το absolute το οποίο τον έχει για γονέα.

</p>
.move{
    background-color: rgba(30, 143, 255, 0.856);
    position: relative;
    top: 30px;
    left: 100px;
    width: 300px;
    border: 2px solid red;
}
<p>


position:absolute

Αν και η μετάφραση είναι “απόλυτη” θέση, στην ουσία είναι σχετική με τον πρώτο position:relative γονέα! Εάν δεν έχει γονέα με position:relative τότε είναι σε σχέση με το body.

Για να ξέρουμε ποιόν θεωρεί γονέα μπορούμε, στα γρήγορα να βάζουμε top:0px; left:0px;. Οπότε έαν γράψουμε το παρακάτω, θα πάει σε σχέση με το body, επάνω και αριστερά, στην αρχή του body.

</p>
.move{
    background-color: rgba(30, 143, 255, 0.856);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 300px;
    border: 2px solid red;
}
<p>

Δημιουργώ div class=”king” και βάζω μέσα τη 2η, 3η και 4η παράγραφο. Η κλάση είναι:

</p>
}
.king{
    background-color: greenyellow;
    position: relative;
    padding: 10px;
}
<p>

και βλέπω ότι πλέον ο relative γονέας είναι πλέον το div!

Άρα το στοιχείο που έχει position:absolute ξεκινά να μετρά τα top, left, … από την αρχή (0,0) του πρώτου relative γονέα!
Αν δεν δώσω top, left, right, bottom τότε μένει στη θέση του αλλά δεν πιάνει χώρο και το επόμενο element είναι από κάτω του!

Δημιουργώ έναν σύνδεσμο a μέσα στην 3η παράγραφο. Αν το κάνω position: absolute χώρις κάτι άλλο τότε δεν αλλάζει θέση αλλά δεν πιάνει πλέον χώρο και το επόμενο κείμενο πηγαίνει από κάτω του, σαν να μην το βλέπει. Σημ: καλύτερα να βάουμε bgrd-clr και opacity:0.5 για να φανεί!

Αν βάλω top:0; τότε πηγαίνει προς τα επάνω στην πάνω ακμή του 1ου γονέα με position:relative ενώ αν προσθέσω και left:0; πηγαίνει πάνω-αριστερά του γονέα.

</p>
a{
    background-color: tomato;
    position: absolute;
    opacity: 0.5;
    top:0;
    left:0;
}
<p>

Συμβουλή: Έαν κάποιο element έχει position absolute ή fixed τότε βάζω top:0;left:0; για να ξέρω από που μετράνε (ή σε ποιό relative γονέα ανήκουν)!


Χρήση της κονσόλας

  • παράδειγμα με img και λάθος src ή url. Χρήση Console για την εμφάνιση του σφάλματος για άγνωστο τοπικό αρχείο: ERR_FILE_NOT_FOUND ή αντίστοιχο αν χρησιμοποιήσω λάθος url.
<div class="a1">
        <div class="a2">
            <div class="a3">
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima, perspiciatis, <span> reiciendis tenetur </span>sed nobis et aperiam, harum esse praesentium ea nisi vitae! Ratione debitis saepe inventore ipsam culpa dolores natus.</p>
            </div>  
        </div>  
    </div> 
body{
    margin: 0px;
    min-height: 200vh; /*για να ενεργοποιηθεί η δεξιά scroll bar */
}
.a1{
    background-color: aqua;
    padding: 8px;
}
.a2{
    background-color:cadetblue;
    padding: 8px;
}
.a3{
    background-color: chartreuse;
    padding: 8px;
}
.a3 p{
    background-color: crimson;
    margin: 0;
}
.a3 p span{
    background-color: darkgoldenrod;
}

Κάθε element είναι τύπου static και παραμένει εκεί που το δημιουργούμε με τις ιδιότητες του τύπου του (display-block ή inline) από αριστερά προς τα δεξιά και από πάνω προς τα κάτω.

Δοκιμάζω για το a3 p{}

Position: fixed είναι ανεξάρτητο με τον γονέα του και παραμένει κολλημένο στη θέση του κατά το scroll. Η τοποθέτησή του αφορά πλέον την οθόνη και όχι τον γονέα.

Position: absolut. Μοιάζει με το fixed ωστόσο είναι σε σχέση με τον relative γονέα του. Έαν δεν έχει οριστεί τότε θεωρεί το <html> ως relative γονέα του.

Συμβουλή: πάντα βάζω:
top:0;
left:0;

Δοκιμάζω και σχολιάζω από a3-a1 το position: relative; και βλέπω ότι η παράγραφος κολλάει στον αμέσως παραπάνω relative γονέα

body{
    margin: 0px;
    min-height: 200vh; /*για να ενεργοποιηθεί η δεξιά scroll bar */
}
.a1{
    background-color: aqua;
    padding: 8px;
    position: relative;
}
.a2{
    background-color:cadetblue;
    padding: 8px;
    position: relative;
}
.a3{
    background-color: chartreuse;
    padding: 8px;
    position: relative;
}
.a3 p{
    background-color: crimson;
    margin: 0;
    position: absolute;
    top:0;
    left: 0;
}

 

Top, left, right, bottom

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

https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_left

Τα top, left, right, bottom δεν δουλεύουν με position:static

Η διαφορά των top, left, right, bottom με το margin είναι ότι δεν απωθούν τα γειτονικά elements. Και αφορούν την απόσταση από τα άκρα.

Ζ-index

https://www.w3schools.com/css/css_z-index.asp

Προσοχή: το z-index δεν δουλεύει με position:static. Όταν τα στοιχεία έχουν το ίδιο z-index τότε έχει σημασία με ποια σειρά είναι γραμμένα στο html αρχείο.

Με z-index:-1 πηγαίνει πίσω από όλα.

Δεν βάζουμε αυθαίρετα αριθμούς για να κρατώ τον έλεγχο.

Άσκηση: Να βάλω 1 παράγραφο fixed και να καλύπτει / καλύπτεται όταν κάνω skroll από τις επόμενες 4 παραγράφους(absolute ή relative) .

Άσκηση 2η:

<div class="box1"><p>Box1</p></div>
<div class="box2"><p>Box2</p></div>
<div class="box3"><p>Box3</p></div>
<div class="box4"><p>Box3</p></div>
div{
border: 1px solid #777;
height:125px;
position:absolute;
width:200px;
padding: 12px;
}
.box1{
background-color: aqua;
left: 110px;
top:50px;
z-index: 120;;
}
.box2{
background-color: tomato;
left:0px;
top: 130px;
z-index: 121;
}
.box3{
background-color: #ddd;
z-index: 1000;
left:30px;
position:static;
}
.box4{
background-color: burlywood;
left:250px;
top:65px;
z-index: 3;
}

Άσκηση 3η (Ζ ζιγκ-ζαγκ):

μπορώ να φτιάξω μια άλλη παράγραφο με position:fixed και να βάλω ένα ενδιάμεσω z-index ώστε όταν χρησιμοποιώ την μπάρα κύλισης να να εμφανίζεται ότι περνάει πάνω από μερικές p και κάτω από άλλες. Επίσης παρακάτω γίνεται και η χρήση του important το οποίο υπερισχύει από όλα και άρα και από το inline background-color…

Ζ ζιγκ-ζαγκ.
<div class="divking">
<div class="box1 general"><p>Box1</p></div>
<div class="box2 general"><p>Box2</p></div>
<div class="box3 general"><p>Box3</p></div>
<div class="box4 general"><p>Box3</p></div>
</div>
<p class="classp pfixed" style="background-color: red;">Lorem ipsum </p>
.general{
border: 1px solid #777;
height:125px;
position:absolute;
width:200px;
padding: 12px;
}
.divking{
background-color: #eee;
height: 340px;
width: 100%;
}
.box1{
background-color: aqua;
left: 110px;
top:50px;
z-index: 120;;
}
.box2{
background-color: tomato;
left:0px;
top: 130px;
z-index: 121;
}
.box3{
background-color: #ddd;
z-index: 1000;
left:30px;
position:static;
}
.box4{
background-color: burlywood;
left:250px;
top:65px;
z-index: 3;
}
.classp{
background-color: dodgerblue !important;
}
.pfixed{
position: fixed;
top:0px;
z-index: 4;
}

 

 


Frameworks

Η βάση είναι πάντα html και css. Οι βιβλιοθήκες πάτανε πάνω στην κλασσική css. Άγνοια της css, σημαίνει ότι χρησιμοποιώ frameworks σαν “μαύρα κουτιά”.

Προτείνεται να ξεκινήσουμε με css και μετά να επιλέξουμε έτοιμα frameworks.

  <p class="a2 fixed top-0 left-0 bg-green-800 text-white p-20 rounded-2xl m-10 >

Και επιπλέον με χρήση της αναζήτησης να βρεθούν επιπλέον παραδείγματα π.χ.: border-4 border-black shadow-2xl blur-[1px]

Υπάρχουν έτοιμες κλάσεις τις οποίες χρησιμοποιώ άμεσα. ΌΜΩΣ πρέπει να τις μάθω. Πατάει όμως πάνω στη κλασσική css.

Important

Παράδειγμα με inline και εξωτερικό css. Υπερισχύει το inline μέχρι να βάλουμε το !important στο εξωτερικό css π.χ. με color: και επίδειξη για χρήση της κονσόλας.

Παράδειγμα:

 <p class="classp" style="background-color: red;">
Lorem ipsum </p>
.classp{
background-color: dodgerblue !important; /* αν βγάλω το !important υπερισχύει το inline red*/
}

Ψευδοκλάσεις

https://www.w3schools.com/css/css_pseudo_classes.asp
Στο κάτω μέρος της σελίδας είναι η λίστα με όλες τις ψευδοκλάσεις.

Ιδιαίτερα για τα links πρέπει να έχουν οριστεί ψευδοκλάσεις με τη σειρά:

  1. a:link
  2. a:visited
  3. a:focus
  4. a:hover
  5. a:active

 

Παράδειγμα (Ψευδοκλάσεις ενεργειών χρήστη):

α) με συνδέσμους που έχω επισκεφθεί (μωβ) και δεν έχω επισκεφθεί (μπλε)
Σημ: Chrome > F12 > styles > filter>:hov και δοκιμάζω να τσεκάρω το :hover για url που δεν έχω ακόμη επισκεφθεί

a{
    font-size: 20px;
    margin: 20px;
    padding: 5px;
    background-color: red;
    color: white;
}
a:hover{
    background-color: rgb(70, 4, 4);
    color: blanchedalmond;
    border-radius: 4px;

}
/* Κατασκευή container κουτί */
div{
    height: 40px;
    width:200px;
    background-color: dodgerblue;
    font-size: 18px;
    margin:40px;
    text-align: center;
}
div:hover{
    background-color: darkblue;
    color: white;
    height: 60px;
    width: 220px;
    margin-left: 80px;
}
div:active{
    background-color: rosybrown;
    color: black;
    border: 2px solid red;
}

β) κουτί div με hover να μετακινείται, να αλλάζουν οι γωνίες ή το χρώμα φόντου , το χρώμα γραμμάτων.

γ) όπως παραπάνω με το :active (όταν δηλαδή κάνω κλικ)
Δεν έχει σημασία να βάλω ταυτόχρονα :active:hover καθώς το active προϋποθέτει το :hover

δ) Δημιουργία div με κλάση .rebel (δεν χρειάζεται να την ορίσω στο css)

<div class="rebel">
    2η αντιδραστική παράγραφος !
</div>

αλλά τροποποιώ το css ώστε π.χ. στο active να μην υπακούει:

div:active:not(.rebel){
    background-color: rosybrown;
    color: black;
    border: 2px solid red;
}

ε) Με TAB πηγαίνω στα ενεργά elements με τα οποία μπορώ να αλληλεπιδράσω (links, inputs κλπ). Με shift+TAB πάω στο προηγούμενο. Ουσιαστικά βλέπω ότι ενεργοποιείται ένα περίγραμμα και καταλαβαίνω που εστιάζει ο browser (σε ποιό element γίνεται FOCUS). Αν πατήσω ENTER τότε θα γίνει η εξ’ ορισμού ενέργεια (π.χ. ανοίγει ένα a ή γράφω σε ένα πεδίο κειμένου).
Βάζω τρία input type=”text” name=”” id=”” και προσθέτω το css:

input:focus{
    border-color: red;
    background-color: bisque;
    color: darkred;
}

Ψευδοκλάσεις με βάση τη θέση:

Μπορώ να λιγοστέψω τη δημιουργία κλάσεων και να χρησιμοποιώ ψευδοκλάσεις ώστε να έχω απλούστερο css.

:first-child, :last-child, :nth-child(n)

Άσκηση: Δημιουργώ div με τρία inputs

<div class="thesi">
<input type="text" name="" id=""> <br>
<input type="text" name="" id=""> <br>
<input type="text" name="" id="">
</div>

θέλουμε το 1ο και το τελευταίο input να έχουν διαφορετικό background color.

Α’ τρόπος: Δημιουργώ μια κλάση για τα συγκεκριμένα inputs

<style>
    .firstIn{
        background-color: bisque;
    }
    .SecIn{
        background-color:cadetblue;
    }
</style>
<input type="text" name="" id="" class="firstIn"> <br>
<input type="text" name="" id=""> <br>
<input type="text" name="" id=""  class="SecIn">

B’ τρόπος: Δημιουργώ κλάση .thesi και βάζω μέσα τα inputs. Στη συνέχεια χρησιμοποιώ:

<style>
    .thesi input:first-child{
        background-color: bisque;
    }
    .thesi input:last-child{
        background-color:cadetblue;
    }
</style>
<div class="thesi">
<input type="text" name="" id=""> <br>
<input type="text" name="" id=""> <br>
<input type="text" name="" id="">
</div>

Οπότε: μειώνω τις κλάσεις και απλοποιώ τον κώδικά μου!

Προσοχή αν βάλω π.χ. H1 μέσα στο div πριν τα inputs τότε δεν ισχύει το input:first-child γιατί το πρώτο παιδί είναι πλέον το Η1.
Ομοίως αν βάλω έστω και ένα br μετά το τελευταίο input τότε αυτό γίνεται το τελευταίο child και χάνεται η μορφοποίηση του input.

β) Βάζω ακόμη 3 inputs και χρησιμοποιώ το input:nth-child(5) για να αλλάξω το φόντο στο 5ο input.

γ) Βάζω στο τέλος ένα Η2. Προφανώς το input:last-child{} δεν δουλεύει. Μπορώ να βγάλω τον selector και να αφήσω σκέτο .thesi :last-child{}

δ) Τι γίνεται με το:

:last-child{
    background-color: beige;
}

και όταν το αλλάξω σε

body :first-child{
    background-color: beige; */
}

EXTRA λογισμικό:

    • XAMPP
  •  
    • chrome
    • firefox
    • opera

Πλεονεκτήματα:

  • ασφαλείς εφαρμογές
  • δωρεάν
  • οι περισσότερες ανοικτού κώδικα
  • εγκαταθίστανται σε φορητό μέσο
  • δεν αφήνουν σκουπίδια και δεν επιβαρύνουν τον ΗΥ
  • εύκολη μαζική ενημέρωση

Permanent link to this article: https://nikmavr.sites.sch.gr/%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-7%ce%bf-%ce%bc%ce%ac%ce%b8%ce%b7%ce%bc%ce%b1/