Print bookPrint book

Υποενότητα 3.2: Εισαγωγή CSS

Site: ΕΛ/ΛΑΚ Moodle
Course: Σχεδιασμός WEB και Παραγωγή Ψηφιακού Περιεχομένου
Book: Υποενότητα 3.2: Εισαγωγή CSS
Printed by: Guest user
Date: Wednesday, 24 April 2024, 3:02 PM

Description

Πού εισάγουμε  CSS:

  • style attribute σε στοιχεία HTML – inline style 
  • Εσωτερικό - Internal Style Sheet
  • Εξωτερικό αρχείο - External style sheet

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

Table of contents

Πού εισάγουμε CSS

Το CSS μπορεί να εφαρμοστεί με τρεις διαφορετικούς τρόπους:

  • Inline style, style attribute σε HTML στοιχείο - element
  • Εσωτερικό - Internal style sheet, <style> element στο HTML head
  • Εξωτερικό αρχείο - External style sheet μέσω του<link> element  στο HTML head

Inline style

Τα εσωτερικά στυλ - Inline styles ορίζονται στο HTML body.  Σε αυτή την περίπτωση, τοποθετούμε  style και τους κανόνες μας μέσα στο στοιχείο στο οποίο θέλουμε να μορφοποιήσουμε.

Παράδειγμα

Οι κανόνες CSS:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Style - CSS</title>
  </head>
  <body>
    <h2>Inline style</h2>
    <p>This is the default text</p>
    <p style= "color:red;"> This text would appear read! </p>
    <p style= "background-color: teal;"> This text has background color! </p>
    <p style= "text-transform: capitalize;"> This first letter of each word is capitalized! </p>
    <p style= "text-indent: 50px;"> This text has indent of 50px! </p>
    <p style= "letter-spacing: 3px;"> This text has letter spacing of 50px! </p>
  </body>
</html>


θα δημιουργήσουν μια σελίδα που εμφανίζεται ως:

Inline style

To ιnline style χρησιμοποιείται όταν θέλουμε να εφαρμόσουμε ένα μοναδικό στυλ σε ένα συγκεκριμένο στοιχείο του html μας.

Styling σε κείμενο

Κοινές ιδιότητες για μορφοποίηση κειμένουείναι:

  • χρώμα για το κείμενο  color 
  • χρώμα για το υπόβαθρο background-color 
  • γραμματοσειρά font‐family 
  • μέγεθος γραμμάτων font‐size 
  • στοίχιση κειμένου text‐align 

Περισσότερες πληροφορίες: https://www.w3schools.com/css/css_text.asp

Internal Style Sheet

Τα εσωτερικά στυλ - Internal styles καθορίζονται στην περιοχή the <head> του εγγράφου HTML μέσα στην ετικέτα(tag) <style>.

Παράδειγμα

Οι κανόνες CSS:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Style - CSS</title>
    <style>
      h2 {
        font-family: "Times New Roman", Times, serif;
        font-style: italic;
      }
      h4 {
        font-family: "Verdana", Sans-serif;
        font-variant: small-caps;
      }
      p {
        font-family: "Lucida", Monospace;
        font-size: 1.1em;
      }
    </style>
  </head>
  <body>
    <h2>This is a Heading 2</h2>
    <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>

θα δημιουργήσουν μια σελίδα που εμφανίζεται ως:

Internal stylesheet

Το Internal style sheet μπορεί να χρησιμοποιηθεί όταν έχουμε μόνο μία σελίδα HTML ή όταν έχουμε πολλές σελίδες HTML αλλά θέλουμε ειδικούς κανόνες για τη συγκεκριμένη σελίδα HTML.

 Περισσότερες πληροφορίες: https://www.w3schools.com/css/css_font.asp

External style sheet

Ένα εξωτερικό φύλλο στυλ (external style sheet) είναι ένα ξεχωριστό αρχείο που αποθηκεύεται με την επέκταση .css. Μπορεί να παραχθεί με τον ίδιο επεξεργαστή κώδικα που χρησιμοποιείται για το html.

Ένα εξωτερικό φύλλο στυλ μπορεί να χρησιμοποιηθεί σε πολλαπλές σελίδες html.

Προκειμένου τα στυλ να εφαρμοστούν στα HTML αρχεία, θα πρέπει να αναφέρουμε το φύλλο στυλ μέσα στο  <link> στοιχείο που θα τοποθετηθεί στην περιοχή head aτου εγγράφου html.

Η σύνταξη που χρησιμοποιείται είναι:

<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<link rel="stylesheet" type="text/css" href="https://example.com/css/thestyle.css">

Το χαρακτηριστικό rel (attribute) καθορίζει τη σχέση μεταξύ του τρέχοντος και του συνδεδεμένου εγγράφου. Το σχετικό φύλλο rel με την τιμή "stylesheet" ενημερώνει την τρέχουσα σελίδα ότι θα εισαχθεί ένα φύλλο στυλ.

Το χαρακτηριστικό type (attribute) προσδιορίζει το είδος του αρχείου. Το χαρακτηριστικό  type (attribute) με τιμή ="text/css" ορίζει ότι το περιεχόμενο του εγγράφου θα είναι CSS.

Το χαρακτηριστικό href περιέχει τη διεύθυνση url στην οποία μπορεί να βρεθεί το αρχείο css..

 Σημείωση!

Είναι καλή πρακτική η αποθήκευση του αρχείου .css  σε ξεχωριστό φάκελο με όνομα  css. 

Παράδειγμα

Αυτό είναι ένα απλό αρχείο HTML:

Just HTML

Εισάγουμε σε αυτό το αρχείο HTML ένα εξωτερικό φύλλο στυλ (external style sheet):

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Style - CSS</title>
      <!-- This is an external style sheet-->
      <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/Core/Swiss">
  </head>
  <body>
    <h2>This is a Heading 2</h2>
    <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>
    </p>
    <ul>
        <li>The first list item</li>
        <li>The second list item </li>
        <li>The third list item!</li>
    </ul> 
    <a href="https://www.w3schools.com/ target="_blank"">This a link</a>
  </body>
</html>

Το  style sheet  αυτό θα δημιουργήσει μια σελίδα που εμφανίζεται ως:

HTML + CSS result

Προτεραιότητα κανόνων

Όπως είδαμε, υπάρχουν τρεις τρόποι για να εφαρμόσουμε στυλ στο HTML.

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

Για παράδειγμα, πάρτε το στοιχείο p.

Το external style sheet είναι:

p { color: red; text-align:center;}

Το internal style sheet είναι:

p { color: green; }

Το inline style είναι:

<p style="color:pink; background-color:grey;">

Πώς περιμένετε να εμφανιστεί η παράγραφος;

Σύμφωνα με τον κανόνα, το πλησιέστερο στυλ είναι το στοιχείο που θα έχει η υψηλότερη προτεραιότητα.

Έτσι έχουμε: : inline style >  internal style sheet > external style sheet

Αυτό σημαίνει ότι για τις κοινές ιδιότητες, το inline style θα υπερκεράσει την τιμή που έχει τοποθετηθεί στο internal ή στο external style sheet. Επίσης, το internal style sheet θα υπερκεράσει την τιμή του external.

Σημείωση

Ο κανόνας εφαρμόζεται μόνο στις κοινές ιδιότητες. Οι ιδιότητες που έχουν οριστεί μόνο σε ένα σημέιο θα εξακολουθούν να εμφανίζονται.

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

inline>internal>external

For more information: https://www.w3schools.com/css/css_howto.asp

Άσκηση

Έχετε τον κώδικα:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Style - CSS</title>
    <!-- This is an external style sheet-->
    <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/Core/Swiss">
  </head>
  <body>
    <h2>This is a Heading 2</h2>
     <h4>This is a Heading 4</h4>
     <!-- Paragraph 1-->
     <p>Lorem ipsum dolor sit amet, ea nec probo eloquentiam, in esse quando laboramus sea.</p>
     <!-- Paragraph 2-->
     <p>Solet dictas periculis et mea, in omnesque periculis eloquentiam vis.</p>
     <!-- Paragraph 3-->
     <p>Mea id tale delicata conclusionemque, ut dicam everti vel, est ei ornatus probatus efficiantur. </p>
     <!-- Paragraph 4-->
     <p>Te adipisci delicatissimi usu, ridens copiosae pri no, etiam verterem molestiae eos te.</p>
  </body>
</html>

Άσκηση

Πρόκειται για μια άσκηση για την κατανόηση της προτεραιότητας των κανόνων .

  1. Ανοίξτε τον επεξεργαστή κώδικα, δημιουργήστε ένα νέο αρχείο και αποθηκεύστε το ως exersice03.2.04.html στον φάκελο "Exercises".
  2. Αντιγράψτε τον παραπάνω κώδικα και επικολλήστε τον στο νέο αρχείο.
  3. Επεξεργαστείτε το αρχείο. Στον browser θα πρέπει να εμφανίζεται η επόμενη εικόνα:

The result is ...

Λύση: