Υποενότητα 3.3: Εφαρμογή CSS
| Site: | ΕΛ/ΛΑΚ Moodle |
| Course: | Σχεδιασμός WEB και Παραγωγή Ψηφιακού Περιεχομένου |
| Book: | Υποενότητα 3.3: Εφαρμογή CSS |
| Printed by: | Guest user |
| Date: | Thursday, 21 November 2024, 11:14 PM |
Description
- Χρώματα - Colors
- Γραμματοσειρές - Google fonts
- Εικονίδια - Font Awesome
- Box model
Χρώμα - Colors
Τα χρώματα καθορίζονται χρησιμοποιώντας:
- ονόματα - color names
- Δεκαεξαδικούς αριθμούς - HEX (hexadecimal) values
- Τιμές (values) RGBA
- και άλλα
Περισσότερες πληροφορίες εδώ
Είναι εύκολο να βρείτε το χρώμα που θέλετε:
Περισσότερες πληροφορίες εδώ
Είναι εύκολο να εντοπίσετε ένα χρώμα:
Χρησιμοποιήστε το "Show Pixel Color" του φυλλομετρητή σας! Κάντε κλικ εδώ για να εγκαταστήσετε στον Chrome ή χρησιμοποιήστε το εργαλείο Web developer> Eyedropperτου r Firefox.
Άσκηση
Ποια είναι η τιμή RGB αυτού του χρώματος;
Γραμματοσειρές Google fonts
Με τη χρήση των γραμματοσειρών μπορούμε να επιτύχουμε μια μοναδική εμφάνιση στις ιστοσελίδες μας.
Υπάρχουν πολλές διαθέσιμες βιβλιοθήκες γραμματοσειρών.
Η πιο συνηθισμένη συλλογή είναι η Google Fonts.
Έχει μια τεράστια ποικιλία και λεπτομερείς οδηγίες για το πώς να τις χρησιμοποιήσετε.
Παράδειγμα
Οι κανόνες CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
</head>
<body>
<p style="font-family: 'Pacifico', cursive;" style = >Google Gonts</h3>
</body>
</html>θα δημιουργήσουν μια σελίδα που εμφανίζεται ως:
Εικονίδια - Icons
Τα εικονίδια είναι ένας έξυπνος τρόπος για να απεικονίσετε περιεχόμενο χωρίς τη χρήση εικόνων.
Υπάρχουν πολλές βιβλιοθήκες με εικονίδια.
Εδώ θα χρησιμοποιήσουμε τη βιβλιοθήκη Font Awesome .
Είναι εύκολο να εισαγάγετε τα εικονίδια Font Awesome στον κώδικα σας και υπάρχουν λεπτομερείς οδηγίες γι 'αυτό.
Για να χρησιμοποιήσετε τα εικονίδια Font Awesome, προσθέστε την ακόλουθη γραμμή μέσα στο <head> της HTML σελίδας:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">Σημειώστε ότι μπορείτε να αλλάξετε το χρώμα τους χρησιμοποιώντας τους κοινούς κανόνες CSS.
Παράδειγμα
Οι κανόνες CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h3> <i class="fa fa-info-circle" aria-hidden="true"></i> Information icon</h3>
</body>
</html>θα δημιουργήσουν μια σελίδα που εμφανίζεται ως:
Περισσότερες πληροφορίες για τα εικονίδια: https://www.w3schools.com/icons/
Άσκηση
- Ανοίξτε τον επεξεργαστή κώδικα, δημιουργήστε ένα νέο αρχείο και αποθηκεύστε το ως exersice03.3.04.html στον φάκελο "Exercises".
- Επεξεργαστείτε το αρχείο. Στον browser θα πρέπει να εμφανίζεται η επόμενη εικόνα:
Box model
Με τον όρο Box model περιγράφεται η περιοχή γύρω από κάθε στοιχείο HTML.
Μπορείτε να το φανταστείτε ως ένα αόρατο κουτί όπου τα στοιχεία βρίσκονται μέσα.
Αυτά τα "κουτιά" αποτελούνται από τέσσερα στρώματα.
- Το πρώτο είναι το περιεχόμενο (content). Το περιεχόμενο είναι το πραγματικό κείμενο ή πολυμέσο (media) που έχουμε μέσα στο στοιχείο μας.
- Το δεύτερο είναι το διάκενο - padding. Το Padding είναι η περιοχή γύρω από το περιεχόμενό μας.
- Το τρίτο είναι το περίγραμμα- border, περιβάλλει τόσο την περιοχή padding όσο και το περιεχόμενο. Το περιθώριο μπορεί να εμφανιστεί στη σελίδα χρησιμοποιώντας την ιδιότητα CSS "border" δίνοντας της τιμές.
- Το τέταρτο είναι το περιθώριο - margin. Το περιθώριο περιβάλλει όλα τα παραπάνω και ορίζει την απόσταση από τα άλλα "κουτιά" στοιχείων στον κώδικα μας.
Παράδειγμα
The CSS rules:
<html lang="en">
<head>
<title>Style - CSS</title>
<style>
p{
width: 33%;
text-align: left;
font-size: 0.75em;
color: #006600;
background: #fefecd;
padding: 2%;
margin: 0.75em;
border-width: 10px;
border-style: dotted;
border-color: #900000;
}
</style>
</head>
<body>
<h4>This is a Heading 4</h4>
<p>This is lorem ipsum paragraph: <br>
Lorem ipsum dolor sit amet, ea nec probo eloquentiam, in esse quando laboramus sea. <br>
Ne omnesque detraxit eam, cu qui movet affert volutpat. <br>
Qui amet option eu. Utamur euismod hendrerit vel no, ius natum salutatus forensibus in. <br>
Sea diceret vivendo constituam at, duo an adhuc viderer evertitur.
</p>
</body>
</html>θα δημιουργήσουν μια σελίδα που εμφανίζεται ως:
Περισσότερες πληροφορίες για το Box model: https://www.w3schools.com/css/css_boxmodel.asp
Περισσότερες πληροφορίες για τα Borders: https://www.w3schools.com/css/css_border.asp
Περισσότερες πληροφορίες για το Margin: https://www.w3schools.com/css/css_margin.asp
Περισσότερες πληροφορίες για το Padding: https://www.w3schools.com/css/css_padding.asp