Dalam proses mereka bentuk tapak, ramai pembina tapak baru tertanya-tanya bagaimana untuk menukar fon, saiz dan warna tajuk. Ya betul betul pilihan yang hebat, yang mana anda boleh membawa sedikit kesegaran pada reka bentuk tapak. Tetapi ada satu lagi soalan yang sama menarik, bagaimana untuk membuat bingkai html.

Bingkai html untuk apa?

Sebenarnya, tiada fungsi khas unsur yang diberikan tidak membawa. Namun begitu, teks itu, disertakan dalam bingkai yang direka dengan menarik, membangkitkan minat tertentu di kalangan pembaca. Oleh itu, bingkai di sekeliling teks boleh dipanggil dengan selamat sebagai salah satu cara untuk menekankan kepentingan teks berbingkai.

Ciri-ciri mencipta bingkai di sekeliling teks

Sudah tentu, variasi reka bentuk bingkai menggunakan CSS banyak lagi, tetapi itu cerita yang sama sekali berbeza. Di samping itu, kaedah ini sesuai untuk pembina tapak yang lebih maju. Saya rasa kami ada bersama anda dan dengan bantuan penyuntingan kod html mendapat sekurang-kurangnya bingkai yang cantik html.

Pada peringkat pertama, adalah perlu untuk memahami bahawa bingkai boleh dibuat untuk setiap satu elemen html tidak kira apa tag itu

,

, , dan lain-lain.

Sebaliknya, terdapat perbezaan antara terbenam dan elemen blok.

Bingkai jenis terbina dalam terletak di dalam teg, atau sebaliknya, kod html yang bertanggungjawab untuk paparannya disertakan di antara teg tertentu. Akibatnya, kami mendapat bingkai html di sekeliling teks, yang mana ia perlu mendaftarkan arahan tertentu untuk menetapkan inden dalaman.

Bingkai blok dibentuk pada keseluruhan lebar blok, yang menimbulkan keperluan untuk menetapkan arahan yang berkaitan dengan had lebar.

Sudah tentu, untuk membuat teks dalam bingkai html, kita perlu beralih kepada gaya sebaris. Kaedah ini akan menjadi yang paling sesuai untuk menyerlahkan beberapa frasa individu, perenggan dalam teks dan gambar. Jika anda perlu menyerlahkan beberapa bahagian tertentu templat yang dipaparkan pada semua halaman tapak, adalah munasabah untuk beralih kepada mengedit fail style.css templat.

Bagaimana untuk membuat sempadan di sekeliling teks dalam html

Saya rasa teori itu sudah memadai. Sudah tiba masanya untuk berlatih. Sebagai contoh, saya akan sertakan dalam bingkai hijau muda terang dengan latar belakang kelabu salah satu cadangan penting artikel ini.

Perkara penting! Gaya sebaris berfungsi dengan baik dan tidak menyakitkan Kesahihan HTML tapak.

Untuk melaksanakan bingkai yang sama, anda perlu merujuk pada teg

CADANGAN ANDA.

Sejak dalam contoh ini terbina dalam gaya css Saya menganggap ia sama penting untuk membiasakan anda dengan setiap daripada mereka.

1. sempadan- harta yang bertanggungjawab untuk memaparkan bingkai. Untuk memudahkan tugas, saya tidak menulis setiap harta secara individu - lebar sempadan (ketebalan sempadan bingkai), warna sempadan (warna rangka kerja html). Sebaliknya, kami memendekkan sedikit kod html dengan menulis semua sifat selepas titik bertindih.

Untuk perubahan penampilan bingkai cukup untuk menukar nilai padu. Sempadan berikut wujud:

Permatang - timbul.

Bertitik - bertitik.

Berganda - berganda.

Berputus-putus.

Padat - padu.

2. padding- harta yang bertanggungjawab untuk jarak antara bingkai dan objek yang disertakan di dalamnya.

Jika anda mahu, anda boleh bermain-main dengan gaya sedikit lagi dengan menambahkan banduan antara tag pembukaan dan penutup kepada bilangan arahan.

Harta benda margin. Dengan cara ini, anda boleh mengesot elemen yang berada di luar bingkai.

untuk berubah latar belakang ia cukup untuk mendaftarkan sifat warna latar belakang, menunjukkan kod warna yang dikehendaki selepas titik bertindih.

bingkai sekeliling gambar html dilakukan dengan cara yang sama, jadi anda tidak sepatutnya menghadapi masalah dengannya. Satu-satunya perkara yang perlu diketahui oleh pemula ialah untuk memaparkannya, sifat mesti ditulis dalam satu tag .

Kesimpulannya, kita boleh mengatakan bahawa untuk membuat bingkai di sekeliling imej atau teks, cukup untuk membuka paparan kod html artikel dan menulis sifat khas di dalamnya antara tag tertentu.

Terima kasih atas perhatian anda dan jumpa anda tidak lama lagi di halaman Stimylrosta.

Ditemui dalam teks kesalahan tatabahasa? Sila maklumkan kepada pentadbir tentang perkara ini: pilih teks dan tekan kombinasi kekunci pintas Ctrl+Enter

Vlad Merzhevich

Dengan CSS, anda boleh menambah sempadan pada elemen dalam beberapa cara. Pada asasnya, sudah tentu, ia digunakan harta sempadan, sebagai yang paling serba boleh, serta garis besar dan, menghairankan, box-shadow , yang tugas utamanya ialah mencipta bayang-bayang. Mari kita lihat kaedah ini dan perbezaannya.

menggariskan harta

Harta paling mudah untuk mencipta bingkai. Ia mempunyai parameter yang sama seperti border , tetapi berbeza dengan ketara dalam beberapa butiran:

• garis besar dilukis di sekeliling elemen (sempadan di dalam);
• garis besar tidak menjejaskan saiz elemen (sempadan ditambah pada lebar dan ketinggian elemen);
• garis besar hanya boleh ditetapkan di sekeliling keseluruhan elemen, bukan pada sisi individu (sempadan boleh digunakan pada mana-mana bahagian atau sekaligus);
• garis besar tidak dipengaruhi oleh jejari pembundaran yang ditentukan oleh sifat jejari sempadan (ia menjejaskan sempadan).

Timbul persoalan - dalam kes apakah garis besar diperlukan, apabila peranannya, walaupun terdapat perbezaan yang disenaraikan, diambil alih sepenuhnya oleh sempadan ? Terdapat tidak begitu banyak situasi, tetapi ia berlaku:

• mencipta bingkai pelbagai warna yang kompleks;
• menambah bingkai pada elemen apabila melayang di atasnya dengan kursor tetikus;
• Menyembunyikan bingkai yang ditambahkan secara automatik oleh penyemak imbas untuk beberapa elemen apabila ia menerima fokus;
• untuk garis besar, anda boleh menetapkan jarak dari pinggir elemen ke sempadan menggunakan sifat offset garis besar, untuk mencipta .

Bingkai pelbagai warna

Perlu difahami bahawa garis besar sama sekali tidak menggantikan sempadan dan mungkin wujud bersamanya, seperti yang ditunjukkan dalam contoh 1.

Contoh 1: Buat bingkai

Dalam contoh ini, sempadan hitam ditambah di sekeliling elemen, yang dipisahkan dari latar belakang oleh sempadan putih (Rajah 1).

nasi. 1. Sempadan di sekeliling elemen

Bingkai apabila menggunakan:hover

Menambah sempadan merentasi sempadan meningkatkan lebar elemen, yang agak ketara apabila menggabungkan sempadan dan :hover pseudo-class. Terdapat dua cara bagaimana untuk "menang". Yang paling mudah ialah menggantikan sempadan dengan outline , yang kita tahu tidak mempunyai kesan ke atas saiz elemen (contoh 2).

Contoh 2: Bingkai pada tuding

garis besar tidak selalu sesuai, jika hanya kerana ia tidak dipengaruhi oleh sudut bulat. Kaedah kedua sesuai di sini - tambahkan sempadan tidak kelihatan atau sempadan yang sepadan dengan warna latar belakang, dan kemudian tukar parameternya pada tuding (contoh 3). Kemudian tiada anjakan elemen akan berlaku, kerana bingkai sudah ada pada mulanya. Tetapi sentiasa ingat bahawa lebar elemen adalah hasil tambah nilai lebar, sempadan di sebelah kiri dan sempadan di sebelah kanan. Begitu juga dengan ketinggian.

Contoh 3: Bingkai pada tuding

Sempadan di sekeliling medan borang

Beberapa pelayar (Chrome, Safari, versi terkini Opera) memaparkan ikon kecil di sekeliling medan borang apabila ia menerima fokus. bingkai warna(Gamb. 2). Untuk mengalih keluarnya, sudah cukup untuk menambah pada sifat garis dalam gaya tiada nilai, seperti yang ditunjukkan dalam contoh 4.

nasi. 2. Bingkai di sekeliling padang

Contoh 4. Keluarkan bingkai

Bingkai melalui bayangan kotak

Walaupun sifat bayang kotak bertujuan untuk menambah bayang di sekeliling elemen, ia juga boleh digunakan untuk membuat sempadan dan yang tidak boleh dilakukan dengan sempadan atau garis besar . Ini disebabkan oleh fakta bahawa bilangan bayang-bayang boleh tidak terhad, parameter yang disenaraikan dipisahkan dengan koma.

Untuk mendapatkan bingkai, tiga parameter pertama harus ditetapkan kepada sifar, mereka bertanggungjawab untuk kedudukan bayang-bayang dan kaburnya. Pilihan keempat dalam kes ini bertanggungjawab untuk ketebalan sempadan, dan yang kelima menetapkan warna sempadan. Untuk bingkai kedua, parameter keempat adalah sama dengan jumlah ketebalan dua bingkai.

Contoh 4 menunjukkan cara menambah dua kotak dan satu jidar ke kanan menggunakan satu sifat bayang-bayang kotak.

Contoh 4: Menggunakan box-shadow

Hasil daripada contoh ini ditunjukkan dalam Rajah. 3.

nasi. 3. Bingkai dicipta oleh sifat kotak-bayang

Bingkai CSS3 memanjangkan keupayaan pemformatan sempadan elemen dengan sifat yang membenarkan sudut bulat elemen, dan juga menggunakan Imej untuk menggayakan sempadan sesuatu unsur.

Sudut bulat dan bingkai gambar

1. Bucu bulat dengan jejari sempadan

Sokongan Pelayar

IE: 9.0
Firefox: 4.0
Chrome: 4.0
safari: 5.0, 3.1 -webkit-
opera: 10.5
iOS Safari: 7.1
Opera Mini: —
Pelayar Android: 4.1
Chrome untuk Android: 44

Sifat ini membolehkan anda membulatkan penjuru elemen sebaris dan blok. Lengkung untuk setiap sudut ditakrifkan dengan satu atau dua jejari yang menentukan bentuknya − bulatan atau elips. Jejari memanjang ke seluruh latar belakang, walaupun elemen tidak mempunyai sempadan, kedudukan tepat sekan ditentukan menggunakan sifat klip latar belakang.

Sifat jejari sempadan membolehkan anda membundarkan semua penjuru pada masa yang sama, dan menggunakan sifat jejari border-atas-kiri-jejari , jejari sempadan-atas-kanan , jejari sempadan-bawah-kanan , sempadan-bawah-kiri- jejari anda boleh membulatkan setiap sudut secara berasingan.

Jika anda menetapkan dua nilai untuk sifat jejari sempadan, nilai pertama akan dibundarkan kiri atas Dan sudut kanan bawah, dan yang kedua ialah atas kanan Dan dibahagian bawah kiri.

Nilai yang diberikan melalui / takrif mendatar Dan jejari menegak. Harta tersebut tidak diwarisi.

Pilihan

Div (lebar: 100px; tinggi: 100px; sempadan: 5px pepejal;) .r1 (jejari sempadan: 0 0 20px 20px;) .r2 (jejari sempadan: 0 10px 20px;) .r3 (jejari sempadan: 10px 20px ;) .r4 (jejari sempadan: 10px/20px;) .r5 (jejari sempadan: 5px 10px 15px 30px/30px 15px 10px 5px;) .r6 (jejari sempadan: 10px 20px 30px 40px/30px;) jejari sempadan: 50%;) .r8 (sempadan-atas: tiada; bawah sempadan: tiada; jejari sempadan: 30px/90px;) .r9 (jejari-kiri-bawah-sempadan: 100px;) .r10 (sempadan -jejari: 0 100%;) .r11 (jejari sempadan: 0 50% 50% 50%;) .r12 (jejari-sempadan-atas-kiri: 100% 20px; jejari sempadan-bawah-kanan: 100% 20px ;)
nasi. 1. Contoh pelbagai pilihan pembundaran sudut blok

2. imej sempadan

Sokongan Pelayar

IE: 11.0
Firefox: 15.0, 3.5 -moz-
Chrome: 16.0, 7.0 -kit web-
safari: 6.0, 3.0 -webkit-
opera: 15.0, 11.0 -o-
iOS Safari: 7.1
Opera Mini: 8-o-
Pelayar Android: 4.4, 4.1 -kit web-
Chrome untuk Android: 42

Harta ini membolehkan anda menetapkan imej sebagai sempadan elemen. Keperluan utama untuk imej ialah ia mestilah simetri. Hartanah ini termasuk nilai berikut: (imej sempadan: hirisan sumber lebar pada permulaan ulangan;) .

Dengan bantuan seperti itu imej ringkas anda boleh mendapatkan bingkai ini untuk elemen.

/* Contoh 1 */ div ( width: 260px; height: 100px; border-style: solid; border-image-width: 15px; border-image-source: url(border_round.png); border-image-slice: 30 ; border-image-repeat: stretch; ) /* Contoh 2 */ div ( width: 260px; height: 100px; border-style: solid; border-image-width: 15px; border-image-source: url(border_round. png); keping-imej sempadan: 30; ulang-imej sempadan: bulat; )
nasi. 2. Contoh reka bentuk sempadan blok menggunakan imej

Kepingan A - B - C - D membentuk sudut bingkai, dan bahagian corak yang terletak di antara mereka mengisi ruang yang tinggal bingkai mengikut tetapkan nilai properties border-image-repeat . Saiz bahagian sudut (dalam contoh ini, nombor 30) ditetapkan menggunakan nilai sifat keratan imej sempadan.

2.1. lebar-imej sempadan

Harta ini menetapkan lebar imej untuk sempadan elemen. Jika tiada lebar dinyatakan, ia lalai kepada 1 .

lebar-imej sempadan
Nilai:
panjang	Menetapkan lebar bingkai dalam unit panjang - px / em . Anda boleh menetapkan daripada satu hingga empat nilai pada masa yang sama. Jika satu nilai diberikan, maka lebar semua sisi bingkai adalah sama, dua nilai menentukan lebar bahagian atas-bawah dan kanan-kiri, dan seterusnya.
nombor	Nilai berangka yang mana nilai lebar sempadan didarabkan.
%	Lebar bingkai elemen dikira secara relatif kepada saiz imej. Mendatar berbanding lebar, menegak berbanding ketinggian.
auto	Sepadan dengan nilai sempadan-imej-slice.
permulaan
mewarisi

Sintaks

Div (lebar-imej sempadan: 30px;) 3. Contoh penetapan lebar bingkai-imej menggunakan pelbagai jenis nilai

2.2. sumber-imej sempadan

Harta ini menentukan laluan ke imej yang akan digunakan untuk menghiasi sempadan blok.

Sintaks

Div (sumber-imej-sempadan: url(border.png);)

2.3. unsur-unsur kepingan-imej sempadan

Harta ini menentukan saiz bahagian imej yang digunakan untuk menghiasi sempadan elemen dan membahagikan imej kepada sembilan bahagian: empat sudut, empat tepi antara sudut dan bahagian tengah.

Nilai:
nombor	Bahagian bingkai boleh bersaiz menggunakan satu, dua, tiga atau empat nilai. Satu nilai menetapkan sempadan dengan saiz yang sama untuk setiap sisi elemen. Dua nilai: yang pertama menentukan saiz bahagian atas dan batas bawah, kedua - kanan dan kiri. Tiga nilai: yang pertama menentukan saiz sempadan atas, yang kedua - kanan dan kiri, dan yang ketiga - sempadan bawah. Empat nilai: Menentukan saiz sempadan atas, kanan, bawah dan kiri. Nilai angka mewakili bilangan px .
%	Saiz sempadan dikira secara relatif kepada saiz imej. Mendatar berbanding lebar, menegak berbanding ketinggian.
isi	Nilai ditentukan bersama dengan nilai nombor atau peratusan. Jika ditetapkan, imej tidak dipotong oleh tepi dalam bingkai, tetapi juga memenuhi kawasan di dalam bingkai.
permulaan	Tetapkan sifat ini kepada nilai lalainya.
mewarisi	Mewarisi nilai sifat ini daripada elemen induk.

Sintaks

Div (kepingan-imej-sempadan: 50 20;)
nasi. 4. Contoh menetapkan kepingan bingkai imej

2.4. ulang-imej sempadan

Harta ini mengawal cara imej latar belakang memenuhi ruang antara penjuru bingkai. Ia boleh ditetapkan sama ada dengan nilai tunggal atau dengan sepasang nilai.

Sintaks

Div (ulang-imej sempadan: ulang;) 5. Contoh mengulang bahagian tengah bingkai imej menggunakan pelbagai jenis nilai

2.5. permulaan-imej sempadan

Harta ini membolehkan anda mengalihkan bingkai imej di luar sempadan elemen mengikut panjang yang ditentukan. Boleh ditetapkan menggunakan sama ada satu atau empat nilai.

Sintaks

Div (permulaan-imej sempadan: 10px;)
nasi. 6. Contoh mengalihkan imej bingkai menggunakan pelbagai jenis nilai

3. rangka luar mengimbangi garis luar mengimbangi

Sifat menentukan jarak antara sempadan elemen dan sempadan luar yang dibuat dengan sifat garis besar.

/*Rajah 1:*/ img ( sempadan: 1px merah jambu pepejal; garis besar: 1px kelabu putus-putus; outline-offset: 3px; ) /*Rajah 2:*/ img ( lebar sempadan: 1px 10px; gaya sempadan: pepejal; warna sempadan: merah jambu; garis besar: kelabu putus-putus 1px; mengimbangi garis besar: 3px; ) /*Rajah 3:*/ img ( sempadan: 3px sisipan merah jambu; garis besar: kelabu putus-putus 1px; mengimbangi garis besar: 1px; )
nasi. 7. Contoh menghias imej dengan bingkai luar

4. Bingkai kecerunan

Nilai imej sempadan boleh bukan sahaja imej, tetapi juga isian kecerunan.

Bingkai lut sinar

Salah satu warna adalah lutsinar. Dengan cara ini, anda boleh menetapkan sempadan untuk semua sisi elemen sekaligus atau secara berasingan untuk setiap sisi. Lebar sempadan dikawal oleh sifat lebar sempadan.

* (saiz kotak:kotak-sempadan;) .balut ( tinggi: 200px; padding: 25px; latar belakang: #00E4F6; ) .gradient ( tinggi: 150px; lebar: 50%; jidar: 0 auto; jidar: 10px pepejal lutsinar ; imej sempadan: kecerunan linear(ke kanan, lutsinar 0%, #ADF2F7 100%); kepingan-imej sempadan: 1; )

Sampul surat pos

* (saiz kotak:kotak-sempadan;) .balut (tinggi: 200px; padding: 25px; ) .gradient (tinggi: 150px; lebar: 50%; jidar: 0 auto; sempadan: 10px pepejal lutsinar; imej sempadan: 10 berulang-linear-gradient(45deg, #A7CECC, #A7CECC 10px, 10px telus, 20px telus, #F8463F 20px, #F8463F 30px, 30px telus, 40px telus); )

Satu aplikasi menarik bagi sifat kotak-bayang CSS3 adalah untuk mencipta bingkai berganda sekeliling unsur. sangat kesan yang menarik untuk penggayaan halaman, tetapi ia hanya akan berfungsi dalam versi baharu pelayar yang menyokong box-shadow .

Walau bagaimanapun, terdapat beberapa kaedah lain untuk mencipta kesan sedemikian. Dan penggunaan yang jelas imej latar belakang sangat jauh dari ideal.

DALAM pelajaran ini lima kaedah disediakan untuk mencipta sempadan berganda di sekeliling elemen. Dan hanya satu daripada mereka yang memerlukan imej, dan semua yang lain menggunakannya kod bersih css dengan sokongan yang sangat baik dalam pelayar.

Kaedah 1: sempadan dan garis besar

Kaedah ini hanya berfungsi dalam penyemak imbas yang menyokong sifat garis besar (semua kecuali IE6/7). Anda menambah kedua-dua sifat sempadan dan garis besar pada elemen.

Satu ( sempadan: pepejal 6px #fff; garis besar: pepejal 6px #888; )

Sebab kaedah ini berfungsi adalah kerana rangka rangka sentiasa keluaran dari luar segi empat tepat. Isu dengan sifat garis besar berlaku apabila menggunakan unsur terapung, kerana garis besar itu bertindih dengan unsur jiran.

Kaedah 2: unsur pseudo

Kaedah ini memerlukan kedudukan mutlak rangka kerja:

Dua ( sempadan: pepejal 6px #fff; kedudukan: relatif; z-index: 1; ) .two:before ( kandungan: ""; paparan: blok; kedudukan: mutlak; atas: -12px; kiri: -12px; sempadan: pepejal 6px #888; lebar: 312px; padding-bawah: 12px; ketinggian min: 100%; z-index: 10; )

Perkara utama ialah menetapkan sifat indeks-z (supaya elemen pseudo bertindih dengan kandungan), kedudukan dan nilai ketinggian min. Sifat terakhir mengekalkan keanjalan bingkai.

Kaedah 3: bayang-bayang

Paling kaedah terbaik, kerana ia hanya memerlukan satu baris kod untuk menetapkan sifat bayangan kotak.

Tiga ( bayang kotak: 0 0 0 6px #fff, 0 0 0 12px #888; )

Dua bayang digunakan untuk membuat sempadan berganda muncul. Mereka dipisahkan dengan koma. Kabur ditetapkan kepada 0. Memandangkan bayang kedua bertindih dengan yang pertama, ia mempunyai dua kali ganda lebar yang lebih besar. Detik penting- penggunaan warna legap, yang mewujudkan sempadan yang jelas antara bingkai.

Seperti sifat garis besar, bayangan kotak tidak mempunyai kesan pada unsur jiran dan boleh menutupi mereka. Oleh itu, adalah perlu untuk menetapkan medan untuk membentuk rupa komposisi.

Sememangnya, sokongan untuk sifat kotak-bayang adalah terhad kepada pelayar yang lebih baharu.

Kaedah 4: Elemen div tambahan

DALAM kaedah ini digunakan unsur luar