Deskripsi

Properti perbatasan universal memungkinkan Anda untuk secara bersamaan mengatur ketebalan, gaya dan warna batas di sekitar elemen. Nilai dapat dilakukan dalam urutan apa pun, dipisahkan oleh spasi, browser itu sendiri akan menentukan mana yang sesuai dengan properti yang diinginkan. Untuk menginstal perbatasan hanya pada sisi tertentu dari item, gunakan sifat-sifat batas-atas, batas bawah, batas batas, batas kanan.

Sintaksis

Nilai-nilai

Nilai lebar perbatasan menentukan ketebalan perbatasan. Untuk mengelola jenisnya ada beberapa nilai gaya perbatasan. Nama mereka dan hasil dari tindakan disajikan pada Gambar. satu.

Gbr.1. Kerangka Gaya.

border-Warna menetapkan warna batas, nilainya dapat dalam format yang diizinkan untuk CSS.

mewarisi mewarisi nilai induk.

Html5 css2.1 yaitu cr op sa fx

berbatasan.

Lorem Ipsum Dolor Site Amet, konsektetuer adipiscing elit, sed niper nibh euismod tincidunt ut lacreet dolore magha aliguam erat volutpat. UT WISIS IKL AD Minim Veniam, Quis Nostrud Peroperasi Tution Ullamcorper Suscipit Lobortis Nisl UT Aliquip Ex EA Commodo.

Dalam contoh ini, batas ganda ditambahkan di sekitar lapisan. Hasilnya ditunjukkan pada Gambar. 2.

Ara. 2. Aplikasi Properti Perbatasan

Object Model.

dokumen.getelementbyid ("elementid") .tyle.border

Browser

Browser Internet Explorer sebelum versi keenam inklusif dengan ketebalan tampilan perbatasan 1px yang dihiasi sebagai putus-putus. Dengan ketebalan 2px dan di atasnya, nilai putus-putus bekerja dengan benar. Kesalahan ini diperbaiki di IE7, tetapi hanya untuk semua batas 1px tebal. Jika salah satu batasan blok memiliki ketebalan 2px dan di atas, maka dalam IE7 nilai putus-putus berubah menjadi putus-putus.

Internet Explorer sebelum versi 7.0 tidak mendukung nilai Warisan.

Gaya perbatasan di berbagai browser dapat sangat bervariasi saat menggunakan groove, ridge, inset atau nilai outset.

CSS juga memungkinkan kita untuk membuat padatan, putus-putus atau titik bingkai Menurut perbatasan imajiner dari elemen halaman web.

Atribut Gaya Lebar Batas-Lebar, Batas-Top-Lebar, Lebar Batas-Kanan dan Lebar Batas-Bawah dan Lebar Batas-Bawah Tentukan Ketebalan, masing-masing, sisi kiri, atas, kanan dan bawah dari bingkai. :

bORDER-LEFTH-LIDTH | BORDER-TOP-Lebar | Lebar Batas-Kanan |

bORDER-BOTTOM Lebar: Tipis | Medium | Tebal |<толщина>| Mewarisi.

Kita dapat menentukan nilai numerik absolut atau relatif dari ketebalan bingkai, atau salah satu nilai yang telah ditentukan: tipis (tipis), sedang (sedang) atau tebal (lemak). Dalam kasus terakhir, ketebalan nyata kerangka Tergantung pada browser web. Nilai ketebalan default juga tergantung pada browser web, jadi selalu lebih baik untuk menginstalnya dengan jelas.

Dalam daftar 11.2, kami menunjukkan ketebalan bingkai di sel-sel tabel, sama dengan satu piksel.

Tetapi gaya yang membuat semua header tingkat pertama bingkai Dari sisi bawah 5 piksel tebal:

H1 (Border Bottom-Lebar: 5px)

Bahkan, semua tajuk utama pertama akan digarisbawahi.

Atribut Gaya Lebar Perbatasan memungkinkan Anda untuk menentukan nilai ketebalan sekaligus untuk semua sisi bingkai:

lebar perbatasan:<толщина 1> [<толщина 2> [<толщина 3> [<толщина 4>]]]

Jika satu nilai ditentukan, itu akan membuat ketebalan semua sisi bingkai.

Jika dua nilai ditentukan, tugas pertama adalah ketebalan atas dan bawah, dan yang kedua - sisi kiri dan kanan bingkai.

Jika tiga nilai ditentukan, tugas pertama adalah bagian atas, kedua - kiri dan kanan, dan yang ketiga - bagian bawah bingkai.

Jika empat nilai ditunjukkan, tugas pertama adalah ketebalan atas, yang kedua adalah kanan, ketiga - lebih rendah, dan sisi kiri keempat kerangka.

Contoh:

Td, th (lebar perbatasan: tipis)

Atribut Gaya Batas-Kiri-Warna, Perbatasan-Top-Warna, Perbatasan-Right-Warna dan Border-Bottom-Warna ditetapkan warna, masing-masing, kiri, atas, kanan dan bawah bingkai:

Nilai transparan menentukan warna "transparan" yang melaluinya akan "bersinar" latar belakang elemen induk.

PERHATIAN!

Warna bingkai harus selalu ditentukan secara eksplisit - jika tidak mungkin tidak ditarik.

Contoh:

H1 (Lebar Bawah Bawah: 5px
border-Bottom-Warna: Merah)

Atribut Gaya Warna Perbatasan memungkinkan Anda untuk menentukan warna segera untuk semua sisi bingkai:

warna perbatasan:<цвет 1> [<цвет 2> [<цвет 3> [<цвет 4>]]]

Dia berperilaku sama dengan atribut serupa dari gaya lebar perbatasan:

TD, th (lebar perbatasan: kurus;
warna Perbatasan: Hitam)

Atribut Gaya Gaya Kiri Perbatasan, Border-Top-Style, Border-Right-Style dan Border-Bottom Style mengatur gaya garis yang akan ditarik, masing-masing, kiri, atas, kanan dan bawah kerangka:

border-Left-Style | Border-Top-Style | Border-Right-Style |

ridge | Inset | Outset | Warisan

Nilai-nilai berikut tersedia di sini:

Tidak ada dan tersembunyi - bingkai hilang (perilaku biasa);

Garis putus-putus;

Garis putus-putus-putus;

Garis padat;

Ganda - Garis Ganda;

Groove - "Membeli" garis tiga dimensi;

Ridge - "cembung" garis tiga dimensi;

Inset - "tonjolan" tiga dimensi;

Pertambahan adalah "memperdalam" tiga dimensi.

Contoh:

H1 (Lebar Bawah Bawah: 5px
batas bawah warna: merah
border-Bottom Style: Double)

Atribut Gaya Border Style memungkinkan Anda menentukan gaya segera untuk semua sisi bingkai:

gaya perbatasan:<стиль 1> [<стиль 2> [<стиль 3> [<стиль 4>]]]

Ini berperilaku dengan cara yang sama dengan atribut gaya lebar perbatasan dan garis batas serupa.

Contoh:

TD, th (lebar perbatasan: kurus;
border-Warna: Hitam;
gaya Batas: Dotes)

Atribut Border Left, Border-Top, Border-Right dan Border-Bottom Style memungkinkan Anda untuk menentukan semua parameter, masing-masing, kiri, atas, kanan dan bawah kerangka:

bORDER-KIRI | BORDER-TOP | BORDER-KANAN | BORDER-BOTTAL:

<толщина> <стиль> <цвет> | mewarisi.

Dalam banyak kasus, atribut gaya ini ternyata lebih disukai:

H1 (Border Bottom: 5px Red Ganda)

Atribut Global Style Global memungkinkan Anda untuk mengatur semua parameter sekaligus untuk semua sisi bingkai:

berbatasan:<толщина> <стиль> <цвет> | mewarisi.
TD, th (perbatasan: hitam tipis hitam)

PERHATIAN!

Bingkai juga meningkatkan ukuran elemen halaman web. Karena itu, jika kita membuat kerangka Dalam kontainer blok yang membentuk desain halaman web, kita harus, dengan demikian, mengubah ukuran wadah ini, jika tidak, dan desain akan terganggu.

Lihat untuk situs web kami

Kami akan membuat indentasi antara wadah yang membentuk desain halaman web kami, dan antara batas-batas wadah ini dan isinya.

Lekukan eksternal antara tepi jendela browser web dan isi halaman web adalah nol. Biarkan ruang di jendela browser web menggunakan yang paling penuh.

Pada catatan

Secara default, setiap browser web membuat indents antara tepi jendela dan isi halaman web.

Indentasi internal dalam wadah dengan heading situs web (Cheader) di sebelah kiri dan kanan - 20 piksel. Kita harus mendorong teks header dari tepi jendela browser web, jika tidak judulnya akan terlihat jelek.

Indentasi eksternal antara wadah dengan pita navigasi (CNAVBAR) dan dengan konten utama (CMAIN) - 10 piksel.

Indentasi internal dari wadah dengan konten utama (CMAIN) dari semua sisi - 5 piksel.

Indentasi internal dari wadah dengan konten utama (CMAIN) dari atas - 10 piksel. Jadi kami memisahkannya dari wadah CNAVBAR dan CMAIN.

Indentasi internal dalam wadah dengan informasi hak cipta (ccopyright) ke kiri dan kanan - 20 piksel. Teks informasi hak cipta juga harus dipindahkan dari tepi jendela browser web.

Nilai-nilai pura-pura diperoleh oleh penulis sebagai hasil dari eksperimen. Anda bisa bertanya kepada orang lain.

Sekarang kita membagi keempat frame kontainer.

Container Cheader akan menerima bingkai dengan satu bagian bawah.

Wadah CMain adalah bingkai dengan satu sisi kiri.

Kontainer CCOPYRIGHT - Bingkai dengan satu sisi atas.

Bingkai kita akan menipis dan menunjuk. Sebagai warna, atur untuk mereka # B1BEC6 (biru muda).

Listing 11.3 menunjukkan fragmen yang dikoreksi dari kode CSS dari gaya main.css, yang mengimplementasikan pengaturan indentasi dan frame yang dipilih oleh kami.

Mari kita heran.

Untuk menghapus lekukan antara batas jendela browser web dan isi halaman web, kami menggunakan atribut gaya margin. Kami menempatkan gaya redefinisi tag Dan mereka memberinya nilai 0 piksel:

Tubuh (Warna: # 3B4043;
latar Belakang - Warna: # F8F8F8;
font-Family: Verdana, Arial, Sans-Serif;
mARGIN: 0PX)

Dalam gaya Cheader bernama, terikat pada wadah dengan nama yang sama, kami mengatur indentasi internal di sebelah kiri dan kanan, sama dengan 20 piksel, dan bingkai Hanya dengan bagian bawah. Bingkai ini akan memisahkan wadah ini dari yang mendasarinya:

#Cheader (lebar: 1010px;
padding: 0 20px;
batas Border: Tipis Titik # B1BEC6)

Selain itu, kami menetapkan nilai absolut sebagai lebar wadah ini. RECALL: Saat menampilkan layar wadah dengan lebar relatif, browser web akan terlebih dahulu menghitung nilai absolut lebarnya, dan kemudian menambahkan jumlah indentasi untuk itu. Akibatnya, wadah akan menjadi lebih lebar dari jendela browser web, dan strip gulir akan muncul di jendela yang tidak kita butuhkan sama sekali. Oleh karena itu, untuk lebar wadah, lebih baik untuk menetapkan nilai absolut, mengambilnya sehingga wadah dijamin agar sesuai dengan jendela browser web dengan lebar.

Dalam gaya CNAVBAR bernama, kami menunjukkan indentasi eksternal di sebelah kanan 10 piksel - secara visual memisahkan wadah CNAVBAR dari wadah CMain:

#Cnavbar (lebar: 250px;
tinggi: 570px;
float: kiri;
margin-Right: 10px)

Dalam gaya CMain bernama, kami meminta indentasi dan bingkai internal dengan satu sisi kiri - itu akan memisahkan wadah CMain dari wadah CNAVBAR:

#Cmain (lebar: 760px;
tinggi: 570px;
float: kiri;
overflow: AUTO;
padding: 5px;
border-Left: Thin Dotted # B1BEC6)

Dalam gaya CCOPyright bernama, kami mengatur indentasi ke kiri dan kanan 20 piksel, dan dari atas - 10 piksel. Selain itu, kami membuat bingkai dengan satu sisi atas, yang akan memisahkan wadah ccopyright dari "tetangga" yang diawasi:

#Copyright (lebar: 1010px;
jelas: keduanya;

padding: 10px 20px 0px 20px;
bORDER-TOP: Thin Dotted # B1BEC6)

Itu saja. Simpan tabel gaya main.css dan buka halaman web index.htm di web Explorer. Penulis tidak akan memberikan ilustrasi di sini, karena kerangka kerja tipis yang kami buat hampir tidak terlihat. Tetapi pada layar komputer mereka terlihat sangat mengesankan.

Mari kita lihat pita navigasi. Hyperlink yang tidak mengungkapkan bosan di bagian atas wadah cnavbar, sangat disayangkan untuk melihat mereka! .. Mari kita pindahkan ke kiri, sedikit "menyebar", menciptakan lekukan, dan pada saat yang sama kita menyimpulkan masing-masing dari mereka di kerangka.

Seperti yang kita ingat, bilah navigasi kami adalah daftar, dan hyperlink individualnya adalah poin dari daftar ini.

Berikut adalah perubahan yang diperlukan:

Daftar yang mengguncang pita hyperlink, pindah ke kiri oleh 30 piksel. Jadi kami menghilangkan ruang kosong yang terbentuk setelah pemindahan spidol di sebelah kiri, yang terlihat jelek.

Indentasi eksternal dari titik-titik daftar dari atas dan bawah - 10 piksel. Jadi kita akan memisahkan hyperlink satu sama lain.

Daftar bingkai titik - tipis, padat, warna # b1bec6.

Indentasi internal dari daftar poin: Dari atas dan di bawah - 5 piksel, kiri dan kanan - 10 piksel. Jadi kami akan memisahkan teks item dari frame..

Tetap hanya sesuai untuk memperbaiki kode CSS dari gaya utama.css (listing 11.4).

Pertimbangkan mereka secara lebih rinci.

Gaya navbar bernama, terikat ke tag daftar, yang membentuk pita navigasi, kami menambahkan indentasi ke kiri sama dengan -30 piksel. Berkat ini, daftar akan bergeser ke kiri, mengisi ruang kosong:

#Navbar (Font-Family: Arial, Sans-Serif;
ukuran font: 14pt;

teks-transformasi: huruf besar;
daftar-gaya-daftar: tidak ada;
margin-Left: -30px)

Gaya kombinasi yang baru dibuat akan membuat daftar daftar pita navigasi. bingkai dan atur indentasi yang sesuai:

#Navbar Li (Padding: 5px 10px;
mARGIN: 10px 0px;
perbatasan: Padat tipis # B1BEC6)

Simpan lembar gaya tetap dan perbarui browser web index.htm, menekan tombol . Itu menjadi jauh lebih baik, bukankah itu (Gbr. 11.1)?

Properti perbatasan universal digunakan untuk mengontrol batas elemen. Properti ini memungkinkan Anda untuk mengatur ketebalan, gaya, dan warna elemen dalam satu deklarasi.

Tiga properti (ketebalan, gaya dan warna border) ini dapat dipasang dalam satu iklan. Berikut ini adalah contoh:

Perbatasan di CSS.

Blok div dengan rangka merah 3px.

Anda dapat menentukan gaya perbatasan hanya di satu sisi item. Untuk melakukan ini, gunakan properti batas-batas (batas atas), batas kanan (perbatasan kanan), batas bawah (batas bawah), batas kiri (batas kiri).

Perbatasan di CSS.

Blok div dengan perbatasan yang berbeda.

Dalam contoh ini, untuk setiap sisi blok, ketebalan perbatasan diberikan, gaya dan warna.

Pikirkan bagaimana dengan CSS Anda dapat membuat angka seperti itu:

Nilai perbatasan - ketebalan, gaya dan warna - Anda dapat menentukan secara terpisah menggunakan properti khusus.

gaya perbatasan - gaya perbatasan.
lebar perbatasan - lebar perbatasan.
warna perbatasan - warna batas.

Pertimbangkan masing-masing nilai secara terpisah.

Gaya perbatasan properti. Gaya perbatasan.

Properti bergaya perbatasan menetapkan gaya bingkai. Dalam CSS, berbeda dengan HTML, batas elemen mungkin tidak hanya solid. Nilai-nilai berikut untuk gaya perbatasan diizinkan:

tidak ada - perbatasan hilang (secara default).
solid adalah batas yang solid.
ganda - perbatasan ganda.
perbatasan putus-putus.
bertitik - perbatasan dari sejumlah poin.
ridge - perbatasan "sisir".
groove - perbatasan "Romor".
inset adalah perbatasan yang dimanjakan.
passset - perbatasan yang diekstrusi.

Contoh penampilannya.

perbatasan hilang (tidak ada)

perbatasan padat (padat)

perbatasan ganda

perbatasan dari serangkaian poin (putus-putus)

perbatasan yang dibumbui (putus-putus)

perbatasan "Romor" (Groove)

perbatasan "Sisir" (Ridge)

perbatasan depresi (inset)

passet (Awal)

Ngomong-ngomong, jika untuk bingkai punggungan mengatur warna perbatasan berwarna hitam, maka ini adalah hasilnya.

Blok div dengan bingkai gaya hitam dan punggungan.

Bingkai terlihat seperti padat, tetapi itu karena gaya punggungan dibuat dengan menambahkan efek hitam dari naungan, dan efek hitam pada bingkai hitam tidak terlihat.

Menggunakan properti bergaya perbatasan, gaya perbatasan dapat ditentukan tidak hanya untuk semua sisi blok. Dimungkinkan untuk menetapkan beberapa nilai ke satu properti gaya perbatasan, tergantung pada jumlah nilai, gaya perbatasan akan ditugaskan ke jumlah pihak yang berbeda dari unit. Anda dapat mengatur satu, dua, tiga dan empat nilai. Mari kita pertimbangkan contoh untuk setiap kasus.

Satu nilai (padat) - gaya perbatasan diatur untuk semua sisi blok.

Dua nilai (ganda padat) - nilai pertama mengatur gaya untuk sisi atas dan bawah, yang kedua untuk samping.

Tiga nilai (putus-putus padat) - nilai pertama untuk sisi atas, yang kedua untuk samping, strut untuk bagian bawah.

Empat nilai (Padat putus-putus putus-putus) - setiap nilai untuk satu sisi searah jarum jam mulai dari atas.

Properti lebar perbatasan. Ketebalan perbatasan.

Untuk memasang ketebalan batas elemen, properti lebar perbatasan digunakan. Ketebalan batas dapat diatur dalam unit pengukuran absolut, misalnya dalam piksel.

Sedangkan untuk properti gaya perbatasan, juga dimungkinkan untuk ditetapkan dari satu hingga empat nilai. Pertimbangkan contoh untuk setiap kasus.

Contoh Kode:

Ketebalan perbatasan dalam CSS

Satu nilai (2px) - ketebalan perbatasan ditetapkan untuk semua sisi unit.

Dua nilai (1px 5px) - nilai pertama mengatur ketebalan untuk sisi atas dan bawah, yang kedua untuk samping.

Tiga nilai (1px 3px 5px) - nilai pertama untuk sisi atas, yang kedua untuk lateral, strut untuk bagian bawah.

Empat nilai (1px 3px 5px 7px) - setiap nilai untuk satu sisi searah jarum jam dari atas.

Juga untuk properti lebar batas ada nilai dalam bentuk kata kunci. Total TIGA dari mereka:

batas tipis-tipis;
ketebalan rata-rata sedang;
perbatasan tebal - lemak;

Ketebalan perbatasan: kurus.

Ketebalan perbatasan: media.

Ketebalan perbatasan: tebal.

Properti warna perbatasan. Warna perbatasan.

Untuk mengontrol warna perbatasan, gunakan alat warna perbatasan. Warna untuk properti ini, Anda dapat mengatur menggunakan metode apa pun yang dijelaskan dalam artikel "Warna dalam CSS", yaitu:

Rekaman gandum (# FF00AA) warna.
Format RGB - RGB (255,12.110). Format RGBA untuk CSS3.
Format HSL dan HSLA untuk CSS3.
Nama warna, seperti hitam (hitam). Daftar lengkap nama warna ditampilkan dalam tabel nama warna CSS.

Properti warna batas juga dapat memiliki dari nilai satu hingga empat dan memprosesnya dengan cara yang sama dengan properti sebelumnya.

Satu nilai (merah).

Dua nilai (merah hitam).

Tiga nilai (kuning hitam kuning).

Empat nilai (merah kuning hitam merah).

Sekarang mari kita kembali ke tugas bersuara di atas dan menggambar angka:

Berikut adalah kode yang menarik angka seperti itu, hanya ukuran yang lebih besar:

Ketebalan perbatasan dalam CSS

Menetapkan nilai untuk sisi secara terpisah

Disebutkan di atas bahwa Anda dapat menentukan nilai-nilai properti perbatasan hanya untuk satu sisi unit. Untuk keperluan ini ada properti:

atas perbatasan (batas atas)
perbatasan kanan (perbatasan kanan)
batas batas (batas bawah)
perbatasan kiri (batas kiri)

Biarkan saya mengingatkan Anda, untuk semua properti, tiga nilai diindikasikan (ketebalan, gaya dan warna) dalam urutan apa pun. Tetapi ada properti yang memungkinkan Anda untuk mengatur ketebalan, warna dan gaya untuk setiap sisi secara terpisah. Menulis sifat-sifat ini berasal dari atas.

Parameter batas atas (batas batas).

bORDER-TOP-COLOR - Menentukan warna batas atas elemen.
border-Top-Width - Menetapkan ketebalan batas atas elemen.
border-Top-Style - Menentukan gaya batas atas elemen.

Parameter batas kanan (kanan perbatasan).

border-Right-color - Menentukan warna batas kanan elemen.
border-Right-Width - Menetapkan ketebalan batas kanan elemen.
border-Right-Style - Menentukan gaya batas kanan elemen.

Pengaturan batas bawah (Bawah Border).

border-bottom-color - menetapkan warna batas bawah elemen.
border-boot-lebar - menetapkan ketebalan batas bawah elemen.
border-Bottom-Style - Menentukan gaya batas bawah elemen.

Pengaturan batas kiri (batas kiri).

perbatasan-kiri-warna - menetapkan warna batas kiri elemen.
batas-kiri-lebar - menetapkan ketebalan batas kiri elemen.
border-Left-Style - menetapkan gaya batas kiri elemen.

Contoh menggunakan properti ini:

Ketebalan perbatasan dalam CSS

Dalam contoh ini, blok div pertama kali ditetapkan dengan tebal 3px dan gaya padat untuk semua sisi. Kemudian:

mengesampingkan warna batas atas menggunakan properti batas-top-warna dalam warna merah,
menggunakan properti lebar batas-lebar, ketebalan batas kanan 10px diatur,
menggunakan properti border-bottom-style, batas bawah ditimpa sebagai ganda,
menggunakan properti border-kiri-warna, batas kiri diatur biru.

Radius perbatasan properti. Membulatkan sudut perbatasan.

Properti Border-RADIUS dirancang untuk mengelilingi sudut-sudut batas elemen. Properti ini muncul di CSS3 dan bekerja dengan benar di semua browser modern, dengan pengecualian Internet Explorer 8 (dan versi yang lebih lama).

Nilai dapat berupa angka apa pun yang digunakan dalam CSS.

Perbatasan properti-radius: 15px.

Jika bingkai blok tidak ditentukan, pembulatan terjadi dengan latar belakang. Berikut adalah contoh pembulatan blok tanpa bingkai, tetapi dengan warna latar belakang:

Perbatasan properti-radius: 15px.

Ada properti untuk membulatkan setiap sudut elemen. Dalam contoh ini mereka digunakan:

Radius batas-atas-kiri: 15px; Radius Border-Top-Right-Right: 0; Border-Bottom-Right-Radius: 15px; Batas-bawah-bawah-radius: 0;

Perbatasan properti-radius: 15px.

Meskipun kode ini dapat direkam oleh satu AD: BORDER-RADIUS: 15px 0 15px 0. Faktanya adalah bahwa properti Border-Radius dapat diatur dari satu hingga empat nilai. Tabel di bawah ini menunjukkan aturan yang menentukan iklan tersebut.

Periksa dengan hati-hati tabel ini, dapat dipahami bahwa entri terpendek dari gaya yang diinginkan akan seperti ini: BORDER-RADIUS: 15px 0. Hanya dua nilai.

Sedikit latihan

Kami menggambar Lemon Tools CSS.

Berikut adalah kode blok seperti itu:

MARGIN: 0 AUTO; / * Tempatkan unit di tengah * / lebar: 200px; Tinggi: 200px; Latar Belakang: # F5F240; Perbatasan: 1px solid # f0d900; BORDER-RADIUS: 10px 150px 30px 150px;

Kami sudah melukis angka:

Sekarang tinggalkan segitiga dari itu:

Kode segitiga adalah:

MARGIN: 0 AUTO; / * Tempatkan unit di tengah * / padding: 0px; Lebar: 0px; Tinggi: 0; Perbatasan: 30px putih solid; Batas bawah batas: merah;

Frame (parameter blok)

Nilai-nilai dari sifat-sifat ini digunakan untuk menetapkan karakteristik wilayah di sekitar elemen.
Ini dapat diterapkan pada simbol, gambar, dll.

Parameter	Nilai	Deskripsi
bORDER TOP-COLOR perbatasan warna kanan perbatasan warna kiri border-bottom-color border-color.	warna (Tanpa warna default)	Tentukan warna empat sisi bingkai. Jika bukannya warna untuk mengganti gambar URL, itu akan diulang, membentuk bingkai.
border-Style gaya Batas-Right gaya Kiri Perbatasan perbatasan gaya bawah gaya perbatasan.	tidak ada (default) padat dua kali lipat. alur. punggung bukit sisipan. awal.	Tentukan gaya empat sisi kerangka kerja.
batas batas. perbatasan kanan batas kiri. batas batas. berbatasan.	lebar bingkai, gaya_ram. warna (default: medium, tidak ada, tanpa warna)	Tentukan sifat-sifat dari empat sisi kerangka kerja. Mereka bekerja dengan cara yang sama seperti sifat-sifat indentasi (lihat), kecuali bingkai terlihat. lebar bingkai Ini mungkin nilai sedang, tipis atau tebal atau diatur dalam satuan pengukuran. style_raft. mungkin tidak ada atau padat Argumen warna Digunakan untuk menentukan warna latar belakang elemen, sedangkan itu dimuat, serta di belakang bagian yang transparan dari elemen. Jika Anda mengirim alamat gambar sebagai gantinya, gambar akan diulang, mengisi kontur sirkuit.
batas lebar atas border-Right-Width lebar batas batas lebar Bawah Batas lebar perbatasan.	tipis. medium (default) tebal. panjangnya	Tentukan lebar bingkai di sekitar elemen. Setiap sisi dapat ditentukan oleh parameter yang sesuai. Anda dapat mengganti instalasi empat properti individual dengan mengatur satu properti. lebar perbatasan. serta untuk properti properti batas..
cIIP.	rection (/ atas / kanan / bawah / kiri /) aUTO (default)	Menentukan bagian elemen mana yang terlihat. Semua yang ada di luar wilayah yang ditentukan oleh parameter ini tidak dapat dilihat.
tampilan.	"" Tidak ada "" (default)	Parameter ini menunjukkan apakah elemen akan ditampilkan.
mengapung.	tidak ada (default) kiri. baik	Menentukan aliran di sekitar elemen dengan elemen lain di sebelah kiri atau kanan alih-alih menempatkannya di bawahnya. Tag yang didukung , ...
tinggi	aUTO (default) panjangnya	Pasang ketinggian elemen dan ukur jika perlu. Nilai dikembalikan sebagai string yang mencakup unit pengukuran (px,%, dll.). Properti Posheight digunakan untuk mendapatkan nilai numerik.
kiri.	aUTO (default) panjangnya bunga	Tentukan koordinat horizontal dari elemen, memungkinkan Anda untuk menginstal dan memindahkan item dengan benar. Nilai dikembalikan sebagai string yang mencakup satuan pengukuran (px,%, dll.). Untuk mendapatkan nilai dalam bentuk angka, properti posleft digunakan.

Contoh 1:
Garis ini digarisbawahi dengan garis putus-putus. Contoh 2: Berbagai jenis bingkai.

1. Tidak Ada - Tidak ada perbatasan (perbatasan: tidak ada;)

2. Padat - Ada perbatasan (perbatasan: 1px solid;)

Contoh 4: bingkai sudut bundar.

. dalam deklarasi pajak;
. BANTUAN 2-NDFL;

Semua dokumen yang terdaftar menunjukkan kode octmo 11 digit alih-alih kode okat yang sebelumnya digunakan.

#Org.
{
Lebar: 80%;
Margin-top: 2em;
margin-kiri: otomatis;
Margin-Right: Auto;
BORDER-RADIUS: 10px 10px;
-MOZ-BORDER-RADIUS: 10px 10px;
-WebKit-Border-Radius: 10px 10px;
Padding: 15px 20px 15px 80px;
MARGIN: 0PX 0PX 0PX 0PX;
-WebKit-box-shadow: 2px 2px 3px # 999;
-Moz-box-shadow: 2px 2px 3px # 999;
/ * Yaitu hack min-height * /
min-tinggi: 40px;
Tinggi: Otomatis! Penting;
Tinggi: 40px;
Overflow: Terlihat;

Posisi: Relatif;
Bawah: 6px;
Kanan: 6px;
Perbatasan: 1px solid # 7E5A25;
/ * Atur posisi gambar latar belakang * /
Posisi latar: 20px 50%;
Latar Belakang-REATER: Tidak berulang;
Teks-align: justifikasi;
Ukuran font: 0.9EM;

Latar Belakang - Warna: # E8E3D4;
Latar belakang-gambar: URL (baba.gif);
}

Mulai 1 Januari 2014, OKTMO Kode baru ditunjukkan dalam:
. dalam deklarasi pajak;
. BANTUAN 2-NDFL;
. Pesanan pembayaran (bidang 105);
. Tanda terima untuk membayar pajak, biaya, tugas-tugas bentuk pajak PD-4.

Semua dokumen yang tercantum menunjukkan kode octmo 11 digit alih-alih kode OKAT yang sebelumnya digunakan.

Contoh 5: Bingkai dihiasi menggunakan tabel bersarang.

Suvorov A.v.

Tabel bersarang

gambar

Tabel 1
Pengaturan tabel bingkai hitam sempit (5px):

tabel -\u003e BGCOLOR \u003d # 000000 GAYA \u003d "BORDER: 2PX SOLID # A3852F"
tD -\u003e Style \u003d "Padding: 5px."

Contoh 6: bingkai vertikal.

Lebar dan tinggi elemen blok

Properti CSS. lebar. dan tinggi - Instal lebar dan tinggi elemen blok.
Lebar dan tinggi elemen dapat diberikan dengan cara-cara berikut:

mOBIL. - Dimensi elemen ditentukan oleh kontennya. (default)
% - Dimensi elemen ditetapkan sebagai persentase tinggi / lebar elemen induk.
px. - Ukuran elemen diatur dalam piksel atau unit pengukuran lain yang diambil dalam CSS.

Contoh:

Blok 1.

Blok 2.

Blok 3.

Kontrol konten elemen

Apa yang harus dilakukan dengan isi elemen jika melebihi ukurannya?

Jika elemen diberikan nilai tinggi dan lebar yang tepat ( tinggi lebar) Dan isinya, seperti teks panjang, tidak sesuai dengan batas yang ditentukan, maka secara default, elemen seperti itu diregangkan ke dimensi yang diinginkan, yang tidak selalu ada di tangan master web. Atribut datang ke penyelamatan meluap. yang menunjukkan browser apa yang harus dilakukan dengan elemen dalam kasus seperti itu.

Properti meluap. Mungkin memiliki nilai-nilai berikut:

terlihat - Elemen direntangkan ke dimensi yang diperlukan. (default)
tersembunyi. - Konten elemen "terpotong" hanya terlihat pada bagiannya yang ditempatkan di elemen.
gulir - Strip gulir ditambahkan (selalu! Bahkan jika konten ditempatkan di dalam elemen).
mOBIL. - Strip gulir ditambahkan jika perlu.

Contoh:

CSS.

CSS. (English Cascading Style Sheets - Tabel Gaya Cascading) - Deskripsi bahasa formal Bahasa dari penampilan dokumen yang ditulis menggunakan bahasa markup, dll. ..............

Hasil

CSS.

CSS. (English Cascading Style Sheets - Cascading Style Tables) - Deskripsi bahasa formal Bahasa dari penampilan dokumen yang ditulis menggunakan bahasa markup. Metode koneksi CSS untuk mendokumentasikan
Aturan CSS ditulis dalam bahasa CSS formal dan terletak pada gaya, yaitu, lembar gaya berisi aturan CSS. Seprai gaya ini dapat ditemukan baik dalam dokumen web itu sendiri, penampilan yang mereka jelaskan dan dalam file terpisah memiliki format CSS. (Bahkan, format CSS adalah file teks biasa. File.css tidak mengandung apa pun kecuali daftar aturan CSS dan komentar kepada mereka.) Yaitu, lembar gaya ini dapat dihubungkan, diimplementasikan dalam dokumen web yang dijelaskan dalam empat cara berbeda.:

Ketika lembar gaya berada dalam file terpisah, itu dapat dihubungkan ke dokumen web dengan cara tag Terletak di dokumen ini di antara tag dan.
(Menandai Ini akan memiliki atribut href yang memiliki alamat tabel gaya ini). Semua aturan tabel ini beroperasi di seluruh dokumen;

.....
Ketika lembar gaya berada dalam file terpisah, itu dapat dihubungkan ke dokumen web menggunakan @Import Directive yang terletak di dokumen ini antara tag dan) Segera setelah tag
Ketika lembar gaya dijelaskan dalam dokumen itu sendiri, dapat ditemukan di antara tag (yang, pada gilirannya, terletak di dokumen ini antara tag dan). Semua aturan tabel ini beroperasi di seluruh dokumen;

.....
Ketika tabel gaya dijelaskan dalam dokumen itu sendiri, dapat ditemukan di bodi beberapa tag terpisah (melalui atribut gayanya) dari dokumen ini. Semua aturan tabel ini hanya berlaku untuk konten tag ini.
Beli gajah

Frame memiliki penggunaan yang beragam, misalnya, sebagai elemen dekoratif atau untuk memisahkan dua objek. CSS menyediakan opsi yang tak terhitung jumlahnya untuk menggunakan bingkai.

Ketebalan bingkai

Ketebalan bingkai ditentukan oleh properti lebar perbatasan, yang mungkin memiliki nilai tipis, sedang dan tebal, atau nilai numerik dalam piksel. Gambar menunjukkan sistem ini:

Bingkai warna.

Properti warna perbatasan mendefinisikan warna bingkai. Nilai adalah nilai warna normal, misalnya: "# 123456", "RGB (123.123,123)" atau "kuning".

Jenis bingkai

Ada berbagai jenis bingkai. Di bawah ini adalah delapan jenis bingkai dan interpretasinya di Internet Explorer 5.5. Semua contoh ditunjukkan oleh warna "emas" dan ketebalan "tebal", tetapi secara alami dapat output dengan warna dan ketebalan yang berbeda.

Tidak ada atau nilai tersembunyi yang dapat digunakan jika Anda tidak ingin menampilkan bingkai.

Contoh definisi frame

Tiga properti yang dibahas di atas dapat dikombinasikan di setiap elemen dan, sesuai, instal bingkai yang berbeda. Untuk menggambarkan tampilan dokumen di mana frame berbeda didefinisikan