Tongkat vertikal. Cara menambahkan baris di dekat teks

Untuk menekankan beberapa elemen penting dari situs ini, tidak ada salahnya menggunakan semua jenis gaya dan properti yang disediakan untuk CSS ini. Tentu saja, Anda tidak dapat repot dengan teks dan menyorotnya, misalnya dalam huruf tebal atau miring, mengubah latar belakang atau membuat bingkai di sekitar teks. Tetapi tidak selalu salah satu metode yang disajikan cocok. Misalkan Anda memiliki teks yang perlu dipisahkan karena spesifik dari muatan semantiknya. Di sinilah properti html dan CSS datang untuk menyelamatkan.

Cara membuat garis dalam teks menggunakan CSS

Untuk mengimplementasikan rencana kami, kami perlu beralih ke file style.cssdengan menulis properti yang sesuai di dalamnya perbatasan. Dengan demikian, sebuah garis muncul di atas, di bawah, atau di sisi teks tertentu. Pada gilirannya, beberapa properti disediakan yang bertanggung jawab untuk menampilkan garis, yaitu:

- batas atas - garis horizontal yang terletak di atas teks;

- berbatasan kanan - garis vertikal yang terletak di sebelah kanan teks;

- perbatasan-bawah - garis horizontal yang terletak di bawah teks;

- perbatasan-kiri - garis vertikal ke kiri.

Cara membuat garis dalam html

Menggunakan properti CSS, Anda dapat mendaftarkan semua nilai yang diperlukan dengan mengedit kode HTML. Untuk melakukan ini, buka bagian administratif situs. Pilih salah satu bahan yang diterbitkan, alihkan editor teks ke mode pengeditan kode html dan tambahkan properti CSS. Sampelnya bisa dilihat di bawah.

Bagaimana cara membuat garis putus-putus atau lurus?

Setelah mendaftarkan properti ini, Anda akan dapat menekankan pentingnya materi, paragraf, atau heading?

Dekripsi perintah singkat

- lebar - panjang garis;

- padat - garis solid;

- putus-putus - garis putus-putus.

Untuk lebih memahami gaya, saya sarankan membaca ini.

Anda perlu memahami bahwa dalam proses membuat perubahan pada kode situs, properti yang menentukan jenis garis, ketebalan dan warnanya terdaftar dengan spasi.

Metode di atas memiliki beberapa keunggulan:

Beragam fitur yang dapat Anda gunakan untuk membuat hampir semua lini.

Kemudahan membuat semua perubahan yang diperlukan secara langsung ke kode HTML. Ini sangat menyederhanakan tugas untuk pembangun situs yang tidak berpengalaman.

Cara membuat garis horizontal lurus menggunakan tag HTML

Hal pertama yang saya ingin menarik perhatian Anda adalah bahwa tag ini, terlepas dari semua seluk-beluk dan prinsip-prinsip html, tidak memiliki tag penutup. Itu dapat digunakan di mana saja dalam kode html, di antara tag dan

.

Atribut tag

- lebar - Bertanggung jawab atas panjang garis. Ini dapat ditunjukkan dalam persentase dan piksel.

- ukuran - ketebalan garis. Diindikasikan dalam piksel.

- warna - menentukan warna garis.

- sejajarkan - atribut yang bertanggung jawab untuk menyelaraskan garis. Pada gilirannya, perintah itu merujuk padanya:

- benar - penjajaran di sebelah kanan;

- kiri - perataan kiri;

- pusat - perataan tengah.

Contoh kode html menggunakan tag

Saya harap Anda berhasil, dan sekarang Anda tahu cara membuat garis di situs Anda. Tinggalkan pertanyaan mendesak Anda di komentar, dan kami akan membahasnya.

Terima kasih atas perhatian Anda dan sampai jumpa di halaman Stimylrosta.

Garis horisontal dibentuk oleh tag tidak berpasangan (tidak perlu tag penutup)

dan bisa menjadi elemen desain yang cukup unik. Desain teks dengan penambahan garis HTML horizontal akan memberikan halaman logika tertentu dari presentasi teks, dan juga memudahkan pembaca untuk memilih blok informasi yang perlu dipelajari secara berurutan. Tag

dapat membentuk garis horizontal dengan warna, ketebalan, dan panjang yang berbeda. Dan untuk melakukan ini cukup sederhana, seperti yang ditunjukkan pada contoh di bawah ini.

Omong-omong, Anda juga dapat menggunakan properti gaya blok.

dan

untuk membentuk garis di lokasi tertentu. Benar, opsi ini mungkin tidak selalu nyaman, misalnya, mewarnai meja terkadang tidak selalu berhasil, tetapi dalam banyak kasus dimungkinkan untuk menyelesaikan masalah dengan cara ini. Misalnya, di dalam garis yang dibentuk oleh tag
teks tidak disisipkan. Dan di dalam blok - itu mungkin dan terus-menerus dipraktikkan. Jadi, Anda perlu memilih opsi Anda tergantung pada persyaratan desain.

Garis vertikal dalam HTML.

A garis vertikal sebenarnya dibentuk di blok yang sama

dan

.
Satu-satunya ketidaknyamanan - tidak di semua tag browser
Ini berfungsi sama, tetapi di sini Anda perlu mencoba dan menyesuaikan halaman, atau menggunakan browser yang diperbarui.

Formasi garis horizontal:

Tag
menyisipkan garis horizontal pada halaman dan memiliki atribut berikut:

Tag sintaks
:

Contoh garis horizontal dalam HTML:

Contoh garis vertikal dalam HTML:

lingkaran dibentuk menggunakan tag

Berikut adalah contoh garis merah horizontal di bagian atas.

Berikut adalah contoh garis horizontal dan vertikal.

Sintaks untuk contoh garis vertikal dan horizontal dalam HTML adalah:

perhatikan atribut gaya perbatasan kiri (kanan): 4px solid # FF0000;:

lingkaran dibentuk menggunakan tag

Berikut adalah contoh garis merah vertikal di sebelah kiri.

Berikut adalah contoh garis merah vertikal di sebelah kanan.

Berikut adalah contoh garis merah horizontal di bawah ini.

Tantangan

Tambahkan garis vertikal ke sisi paragraf teks.

Solusi

Anda dapat menarik perhatian pembaca ke teks dengan berbagai cara. Misalnya, buat teks dalam huruf tebal, ubah warnanya, gunakan latar belakang, gambar bingkai. Tetapi bagaimana jika diperlukan tidak hanya untuk menyorot teks, berapa banyak untuk memisahkan satu blok teks dari yang lain, untuk membaginya menjadi bagian semantik yang berbeda? Di sini penggunaan garis dan indentasi tidak ternilai harganya.

Blok teks pada halaman web sangat berbeda dari rekan cetaknya. Perbedaan utama adalah lebar variabel dan tinggi teks, yang tergantung pada resolusi monitor, pengaturan sistem operasi, peramban, dan hal-hal lain semacam itu. Fitur-fitur ini memberikan tata letak halaman web kompleksitas tertentu, tetapi pada saat yang sama memunculkan teknik-teknik khusus yang sangat menyederhanakan proses pembuatan situs. Pertimbangkan bagaimana Anda dapat menggunakan gaya untuk membuat garis arbitrer di dekat teks, terlepas dari ukurannya.

Untuk membuat garis, gunakan properti CSS - perbatasan, yang menetapkan perbatasan di sekitar blok. Dalam kasus khusus, untuk membuat garis hanya pada satu sisi elemen, properti border-bottom, border-top, border-left dan border-right digunakan, masing-masing mengatur garis dari bawah, atas, kiri dan kanan.

Nilai-nilai properti ini terdaftar dengan spasi dan segera menetapkan jenis garis, ketebalan dan warnanya. Gaya garis dapat mengambil satu dari delapan nilai, seperti yang ditunjukkan pada gambar. 1, dan ketebalannya diatur, sebagai aturan, dalam piksel.

Fig. 1. Jenis garis

Contoh 1 menunjukkan pembuatan garis vertikal di sebelah teks.

Contoh 1. Garis vertikal di sebelah kiri teks

HTML5 CSS 2.1 IE Cr Op Sa Fx

Baris ke kiri teks

Mempelajari dari posisi yang dekat dengan psikologi gestalt dan psikoanalisis proses dalam kelompok kecil, yang mencerminkan struktur mikro informal masyarakat, J. Moreno menunjukkan bahwa keterpaksaan memberikan tekanan berdasarkan sifatnya yang bercampur subyektif dan obyektif, mentransfer motivasi internalnya ke hubungan nyata berbagai hal.

Untuk menjaga gaya paragraf asli tidak berubah, diperkenalkan kelas baru baris, yang menetapkan garis vertikal di dekat paragraf. Kelas ini, di samping itu, juga menetapkan offset 20 piksel dari tepi kiri jendela ke teks menggunakan properti margin-kiri dan indentasi dari baris ke teks melalui padding-left, tanpa itu teks akan menyentuh garis terlalu erat. Hasilnya ditunjukkan dalam gambar. 2.