CSS Χρήση Εργαλείων Ενσωματωμένης Ενσωμάτωσης

CSS Χρήση Εργαλείων Ενσωματωμένης Ενσωμάτωσης

Σε αυτή τη ενότητα, θα μάθετε τα εξής CSS χρήσιμα χαρακτηριστικά χρήστη:

  • resize
  • outline-offset

Υποστήριξη Περιηγητών

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

Παράμετρος Chrome IE Firefox Safari Opera
resize 4.0 Δεν υποστηρίζεται 5.0 4.0 15.0
outline-offset 4.0 15.0 5.0 4.0 9.5

CSS Ρύθμιση Μεγεθους

resize Η ιδιότητα καθορίζει αν και πώς το στοιχείο θα ρυθμιστεί από τον χρήστη.

Το στοιχείο div αυτού του στοιχείου μπορεί να ρυθμιστεί από τον χρήστη!

Ρύθμιση μεγέθους: Κάντε κλικ και σύρετε το κάτω δεξί γωνία του στοιχείου div.

Προσοχή:O Internet Explorer δεν υποστηρίζει την ιδιότητα resize.

Το παρακάτω παράδειγμα επιτρέπει στον χρήστη να ρυθμίσει μόνο το πλάτος του στοιχείου <div>:

παράδειγμα

div {
  resize: horizontal;
  overflow: auto;
}

Προσπαθήστε το!

Το παρακάτω παράδειγμα επιτρέπει στον χρήστη να ρυθμίσει μόνο το ύψος του στοιχείου <div>:

παράδειγμα

div {
  resize: vertical;
  overflow: auto;
}

Προσπαθήστε το!

Το παρακάτω παράδειγμα επιτρέπει στον χρήστη να ρυθμίσει το ύψος και το πλάτος του στοιχείου <div>:

παράδειγμα

div {
  resize: both;
  overflow: auto;
}

Προσπαθήστε το!

Σε πολλούς περιηγητές, το <textarea> είναι προεπιλεγμένο ως ρυθμιζόμενο σε μέγεθος. Εδώ, χρησιμοποιούμε την ιδιότητα resize για να απενεργοποιήσουμε αυτή τη δυνατότητα:

παράδειγμα

textarea {
  resize: none;
}

Προσπαθήστε το!

Ανακύκλωση Προφίλ CSS

outline-offset Η ιδιότητα προσθέτει χώρο μεταξύ της οριζόντιας γραμμής και των περιθωρίων του στοιχείου.

Αυτό το div έχει μια οριζόντια γραμμή 15px εκτός από τα περιθώρια του περιθωρίου.

Προσοχή:Η οριζόντια γραμμή είναι διαφορετική από το περιθώριο! Αντί για το περιθώριο, η οριζόντια γραμμή ζωγραφίζεται εκτός από το περιθώριο και μπορεί να επικαλύπτεται με άλλο περιεχόμενο. Επιπλέον, η οριζόντια γραμμή δεν είναι μέρος του μεγέθους του στοιχείου: το συνολικό πλάτος και ύψος του στοιχείου δεν επηρεάζονται από το πλάτος της οριζόντιας γραμμής.

Η παρακάτω παράδειγμα χρησιμοποιεί την ιδιότητα outline-offset για να προσθέσει χώρο μεταξύ της οριζόντιας και της κλίμακας του περιθωρίου:

παράδειγμα

div.ex1 {
  margin: 20px;
  border: 1px solid black;
  outline: 4px solid red;
  outline-offset: 15px;
} 
div.ex2 {
  margin: 10px;
  border: 1px solid black;
  outline: 5px dashed blue;
  outline-offset: 5px;
}

Προσπαθήστε το!

Παράμετροι CSS Χρήσης Εργαλείων Ενσωματωμένης Ενσωμάτωσης

Η παρακάτω τάξη αναφέρει όλες τις περιπτώσεις χρήσης των στοιχείων της διεπαφής χρήστη:

Παράμετρος Περιγραφή
outline-offset Προσθέτει χώρο μεταξύ της ορίσματος και της περιθωρίου του στοιχείου.
resize Καθορίζει αν το στοιχείο μπορεί να προσαρμοστεί από τον χρήστη.