Atribut Gaya HTML

Kod HTML memerlukan atribut gaya untuk halaman web yang dipaparkan dalam penyemak imbas web seperti Chrome, Firefox dan IE untuk dipaparkan seperti yang dimaksudkan untuk dilihat. Teg HTML boleh mengandungi pelbagai maklumat dan atribut gaya mengawal penampilan maklumat dalam blok HTML menggunakan penggayaan sebaris.

Artikel ini akan mengetahui lebih lanjut tentang atribut gaya HTML, yang tidak lebih daripada satu set peraturan yang mentakrifkan cara halaman akan dipaparkan dalam penyemak imbas web.

Senarai Atribut Gaya HTML

Berikut ialah senarai semua sifat gaya yang boleh digunakan untuk mempengaruhi dan mengawal reka bentuk elemen HTML, disertakan dengan contoh praktikal :

1. Warna Latar Belakang

Sifat CSS ini membolehkan kami menetapkan warna latar belakang untuk sebarang elemen HTML seperti

,

, dsb.

Contoh

<div style="background-color:blue">My background is blue</div>

Output:

2. Warna

Warna fon teks dalam elemen HTML boleh dikawal dengan menetapkan atribut warnanya kepada nama warna yang betul, kod HEX atau kod RGB.

Contoh

<div style="color:blue">My font color is blue</div>

Output:

3. Warna Sempadan

Kami boleh menetapkan warna jidar mana-mana elemen HTML jika kami ingin menambah jidar padanya.

Contoh

<p style="border: 1px solid red">My border is red</p>

Output:

Seperti yang ditunjukkan oleh kod di atas, sifat sempadan menerima tiga sifat dalam susunan berikut: "Warna sempadan gaya sempadan lebar sempadan."

4. Imej Latar Belakang

Kami juga boleh menetapkan imej sebagai latar belakang dengan menggunakan sifat imej latar belakang seperti berikut:

Contoh:

<div style="background-image: url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');height :365px">

Output:

5. Latar Belakang-Ulang

Seperti yang anda lihat dalam contoh di atas, apabila imej ditetapkan sebagai latar belakang menggunakan sifat imej latar belakang, ia, secara lalai, mengulangi imej secara mendatar dan juga menegak. Walau bagaimanapun, sesetengah imej mungkin perlu diulang sama ada secara menegak atau mendatar, atau ia mungkin tidak perlu diulang. Tingkah laku ini boleh dikawal dengan menetapkan nilai yang diingini terhadap sifat ulangan latar belakang, dan ia hanya boleh digunakan apabila imej latar belakang sedang digunakan; jika tidak, ia tidak akan menambah nilai penggayaan apabila digunakan sebagai harta kendiri.

Nilai “repeat-x” membenarkan imej diulang secara mendatar sahaja.

Nilai "repeat-y" membenarkan imej diulang secara menegak sahaja.

Nilai "tiada ulangan" digunakan untuk menghentikan sebarang pengulangan imej latar belakang.

Mari kami mengubah suai contoh di atas untuk menambah baik imej latar belakang.

Contoh 

<div style="background-image: url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');height :365px; background-repeat:no-repeat">

Output:

Kita boleh membandingkan contoh di atas dan memahaminya dengan imej latar belakang; kita boleh menambah imej sebagai latar belakang, dan dengan ulangan latar belakang, kita boleh mengawal ulangan imej latar belakang.

6. Kedudukan Latar Belakang

Dengan sifat ini, kita boleh menentukan kedudukan imej latar belakang.

Contoh

<div style="background-image: url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');height :365px; width:500px;background-repeat: no-repeat; background-position: left bottom;">
</div>

Output:

7. Margin

CSS memberikan kami sifat untuk menetapkan jidar pada keempat-empat sisi elemen HTML, atau kami boleh menambah jidar pada bahagian tertentu elemen tersebut.

Dengan jidar-atas boleh menambah jidar pada bahagian atas elemen, jidar-kanan akan menambah jidar di sebelah kanan elemen, jidar-kiri akan menambah jidar di sebelah kiri elemen dan jidar-bawah akan menambah margin ke bahagian bawah. Daripada menggunakan empat sifat ini, kami juga boleh menggunakan sifat margin dan menetapkan nilainya mengikut keperluan kami.

Contoh

p {
margin-top: 25px;
margin-bottom: 75px;
margin-right: 50px;
margin-left: 100px;
}

atau

p
{
margin: 25px 50px 75px 100px;
}

8. Padding

Sifat padding mentakrifkan ruang antara kandungan elemen dan sempadannya. Kita boleh menggunakan sifat "padding" atau sifat padding individu seperti padding-top, padding-bottom, padding-left dan padding-right untuk menetapkan padding untuk bahagian atas, bawah, kiri atau kanan kandungan elemen.

p {
padding-top: 25px;
padding-bottom: 75px;
padding-right: 50px;
padding-left: 100px;
}

atau

p
{
padding: 25px 50px 75px 100px;
}

9. Tinggi dan Lebar

Sifat CSS paling asas yang digunakan untuk menentukan ketinggian dan lebar mana-mana elemen HTML ialah ketinggian dan lebar. Anda boleh menetapkannya kepada nilai piksel, seperti 200px, atau peratusan, seperti 10%, 20%, dll.

10. Jajarkan Teks

Anda boleh menggunakan sifat ini untuk menetapkan arah mendatar untuk penjajaran teks dalam elemen. Pilihan nilai ialah tengah, kanan atau kiri.

p {
text-align: center;
}

atau

p {
text-align: left;
}

or

p {
text-align: right;
}

11. Text-Decoration

Text decoration property can be used to set decorations like underline, line-through, or overline over text in HTML.

Example:

<p style="text-decoration:underline">This is underline</p>

Output:

12. Letter-Spacing

As the name suggests, this property defines the spacing between letters/characters in a word. You can assign a positive or negative pixel value to increase or decrease the spacing between letters.

Example:

<p style="letter-spacing: -3px">My words are overlapped </p>

Output:

13. Line-Height

Line height defines the distance between vertical lines. You can set the line height to a positive or negative pixel value, similar to letter spacing. Let’s review the example below to understand better:

Example:

<p style="line-height: 0.7px">This paragraph has a small line-height.<br>This paragraph has a small line-height.<br>
</p>

Output:

14. Text Direction

Sometimes, if the web page’s content is not in English but in some other language like Arabic, which follows a right to the left convention, we would need to change the direction of the text. In such cases, we can reverse the text direction.

Example:

<p style="direction: rtl"><bdo dir="ltr">I am right to left</bdo></p>

Output:

15. Text Shadow

This property adds a shadow to the text.

Example:

<p style="text-shadow: 3px 2px gray;"> I’ve got a gray shadow</p>

Output:

16. Font Family

We can define the font class for text in an element. We can define multiple font families separated by a comma as a fallback system to handle scenarios where a preferred font class cannot be loaded.

• Font style: We can add italic or oblique effects to the text with the font-style property.

Example:

<p style="font-style: oblique">This is oblique style.</p>

Output:

• Font weight: This property defines the weight of a font.

Example:

<p style="font-weight: 900"> This is a bold paragraph</p>

Output :

The styling attributes showcased above are our building blocks with UI and UX designing. New versions of CSS continue to evolve.

Atas ialah kandungan terperinci Atribut Gaya HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

firefox css chrome html define if for continue using class Attribute Property default this position margin padding border background ux ui word

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn