Bagaimana Melaksanakan Sempadan Berbeza dalam CSS?

Sempadan digunakan dalam halaman HTML untuk membatasi dan menonjolkan kandungan. Apabila terdapat banyak maklumat di halaman dan anda ingin menarik perhatian pengguna ke bahagian tertentu, kemudian gunakan sempadan di sekitar kandungan tersebut. Dalam artikel ini mengenai Borders in CSS saya akan membincangkan topik berikut:

• Bila hendak menggunakan Sempadan
• Sempadan dalam CSS
• Atribut Sempadan CSS
• Nilai lalai untuk Atribut Sempadan
• Tentukan Sempadan di Shorthand
• Perkara yang perlu diingat semasa Merancang Sempadan dalam CSS

Bila hendak menggunakan Sempadan

Amalan standard adalah menggunakan tag sempadan CSS untuk menentukan sempadan dalam halaman HTML untuk:

• Mengenai tajuk penting
• Untuk menyerlahkan catatan pos atau nota penting
• Untuk menyertakan gambar, ilustrasi, petikan dari orang, video
• Untuk menarik perhatian pada harga, garis masa atau maklumat penting seperti itu

Anda mungkin mahu membaca di sebelum meneruskan pembelajaran mengenai sempadan CSS.

Untuk tutorial CSS yang komprehensif, lawati Tutorial Edureka CSS Untuk Pemula . Anda akan mendapat kemajuan yang baik mengenai cara CSS digunakan untuk menambah reka bentuk web HTML.

Sempadan dalam CSS

Batas CSS dapat ditugaskan ke bahagian yang berlainan dari halaman HTML, sama ada untuk melampirkan tajuk atau perenggan. Mari kita mulakan dengan contoh. Di sini kita menentukan sempadan di sekitar tajuk dan batas lain di sekitar teks perenggan.

bagaimana menjadikan dua kali ganda menjadi int

badan {background-color: lightblue} h1 {text-align: center border-style: solid} p {font-family: verdana font-size: 20px border-style: dotted}
Batasi perenggan juga!
 

Atribut Sempadan CSS

Batas CSS mempunyai 3 atribut utama

• gaya:Thegayaatribut mentakrifkan corak sempadan.
• warna: Warnanya boleh jadi warna dari set yang ditentukan oleh warna CSS.
• lebar: Lebar digunakan untuk mengubah ketebalan sempadan, untuk membuatnya lebih menonjol.

Dalam contoh di atas, kita melihat bahawa hanya satu atribut sempadan yang ditentukan, itulah gayanya. Atribut lain apabila tidak ditentukan mengambil nilai lalai. Terdapat atribut lain yang disebut radius, yang jarang digunakan. Ia digunakan untuk membuat pinggir sempadan membulat.

• gaya sempadan atribut

Anda akan melihat bahawa ada pilihan 'tanpa sempadan' dan 'sempadan tersembunyi' juga. Pemaju hanya boleh mengelakkan menentukan sempadan, mengapa secara jelas menetapkannya sebagai 'sempadan tersembunyi'? Ini dilakukan untuk tujuan penggunaan ruang dan penjajaran dengan elemen lain di halaman.

Gaya sempadan boleh dicampur dalam elemen juga. Untuk tujuan ini, 4 sisi sempadan individu boleh ditentukan secara berasingan dengan gaya yang berbeza. Ini boleh dilakukan dengan 2 cara. Sama ada menentukan semua 4 sisi dalam satu tag. Dalam kes ini, kiraan bermula dari baris atas dan kemudian bergerak mengikut arah jam. Sebagai alternatif, masing-masing dari 4 garis sempadan dapat ditentukan dalam tag individu juga. Kedua-dua kes ditunjukkan dalam Contoh seterusnya.

• warna sempadan atribut

Atribut warna untuk sempadan dapat ditetapkan dalam pelbagai cara. Ini serupa dengan menetapkan warna untuk elemen lain. Warna dapat ditetapkan dengan salah satu kaedah berikut:

• nama - tentukan nama warna, seperti 'biru'. Anda juga boleh mencuba beberapa pilihan warna mewah seperti 'BlanchedAlmond'!
• Heks - tentukan nilai hex, seperti '# ff0000'
• RGB - tetapkan kod RGB. Contohnya, rgb (255,255,0) bermaksud Kuning.
• tetapan - seperti 'telus' atau 'legap'

• lebar sempadan atribut:

Properti lebar, seperti namanya, menentukan ketebalan 4 sisi sempadan. Sekiranya satu nilai ditentukan, itu adalah untuk semua sisi, jika tidak, nilai lebar individu juga dapat ditetapkan.

Lebarnya dapat ditentukan dalam salah satu unit standard seperti piksel (‘px’), titik (‘pt’) atau dalam sentimeter (‘cm’). Anda juga boleh menentukan lebar menggunakan nilai yang ditentukan sebelumnya iaitu 'tebal', 'tipis' dan 'sederhana'.

• jejari sempadan atribut

Tujuan menentukan jejari adalah untuk mendapatkan sudut bulat untuk sempadan. Faktor jejari menentukan tahap kebulatan. Semakin besar nilainya, semakin banyak sudut yang melengkung. Sebagai amalan biasa, nilai radius dijaga antara 1-3 kali lebar sempadan.

Kod berikut akan menghasilkan:

lebar sempadan: 10 piksel
sempadan-jejari: 30 piksel

Nilai Lalai untuk Atribut Sempadan

• Satu-satunya atribut wajib ialah gaya . Sekiranya gaya tidak ada, sempadan tidak akan muncul.

• Sekiranya warna tidak ditentukan, warna dari elemen yang mendasari diambil sebagai nilai lalai. Sebagai contoh, jika warna teks suatu paragraf didefinisikan sebagai 'biru', maka warna batas default juga akan menjadi biru. Sekiranya tidak ada definisi warna walaupun untuk elemen, maka warna lalai adalah 'hitam'.

• Nilai lalai untuk lebar adalah ‘medium’.

Tentukan Sempadan di Shorthand

Sebilangan pemaju lebih suka menentukan atribut sempadan dalam teg satu baris yang ringkas. Format ringkas ini membantu mengurangkan baris kod dan pembangun pakar lebih suka format ini. Menggunakan format singkatan disyorkan apabila definisi sempadan sederhana dan cukup standard. Walau bagaimanapun, jika anda perlu menonjolkan setiap sisi sempadan dengan gaya yang berbeza, maka anda perlu berpegang pada format menentukan teg individu.

Kod berikut digunakan:

gaya sempadan: putus-putus
warna sempadan: hijau
lebar sempadan: 5px
sempadan: 5px hijau putus-putus

Perkara yang perlu diingat semasa Merancang Sempadan dalam CSS

• Jangan gunakan sempadan terlalu banyak dalam halaman, ini boleh mengganggu dan menyukarkan pengguna untuk fokus.

• Penting untuk mengekalkan konsistensi dalam gaya dan warna sempadan. Elemen dalam tahap hierarki yang sama dalam halaman mesti mempunyai gaya dan lebar sempadan yang serupa untuk keseragaman. Contohnya, jika perenggan ditakrifkan dengan sempadan padat dan lebar 5px, mengekalkan format ini di seluruh yang lain perenggan elemen semasa reka bentuk laman web.

• Ikut satu gaya definisi teg. Beberapa pembangun selesa dengan definisi jalan pintas dengan semua nilai diberikan kepada satu sempadan teg. Sebilangan yang lain lebih suka menyenaraikan semua tag secara jelas untuk lebar, warna dan gaya. Konvensyennya adalah bahawa apabila hiasan sempadan yang rumit diperlukan dalam halaman, tag individu disenaraikan secara berasingan. Ini membantu semasa menyahpepijat definisi sempadan yang disesuaikan. Untuk kes biasa, hanya definisi jalan pintas sahaja.

Harap anda dapati maklumat yang anda cari di sempadan CSS, dan wDengan ini, kita akan mengakhiri artikel Sempadan ini dalam CSS.

Lihat kami yang dilengkapi dengan latihan langsung yang dipimpin oleh instruktur dan pengalaman projek kehidupan sebenar. Latihan ini menjadikan anda mahir dalam kemahiran bekerja dengan teknologi web back-end dan front-end. Ia merangkumi latihan mengenai Pembangunan Web, jQuery, Angular, NodeJS, ExpressJS, dan MongoDB.

Ada soalan untuk kami? Sila sebutkan di bahagian komen di blog 'Border in CSS' dan kami akan menghubungi anda.