Δημιουργία πλαισίου σε html. Διπλό περίγραμμα με χρήση CSS

Chercher Παιδικά προϊόνταΛειτουργεί για να δημιουργήσει το περίγραμμα ενός αντικειμένου, δηλαδή το πάχος του πλαισίου, το χρώμα και το στυλ του. Αυτή η ιδιότητα χρησιμοποιείται ευρέως σε HTML. Μπορείτε να δημιουργήσετε διάφορα εφέ για να αντιλαμβάνεστε καλύτερα το περιεχόμενο της σελίδας. Για παράδειγμα, σχεδιάστε μια πλαϊνή γραμμή, κεφαλίδα ιστότοπου, μενού κ.λπ.

1. Σύνταξη περιγράμματος CSS

σύνορο: σύνορο- περίγραμμα πλάτους-στυλ περιγράμματος-χρώμα | κληρονομώ;

• περίγραμμα-πλάτος - πάχος περιγράμματος. Μπορείτε να το ορίσετε σε pixel (px) ή να το χρησιμοποιήσετε τυπικές τιμέςλεπτό, μεσαίο, παχύ (διαφέρουν μόνο σε πλάτος pixel)
• περίγραμμα - στυλ του περιγράμματος που εμφανίζεται. Μπορεί να λάβει τις ακόλουθες τιμές
  • κανένα ή κρυφό - ακυρώνει τα σύνορα
  • διάστικτη - κορνίζα με κουκκίδες
  • διακεκομμένο - πλαίσιο από παύλες
  • συμπαγής - απλή γραμμή (που χρησιμοποιείται συχνότερα)
  • διπλό - διπλό πλαίσιο
  • αυλάκι - αυλακωτό 3D περίγραμμα
  • κορυφογραμμή, εισαγωγή, αρχή - διάφορα εφέ 3D καρέ
  • inherit - εφαρμόζεται η τιμή του γονικού στοιχείου
• χρώμα περιγράμματος - χρώμα περιγράμματος. Μπορεί να ρυθμιστεί χρησιμοποιώντας συγκεκριμένο όνομαχρώματα ή σε μορφή RGB (δείτε ονόματα χρωμάτων html για τον ιστότοπο)

Σημείωμα

Οι τιμές στην ιδιότητα περιγράμματος CSS μπορούν να οριστούν με οποιαδήποτε σειρά. Η πιο συχνά χρησιμοποιούμενη ακολουθία είναι το "χρώμα στυλ πάχους".

2. Παραδείγματα με διαφορετικά περιγράμματα CSS

2.1. Παράδειγμα. Διαφορετικά στυλ σχεδίασης περιγράμματος-στυλ περιγράμματος

border-style: dashed

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style: outset

Четыре разных рамки

border-style: dotted

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style: outset

Четыре разных рамки

2.2. Пример. Изменения цвета рамки при наведении курсора мыши

Этот пример очень простой, но интересный. Он показывает, как можно использовать псевдокласс :hover и рамку CSS border для создания простых эффектов (например, для меню).

При наведении курсора мыши на блок цвет рамки изменится

Вот как это выглядит на странице:

2.3. Пример. Как сделать прозрачную рамку border

Рамку можно сделать прозрачной. Этот эффект редко, но иногда может быть очень полезен для веб-дизайнеров. Для задания прозрачности надо воспользоваться заданием цвета в виде RGBA (R, G, B, P) , где последним параметром задается прозрачность (вещественное число от 0.0 до 1.0)

Вот как это выглядит на странице:

3. Толщина границы: свойство border-width

Задает толщину линии. Ранее мы задавали ее в едином описании border.

Синтаксис CSS border-width

border-width : thin | medium | thick | значение ;

• thin - тонкая толщина линии
• medium - средняя толщина линии
• thick - толстая толщина линии

Ниже приведены несколько примеров. Самым необычным будет - это разная толщина границы у каждой стороны.

border-width: thin

border-width: medium

border-width: thick

Разная толщина у границ

Вот как это выглядит на странице:

border-width: thin

border-width: medium

border-width: thick

Разная толщина у границ

4. Как сделать рамку border только с одного края (границы)

У свойства CSS border есть производные свойства для задания односторонних границ у элемента:

• border-top - для задания рамки сверху (верхняя граница)
• border-bottom - для задания рамки снизу (нижняя граница)
• border-right - для задания рамки справа (правая граница)
• border-left - для задания рамки слева (левая граница)

Эти границы можно совмещать, т.е. прописать для каждого направления свою рамку. Синтаксис точно такой же как и у border.

Также есть свойства

• border-top-color - задание цвета верхний границы
• border-top-style - задание стиля верхней границы
• border-top-width - задание толщины верхней границы
• и т.д. для каждого направления

На мой взгляд проще писать все в строчку, чем плодить лишний текст в стилях. Например, следующие свойства будут одинаковыми

/* Описание двух одинаковых стилей: */

4.1. Пример. Красивая рамка для выделения цитат

Пример рамки для цитаты

Вот как это выглядит на странице:

Пример рамки для цитаты

Примечание
Можно задать отдельную границу для каждой из сторон.

5. Как сделать несколько границ border у элемента html

Иногда требуется сделать несколько границ. Приведем пример

5.1. Первый вариант с несколькими границами

Вот как это выглядит на странице:

Есть второй способ через наложение теней.

5.2. Наложение теней для создания нескольких границ

Вот как это выглядит на странице:

6. Скругление углов у границ (border-radius)

Для создания красивых рамок используют свойство CSS border-radius (доступно только в CSS3). С помощью него можно делать скругления углов, что создает совсем другой вид. Например

7. Вдавленная линия CSS

Вдавленные линии эффектно могут смотреться на темном фоне, что подходит далеко не каждому сайту.

---

Вот как это выглядит на странице:

Для обращения к border из JavaScript нужно писать следующую конструкцию:

document.getElementById("elementID").style.border ="VALUE "

Для управления границей элемента применяется универсальное свойство border . Это свойство позволяет установить в одном объявлении толщину, стиль и цвет границы элемента.

Эти три свойства (толщину, стиль и цвет границы) можно установить в одном объявлении. Вот пример:

Μπορείτε να καθορίσετε ένα στυλ περιγράμματος μόνο στη μία πλευρά ενός στοιχείου. Για να το κάνετε αυτό, χρησιμοποιήστε τις ιδιότητες περίγραμμα-πάνω (πάνω περίγραμμα), περίγραμμα-δεξιά (δεξιό περίγραμμα), περίγραμμα-κάτω (κάτω περίγραμμα), περίγραμμα-αριστερά (αριστερό περίγραμμα).

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

Σκεφτείτε πώς θα μπορούσατε να δημιουργήσετε ένα σχήμα όπως αυτό χρησιμοποιώντας CSS:

Οι τιμές περιγράμματος - πάχος, στυλ και χρώμα - μπορούν να ρυθμιστούν ξεχωριστά χρησιμοποιώντας ειδικές ιδιότητες.

• σύνορα - στυλ περιγράμματος.
• περίγραμμα-πλάτος - πλάτος περιγράμματος.
• χρώμα περιγράμματος - χρώμα περιγράμματος.

Ας εξετάσουμε κάθε μία από τις τιμές ξεχωριστά.

ιδιοκτησία συνόρων Στυλ συνόρων.

Η ιδιότητα τύπου border ορίζει το στυλ του περιγράμματος. Στο CSS, σε αντίθεση με την HTML, το περίγραμμα ενός στοιχείου μπορεί να είναι όχι μόνο συμπαγές. Οι ακόλουθες τιμές επιτρέπονται για το στυλ περιγράμματος:

1. κανένα - κανένα περίγραμμα (προεπιλογή).
2. συμπαγές - συμπαγές περίγραμμα.
3. διπλό - διπλό περίγραμμα.
4. διακεκομμένο - διάστικτο περίγραμμα.
5. διακεκομμένο - ένα περίγραμμα από μια σειρά κουκκίδων.
6. κορυφογραμμή - σύνορο "ράχη".
7. αυλάκι - περίγραμμα "αυλάκι".
8. ένθετο - πιεσμένο περίγραμμα.
9. αρχή - εξωθημένο περίγραμμα.

Παραδείγματα για το πώς μοιάζουν.

χωρίς σύνορα (κανένα)

συμπαγές περίγραμμα

διπλό περίγραμμα

περίγραμμα μιας σειράς κουκκίδων (στικτή)

διακεκομμένο περίγραμμα

αυλάκι περίγραμμα

σύνορο κορυφογραμμής

εσοχή περιγράμματος (ένθετο)

εξωθημένο περίγραμμα (αρχή)

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

Ένα μπλοκ div με μαύρο περίγραμμα και στυλ κορυφογραμμής.

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

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

Μία τιμή (συμπαγής) - το στυλ περιγράμματος ορίζεται για όλες τις πλευρές του μπλοκ.

Δύο τιμές (συμπαγές διπλό) - η πρώτη τιμή ορίζει το στυλ για την επάνω και την κάτω πλευρά, η δεύτερη για την πλευρά.

Τρεις τιμές (συμπαγή διπλή διάστικτη) - η πρώτη τιμή για την επάνω πλευρά, η δεύτερη για τις πλευρές, η τρίτη για την κάτω πλευρά.

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

Η ιδιότητα πλάτους συνόρων. Πάχος περιγράμματος.

Για να ορίσετε το πλάτος του περιγράμματος ενός στοιχείου, χρησιμοποιήστε την ιδιότητα border-width. Το πάχος του περιγράμματος μπορεί να καθοριστεί σε οποιεσδήποτε απόλυτες μονάδες μέτρησης, για παράδειγμα σε pixel.

Όπως η ιδιότητα τύπου περιγράμματος, η ιδιότητα μπορεί επίσης να οριστεί από ένα σε τέσσερις τιμές. Ας δούμε παραδείγματα για κάθε περίπτωση.

Παράδειγμα κώδικα:

Επίσης για την ιδιότητα πλάτους περιγράμματος υπάρχουν τιμές στη φόρμα λέξεις-κλειδιά. Υπάρχουν τρία συνολικά:

• λεπτό - λεπτό περίγραμμα?
• μεσαίο - μέσο πάχος.
• παχύ - χοντρό περίγραμμα?

Πάχος περιγράμματος: λεπτό.

Πάχος περιγράμματος: μέτριο.

Πάχος περιγράμματος: παχύ.

Η ιδιότητα χρώματος περιγράμματος. Χρώμα περιγράμματος.

Για να ελέγξετε το χρώμα περιγράμματος, χρησιμοποιήστε το εργαλείο χρώματος περιγράμματος. Τα χρώματα για αυτήν την ιδιότητα μπορούν να οριστούν χρησιμοποιώντας οποιαδήποτε μέθοδο που περιγράφεται στο άρθρο "Χρώματα στο CSS", και συγκεκριμένα:

• Δεκαεξαδικός συμβολισμός (#ff00aa) του χρώματος.
• Η μορφή RGB είναι rgb(255,12,110) . Μορφή RGBA για CSS3.
• Μορφές HSLκαι HSLA για CSS3.
• Όνομα χρώματος, για παράδειγμα μαύρο. Πλήρης λίσταΤα ονόματα χρωμάτων δίνονται στον πίνακα ονομάτων χρωμάτων CSS.

Η ιδιότητα χρώματος περιγράμματος μπορεί επίσης να έχει μία έως τέσσερις τιμές και να τις αντιμετωπίζει παρόμοια με τις προηγούμενες ιδιότητες.

Μία τιμή (κόκκινο).

Δύο τιμές (κόκκινο μαύρο).

Τρεις τιμές (κόκκινο μαύρο κίτρινο).

Τέσσερις τιμές (κόκκινο μαύρο κίτρινο μπλε).

Τώρα ας επιστρέψουμε στο πρόβλημα που αναφέρθηκε παραπάνω και ας σχεδιάσουμε ένα σχήμα:

Εδώ είναι ο κώδικας που σχεδιάζει ένα τέτοιο σχήμα, μόνο μεγαλύτερο σε μέγεθος:

Ρύθμιση τιμών για τις πλευρές ξεχωριστά

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

• border-top (επάνω περίγραμμα)
• σύνορα-δεξιά
• σύνορο-κάτω
• περίγραμμα-αριστερά (αριστερό περίγραμμα)

Να σας υπενθυμίσω ότι για όλες τις ιδιότητες καθορίζονται τρεις τιμές (πάχος, στυλ και χρώμα) με οποιαδήποτε σειρά. Αλλά υπάρχουν ιδιότητες που σας επιτρέπουν να ορίσετε το πάχος, το χρώμα και το στυλ για κάθε πλευρά ξεχωριστά. Η γραφή αυτών των ιδιοτήτων προκύπτει από τα παραπάνω.

Επιλογές επάνω περιγράμματος (border-top).

• border-top-color - ορίζει το χρώμα του επάνω περιγράμματος του στοιχείου.
• border-top-width - ορίζει το πάχος του άνω περιγράμματος του στοιχείου.
• border-top-style - ορίζει το στυλ του επάνω περιγράμματος του στοιχείου.

Επιλογές δεξιού περιγράμματος (περίγραμμα-δεξιά).

• περίγραμμα-δεξιά-χρώμα - ορίζει το χρώμα του δεξιού περιγράμματος του στοιχείου.
• border-right-width - ορίζει το πάχος του δεξιού περιγράμματος του στοιχείου.
• border-right-style - ορίζει το στυλ του δεξιού περιγράμματος του στοιχείου.

Επιλογές κάτω περιγράμματος (περίγραμμα-κάτω).

• border-bottom-color - ορίζει το χρώμα του κάτω περιγράμματος του στοιχείου.
• border-bottom-width - ορίζει το πάχος του κάτω περιγράμματος του στοιχείου.
• border-bottom-style - ορίζει το στυλ του κάτω περιγράμματος του στοιχείου.

Επιλογές αριστερού περιγράμματος (περίγραμμα-αριστερά).

• border-left-color - ορίζει το χρώμα του αριστερού περιγράμματος του στοιχείου.
• border-left-width - ορίζει το πάχος του αριστερού περιγράμματος του στοιχείου.
• περίγραμμα-αριστερό-στυλ - ορίζει το στυλ του αριστερού περιγράμματος του στοιχείου.

Ένα παράδειγμα χρήσης αυτών των ιδιοτήτων:

Η ιδιότητα της ακτίνας συνόρων. Στρογγυλεμένες γωνίες περιγράμματος.

Η ιδιότητα border-radius προορίζεται να στρογγυλοποιεί τις γωνίες των περιγραμμάτων ενός στοιχείου. Αυτή η ιδιότητα εμφανίστηκε στο CSS3 και λειτουργεί σωστά σε όλα σύγχρονα προγράμματα περιήγησης, εκτός Internet Explorer 8 (και παλαιότερες εκδόσεις).

Οι τιμές μπορούν να είναι οποιοιδήποτε αριθμοί χρησιμοποιούνται στο CSS.

Ιδιότητα ακτίνας περιγράμματος: 15 εικονοστοιχεία.

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

Ιδιότητα ακτίνας περιγράμματος: 15 εικονοστοιχεία.

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

Περίγραμμα-πάνω-αριστερά-ακτίνα: 15px; περίγραμμα-πάνω-δεξιά-ακτίνα: 0; περίγραμμα-κάτω-δεξιά-ακτίνα: 15 εικονοστοιχεία; περίγραμμα-κάτω-αριστερά-ακτίνα: 0;

Ιδιότητα ακτίνας περιγράμματος: 15 εικονοστοιχεία.

Παρόλο που αυτός ο κωδικός μπορεί να γραφτεί σε μία δήλωση: border-radius : 15px 0 15px 0 . Το γεγονός είναι ότι η ιδιότητα border-radius μπορεί να οριστεί από μία έως τέσσερις τιμές. Ο παρακάτω πίνακας περιγράφει τους κανόνες που διέπουν τέτοιες ανακοινώσεις.

Έχοντας μελετήσει προσεκτικά αυτόν τον πίνακα, μπορείτε να καταλάβετε ότι η συντομότερη καταχώρηση για το επιθυμητό στυλ θα είναι ως εξής: περίγραμμα-ακτίνα : 15px 0 . Υπάρχουν μόνο δύο έννοιες.

Λίγη εξάσκηση

Σχεδιάζοντας ένα λεμόνι χρησιμοποιώντας CSS.

Εδώ είναι ο κώδικας για ένα τέτοιο μπλοκ:

Περιθώριο: 0 αυτόματο; /* Κεντράρετε το μπλοκ */ πλάτος: 200 px; ύψος: 200 px; φόντο: #F5F240; περίγραμμα: 1px στερεό #F0D900; περίγραμμα-ακτίνα: 10px 150px 30px 150px;

Έχουμε ήδη σχεδιάσει το σχήμα:

Τώρα ας αφήσουμε ένα τρίγωνο από αυτό:

Ο κωδικός του τριγώνου είναι:

Περιθώριο: 0 αυτόματο; /* Τοποθετήστε το μπλοκ στο κέντρο */ padding: 0px; πλάτος: 0px; ύψος: 0; περίγραμμα: 30 εικονοστοιχεία συμπαγές λευκό. χρώμα-κάτω περιγράμματος: κόκκινο;

Σε αυτό το κεφάλαιο:

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

• Περιθώριο(περιθώριο) - κενός χώρος (περιθώριο) που χωρίζει ένα στοιχείο από το άλλο. Το απλούστερο παράδειγμα εσοχής είναι το διάστημα μεταξύ των παραγράφων που διαδέχονται η μία την άλλη. Η περιοχή του περιθωρίου είναι διαφανής και δεν μπορεί να έχει δικό της χρώμα ή άλλα σχεδιαστικά εφέ.
• Σύνορο(περιθώριο στοιχείου) - περίγραμμα σε οποιαδήποτε πλευρά του στοιχείου. Το πλαίσιο μπορεί να τοποθετηθεί τόσο σε όλες τις πλευρές του στοιχείου όσο και στη μία πλευρά. Χρησιμοποιώντας ένα πλαίσιο, μπορείτε απλά να διακοσμήσετε ένα στοιχείο όμορφα ή να διαχωρίσετε οπτικά τα περιεχόμενα του τρέχοντος στοιχείου από άλλα στοιχεία της σελίδας.
• Υλικό παραγεμίσματος(padding) - κενός χώρος μεταξύ του περιεχομένου ενός στοιχείου και του περιγράμματός του. Η περιοχή επένδυσης είναι διαφανής και δεν μπορεί να έχει δικό της χρώμα ή άλλα σχεδιαστικά εφέ.
• Τα περισσότερα στοιχεία έχουν μια περιοχή περιεχομένου που περιέχει τα πάντα περιεχόμενοστοιχείο (κείμενο, εισαγόμενες εικόνες ή άλλα στοιχεία).

Πλαίσιο

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

---

(οριζόντια γραμμή), λειτουργώντας ως διαχωριστικό.

Κάθε πλαίσιο έχει τρεις ιδιότητες που μπορούμε να ελέγξουμε χρησιμοποιώντας CSS: πλάτος, στυλ και χρώμα Ας δούμε ποιες ιδιότητες μπορούν να χρησιμοποιηθούν για να τις ορίσουμε και να τις αλλάξουμε.

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

Πρώτη παράγραφος.

Δεύτερη παράγραφος.

Τρίτη παράγραφος.

Για να ελέγξετε το πλαίσιο ξεχωριστά σε κάθε πλευρά του στοιχείου, χρησιμοποιήστε τις ακόλουθες ιδιότητες:

• πλαίσιο-κορυφή - επάνω πλαίσιο
• περίγραμμα-αριστερά - αριστερό πλαίσιο
• περίγραμμα-δεξιά - δεξί πλαίσιο
• πλαίσιο-κάτω - κάτω πλαίσιο

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

Εξωτερικά και εσωτερικά περιθώρια

Οδόντωση- κενό διάστημα μεταξύ του περιεχομένου του στοιχείου και του περιγράμματός του (εάν είναι εγκατεστημένο). Για να προσθέσετε και να ελέγξετε το πλάτος του padding και στις τέσσερις πλευρές ενός στοιχείου, χρησιμοποιήστε την ιδιότητα padding.

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

Οι ιδιότητες συμπλήρωσης και περιθωρίου μπορούν να λάβουν από μία έως τέσσερις τιμές:

Όπου οι τιμές ρυθμίζονται δεξιόστροφα, ξεκινώντας από την κορυφή:

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

Με την πρώτη ματιά, το ορατό αποτέλεσμα κατά τη χρήση αυτών των ιδιοτήτων φαίνεται το ίδιο οπτική διαφοράμεταξύ τους, μπορείτε, για παράδειγμα, να ορίσετε ένα πλαίσιο για ένα στοιχείο ή ένα σύνολο φόντο:

Κανονική παράγραφος.

Για τις εσοχές, καθώς και για τα πλαίσια, υπάρχουν ιδιότητες που σας επιτρέπουν να ελέγχετε το μέγεθος της εσοχής σε κάθε πλευρά ξεχωριστά. Το padding ελέγχεται από τις ακόλουθες ιδιότητες: padding-top , padding-right , padding-bottom και padding-left . Τα εξωτερικά περιθώρια ελέγχονται από τις ιδιότητες: margin-top , margin-right , margin-bottom και margin-left .

Σημείωση: Οι τιμές των ιδιοτήτων padding και margin δεν κληρονομούνται από θυγατρικά στοιχεία, επομένως πρέπει να καθορίσετε τα πλάτη του padding ξεχωριστά για κάθε στοιχείο που τα απαιτεί.

Πλάτος και ύψος στοιχείου

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

Αυτή η ιδιότητα δημιουργεί ένα περίγραμμα γύρω από ένα στοιχείο. Μπορείτε να διαβάσετε περισσότερα για αυτήν την ιδιοκτησία στον σύνδεσμο και σε αυτό το άρθρο I γενικό περίγραμμαΘα περιγράψω πώς λειτουργεί. Αυτές οι πληροφορίες θα είναι αρκετές για να καταλάβετε πώς να φτιάξετε πλαίσια χρησιμοποιώντας CSS.

Η σύνταξη για την ιδιότητα περιγράμματος είναι απλή: περίγραμμα: 1px συμπαγές μαύρο. . Αυτή η ιδιότητα έχει τρεις έννοιες:

• 1 px - πάχος περιγράμματος.
• συμπαγής - τύπος πλαισίου, συμπαγής είναι μια συμπαγής γραμμή, διπλή είναι μια διπλή συμπαγής γραμμή, διακεκομμένη είναι μια διακεκομμένη γραμμή. Υπάρχουν διάφοροι άλλοι τύποι περιγραμμάτων, πληροφορίες σχετικά με αυτά μπορείτε να βρείτε εδώ: CSS border.
• μαύρο - ορίζει το χρώμα του περιγράμματος. Τα χρώματα μπορούν να καθοριστούν με το όνομα, έγκυρες τιμέςβρίσκονται εδώ: πίνακας χρωμάτων CSS ή από δεκαεξαδικός κώδικας. Πώς να το κάνετε αυτό περιγράφεται στο άρθρο: χρώματα σε CSS.

Πλαίσιο κειμένου CSS

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

Σε αυτήν την παράγραφο εκχωρείται η κλάση παράδειγμα-1.

Σε αυτό το παράδειγμα χρησιμοποιήσαμε επίσης την ιδιότητα Γέμισμα CSS, ή γέμιση. Αυτή η ιδιότητα καθορίζει το μέγεθος της εσοχής από το κείμενο μέχρι την περικοπή (το περίγραμμα του στοιχείου).

Ας δούμε ένα άλλο απλό παράδειγμα, για να κατανοήσουμε την ουσία. Ας δημιουργήσουμε ένα πλαίσιο πλάτους τριών εικονοστοιχείων, κόκκινο και χωρίς εσωτερική επένδυση (ιδιότητα συμπλήρωσης CSS).

Σε αυτήν την παράγραφο εκχωρείται το παράδειγμα κλάσης-2.

Όπως μπορούμε να δούμε, χωρίς το γέμισμα, το πλαίσιο κειμένου φαίνεται κέρατο.

Πώς να φτιάξετε μια κορνίζα σε CSS

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

Example-img ( περίγραμμα: 4px σταθερό πράσινο; )

Δείτε πώς θα λειτουργήσει αυτός ο κώδικας:

Πώς να στρογγυλοποιήσετε τις γωνίες ενός πλαισίου σε CSS

Η στρογγυλοποίηση των γωνιών ενός περιγράμματος στο CSS γίνεται χρησιμοποιώντας την ιδιότητα border-radius. Αυτή η ιδιότητα εισήχθη στο CSS3 και λειτουργεί σε όλα τα σύγχρονα προγράμματα περιήγησης.

Η ιδιότητα border-radius μπορεί να έχει από μία έως τέσσερις τιμές. Εάν υπάρχει μία τιμή, τότε ορίζει τον βαθμό στρογγυλοποίησης για όλες τις γωνίες. Ας δώσουμε ένα παράδειγμα για το πώς θα λειτουργεί αυτή η ιδιότητα με μία τιμή.

Παράδειγμα-3 ( περίγραμμα: 1 εικονοστοιχείο συμπαγές μαύρο, ακτίνα περιγράμματος: 15 εικονοστοιχεία, επένδυση: 10 εικονοστοιχεία; )

Δείτε πώς λειτουργεί:

ιδιότητα border-radius: 15px.>

Εάν το μπλοκ δεν έχει περίγραμμα, τότε υπάρχει ένα πλάτος περιγράμματος: 0; , τότε η περιοχή γεμάτη με το χρώμα φόντου θα στρογγυλοποιηθεί (ιδιότητα χρώματος φόντου). Εδώ είναι ένα παράδειγμα:

Παράδειγμα-4 (πλάτος περιγράμματος: 0; // αν και αυτή η τιμή είναι 0 από προεπιλογή χρώμα φόντου: #DDD; ακτίνα περιγράμματος: 15 εικονοστοιχεία, συμπλήρωση: 10 εικονοστοιχεία; )

Δείτε πώς λειτουργεί αυτό το παράδειγμα:

ιδιότητα border-radius: 15px.>

Όπως έγραψα νωρίτερα, η ιδιότητα border-radius μπορεί να οριστεί από μία έως τέσσερις τιμές. Ο παρακάτω πίνακας περιγράφει πώς θα λειτουργήσει κάθε συνδυασμός τιμών.

Για την ιδιότητα border-radius, οι τιμές μπορούν να καθοριστούν ως ποσοστά.

Ας σχεδιάσουμε έναν κύκλο σε CSS. Για να το κάνετε αυτό, πάρτε ένα τετράγωνο μπλοκ 100 επί 100 pixel και στρογγυλοποιήστε το Γωνίες CSSακτίνα συνόρων: κανόνας 50%.

Παράδειγμα-5 (πλάτος: 100 εικονοστοιχεία, ύψος: 100 εικονοστοιχεία, χρώμα φόντου: #F00, ακτίνα περιγράμματος: 50%; )

Δείτε πώς λειτουργεί αυτό το παράδειγμα:

Αυτό καλύπτει πλήρως το θέμα των "πλαισίων σε CSS". Καλή τύχη εκμάθηση CSS!

Βλαντ Μέρζεβιτς

Χρησιμοποιώντας CSS, μπορείτε να προσθέσετε ένα περίγραμμα σε ένα στοιχείο με διάφορους τρόπους. Βασικά, φυσικά, χρησιμοποιείται η ιδιότητα περιγράμματος, ως η πιο καθολική, καθώς και το περίγραμμα και, παραδόξως, το box-shadow , το κύριο καθήκον του οποίου είναι να δημιουργήσει μια σκιά. Στη συνέχεια, θα εξετάσουμε αυτές τις μεθόδους και τις διαφορές τους μεταξύ τους.

περίγραμμα ιδιοκτησίας

Η απλούστερη ιδιότητα για τη δημιουργία πλαισίων. Έχει τις ίδιες παραμέτρους με το περίγραμμα , αλλά διαφέρει σημαντικά σε ορισμένες λεπτομέρειες:

• Το περίγραμμα εμφανίζεται γύρω από το στοιχείο (εσωτερικό περίγραμμα).
• το περίγραμμα δεν επηρεάζει τις διαστάσεις του στοιχείου (το περίγραμμα προστίθεται στο πλάτος και το ύψος του στοιχείου).
• Το περίγραμμα μπορεί να ρυθμιστεί μόνο γύρω από ολόκληρο το στοιχείο, αλλά όχι ενεργό μεμονωμένα κόμματα(το περίγραμμα μπορεί να χρησιμοποιηθεί για οποιαδήποτε πλευρά ή όλα ταυτόχρονα).
• Το περίγραμμα δεν επηρεάζεται από την ακτίνα φιλέτου που καθορίζεται από την ιδιότητα border-radius (επηρεάζεται το περίγραμμα).

Τίθεται το ερώτημα - σε ποιες περιπτώσεις χρειάζεται περίγραμμα, όταν ο ρόλος του, παρά τις αναγραφόμενες διαφορές, αναλαμβάνεται πλήρως από τα σύνορα; Δεν υπάρχουν πολλές καταστάσεις, αλλά συμβαίνουν:

• δημιουργία σύνθετων πολύχρωμων πλαισίων.
• προσθέτοντας ένα πλαίσιο σε ένα στοιχείο όταν τοποθετείτε το ποντίκι πάνω του.
• απόκρυψη του περιγράμματος που προσθέτει αυτόματα το πρόγραμμα περιήγησης σε ορισμένα στοιχεία κατά τη λήψη της εστίασης.
• για περίγραμμα, μπορείτε να ορίσετε την απόσταση από την άκρη του στοιχείου μέχρι το πλαίσιο χρησιμοποιώντας την ιδιότητα outline-offset, για να δημιουργήσετε .

Πολύχρωμα κουφώματα

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

Παράδειγμα 1: Δημιουργία πλαισίου

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

Ρύζι. 1. Πλαίσιο γύρω από το στοιχείο

Πλαίσιο κατά τη χρήση: hover

Όταν προσθέτουμε ένα πλαίσιο μέσω περιγράμματος, το πλάτος του στοιχείου αυξάνεται, κάτι που είναι αρκετά αισθητό όταν συνδυάζουμε περίγραμμα και την ψευδοκλάση :hover. Υπάρχουν δύο τρόποι για να το «κερδίσετε». Το πιο απλό πράγμα είναι να αντικαταστήσετε το περίγραμμα με το περίγραμμα, το οποίο, όπως γνωρίζουμε, δεν επηρεάζει το μέγεθος του στοιχείου (παράδειγμα 2).

Παράδειγμα 2: Frame on Hover

Το περίγραμμα δεν είναι πάντα κατάλληλο, έστω και μόνο επειδή οι στρογγυλεμένες γωνίες δεν το επηρεάζουν. Η δεύτερη μέθοδος είναι κατάλληλη εδώ - προσθέστε ένα αόρατο πλαίσιο ή ένα πλαίσιο που ταιριάζει με το χρώμα του φόντου και, στη συνέχεια, αλλάξτε τις παραμέτρους του όταν τοποθετείτε το δείκτη του ποντικιού (παράδειγμα 3). Τότε δεν θα υπάρξει μετατόπιση του στοιχείου, αφού το πλαίσιο αρχικά υπάρχει ήδη. Αλλά θυμόμαστε πάντα ότι το πλάτος του στοιχείου είναι το άθροισμα των τιμών του πλάτους, του περιγράμματος στα αριστερά και του περιγράμματος στα δεξιά. Η κατάσταση είναι παρόμοια με το ύψος.

Παράδειγμα 3: Frame on Hover

Περίγραμμα γύρω από πεδία φόρμας

Σε ορισμένα προγράμματα περιήγησης (Chrome, Safari, πιο πρόσφατες εκδόσεις Opera) εμφανίζεται ένα μικρό εικονίδιο γύρω από τα πεδία της φόρμας όταν λαμβάνουν εστίαση. έγχρωμο πλαίσιο(Εικ. 2). Για να το αφαιρέσετε, απλώς προσθέστε την τιμή none στην ιδιότητα περίγραμμα στα στυλ, όπως φαίνεται στο παράδειγμα 4.

Ρύζι. 2. Πλαίσιο γύρω από τα περιθώρια

Παράδειγμα 4. Αφαίρεση του πλαισίου

Κορνίζες μέσω κουτιού-σκιάς

Αν και η ιδιότητα box-shadow προορίζεται να προσθέσει μια σκιά γύρω από ένα στοιχείο, μπορεί επίσης να χρησιμοποιηθεί για τη δημιουργία περιγραμμάτων που δεν μπορούν να δημιουργηθούν χρησιμοποιώντας περίγραμμα ή περίγραμμα . Όλα αυτά χάρη στο γεγονός ότι ο αριθμός των σκιών μπορεί να είναι απεριόριστος, οι παράμετροι των οποίων παρατίθενται διαχωρισμένες με κόμμα.

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

Το Παράδειγμα 4 δείχνει πώς να προσθέσετε δύο πλαίσια και ένα περίγραμμα στα δεξιά χρησιμοποιώντας μια ιδιότητα σκιάς πλαισίου.

Παράδειγμα 4: Χρήση κουτιού-σκιάς

Αποτέλεσμα αυτό το παράδειγμαφαίνεται στο Σχ. 3.

Ρύζι. 3. Πλαίσια που δημιουργούνται από την ιδιότητα box-shadow