Σε αυτό το κεφάλαιο θα μάθετε για τις ακόλουθες ιδιότητες διεπαφής χρήστη CSS:
resizeoutline-offsetΟι αριθμοί στον πίνακα καθορίζουν την πρώτη έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως την ιδιότητα.
| Property | |||||
|---|---|---|---|---|---|
| resize | 4.0 | 79.0 | 5.0 | 4.0 | 15.0 |
| outline-offset | 4.0 | 15.0 | 5.0 | 4.0 | 9.5 |
Η ιδιότητα αλλαγή μεγέθους καθορίζει εάν (και πώς) ένα στοιχείο πρέπει να μπορεί να αλλάξει μέγεθος από τον χρήστη.
This div element is resizable by the user!
To resize: Click and drag the bottom right corner of this div element.
Το ακόλουθο παράδειγμα επιτρέπει στο χρήστη να αλλάξει το μέγεθος μόνο του πλάτους ενός στοιχείου <div>:
div
{
resize: horizontal;
overflow: auto;
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: horizontal;
overflow: auto;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<div>
<p>Let the user resize only the width of this div element.</p>
<p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>
</body>
</html>
Το ακόλουθο παράδειγμα επιτρέπει στο χρήστη να αλλάξει το μέγεθος μόνο του ύψους ενός στοιχείου <div>:
div
{
resize: vertical;
overflow: auto;
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: vertical;
overflow: auto;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<div>
<p>Let the user resize only the height of this div element.</p>
<p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>
</body>
</html>
Το ακόλουθο παράδειγμα επιτρέπει στο χρήστη να αλλάξει το μέγεθος και το ύψος και το πλάτος ενός στοιχείου <div>:
div
{
resize: both;
overflow: auto;
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<div>
<p>Let the user resize both the height and the width of this div element.</p>
<p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>
</body>
</html>
Σε πολλά προγράμματα περιήγησης, το <textarea> έχει δυνατότητα αλλαγής μεγέθους από προεπιλογή. Εδώ, χρησιμοποιήσαμε την ιδιότητα αλλαγή μεγέθους για να απενεργοποιήσουμε τη δυνατότητα αλλαγής μεγέθους:
textarea {
resize: none;
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
textarea#test {
resize: none;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<p>In many browsers, textarea elements are resizable by default. In this example, we have used the resize property to disable the resizability:</p>
<textarea id="test">Textarea - Not resizable</textarea>
<br><br>
<textarea>Textarea - Resizable (default)</textarea>
</body>
</html>
Η ιδιότητα outline-offset προσθέτει χώρο μεταξύ ενός περιγράμματος και της άκρης ή του περιγράμματος ενός στοιχείου.
Σημείωση: Το περίγραμμα διαφέρει από τα σύνορα! Σε αντίθεση με το περίγραμμα, το περίγραμμα είναι σχεδιάζεται έξω από το περίγραμμα του στοιχείου και μπορεί να επικαλύπτει άλλο περιεχόμενο. Επίσης, το περίγραμμα είναι ΔΕΝ αποτελεί μέρος των διαστάσεων του στοιχείου. το συνολικό πλάτος και ύψος του στοιχείου δεν επηρεάζεται από το πλάτος του περιγράμματος.
Το παρακάτω παράδειγμα χρησιμοποιεί την ιδιότητα 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;
} Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>
<h1>The outline-offset Property</h1>
<div class="ex1">This div has a 4 pixels solid red outline 15 pixels outside the border edge.</div>
<br>
<div class="ex2">This div has a 5 pixels dashed blue outline 5 pixels outside the border edge.</div>
</body>
</html>
Ο παρακάτω πίνακας παραθέτει όλες τις ιδιότητες διεπαφής χρήστη:
Προσθέτει χώρο μεταξύ ενός περιγράμματος και της άκρης ή του περιγράμματος ενός στοιχείου
Καθορίζει εάν ένα στοιχείο έχει δυνατότητα αλλαγής μεγέθους ή όχι από το χρήστη