rumah > unggul > Cara membuat garis css horizontal. Bagaimana cara membuat blok sejajar dengan css? Cara membuat garis di html


Cara membuat garis css horizontal. Bagaimana cara membuat blok sejajar dengan css? Cara membuat garis di html




Tugas

Buat garis horizontal pada halaman.

Larutan

Garis horizontal bagus untuk memisahkan satu blok teks dari blok teks lainnya. Teks kecil dengan garis horizontal di atas dan di bawah lebih menarik perhatian pembaca dibandingkan teks biasa.

Dengan tanda

Anda dapat menggambar garis horizontal, yang tampilannya bergantung pada atribut yang digunakan, serta browser. Tag mengacu pada elemen blok, sehingga baris selalu dimulai pada baris baru, dan setelah itu, semua elemen ditampilkan pada baris berikutnya. Dengan banyak atribut tag
garis yang dibuat melalui tag ini mudah dikelola. Jika Anda juga menghubungkan kekuatan gaya, menambahkan baris ke dokumen menjadi tugas sederhana.

Garis bawaan

ditampilkan dalam warna abu-abu dan dengan efek volume. Jenis garis ini tidak selalu sesuai dengan desain situs, sehingga keinginan pengembang untuk mengubah warna dan parameter garis lainnya melalui gaya dapat dimengerti. Namun, browser memiliki pendekatan yang ambigu terhadap masalah ini, sehingga Anda harus menggunakan beberapa properti gaya sekaligus. Secara khusus, versi Internet Explorer yang lebih lama menggunakan properti warna untuk warna garis, sedangkan browser lain menggunakan warna latar belakang. Tapi bukan itu saja, pastikan untuk menentukan ketebalan garis (properti tinggi) selain nol dan hapus bingkai di sekitar garis dengan menyetel properti perbatasan ke tidak ada. Mengumpulkan semua properti untuk pemilih jam, kami mendapatkan solusi universal untuk browser populer (contoh 1).

Contoh 1. Garis mendatar

HTML5 CSS 2.1 YAITU Cr Op Sa Fx

Warna garis horizontal

Rangkaian teks

Hasil dari contoh ini ditunjukkan pada Gambar. 1.

Beras. 1. Garis horizontal berwarna

Tampaknya, mengapa diperlukan empat metode? Lagi pula, hampir setiap orang menggunakan satu metode yang biasa ia gunakan. Misalnya, saya menekan Shift dan tombol tanda hubung beberapa kali, dan seperti itulah hasil garis horizontal.

Namun bagaimana jika hasilnya berupa garis putus-putus, namun Anda membutuhkan garis yang solid?
- Kemungkinan besar tombol Shift pada keyboard rusak. Berikut beberapa cara lain untuk membantu.

3.
4.
5.

Mungkin cara yang paling familiar untuk membuat garis di Word adalah dengan menggunakan beberapa tombol pada keyboard.

I Garis tipis, tebal, ganda, putus-putus menggunakan keyboard

Di bawah ini adalah gambar keyboard dengan layout bahasa Inggris, tetapi tanpa layout Rusia, tapi ini tidak masalah, karena kami hanya tertarik pada tiga tombol: Shift, dash dan Enter.

Beras. 1. Tiga tombol pada keyboard: Shift, dash dan Enter untuk garis horizontal kontinu di Word

Dengan tiga tombol ini, Anda dapat menggambar garis horizontal kontinu di Word: putus-putus atau padat, tipis atau tebal, panjang atau pendek.

1) Saat Anda menekan tombol “-” (tanda hubung) beberapa kali di editor Word, kita mendapatkan garis putus-putus dengan panjang berapa pun.

Melakukan tipis garis panjang untuk seluruh lebar halaman:

  • Kami menemukan tombol "tanda hubung" pada keyboard (di sebelah kanan tombol "nol", dalam bingkai hijau pada Gambar 1).
  • Dari baris baru (!) di Word, tekan tombol ini beberapa kali: -
  • Dan kemudian tekan tombol "Enter" (). Beberapa garis yang tercetak tiba-tiba berubah menjadi garis tipis horizontal kontinu di seluruh lebar halaman.

2) Saat Anda menekan Shift dan "-" (tanda hubung) secara bersamaan, BUKAN tanda hubung yang dicetak, tetapi garis bawah _________. Dengan demikian, Anda dapat membuat garis kontinu dengan panjang sembarang di mana pun dalam dokumen.

Beras. 2. Garis horizontal tipis dan tebal di Word

Sekarang kami mencetak tebal garis horizontal di seluruh lebar halaman:

  • Sekali lagi kami menemukan tombol dasbor yang sama, serta tombol Shift (kiri atau kanan, sesuka Anda). Tekan Shift, tahan dan jangan lepaskan.
  • Dan sekarang, dari baris baru (!), klik tanda hubung beberapa kali (misalnya 3-4 kali) (sambil tidak melepaskan Shift): ___. Rilis Pergeseran.
  • Sekarang tekan tombol Enter. Anda akan melihat garis padat horizontal yang tebal.

Mari kita rangkum beberapa hasil dalam bentuk tabel:

(Klik untuk memperbesar) Garis di Word menggunakan keyboard

­­­­­­­­­­­­­­­­­­­­­

II Baris di Word menggunakan tabel

Garis horizontal dapat diperoleh dengan menggunakan tabel satu sel (1x1), di mana hanya batas atas atau bawah yang diwarnai (akan terlihat), dan tiga sisi tabel lainnya memiliki batas yang tidak dicat (tidak akan terlihat) .

Kami meletakkan kursor di tempat garis seharusnya berada. Di menu atas Word, klik:

  • Sisipkan (1 pada Gambar 3),
  • Tabel (2 pada Gambar 3),
  • Satu sel (3 pada Gambar 3).

Beras. 3. Cara menyisipkan tabel 1x1 di Word (dari satu sel)

Hasilnya adalah tabel satu sel besar (1x1):

Tetap berada di tabel 1x1 di tiga sisi untuk menghilangkan batas. Untuk ini

  • buka tab "Beranda" (1 pada Gambar 4),
  • selanjutnya di sebelah "Font" kita menemukan "Paragraf" dan batasnya (2 pada Gambar 4),
  • hapus semua batas dengan mengklik "Tanpa batas" (3 pada Gambar 4),
  • pilih "Batas atas" atau "Batas bawah" (4 pada Gambar 4).

Beras. 4. Cara menghilangkan seleksi border pada tabel Word (membuat border tidak terlihat)

Hal ini saya tunjukkan dengan jelas di video (di akhir artikel).

Ngomong-ngomong, pada Gambar. 3 menunjukkan bahwa ada cara yang lebih mudah. Anda dapat meletakkan kursor di awal baris di Word dan mengklik "Garis Horizontal" (5 pada Gambar 4):

III Baris di Word dengan Menggambar

Sisipkan (1 pada Gambar 5) - Bentuk (2 pada Gambar 5) adalah cara lain untuk mendapatkan garis horizontal di Word.

Untuk membuat garis benar-benar horizontal, tahan tombol Shift dan tarik garis secara bersamaan.

Beras. 5. Cara menggambar garis di Word

IV Line di Word menggunakan keyboard di layar

Untuk menemukan keyboard di layar, di Pencarian kami memasukkan frasa "keyboard di layar", detail lebih lanjut untuk Windows 7, dan untuk Windows 8.

Untuk Windows 10, Anda juga dapat menemukan keyboard di layar dengan mengetikkan "keyboard di layar" ke dalam bilah Pencarian.

Beras. 6. Papan ketik di layar

Kami akan membuat garis horizontal dengan cara yang sama seperti pada versi pertama dengan keyboard biasa. Pada keyboard di layar, Anda memerlukan tiga tombol: dasbor, Shift, dan Enter.

1 Dash dan Masuk

Dari baris baru di Word, klik tanda hubung beberapa kali (1 pada Gambar 6) dan tekan Enter. Anda akan mendapatkan garis horizontal tipis.

2 Shift, lari dan Enter

Dari baris baru di Word, klik Shift pertama (2 pada Gambar 6), lalu Dash (1 pada Gambar 6). Dapatkan garis bawah. Jadi ulangi 2 kali lagi, lalu tekan Enter. Hasilnya, kita akan melihat garis horizontal yang tebal.

Salam untuk semua pembaca. Dari waktu ke waktu, para master menghadapi masalah bagaimana membuat garis horizontal atau vertikal menggunakan HTML atau menggunakan CSS. Itulah yang akan saya ceritakan kepada Anda hari ini.

Garis di CSS

Ada beberapa cara untuk membuat garis. Salah satu caranya adalah dengan menggunakan CSS. Lebih tepatnya, dengan bantuan Border. Mari kita lihat sebuah contoh.

Dan inilah hasilnya.

Garis horizontal dan vertikal dengan css.

Garis dalam CSS dapat digambar menggunakan operator Border. Jika Anda hanya menginginkan persegi panjang dengan lebar tepi tetap, Anda cukup menggunakan operator ini dan memberinya nilai. Misalnya border:5px solid #000000; berarti batas kotak memiliki lebar 5 piksel berwarna hitam.

Namun, jika Anda tidak perlu menetapkan semua batasan, tetapi hanya sebagian, maka Anda perlu menentukan dengan tepat batasan mana yang diperlukan, dan nilai apa yang dimiliki masing-masing batasan tersebut. Berikut operatornya:

  • border-top - menetapkan nilai batas atas
  • border-bottom - menetapkan nilai batas bawah
  • border-left - menetapkan nilai batas kiri
  • border-right - menetapkan nilai batas kanan.

Garis vertikal dan horizontal dalam HTML

Anda juga dapat membuat garis di HTML itu sendiri. Untuk melakukan ini, Anda dapat menggunakan tag jam.

Dalam hal ini, garis horizontal akan digambar, tinggi satu piksel dan lebar penuh.

Tapi tag ini, Anda dapat menetapkan beberapa nilai.

  • Lebar– mengatur nilai lebar garis.
  • warna- mengatur warna garis.
  • Meluruskan- mengatur perataan kiri, tengah, kanan
  • ukuran– menetapkan nilai ketebalan garis dalam piksel.

Dengan menggunakan tag jam, Anda juga dapat mengatur garis vertikal. Namun dalam kasus ini, Anda harus menggunakan gaya lagi.

Dalam hal ini, garis vertikal akan digambar dengan tinggi seratus piksel, tebal satu piksel, dan menjorok ke dalam lima piksel.

Kesimpulan.

Nah, sekarang Anda sudah tahu cara mengatur garis vertikal dan horizontal. Garis dapat diatur baik di situs biasa menggunakan HTML, dan diatur di situs yang menggunakan CMS, seperti WordPress, tetapi dalam kasus ini, Anda perlu beralih ke mode HTML.

Nah, jika Anda memiliki pertanyaan lagi, tanyakan di komentar.

Saat membuat halaman HTML, gaya memainkan peran penting. Terutama ketika kita berbicara tentang berbagai simbol dan desain dekoratif: hal-hal kecil ini membantu membuat “bahasa” halaman Anda lebih mudah diakses dan jelas, dan juga secara signifikan mengubah persepsi dan tampilannya secara umum. Salah satu elemen desain yang paling penting adalah garis horizontal, dan selanjutnya kita akan mempelajari lebih detail cara menggunakannya dan cara membuat garis horizontal di html.

Apa itu garis horizontal dan mengapa diperlukan

Garis horizontal dalam html adalah elemen desain halaman yang melakukan sejumlah fungsi:

  1. Dekoratif. Membantu menambah daya tarik pada halaman.
  2. Pemisah. Berkontribusi pada pemisahan informasi yang efektif dengan arti yang berbeda.
  3. Menekankan atau menekankan. Ini akan menarik perhatian pengunjung halaman ke informasi yang diperlukan dan terpenting.

Ini adalah garis horizontal yang dianggap sebagai cara paling mudah diakses untuk mengimplementasikan sejumlah fungsi. Pembuatannya sangat sederhana, dan secara lahiriah terlihat sangat menguntungkan. Dengan perubahan sederhana pada kode html, Anda dapat mengontrol:

  • panjang;
  • lebar;
  • karakteristik warna;
  • keselarasan pada satu atau sisi lainnya.

Perlu dicatat bahwa garis horizontal mengacu pada elemen blok. Artinya, ia menempati baris baru pada halaman, dan teks yang mengikutinya akan berada di bawah.

Membuat garis horizontal dalam HTML

Anda dapat mengatur garis menggunakan tag sederhana - jam dalam tanda kurung segitiga. Ini adalah kependekan dari "Aturan Horisontal" dan menetapkan parameter eksternal klasik. Berbeda dengan banyak lainnya karena tidak memerlukan tag penutup dan mampu berdiri sendiri. Anda dapat mengubah karakteristik eksternal suatu elemen menggunakan nilai tambahan di tag:

  1. Panjang. Jika Anda tidak ingin panjang garis menutupi seluruh halaman, Anda dapat mengatur ukuran yang diinginkan dalam piksel atau persentase. Hal ini dilakukan dengan menggunakan kata tambahan "lebar" dalam tag dan indikator numerik panjang yang ditentukan setelah tanda "=" dalam tanda kutip.

Ini terlihat seperti ini. Misalnya, jika kita membutuhkan panjang 100 piksel, kita menetapkan tag berikut: hr width="100"

  1. penyelarasan. Penyelarasan dimungkinkan di tepi kiri atau kanan, dan juga di tengah. Properti ini hanya berlaku jika Anda telah menyetel parameter lebar, karena garis lebar halaman tidak dapat disejajarkan. Untuk perataan, kami menetapkan atribut tambahan di tag "sejajarkan" dan menambahkan arah ke dalamnya: tengah - untuk tengah, kiri - untuk kiri dan kanan - untuk perataan kanan.

Tag yang sudah selesai dalam hal ini akan terlihat seperti ini. Misalnya, jika kita perlu menyetel perataan tengah untuk garis horizontal sepanjang 150 piksel, maka tag yang sudah selesai akan terlihat seperti ini: hr align="center" width="150".

Perhatikan bahwa "align", metrik untuk penyelarasan, disetel ke 1, meskipun atributnya bergantung pada metrik lebar.

  1. Lebar. Secara opsional, Anda juga dapat menentukan lebar, membuat garis bawah tebal atau tipis. Kriteria ini tidak bergantung pada apa pun dan dapat digunakan sebagai kriteria independen tanpa menentukan panjang atau kesejajarannya. Untuk melakukan ini, kami menggunakan atribut ukuran pada tag dan nilai numerik yang sama dengan lebar yang diinginkan dalam piksel. Nomor tersebut ditentukan dalam tanda kutip setelah atribut ukuran dan simbol "=".

Jadi, jika kita ingin membuat garis dengan lebar 15 piksel, kita perlu membuat tag berikut: hr size="15".

  1. Warna. Hal ini juga ditetapkan sebagai indikator independen. Untuk mengubahnya digunakan atribut color yang dipadukan dengan nama warna dalam bentuk kode atau dalam bahasa inggris. Warnanya ditentukan dalam tanda kutip setelah simbol "=".

Jadi, tag untuk garis putih standar dapat ditulis dengan dua cara: hr color="#FFFFFF" atau hr color="white"

Warna hitam dapat dibuat menggunakan kode #000000.

  1. Menyimpan bayangan. Jika Anda membutuhkan elemen yang tidak mengandung bayangan, maka atribut noshade harus digunakan dalam tag. Dapat digunakan sendiri atau dikombinasikan dengan elemen lain. Tag untuk baris standar yang menggunakannya akan terlihat seperti ini: hr noshade

Buat garis horizontal dengan video

Dan jika Anda ingin mendapatkan informasi dalam format yang lebih visual, lihat video berikut, yang menjelaskan secara detail kemungkinan bekerja dengan garis horizontal.

Setelah menentukan dimensi garis horizontal yang diperlukan, Anda dapat mengatur halaman situs sedemikian rupa sehingga informasinya terstruktur dan terbentuk dengan baik secara visual. Hal ini memudahkan pengunjung untuk memahami informasi yang disajikan dan membedakan situs Anda dari situs lain.

Halo semua! Hari ini saya akan memberi tahu Anda cara membuat garis horizontal menggunakan html.

Padahal, kebutuhan untuk membuat garis horizontal cukup sering muncul, misalnya saat Anda perlu memisahkan satu bagian teks dari bagian teks lainnya.

garis horizontal dan vertikal dengan css

Anda dapat melakukan ini dengan css. Untuk melakukan ini, saya lampirkan bagian teks yang diperlukan dalam blok menggunakan tag div, dan kemudian di file style.css atau langsung dalam kode html, kami meresepkan properti untuk blok ini untuk batas atas atau bawah menggunakan batas atas dan batas bawah. Berikut ini contohnya:

garis html vertikal

Garis horizontal dengan css.

Dalam hal ini, saya menatanya dengan css langsung dari kode html, dan membuat batas atas menjadi garis padat dan batas bawah menjadi garis putus-putus.

Berikut tampilannya di halaman:

Garis horizontal dengan css.

Metode ini memiliki kelebihan:

  • Berbagai macam pengaturan yang memungkinkan Anda mengatur hampir semua jenis garis;
  • Anda dapat membuat garis horizontal dan vertikal. Untuk membuat garis vertikal, Anda perlu mengubah border-top menjadi border-left dan border-bottom menjadi border-right.

Kerugiannya termasuk kode yang relatif besar.

Namun ternyata, Anda bisa menyisipkan garis horizontal ke dalam teks menggunakan html. Pada saat yang sama, bahkan tidak perlu masuk ke css. Tag digunakan untuk ini.

.

garis horizontal dengan tag html

Fitur pertama dari tag ini adalah tidak memiliki tag akhir yang berpasangan. Itu dapat digunakan di mana saja dalam kode html di antara tag Dan.

Tag ini memiliki atribut berikut:

  • Lebar- mendefinisikan panjang garis horizontal kita dalam piksel atau persentase;
  • warna– menentukan warna garis;
  • Meluruskan– mengatur perataan garis ke tepi kanan - kanan, ke tepi kiri - kiri, ke tengah - tengah;
  • ukuran– ketebalan garis dalam piksel.

Berikut adalah contoh kode html.