Jadwal kursus

Tutorial tingkat tinggi CSS

• Buku Tambahan CSS
• Pengantar CSS
• Basis Bahasa CSS
• Bahasa Tinggi CSS
• Pemilihan Pemilihan Turun CSS
• Pemilihan ID CSS
• Pemilihan Klasifikasi CSS
• Pembuatan CSS
• Latar Belakang CSS
• Teks CSS
• Font CSS
• Daftar CSS

Model kotak CSS

• Ulasan Model Kisi CSS
• Margin Dalam CSS
• Batas CSS
• Margin Luar CSS
• Penggabungan Margin Luar CSS

Pemosisian CSS

• Ulasan Lokasi CSS
• Lokasi Relatif CSS
• Lokasi Absolut CSS
• Gelombang CSS

Pemilih CSS

• Pemilihan Elemen CSS
• Pemilihan Grup CSS
• Pemilihan Klasifikasi CSS Ditingkatkan
• Pemilihan ID CSS Ditingkatkan
• Pemilihan Pemilihan Atribut CSS Ditingkatkan
• Pemilihan Pemilihan Anak-Anak
• Pemilihan Pemilihan Anak
• Pemilihan Pemilihan Saudara Kepada Kiri

Kursus pilihan

Rekomendasi kursus:

• Panduan Kunci CodeW3C.com

Bingkai elemen (border) adalah garis tunggal atau beberapa garis yang mengelilingi konten dan padding internal elemen.

Atribut border CSS memungkinkan Anda menentukan gaya, lebar, dan warna bingkai elemen.

Batas CSS

Dalam HTML, kami menggunakan tabel untuk membuat bingkai di sekitar teks, tetapi melalui penggunaan atribut bingkai CSS, kami dapat membuat bingkai yang menarik dan dapat diterapkan untuk setiap elemen.

Dalam area margin eksternal elemen adalah bingkai elemen (border). Bingkai elemen adalah garis tunggal atau beberapa garis yang mengelilingi konten dan padding internal elemen.

Setiap bingkai memiliki 3 aspek: lebar, gaya, dan warna. Dalam bagian berikut, kami akan menggambarkan tiga aspek ini secara detil.

Bingkai dan latar belakang

Spesifikasi CSS menyatakan bahwa bingkai digarisbawahi di atas latar belakang elemen. Ini penting karena beberapa bingkai adalah 'berputar' (contoh, bingkai titik atau bingkai tipis), latar belakang elemen harus muncul di antara bagian yang terlihat dari bingkai.

CSS2 menyatakan bahwa latar belakang hanya menyebar ke padding internal, bukan ke bingkai. kemudian CSS2.1 melakukan perbaikan: latar belakang elemen adalah latar belakang konten, padding internal dan area bingkai. Sebagian besar peramban mengikuti definisi CSS2.1, meskipun beberapa peramban yang lebih lama mungkin berperilaku berbeda.

Gaya bingkai

Gaya adalah aspek penting yang paling penting dari bingkai, bukan karena gaya mengawasi tampilan bingkai (tentu saja, gaya benar-benar mengawasi tampilan bingkai), tetapi karena tanpa gaya, tidak akan ada bingkai sama sekali.

Gaya CSS Atribut border-styleTelah didefinisikan 10 gaya yang berbeda non inherit, termasuk none.

Contohnya, Anda dapat menetapkan garis bingkai gambar untuk outset, sehingga terlihat seperti tombol 'tombol yang menonjol':

a:link img {border-style: outset;}

Definisi gaya berbagai macam

Anda dapat menetapkan beberapa gaya untuk bingkai, misalnya:

p.aside {border-style: solid dotted dashed double;}

Aturan di atas menetapkan empat gaya bingkai untuk paragraf dengan nama kelas 'aside': garis bingkai tebal, garis bingkai titik, garis bingkai tipis dan garis bingkai ganda.

Kami kembali melihat nilai di sini mengambil urutan top-right-bottom-left, diskusi penggunaan beberapa nilai untuk menetapkan padding yang berbeda juga melihat urutan ini.

Definisi gaya sisi

Jika Anda ingin menyetel gaya garis bingkai untuk sisi satu kotak elemen, bukan untuk garis bingkai empat sisi, Anda dapat menggunakan atribut gaya garis bingkai tunggal di bawah ini:

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

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 properti satu sisi ditempatkan sebelum border-style, nilai properti singkat akan menimpa nilai satu sisi none.

Lebar batas

Anda dapat melalui Properti border-widthMenentukan lebar batas.

Ada 2 cara untuk menentukan lebar batas: dapat menentukan nilai panjang, seperti 2px atau 0.1em; atau menggunakan salah satu kata kunci 3, yaitu thin, medium (nilai default) dan thick.

Keterangan:CSS belum mendefinisikan lebar khusus untuk 3 kata kunci, jadi pengguna agen mungkin menata thin, medium (nilai default) dan thick masing-masing sebagai 5px, 3px dan 2px, sedangkan pengguna agen lainnya masing-masing menata 3px, 2px dan 1px.

Jadi, kita dapat menata lebar batas 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 batas 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 (penulisan ini disebutNilai salinan）：

p {border-style: solid; border-width: 15px 5px;}

Anda juga dapat mengatur lebar setiap sisi batas melalui properti berikut:

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

Sehingga, 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 batas pinggir

Dalam contoh sebelumnya, Anda sudah melihat, jika ingin menampilkan batas pinggir, harus diatur gaya batas pinggir, seperti solid atau outset.

Jika border-style diatur menjadi none, apa yang akan terjadi?

p {border-style: none; border-width: 50px;}

Meskipun lebar pinggiran adalah 50px, gaya pinggiran diatur ke none. Dalam situasi ini, tidak hanya gaya pinggiran yang hilang, tetapi lebar pinggiran juga akan menjadi 0. Pinggiran menghilang, kenapa?

Karena jika gaya pinggiran adalah none, yaitu pinggiran sama sekali tidak ada, maka pinggiran tidak dapat memiliki lebar, jadi lebar pinggiran secara otomatis diatur ke 0, tidak peduli apa yang Anda definasikan sebelumnya.

Ingat hal ini sangat penting. Faktanya, lupa untuk mengumumkan gaya pinggiran adalah kesalahan yang sering terjadi. Menurut aturan di bawah ini, semua elemen h1 tidak akan memiliki pinggiran, tidak ada yang disebut 20 piksel lebar:

h1 {border-width: 20px;}

Karena nilai default border-style adalah none, jika tidak ada yang diumumkan tentang gaya, ini sama seperti border-style: none.Jadi, jika Anda ingin pinggiran muncul, Anda harus mengumumkan gaya pinggiran.

Warna pinggiran

Mengatur warna pinggiran sangat mudah. CSS menggunakan cara yang sederhana Properti border-coloryang dapat menerima maksimal 4 nilai warna.

Dapat digunakan berbagai jenis nilai warna, seperti warna yang dinamai, heksadesimal, dan nilai RGB:

p {
  border-style: solid;
  border-color: biru rgb(25%,35%,45%) #909090 merah;
  }

Jika nilai warna kurang dari 4, penggandaan nilai akan beroperasi. Contoh aturan di bawah ini mendeklarasikan pinggiran atas dan bawah paragraf berwarna biru, pinggiran kiri dan kanan berwarna merah:

p {
  border-style: solid;
  border-color: biru merah;
  }

Keterangan:Warna pinggiran default adalah warna depan elemen itu sendiri. Jika tidak ada yang diumumkan tentang warna pinggiran, maka warna ini akan sama dengan warna teks elemen. Dari sisi lain, jika elemen tidak memiliki teks apapun, asumsikan hal ini adalah tabel, yang hanya mengandung gambar, warna pinggiran tabel ini adalah warna teks elemen induk (karena warna dapat disesuaikan). Elemen induk ini mungkin adalah body, div, atau tabel lainnya.

Definisi Warna Satu Sisi

Ada beberapa properti warna pinggiran satu sisi. Mekanisme kerjanya sama seperti gaya dan lebar satu sisi:

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

Untuk menentukan pinggiran tebal hitam untuk elemen h1 dan pinggiran kanan tebal merah, dapat ditentukan seperti ini:

h1 {
  border-style: solid;
  border-color: hitam;
  border-right-color: merah;
  }

Pinggiran Transparan

Kami telah membahas sebelumnya bahwa jika pinggiran tidak memiliki gaya, maka tidak ada lebar. Namun, ada beberapa situasi dimana Anda mungkin ingin membuat pinggiran yang tak terlihat.

CSS2 memperkenalkan nilai warna pinggiran yang transparan. Nilai ini digunakan untuk membuat pinggiran yang dapat dilihat tetapi tidak terlihat. Lihat contoh di bawah ini:

<a href="#">AAA</a>
<a href="#">BBB</a>
<a href="#">CCC</a>

Kami telah mendefinisikan gaya di atas untuk tautan:

a:link, a:visited {
  border-style: solid;
  border-width: 5px;
  border-color: transparent;
  }
a:hover {border-color: gray;}

Coba sendiri

Dalam arti tertentu, menggunakan transparent, garis seperti penambahan marjin internal; selain itu, ada keuntungan lainnya, yaitu dapat memperlihatkannya saat diperlukan. Garis transparan seperti marjin internal, 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 menata warna garis berdasarkan nilai warna elemen.

Atribut Bata CSS

Alat Tangkap

Panduan Referensi CSS

Contoh CSS

Uji Coba CSS

Panduan CSS

Tautan Pendukung