Model kotak: Sempadan CSS
- Halaman Sebelumnya Samping Dalam CSS
- Halaman Berikutnya Garis Luar CSS
Sempadan elemen (border) adalah satu atau beberapa garisan yang mengelilingi kandungan dan padding elemen.
Atribut border CSS membenarkan anda tentukan gaya, lebar dan warna sempadan elemen.
Garis CSS
Dalam HTML, kami menggunakan jadual untuk mencipta sempadan di sekeliling teks, tetapi dengan menggunakan atribut sempadan CSS, kami boleh mencipta sempadan yang bagus dan boleh digunakan bagi mana-mana elemen.
Dalam lembut luar margin elemen adalah sempadan elemen (border). Sempadan elemen adalah satu atau beberapa garisan yang mengelilingi kandungan dan padding elemen.
Setiap sempadan mempunyai tiga aspek: lebar, gaya dan warna. Dalam tempoh yang akan datang, kami akan memberikan rincian tentang tiga aspek ini.
Sempadan dengan latar belakang
Peraturan CSS menyatakan bahawa sempadan dikeraskan di atas latar belakang elemen. Ini amat penting kerana beberapa sempadan adalah 'berlepas' (contohnya, sempadan berdipol atau sempadan lemah), latar belakang elemen seharusnya muncul di antara bahagian yang terlihat sempadan.
CSS2 menyatakan bahawa latar belakang hanya mengikut kepadatan padding, bukannya sempadan. kemudian CSS2.1 membuat koreksi: latar belakang elemen adalah kandungan, padding dan kawasan sempadan. Kebanyakan pelayar mengikuti definisi CSS2.1, walaupun beberapa pelayar yang lebih lama mungkin mempunyai pertunjukan yang berbeza.
Gaya sempadan
Gaya adalah aspek yang paling penting bagi sempadan, bukan kerana gaya mengawal paparan sempadan (walaupun, gaya memang mengawal paparan sempadan), tetapi kerana tanpa gaya, sempadan tidak akan wujud.
gaya CSS Atribut border-styleDidefinisikan 10 jenis gaya yang berbeza yang bukan inherit, termasuk none.
Contohnya, anda boleh menetapkan sempadan bagi gambar untuk menjadi outset, supaya kelihatan seperti 'tombol keluar':
a:link img {border-style: outset;}
Mendefinikan beberapa gaya
Anda boleh menetapkan beberapa gaya bagi sempadan, contohnya:
p.aside {border-style: solid dotted dashed double;}
Peraturan di atas mendefinikan empat gaya sempadan bagi paragraf dengan nama kelas 'aside': sempadan atas yang kuat, sempadan kanan yang berdipol, sempadan bawah yang lemah dan sempadan kiri yang berdwiwaran.
Kami lihat kembali bahawa nilai di sini mengambil urutan top-right-bottom-left, diskusi dengan penggunaan beberapa nilai untuk menetapkan padding berbeza juga lihat urutan ini.
Mendefinikan gaya unilateral
Jika anda ingin menetapkan gaya sempadan bagi salah satu sisi kotak elemen, bukannya menetapkan gaya sempadan bagi 4 sisi, anda boleh gunakan atribut gaya sempadan unilateral di bawah ini:
Jadi kedua metode ini adalah ekvivalen:
p {border-style: solid solid solid none;} p {border-style: solid; border-left-style: none;}
Perhatian:Jika ingin menggunakan metode kedua, harus menempatkan properti satu sisi setelah properti singkat. Karena jika menempatkan properti satu sisi sebelum border-style, nilai properti singkat akan menimpa nilai satu sisi none.
Lebar garis pinggir
Anda dapat melakukannya melalui Properti border-widthTentukan lebar garis pinggir.
Ada 2 cara untuk menentukan lebar garis pinggir: dapat menentukan nilai panjang, seperti 2px atau 0.1em; atau menggunakan salah satu kata kunci dari 3, yaitu thin, medium (nilai baku) dan thick.
Keterangan:CSS belum mendefinisikan lebar spesifik untuk 3 kata kunci, jadi pengguna agen dapat menata thin, medium (nilai baku) dan thick masing-masing sebagai 5px, 3px dan 2px, sementara pengguna agen lainnya masing-masing menata 3px, 2px dan 1px.
Jadi, kita dapat menata lebar garis pinggir seperti ini:
p {border-style: solid; border-width: 5px;}
atau:
p {border-style: solid; border-width: thick;}
Definisi lebar satu sisi
Anda dapat menata setiap sisi garis pinggir elemen berdasarkan urutan top-right-bottom-left:
p {border-style: solid; border-width: 15px 5px 15px 5px;}
Contoh di atas juga dapat disingkat seperti ini (cara menulis ini disebut)Nilai salinan):
p {border-style: solid; border-width: 15px 5px;}
Anda juga dapat mengatur lebar setiap sisi garis pinggir melalui properti berikut:
Sebagai akibatnya, aturan di bawah ini adalah ekvivalen dengan contoh di atas:
p { border-style: solid; border-top-width: 15px; border-right-width: 5px; border-bottom-width: 15px; border-left-width: 5px; }
Tidak ada garis pinggir
Dalam contoh sebelumnya, Anda sudah melihat, jika ingin menampilkan garis pinggir yang tertentu, maka harus diatur gaya pinggir, seperti solid atau outset.
Jika mengatur border-style menjadi none, apa yang akan terjadi?
p {border-style: none; border-width: 50px;}
Walaupun lebar pinggiran adalah 50px, tetapi gaya pinggiran diatur kepada none. Dalam keadaan ini, bukan hanya gaya pinggiran yang hilang, tetapi lebar pinggiran juga akan menjadi 0. Pinggiran hilang, kenapa?
Ini kerana jika gaya pinggiran adalah none, iaitu pinggiran sama sekali tiada, maka pinggiran tiada lebar, jadi lebar pinggiran secara automatik diatur kepada 0, mengikut apa yang anda tentukan dahulu.
Ingat ini adalah sangat penting. Faktanya, lupa mendeklarasikan gaya pinggiran adalah kesalahan yang sering terjadi. Menurut aturan berikut, semua elemen h1 akan tiada pinggiran, lebih kurangnya 20 piksel lebar:
h1 {border-width: 20px;}
Karena nilai lalai border-style adalah none, jika tiada deklarasi gaya, maka seolah-olah border-style: none.Jadi, jika anda mahu pinggiran muncul, anda mesti mendeklarasikan gaya pinggiran.
Warna pinggiran
Mengatur warna pinggiran sangat mudah. CSS menggunakan cara yang sederhana Properti border-coloria boleh menerima maksimum 4 nilai warna sekali.
Boleh digunakan mana-mana jenis nilai warna, seperti boleh adalah warna yang dinamakan, warna heksadesimal dan nilai RGB:
p { border-style: solid; border-color: blue rgb(25%,35%,45%) #909090 red; }
Jika nilai warna kurang daripada 4, operasi penyalin akan berlaku. Contoh rule yang berikut menjelaskan pinggiran atas dan bawah paragraf adalah biru, pinggiran kiri dan kanan adalah merah:
p { border-style: solid; border-color: blue red; }
Keterangan:Warna pinggiran lalai adalah warna depan elemen itu sendiri. Jika tiada warna yang dideklarasikan bagi pinggiran, ia akan sama seperti warna teks elemen. Dari segi lain, jika elemen tiada teks, asumsikan ia adalah tabel yang hanya mengandungi imej, warna pinggiran tabel ini adalah warna teks elemen induk (kerana warna dapat diwarisi). Elemen induk ini mungkin body, div atau lain-lain tabel.
Tentukan warna satu sisi
Ada beberapa properti warna pinggiran satu sisi. Prinsipnya sama seperti gaya dan lebar satu sisi:
Untuk menentukan pinggiran tebal hitam bagi elemen h1, sambil mempunyai pinggiran kanan yang tebal merah, boleh ditentukan seperti ini:
h1 { border-style: solid; border-color: black; border-right-color: red; }
Pinggiran transparent
Kami baru saja bercakap, jika pinggiran tiada gaya, maka tiada lebar. Walau begitu, ada beberapa keadaan di mana anda mungkin mahu mencipta pinggiran yang tak dapat dilihat.
CSS2 ialah pengenalan nilai warna pinggiran yang transparent. Nilai ini digunakan untuk mencipta pinggiran yang tak dapat dilihat dengan lebar. Lihat contoh di bawah ini:
<a href="#">AAA</a> <a href="#">BBB</a> <a href="#">CCC</a>
Kami menetapkan gaya berikut untuk tautan di atas:
a:link, a:visited { border-style: solid; border-width: 5px; border-color: transparent; } a:hover {border-color: gray;}
Dalam arti tertentu, penggunaan transparent, garis seperti ekstra margin dalam; selain itu, ada keuntungan lainnya, yaitu dapat memperlihatkannya saat Anda membutuhkan. Garis transparan ini seperti margin dalam, karena latar belakang elemen akan meluas ke area garis (jika ada latar belakang yang terlihat).
Perhatian penting:Sebelum IE7, IE/WIN tidak menyediakan dukungan untuk transparent. Dalam versi sebelumnya, IE akan menetapkan warna garis berdasarkan nilai warna elemen.
Contoh CSS garis:
- Semua atribut garis empat sisi dalam satu deklarasi
- Contoh ini memperlihatkan penggunaan atribut singkat untuk menetapkan semua atribut garis empat sisi dalam satu deklarasi.
- Menetapkan gaya garis empat sisi
- Contoh ini memperlihatkan bagaimana menetapkan gaya garis empat sisi.
- Menetapkan garis berbeda di setiap sisi
- Contoh ini memperlihatkan bagaimana menetapkan garis berbeda di setiap sisi elemen.
- Semua atribut lebar garis dalam satu deklarasi
- Contoh ini memperlihatkan penggunaan atribut singkat untuk menetapkan semua atribut lebar garis dalam satu deklarasi.
- Menetapkan warna garis empat sisi
- Contoh ini memperlihatkan bagaimana menetapkan warna garis empat sisi. Dapat ditetapkan satu hingga empat warna.
- Semua atribut garis bawah dalam satu deklarasi
- Contoh ini memperlihatkan penggunaan atribut singkat untuk menetapkan semua atribut garis bawah dalam satu deklarasi.
- Menetapkan warna garis bawah
- Contoh ini memperlihatkan bagaimana menetapkan warna garis bawah.
- Menetapkan gaya garis bawah
- Contoh ini memperlihatkan bagaimana menetapkan gaya garis bawah.
- Menetapkan lebar garis bawah
- Contoh ini memperlihatkan bagaimana menetapkan lebar garis bawah.
- Semua atribut garis kiri dalam satu deklarasi
- Semua atribut garis kiri dalam satu deklarasi
- Menetapkan warna garis kiri
- Contoh ini memperlihatkan bagaimana menetapkan warna garis kiri.
- Menetapkan gaya garis kiri
- Contoh ini memperlihatkan bagaimana menetapkan gaya garis kiri.
- Menetapkan lebar garis kiri
- Contoh ini memperlihatkan bagaimana menetapkan lebar garis kiri.
- Semua atribut garis kanan dalam satu deklarasi
- Contoh ini memperlihatkan atribut singkat yang digunakan untuk menetapkan semua atribut garis kanan dalam satu deklarasi.
- Menetapkan warna garis kanan
- Contoh ini memperlihatkan bagaimana menetapkan warna garis kanan.
- Menetapkan gaya garis kanan
- Contoh ini memperlihatkan bagaimana menetapkan gaya garis kanan.
- Menetapkan lebar garis kanan
- Contoh ini memperlihatkan bagaimana menetapkan lebar garis kanan.
- Semua atribut garis atas dalam satu deklarasi
- Contoh ini memperlihatkan penggunaan atribut singkat untuk menetapkan semua atribut garis atas dalam satu deklarasi.
- Tetapkan warna garis atas
- Contoh ini menunjukkan bagaimana cara menetapkan warna garis atas.
- Tetapkan gaya garis atas
- Contoh ini menunjukkan bagaimana cara menetapkan gaya garis atas.
- Tetapkan lebar garis atas
- Contoh ini menunjukkan bagaimana cara menetapkan lebar garis atas.
Atribut garis CSS
Atribut | Deskripsi |
---|---|
border | Atribut singkat, digunakan untuk menetapkan atribut untuk 4 sisi ke dalam klaim satu. |
border-style | Digunakan untuk menetapkan gaya semua garis elemen, atau menetapkan gaya garis sisi secara terpisah. |
border-width | Atribut singkat, digunakan untuk menetapkan lebar semua garis elemen, atau menetapkan lebar untuk setiap garis sisi secara terpisah. |
border-color | Atribut singkat, digunakan untuk menetapkan warna bagian yang terlihat semua garis elemen, atau menetapkan warna untuk 4 sisi secara terpisah. |
border-bottom | Atribut singkat, digunakan untuk menetapkan semua atribut garis bawah ke dalam klaim satu. |
border-bottom-color | Tetapkan warna garis bawah elemen. |
border-bottom-style | Tetapkan gaya garis bawah elemen. |
border-bottom-width | Tetapkan lebar garis bawah elemen. |
border-left | Atribut singkat, digunakan untuk menetapkan semua atribut garis kiri ke dalam klaim satu. |
border-left-color | Tetapkan warna garis kiri elemen. |
border-left-style | Tetapkan gaya garis kiri elemen. |
border-left-width | Tetapkan lebar garis kiri elemen. |
border-right | Atribut singkat, digunakan untuk menetapkan semua atribut garis kanan ke dalam klaim satu. |
border-right-color | Tetapkan warna garis kanan elemen. |
border-right-style | Tetapkan gaya garis kanan elemen. |
border-right-width | Tetapkan lebar garis kanan elemen. |
border-top | Atribut singkat, digunakan untuk menetapkan semua atribut garis atas ke dalam klaim satu. |
border-top-color | Tetapkan warna garis atas elemen. |
border-top-style | Tetapkan gaya garis atas elemen. |
border-top-width | Tetapkan lebar garis atas elemen. |
- Halaman Sebelumnya Samping Dalam CSS
- Halaman Berikutnya Garis Luar CSS