Gaya Sebaris HTML
Gaya Sebaris HTML ialah kaedah yang menggayakan halaman web menggunakan bahasa skrip CSS, di samping dua kaedah penggayaan yang lain: Penggayaan Dalaman dan Luaran. Kaedah ini menambah gaya unik khusus pada tapak web atau halaman web. Sintaks untuk ini ialah '
', di mana koma bernoktah selepas kod tepat untuk sesuatu gaya dan digunakan untuk memasukkan sifat penggayaan seperti jenis fon, warna fon, sempadan, susunan teks, latar belakang, dsb. Ia adalah titik fokus untuk mana-mana tapak web, kerana antara muka pengguna dijangka sangat mudah dan mesra.Sintaks
Gaya sebaris berfungsi sebagai CSS dalam bentuk rupa dan operasi dengan beberapa perbezaan asas. Ia memberi kesan secara langsung pada teg di mana ia ditulis tanpa menggunakan pemilih.
Sintaks untuk memasukkan gaya sebaris dalam kod adalah seperti berikut:
<body> <h1 style="style code;"></h1> </body>
Sertakan atribut gaya sebaris dalam sintaks di atas
tag. Di mana atribut gaya berfungsi seperti atribut HTML yang lain. Selepas tanda sama itu =, "petikan, yang merangkumi nilai gaya atribut itu, bermula dengan gaya. Kod gaya sebaris tidak termasuk pemilih atau sepasang pendakap kerinting. Kod ini tidak lengkap tanpa menggunakan koma bertitik selepas nilai.
Dengan menggunakan gaya sebaris, anda boleh mentakrifkan gaya kepada elemen seperti saiz, fon, warna, penjajaran teks dan imej, warna latar belakang pada teks, sempadan, garis besar kepada elemen, ruang antara elemen dan banyak penggayaan lain kod.
Anda perlu memasukkan semua kod gaya sebaris sebelum koma bertitik.
Bilakah kita menggunakan gaya sebaris dalam HTML?
Pembangun terutamanya menggunakan gaya sebaris dalam kod apabila mereka perlu menambah atau menekankan kandungan yang harus mudah difahami oleh pengguna. E-mel HTML selalunya menggabungkan jenis kod gaya ini untuk memaparkan kandungan mewah dalam badan mel, kerana banyak pengirim mengehadkan penggunaan
Tapak web dinamik menggunakan JavaScript. Dalam kes ini, kod javascript biasanya membenarkan pengguna menambah gaya sebaris pada elemen ini. Katakan kita menambah gaya sebaris pada
atribut dalam kod; gaya hanya digunakan pada elemen yang ditentukan itu. Tetapi gaya yang sama yang kami tambahkan dalam gaya dalaman akan digunakan pada keseluruhan
tag. Jadi menggunakan gaya sebaris untuk atribut khusus untuk memberikan gaya sentiasa dianggap sebagai perkara yang berguna.
Gaya sebaris sentiasa dianggap sebagai keutamaan tertinggi. Atribut gaya dalam kod mengandungi satu siri sifat CSS dan pasangan nilai.
Contoh Gaya Sebaris HTML
Berikut ialah beberapa contoh yang menunjukkan cara gaya sebaris akan berfungsi dalam kod HTML seperti berikut:
<h1 style="color:blue; font-family:Calibri; font-size:24px;"> Inline style Example </h1> <p style="text-align:center; background-color: lightgrey; font-style:italic; font-size:24px;"> Inline style for paragraph</p> <body style="background-image: image.png; height: 500px; width:400px; ">
Contoh #1
Kod:
<!DOCTYPE html> <html> <body> <h1 style="background-color: aqua;">Types of style in HTML </h1> <ul style="font-family:monospace; font-size: 16px; font-display: block;"> <li> HTML Inline CSS</li> <li>HTML Internal CSS</li> <li>HTML External CSS</li> </ul> <h1 style="color:darkblue; font-family: cursive;"> HTML Inline style </h1> <p><q style="color:coral;"><b> That some achieve great success is proof to all that others can achieve it s well</b></q> </p> <p style="font-family: fantasy; font-size: 20px;">The hurdles in between the <b style="font-family: cursive; color:red;">goals</b> are actually the tonics to boost you up with more energy</p> <h3 style="font-family: cursive; color: darkturquoise;"> Home Cinema Projectors</h3> <p style="font-family: cursive;"> Imagine your favorite movie in true cinematic detail. From <b style="color:darkorchid;"> 4k to Full HD, </b>create a real movie theatre feel at home.</p><p> While our 3D projectors bring the action to the life with incredible impact and depth of field </p> </body> </html>
Output:
Contoh #2
Kod:
<!DOCTYPE html> <html> <body> <h2 style="color:darkgoldenrod; font-family:Castellar; ">Indian Culture</h2> <img src="kids.png" style="height:250px;; width:100%;" > <p style="background-color:aquamarine ;"> India is known in all over world for its unique culture. It has one of the oldest culture which is 4500 years ago. India is famous for the <i style="font-size: 20px; color:darkorange;">Invention of Zero </i> in Mathematics , advance in architecture like <i style="font-size: 20px; color:white;">Taj Mahal</i> , for in <i style="font-size: 20px; color: green;"> Ayurveda </i> . It is nation of more than 1.2 billion people, Which is known as second most nation in population comes after China. <br> Indian culture is famous in the form of different food, Language, religion and arts are the key aspects of it. India is the country made up with combination of 28 states as well as 7 territories. Those having different cultures, different languages, different festivals, variety in clothing style, architure and art , state wise different delicious food and many more things </p> </body> </html>
Output:
Contoh #3
Kod:
<!DOCTYPE html> <html> <body style="border: 2px solid blue; padding:10px;"> <h2 style="color:deeppink; font-family:Castellar;">Famous food across world</h2> <p> <b>India</b> -Paneer ButterMasala, Dal-batti and many more.In drinks Tea, Old Monk rum</p> <p> <b>Italy</b> - for Pizza, Pasata and more.In drinks Red Wine, Sparkling wine</p> <p> <b>Greece</b> - Greek salad, Mousaka and In drinks ouzo, tsipouro</p> <p> <b>China</b> - Noodles, Soy puff and many more.In drinks Tea, Chinese beer</p> <p> <b>Mexico</b> - Chili con carne, Guacamole .In drinks Tea, Old Monk rum</p> </body> </html>
Output:
Kesimpulan
Daripada semua maklumat di atas, kami telah mengetahui bahawa gaya Sebaris digunakan untuk memaparkan kod CSS unik untuk elemen tertentu dengan menggunakan atribut gaya. Apabila pengguna ingin menunjukkan beberapa data penting yang juga perlu ditunjukkan dalam kod, pada masa itu, untuk elemen tertentu, kami akan menggunakan gaya sebaris dalam dokumen ini.
Atas ialah kandungan terperinci Gaya Sebaris HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1665
14
1423
52
1321
25
1269
29
1249
24
Sempadan Jadual dalam HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.
Jadual Bersarang dalam HTML
Sep 04, 2024 pm 04:49 PM
Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.
HTML jidar-kiri
Sep 04, 2024 pm 04:48 PM
Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.
Susun Atur Jadual HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.
Pemegang Tempat Input HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.
Bagaimana anda menghuraikan dan memproses HTML/XML dalam PHP?
Feb 07, 2025 am 11:57 AM
Tutorial ini menunjukkan cara memproses dokumen XML dengan cekap menggunakan PHP. XML (bahasa markup extensible) adalah bahasa markup berasaskan teks yang serba boleh yang direka untuk pembacaan manusia dan parsing mesin. Ia biasanya digunakan untuk penyimpanan data
Senarai Tertib HTML
Sep 04, 2024 pm 04:43 PM
Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing
Butang onclick HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.
