Dalam kasus dokumen HTML, tag lebih berfungsi untuk menandai konten daripada menunjukkan bagaimana konten tersebut harus disajikan. Kontrol yang lebih besar atas presentasi dicapai dengan gaya. Pada artikel ini saya akan melihat gaya-gaya yang berhubungan dengan pemformatan paragraf dalam HTML.

Menandai

Dalam HTML, Anda dapat menentukan paragraf, dan atribut align akan meratakannya ke kiri, kanan, tengah, atau rata. Selain itu, kita akan menggunakan atribut gaya global.

Penyelarasan paragraf

Anda dapat menyelaraskan paragraf menggunakan atribut align dengan nilai berikut:

perataan teks: kiri|kanan|tengah|justify|awal|mewarisi;

Salin kode berikut ke file .html Anda.

Paragraf ini rata tengah

Paragraf ini rata kanan

Paragraf ini tampak rata di jendela browser. Paragraf yang dibenarkan disejajarkan ke kanan dan kiri dengan menambahkan spasi tambahan. Anda dapat melihat bahwa tepi paragraf rata sama dengan tepi paragraf rata kiri dan kanan. Pada paragraf rata kiri, tepi kirinya lurus, sedangkan pada paragraf rata kanan, tepi kanannya lurus. Apakah Anda melihat bahwa kedua sisi paragraf ini lurus? Hal ini dicapai melalui gaya text-align:justify.

Di jendela browser, kode HTML untuk paragraf tersebut terlihat seperti ini:

Spasi baris

Anda dapat mengontrol spasi baris paragraf menggunakan style=line-height . Gunakan atribut style dengan nilai berikut:

tinggi garis: normal|angka|panjang|awal|mewarisi;

Di bawah ini adalah contoh kode HTML yang menampilkan paragraf dengan spasi baris berbeda:

Paragraf ini menggunakan dua nilai untuk atribut style. Line-height:1.5 pertama menentukan spasi satu setengah baris untuk paragraf, dan nilai kedua text-align:justify menentukan bahwa teks paragraf harus didistribusikan ke seluruh lebar.

Paragraf ini diberi spasi ganda dan dibenarkan. line-height:2 menentukan spasi ganda. Atribut style tidak harus memiliki dua nilai. Namun jika Anda perlu menentukan dua nilai, Anda dapat melakukannya dengan memisahkannya menggunakan titik koma.

Berikut adalah beberapa cara berbeda untuk menggunakan nilai tinggi garis untuk atribut style:

: Mengatur spasi baris menjadi 13 piksel;

: Menyetel spasi HTML antar paragraf menjadi 200% relatif terhadap ukuran font saat ini;

: Menyetel tinggi garis menjadi 14 piksel.

lekukan

Saya menggunakan istilah "indentasi" agar lebih mudah dipahami. Namun dalam HTML, kami menggunakan spasi untuk membuat ruang kosong di sekitar objek. Anda dapat menggunakan atribut style dengan nilai padding untuk membuat indentasi paragraf ke kiri atau kanan.

Di bawah ini adalah contoh paragraf dengan indentasi kiri dan kanan:

Paragraf ini tidak menjorok ke dalam, hanya dibenarkan saja. Lihatlah atribut style elemen P untuk paragraf ini.

Untuk paragraf ini, saya mengatur padding kiri menjadi 30 px menggunakan gaya padding-left:30px. Paragraf ini juga dibenarkan menggunakan gaya text-align:justify. Seperti yang sudah Anda ketahui, kita bisa menggunakan beberapa nilai untuk atribut Style dengan memisahkannya menggunakan titik koma.

Dan paragraf ini memiliki lekukan kanan sebesar 30 piksel, namun tidak ada lekukan kiri. Itu juga disejajarkan dengan lebarnya. Nilai 'padding-right' dari atribut style menentukan padding yang tepat. Jika Anda tidak melihat efeknya, kurangi lebar jendela browser Anda sehingga paragraf HTML yang diratakan ditampilkan dengan benar.

Indentasi antar paragraf (indentasi sebelum dan sesudah paragraf)

Kami tidak membutuhkan ini dalam HTML atau CSS. Kita cukup menentukan gaya padding untuk elemen tersebut

Padding-top dan padding-bottom menentukan spasi sebelum dan sesudah paragraf, yang berfungsi seperti padding di bagian atas atau bawah. Lihatlah contoh tag di bawah ini

Saya mengatur paragraf HTML pertama memiliki padding 10 piksel sebelum paragraf kedua dan 50 piksel setelah paragraf kedua:

Paragraf ini tidak menentukan lekukan sebelum atau sesudahnya. Ini adalah paragraf biasa, dibenarkan. Seperti yang sudah Anda ketahui, kita bisa membenarkan sebuah paragraf menggunakan kode style=”text-align:justify” di dalam tag.

Paragraf ini terlalu besar. Ini juga memiliki padding 10 piksel sebelum paragraf dan 50 piksel setelahnya. Di dalam tag saya telah menetapkan 3 gaya.

Ini adalah paragraf biasa tanpa indentasi dan perataan default.

Hal yang Perlu Diingat

• Paragraf HTML dapat disejajarkan menggunakan atribut align atau gaya perataan teks;
• HTML akan dirender secara berbeda tergantung pada ukuran layar, ukuran jendela browser;
• Menambahkan spasi ekstra atau baris kosong ke HTML Anda tidak mempengaruhi hasilnya. Browser menghapus semua spasi tambahan;
• Tag menentukan apa yang harus ditampilkan, dan gaya menentukan cara menampilkannya;
• Gaya dapat ditentukan dalam tiga cara berbeda - inline (dalam tag), internal ( di dalam file HTML yang sama menggunakan elemen

  Untuk paragraf ini, kita hanya akan mengatur lebar dan tinggi.

  Paragraf ini berisi, selain lebar dan tinggi, padding bagian dalam, pembatas, dan padding luar.

  Mencoba "

  Contoh tersebut dengan jelas menunjukkan bahwa elemen kedua memakan lebih banyak ruang daripada elemen pertama. Jika kita hitung menggunakan rumus kita, maka dimensi paragraf pertama adalah 150x100 piksel, dan dimensi paragraf kedua adalah:

  
  

  Tinggi keseluruhan:	5 piksel	+	10 piksel	+	100 piksel	+	10 piksel	+	5 piksel	= 130 piksel
  	atas bingkai		atas lekukan		tinggi		lebih rendah lekukan		lebih rendah bingkai

  yaitu 180x130 piksel.

  Elemen Meluap

  Setelah Anda menentukan lebar dan tinggi suatu elemen, Anda harus memperhatikan satu poin penting - konten yang terletak di dalam elemen mungkin melebihi ukuran blok yang ditentukan. Dalam hal ini, beberapa konten akan melampaui batas elemen. Untuk menghindari momen tidak menyenangkan ini, Anda dapat menggunakan properti CSS overflow. Properti overflow memberi tahu browser apa yang harus dilakukan jika konten suatu blok melebihi ukurannya. Properti ini dapat mengambil salah satu dari empat nilai:

  • terlihat - nilai default yang digunakan oleh browser. Menyetel nilai ini akan memiliki efek yang sama dengan tidak menyetel properti overflow.
  • gulir - menambahkan bilah gulir vertikal dan horizontal ke suatu elemen.
  • otomatis - menambahkan bilah gulir jika perlu.
  • tersembunyi - menyembunyikan bagian konten yang melampaui batas elemen blok.
  

  Halo, para pembaca yang budiman! Hari ini kita akan melihat cara mengatur ukuran elemen blok pada halaman web menggunakan properti CSS dan mengonfigurasi tampilan konten jika tidak sesuai dengan elemen.

  lebar dan tinggi - lebar dan tinggi elemen di css

  Dengan menggunakan atribut gaya lebar dan tinggi, Anda dapat mengatur lebar dan tinggi elemen blok masing-masing:

  lebar: otomatis|<ширина>|mewarisi
  tinggi: otomatis|<ширина>|mewarisi

  Sebagai nilai, Anda dapat menggunakan satuan pengukuran apa pun yang tersedia di css - misalnya, piksel (px), inci (dalam), titik (pt), dll.:

  p (lebar:200px; tinggi:150px)

  Selain satuan absolut, Anda dapat menentukan ukuran relatif elemen dalam persentase. Dalam hal ini, lebar dan tinggi elemen akan bergantung pada lebar dan tinggi elemen induk. Jika induknya tidak ditentukan secara eksplisit, dimensinya akan bergantung pada jendela browser.

  div (lebar:40%;)

  Otomatis menyerahkan kendali ukuran elemen ke browser web dan merupakan nilai default. Dalam hal ini, dimensi elemen akan sedemikian rupa sehingga sesuai dengan seluruh isinya.

  Mari kita lihat beberapa contoh.

  
  
  
  
  
  
  
  
  

  
  

  Selamat datang di website otomotif kami. Di sini Anda akan menemukan banyak artikel menarik dan bermanfaat tentang mobil, karakteristik teknis dan fiturnya.

  
  
  
  
  

  Hasil:

  Dalam contoh ini, kita membuat div dan menyarangkan paragraf p dengan teks di dalamnya. Untuk div, kami secara ketat mengatur dimensinya menjadi 300 x 300 piksel. Elemen p mempunyai nilai properti width dan height yang sama dengan auto, sehingga seperti terlihat pada screenshot, lebarnya diatur sama dengan lebar elemen induknya, dan tingginya sedemikian rupa sehingga cocok dengan semua teks yang ada di dalamnya. paragraf.

  Sekarang mari kita ubah pengaturan css untuk paragraf p dan atur dimensi tetap:

  Lapisan2 (
  latar belakang: #eee;
  lebar:250 piksel;
  }

  Hasil:

  

  Seperti yang Anda lihat, lebar paragraf menjadi lebih sempit dan sama dengan 250 piksel, dan tingginya bertambah sehingga teksnya pas, karena parameter tinggi tetap sama dengan otomatis.

  Sekarang mari kita atur tinggi dan lebar paragraf dalam persentase:

  Lapisan2 (
  latar belakang: #eee;
  lebar:50%;
  tinggi:50%;
  }

  Hasil:

  

  Seperti yang Anda lihat pada gambar, lebar elemen p menjadi sama dengan setengah lebar elemen div. Dan tingginya bertambah dan menjadi sama dengan 75 persen tinggi penyelaman.

  Saat menentukan lebar dan tinggi elemen apa pun dalam satuan relatif, Anda mungkin perlu menentukan ukuran minimum dan maksimum yang mungkin. Memang, misalnya, ketika mengubah ukuran jendela browser, dimensi elemen dapat diperkecil dan diperbesar sedemikian rupa sehingga keterbacaan situs menjadi sangat rendah.

  Anda dapat menentukan lebar dan tinggi minimum menggunakan atribut min-width dan min-height:

  lebar minimum:<ширина>
  tinggi minimum:<высота>

  Atribut gaya serupa max-width dan max-height memungkinkan Anda menyetel ukuran maksimum:

  lebar maksimal:<ширина>
  tinggi maksimal:<высота>

  Jelas bahwa ketika menetapkan nilai maksimum dan minimum untuk tinggi dan lebar, dimensi elemen tidak boleh lebih besar dari nilai maksimum dan kurang dari nilai minimum.

  Perlu diklarifikasi bahwa tugas tersebut parameter tinggi dan lebar hanya masuk akal untuk tag blok, karena untuk elemen sebaris parameter ini tidak diproses oleh browser.

  Mungkin saja saat menyetel parameter kaku untuk tinggi dan lebar suatu elemen, konten yang dikandungnya mungkin tidak sesuai dengan area terbatas.

  Sebagai contoh, mari kita kurangi ukuran paragraf p dari contoh yang dibahas di atas menjadi 100 piksel:

  Lapisan2 (
  latar belakang: #eee;
  lebar:100 piksel;
  tinggi:100 piksel;
  }

  Hasil:

  

  Seperti yang Anda lihat, teksnya telah melampaui batas paragraf dan tidak terlihat bagus. Untuk menghindari situasi seperti itu, ada aturan CSS - overflow.

  Parameter luapan untuk menyembunyikan (tersembunyi, terlihat) atau menggulir (menggulir, otomatis) konten

  Kelebihan konten dapat terjadi ketika lebar dan tinggi suatu elemen dibatasi. Mari kita lihat dua paragraf:

  Teks paragraf pertama

  
  

  Teks paragraf kedua

  Hasil:

  

  Karena lebar maupun tinggi tidak ditentukan untuk paragraf, browser menghitungnya secara mandiri berdasarkan pemahamannya sendiri tentang nilai otomatis. Akibatnya, paragraf-paragraf tersebut memakan seluruh ruang yang tersedia baik lebar maupun tingginya sesuai dengan isi yang dikandungnya.

  Sekarang mari kita batasi lebar paragraf pertama:

  Teks paragraf pertama

  
  

  Teks paragraf kedua

  Hasil:

  

  Lebar paragraf diharapkan dikurangi, dan tingginya diatur untuk menampung keseluruhan teks.

  Nah, sekarang mari kita batasi tinggi paragraf pertama:

  Teks paragraf pertama

  
  

  Teks paragraf kedua

  

  Akibatnya, ternyata teks tersebut tidak sesuai dengan paragraf yang terbatas sehingga masuk ke wilayah tetangga bawah. Oleh karena itu, secara praktis tidak mungkin membaca teks baik di paragraf pertama maupun kedua. Ini untuk mengontrol perilaku konten dalam situasi seperti itu aturan meluap:

  overflow: terlihat|tersembunyi|gulir|otomatis|mewarisi

  Secara default, overflow disetel ke terlihat, yang memberitahu browser untuk menampilkan konten yang tidak sesuai dengan wadah. Hasilnya bisa dilihat pada contoh di atas.

  Aturannya menyembunyikan segala sesuatu yang tidak sesuai dengan wadah:

  

  Nilai gulir akan menampilkan bilah gulir vertikal dan horizontal pada elemen meskipun semua konten cocok:

  Teks paragraf pertama

  
  

  Teks paragraf kedua

  

  Solusi paling populer dan logis jika Anda perlu membuat bilah gulir untuk sebuah wadah adalah nilainya mobil. Dalam hal ini, browser sendiri akan menentukan kapan dan pada sumbu mana ia harus menampilkan bilah gulir:

  Teks paragraf pertama

  
  

  Teks paragraf kedua

  Hasil:

  

  Untuk menyesuaikan bilah gulir, Anda juga dapat menggunakan atribut gaya overflow-x dan overflow-y, yang memungkinkan Anda menyesuaikan tampilan gulir pada masing-masing sumbu. Dengan demikian bertanggung jawab untuk sumbu horisontal, dan untuk sumbu vertikal.

  Oleh karena itu, jika misalnya Anda memerlukan pengguliran horizontal agar tidak pernah muncul dalam paragraf, dan pengguliran vertikal agar muncul hanya jika diperlukan, maka tulis saja aturan css berikut:

  p(overflow-x:tersembunyi;overflow-y:auto;)

  Dan masalahnya akan terpecahkan.

  Itu saja. Sampai waktu berikutnya. Jangan lupa berlangganan pembaruan blog dan saya akan berterima kasih jika Anda menggunakan tombol jejaring sosial.

  Keterangan

  Menyetel ketinggian elemen tingkat blok atau elemen yang dapat diganti (misalnya, tag ). Tinggi tidak termasuk ketebalan batas di sekitar elemen, padding, atau margin.

  Jika konten blok melebihi ketinggian yang ditentukan, tinggi elemen tidak akan berubah dan konten akan ditampilkan di atasnya. Karena fitur ini, konten elemen mungkin tumpang tindih ketika elemen dalam kode HTML muncul secara berurutan. Untuk mencegah hal ini terjadi, tambahkan overflow : auto ke gaya elemen.

  Sintaksis

  tinggi: nilai | minat | otomatis | mewarisi

  Nilai-nilai

  Setiap satuan panjang yang diterima dalam CSS diterima sebagai nilai - misalnya, piksel (px), inci (dalam), poin (pt), dll. Saat menggunakan notasi persentase, tinggi elemen dihitung tergantung pada tinggi elemen induk.

  Jika induknya tidak ditentukan secara eksplisit, maka jendela browser akan bertindak seperti itu.

  HTML5 CSS2.1 YAITU Cr Op Sa Fx

  tinggi

  Lorem ipsum dolor sit amet, pembentuk adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

  Hasil dari contoh ini ditunjukkan pada Gambar. 1.

  Beras. 1. Menerapkan properti ketinggian

  Model objek

  dokumen.getElementById("elementID ").style.height

  Peramban

  Internet Explorer 6 salah mendefinisikan tinggi sebagai min-height .

  Dalam mode quirk, versi Internet Explorer hingga dan termasuk 8.0 salah menghitung tinggi suatu elemen tanpa menambahkan nilai padding, margin, atau batas ke dalamnya. Versi Internet Explorer hingga dan termasuk 7.0 tidak mendukung nilai warisan.

  Halo

  , pembaca yang budiman.

  Ini adalah pelajaran kesebelas dalam belajar CSS. Dalam pelajaran ini kita akan melihat dua sifat sederhana namun penting. Properti ini mengontrol tinggi dan lebar blok.

  Sebelum mempelajari pelajaran ini, pelajarilah pelajaran sebelumnya: Teori dan praktek Pada pelajaran terakhir kita melihat apa itu model blok, margin internal dan eksternal. Dalam hal ini kita hanya akan melihat dua properti: tinggi dan lebar balok. Ketinggian di CSS diatur oleh properti tinggi , dan lebarnya adalah propertinya

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

  <lebar <. Mari kita lihat kodenya menggunakan contoh nyata (ambil contoh dari pelajaran terakhir): <html> kepala ><judul > <meta http-equiv = "Jenis Konten" content = "teks/html; charset=utf-8" > <tautan rel = "stylesheet" type = "teks/css" href = "style.css" > </kepala> <tubuh > <div id = "konten" > <kelas div = "Par pertama" > <hal> Aliquam malesuada tellus justo, eget lacinia nunc rutrum a. Phasellus diktum tempor eleifend. Nunc ut magna non purus fermentum gestas ac eu nulla.</p> <hal> Fusce est tellus, mattis quis nisl et, egestas posuere libero. Selesai scelerisque tellus porttitor massa dictum pulvinar.</p> </div> <kelas div = "Par kedua" > <hal> Cras</p> <jalan > <li> bumbu yang amet</li> <li> alikuam volutpat</li> <li> elemen interdum</li> </ul> </div> </div> </tubuh> </html>

  Dan di CSS untuk setiap blok

  atur lebarnya menjadi 200 piksel (px):

  Mari kita lihat tampilannya di browser:

  
  

  Seperti yang Anda lihat, kami telah menetapkan tinggi dan lebar tertentu. Jika kita mengatur tingginya menjadi lebih kecil dari ukuran teks, maka teks akan melampaui blok. Bereksperimenlah dengan tinggi dan lebar. Pada awalnya akan sulit untuk menentukan ukuran piksel yang diperlukan secara langsung, tetapi seiring waktu Anda akan terbiasa.

  Ini adalah pelajaran kecil dan sederhana. Coba ubah sendiri ukuran bloknya dan lihat apa yang terjadi. Latihan adalah cara tercepat untuk mempelajari apa pun!