Tugas
Buat garis horizontal pada halaman.
Larutan
Garis horizontal bagus untuk memisahkan satu blok teks dari yang lain. Teks kecil dengan garis horizontal di bagian atas dan bawah lebih menarik perhatian pembaca daripada teks biasa.
Menggunakan tag
Anda dapat menggambar garis horizontal, yang tampilannya tergantung pada atribut yang digunakan, serta browser. Tag mengacu pada elemen blok, jadi baris selalu dimulai dengan garis baru, dan setelah itu semua elemen ditampilkan pada baris berikutnya... Berkat banyak atribut tag
garis yang dibuat melalui tag ini mudah dimanipulasi. Dikombinasikan dengan kekuatan gaya, menambahkan garis ke dokumen Anda menjadi sangat mudah.
Garis bawaan
ditampilkan Abu-abu dan dengan efek volume. Garis semacam ini tidak selalu sesuai dengan desain situs, sehingga keinginan pengembang untuk mengubah warna dan parameter garis lainnya melalui gaya dapat dimengerti. Namun, browser ambigu tentang masalah ini, itulah sebabnya Anda harus menggunakan beberapa properti gaya sekaligus. Secara khusus, versi browser yang lebih lama Internet Explorer untuk warna garis, gunakan properti color, dan browser lain gunakan properti background-color. Tapi bukan itu saja, dalam hal ini, pastikan untuk menentukan lebar garis (properti tinggi) selain nol dan hapus batas di sekitar garis dengan menyetel properti batas menjadi tidak ada. Menempatkan semua properti bersama untuk pemilih jam, kami mendapatkan solusi universal untuk browser populer(Contoh 1).
Contoh 1. Garis horizontal
HTML5 CSS 2.1 IE Cr Op Sa Fx
String teks
Hasil dari contoh ini ditunjukkan pada Gambar. 1.
Beras. 1. Garis horizontal berwarna
Dari penulis: Saya menyapa anda. Kebutuhan untuk menyajikan beberapa blok pada halaman web dalam satu baris adalah tugas yang sangat umum yang muncul untuk desainer tata letak. Itu terjadi selama tata letak hampir setiap templat, jadi bagaimanapun juga, kita semua perlu mengetahui dan menerapkan metode dasar untuk mengubah perilaku blok.
Sebelum kita melihat trik yang paling umum, saya ingin mengingat sedikit teori. Elemen halaman web dibagi menjadi blok dan inline. Dan perbedaan di antara mereka sangat sederhana - huruf kecil dapat ditempatkan pada satu baris, tetapi blok tidak dapat. Tentu saja, perbedaannya tidak berakhir di situ, tetapi inilah perbedaan utamanya. Sudah, blok dapat memiliki indentasi atas dan bawah (huruf kecil tidak), dan lebih banyak properti dapat diterapkan padanya.
Cara utama untuk menyusun blok dalam satu baris di css
Kami tidak akan mempersulit apa pun, ada 3 cara utama:
Mengonversi blok menjadi elemen sebaris. Pada saat yang sama, properti blok hilang, jadi opsi ini hampir tidak pernah digunakan.
Buat elemen yang diinginkan menjadi blok-inline. Ini adalah tipe khusus di mana elemen mempertahankan propertinya, tetapi pada saat yang sama memungkinkan blok lain untuk diposisikan berdampingan.
Elemen float menggunakan properti float.
Mari kita memikirkan opsi-opsi ini. Flexbox, tampilan tabular, dan poin lainnya tidak akan dipertimbangkan. Jadi, katakanlah kita memiliki 3 subjudul.
Pos 1
Pos 2
Pos 3
Secara alami, semua properti css perlu ditulis dalam file terpisah(style.css), yang perlu dihubungkan ke dokumen html. Dalam file ini saya akan menulis gaya minimal sehingga subpos kita dapat dengan mudah dilihat.
h3 (latar belakang: #EEDDCD;)
h3 ( latar belakang: #EEDDCD; |
Di sini mereka berada di halaman:
Di sana mereka berperilaku seperti balok. Masing-masing terletak di jalurnya sendiri, ada lekukan di antara mereka. Jika mau, Anda juga dapat mengatur indentasi internal apa pun dan secara umum melakukan apa saja.
Ubah menjadi garis dan segera tambahkan padding. Untuk melakukannya, tambahkan properti berikut ke pemilih h3:
tampilan: sebaris; bantalan: 30px;
Ada 2 masalah utama dengan teknik ini. Yang pertama adalah bantalan minimum. Ini terbentuk karena fakta bahwa ada satu ruang di antara blok dalam kode, yang membentuk lekukan ini. Jika masalah ini membutuhkan solusi, ada 2 opsi utama:
Dalam html, atur kode blok yang diperlukan dalam satu baris tanpa spasi
Letakkan negatif lapisan luar di sebelah kanan -4 piksel. Itu adalah berapa banyak satu ruang yang dibutuhkan.
Masalah kedua adalah masalah tampilan dapat terjadi dengan ketinggian elemen yang berbeda. Secara umum, blok mengambang adalah pilihan terbaik. Alih-alih display: inline-block, kami menulis ini:
Blok sejalan menggunakan kerangka kerja
Saya harus segera mengatakan bahwa jika Anda akan menggunakan kerangka kerja css normal (misalnya, Bootstrap), maka masih jauh lebih mudah di sana. Semua kode css yang bertanggung jawab untuk pengaturan elemen telah ditulis dan Anda hanya perlu mengatur kelas yang benar. Yang perlu Anda lakukan adalah mempelajari sistem grid dan Anda dapat membuat template multi-kolom responsif tanpa terlalu banyak kesulitan. Setidaknya itu akan jauh lebih mudah daripada menulis css dari awal.
Tantangan lain untuk menulis kode dari awal muncul saat Anda membutuhkan desain yang responsif. Tentu saja, Anda dapat menerapkannya sendiri dengan memiliki kueri media, tetapi akan jauh lebih sulit jika Anda memiliki template yang rumit.
Misalnya, ketika Anda memiliki layar besar harus ada 4 kolom, di tengah - 3, dan di ponsel- 2. Dengan bantuan kerangka kerja seperti Bootstrap, atau lebih tepatnya dengan bantuan kisi-kisinya, untuk mengimplementasikan hal seperti itu hanya beberapa menit.
Menerjemahkan topik dengan lancar menjadi Kerangka kerja bootstrap, sekali lagi saya perhatikan bahwa jika Anda dihadapkan dengan tugas membuat template adaptif yang kompleks, maka itu adalah dosa untuk tidak menggunakan grid. Untuk melakukan ini, Anda bahkan tidak perlu terhubung versi lengkap framework - Anda dapat menyesuaikannya dan berhenti di situ hanya yang benar-benar Anda butuhkan.
Anda dapat mempelajari cara bekerja dengan kerangka kerja dengan. Dijelaskan juga teorinya, tapi yang terpenting ada prakteknya. Anda memaksakan 3 template responsif dan dapatkan pengalaman luar biasa yang memungkinkan Anda membuat situs web sesuai pesanan atau untuk Anda sendiri. Dan jika Anda ingin melihat manfaat dan fitur kerangka kerja secara gratis, saya sarankan Anda melihat rangkaian artikel kami tentang Bootstrap dan tata letak sederhana. Saya berharap Anda sukses dalam tata letak dan pembangunan situs secara umum.
Halo semuanya! Hari ini saya akan memberi tahu Anda cara membuat garis horizontal menggunakan html.
Faktanya, kebutuhan untuk membuat garis horizontal cukup sering muncul, misalnya, ketika Anda perlu memisahkan satu bagian teks dari yang lain.
Garis horizontal dan vertikal dengan css
Ini bisa dilakukan dengan menggunakan css... Untuk melakukan ini, saya melampirkan area teks yang diperlukan dalam blok menggunakan tag div, dan kemudian dalam file style.css atau langsung dalam kode html, kami menulis properti untuk blok ini untuk batas atas atau bawah menggunakan batas -atas dan batas-bawah. Berikut ini contohnya:
Dalam hal ini, saya mengatur styling dengan css langsung dari kode html, dan membuat batas atas menjadi solid, dan bagian bawah garis putus-putus.
Beginilah tampilannya di halaman:
Garis horizontal menggunakan css.
Metode ini memiliki kelebihan:
- Berbagai pengaturan yang memungkinkan Anda untuk mengatur hampir semua tampilan untuk garis;
- Anda dapat membuat horizontal dan garis vertikal... Untuk membuat garis vertikal, Anda perlu mengubah border-top menjadi border-left, dan border-bottom menjadi border-right.
Kerugiannya termasuk kode yang tidak praktis.
Namun, ternyata, Anda juga dapat menyisipkan garis horizontal ke dalam teks menggunakan html. Pada saat yang sama, bahkan tidak perlu masuk ke css. Untuk melakukan ini, gunakan tag
.
Garis horizontal menggunakan tag html
Fitur pertama dari tag ini adalah tidak memiliki tag akhir yang cocok. Ini dapat digunakan di mana saja dalam kode html di antara tag
dan.
Tag ini memiliki atribut berikut:
- Lebar- menentukan panjang garis horizontal kami dalam piksel atau persentase;
- Warna- menentukan warna garis;
- Meluruskan- mengatur perataan garis ke kanan - kanan, kiri - kiri, tengah - tengah;
- Ukuran- lebar garis dalam piksel.
Di Sini contoh html- kode.
Pada dasarnya, garis horizontal digunakan untuk menghiasi halaman HTML situs, memberikan tampilan yang lebih menarik. Tetapi mereka juga dapat secara visual membatasi informasi dari bagian yang berdekatan, menambah kenyamanan bagi pembaca saat mempelajarinya. Secara umum, gambar garis horizontal di mana Anda perlu, itu saja.
Bagaimana cara menggambar garis horizontal?
Ada tag khusus untuk menggambar garis horizontal di HTML
... Apalagi dia adalah tanda blokir, yaitu, menciptakan jeda baris sebelum dan sesudah itu sendiri, sehingga garis selalu diperoleh pada baris yang terpisah. Oleh karena itu, hanya dapat ditentukan di dalam tag yang dapat berisi elemen blok, misalnya atau
... Tapi diriku sendiri
tidak dapat memiliki konten, karena tidak memiliki tag akhir, yaitu kosong.Contoh menggambar garis horizontal dalam HTML
Gambar garis horizontal
Gugus kalimat.
Gugus kalimat.
Gugus kalimat.
Hasil di browser
Gugus kalimat.
Gugus kalimat.
Gugus kalimat.
Seperti yang Anda lihat, garis-garisnya sangat tipis, tidak mencolok dan digambar dengan lebar penuh yang tersedia, jadi sekarang kita akan belajar bagaimana mengubahnya agar terlihat lebih menarik.
Bagaimana cara mengubah warna, ketebalan, dan lebar garis horizontal?
Dalam versi HTML yang lebih lama, tag
ada atribut khusus yang memungkinkan untuk mengubah warna, ketebalan, dan lebar garis horizontal. Ini adalah warna, ukuran dan lebar, masing-masing. Tetapi dalam versi yang lebih baru mereka telah dibuang demi Cascading Style Sheets (CSS), jadi, Anda dapat menebaknya, kami akan menggunakan atribut gaya favorit kami lagi. Sintaks umumnya adalah:
gaya = "latar belakang: warna">- warna garis (atau lebih tepatnya latar belakangnya).
gaya = "tinggi: ukuran">- ketebalan garis.
gaya = "lebar: ukuran">- lebar garis.
gaya = "latar belakang: warna; tinggi: ukuran; lebar: ukuran"> - tetapi Anda dapat menentukan semua parameter sekaligus, jangan lupa tentang titik koma (;).Warna dapat ditentukan dengan namanya dalam bahasa Inggris atau dengan kode HEX warna, didahului dengan hash (#). Nah, Anda sudah tahu tentang ini dari pelajaran di mengubah warna teks dan latar belakang.
Tetapi kita akan berbicara tentang mengubah ukuran secara lebih rinci. Apakah kamu ingat dari tutorial mengubah font, ada sekitar sepuluh unit di CSS, tapi lebar garis hanya dapat ditentukan dalam piksel (px) dan persentase (%), dan ketebalan umumnya hanya dalam piksel. Jika Anda menyediakan unit lain, maka ini tidak akan menjadi kesalahan, tetapi browser akan mengabaikannya begitu saja.
Jika Anda menentukan dimensi dalam piksel, maka ketebalan dan lebar garis akan bergantung pada resolusi monitor tempat situs Anda dilihat (semakin tinggi resolusi layar, semakin tipis dan sempit garisnya).
Seperti yang saya katakan, hanya lebar garis yang dapat ditentukan sebagai persentase. Ukuran persentase selalu bergantung pada dan dihitung berdasarkan ukuran elemen penampung induk, di mana tag berada
... Dalam hal ini, ukuran induk diambil sebagai 100%. Misalnya, jika kita menempatkan tag
gaya = "lebar: 50%"> elemen dalam, maka tidak peduli bagaimana kita mengubah ukuran jendela browser atau resolusi monitor - lebar garis akan selalu menjadi setengah lebar blok.Contoh perubahan warna, ketebalan dan lebar garis horizontal.
Ubah warna, ketebalan dan lebar garis horizontal.
Hasil di browser
Mengubah posisi garis horizontal
Saat Anda mengubah lebar garis horizontal, terlihat jelas bahwa browser selalu menempatkannya di tengah. Jika Anda ingin mengubah posisinya, maka gunakan saja di dalam
menyelaraskan atribut dengan nilai-nilai berikut:
- Tengah- garis berada di tengah (nilai default).
- kiri- ditekan ke tepi kiri.
- Baik- ditekan ke tepi kanan.
Contoh penjajaran garis horizontal.
Ubah posisi garis horizontal.
Hasil di browser
Bagaimana cara menghapus batas di sekitar garis?
Lihatlah contoh pertama dari tutorial ini. Menurut Anda apa warna garis-garis ini? Dan di sini salah. Mereka transparan, seperti elemen halaman apa pun yang belum ditentukan. warna latar belakang! Tidak percaya padaku? Kemudian lihat contoh di mana kami mengubah warna garis. Untuk yang pertama, kami tidak mengatur warnanya, tetapi hanya memperbesar ukurannya dan bukankah garis ini transparan? Yang seperti itu!
Sekarang saya akan menjelaskan. Secara default, browser menggambar batas di sekitar garis, yang menciptakan efek tiga dimensi. Jadi, ketika kita tidak menambah ketebalan garis horizontal, browser hanya menunjukkan bingkai ini kepada kita, karena ketebalan garis itu sendiri adalah 0px.
Untuk menghapus batas di sekitar garis, yang seringkali hanya merusak penampilan, kita akan menerapkan kembali atribut style. Dan tertulis seperti ini:
Pekerjaan rumah.
- Membuat judul artikel, bagian dan subbagian. Pusatkan semuanya.
- Atur seluruh halaman ke Arial dan Courier untuk header.
- Biarkan ukuran font untuk seluruh halaman menjadi 85% dari ukuran browser default. Dan judul memiliki 145%, 125% dan 110%, masing-masing, dari ukuran font pada halaman.
- Tulis paragraf di bawah judul pertama, kutipan panjang di bawah judul kedua, dan puisi di bawah judul ketiga. Dan biarkan puisi itu dipusatkan di halaman.
- Menyorot dalam huruf tebal tiga kata dalam kutipan.
- Di bawah judul artikel, gambar garis horizontal merah tiga piksel di seluruh lebar halaman.
- Di bagian atas dan bawah puisi, gambar garis hitam satu piksel. Biarkan lebar garis atas kira-kira sama dengan lebar ayat, dan garis bawah setengahnya.
- Hapus bingkai yang tidak perlu dari garis.
