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.
Berikut ialah senarai semua sifat gaya yang boleh digunakan untuk mempengaruhi dan mengawal reka bentuk elemen HTML, disertakan dengan contoh praktikal :
Sifat CSS ini membolehkan kami menetapkan warna latar belakang untuk sebarang elemen HTML seperti
Contoh
<div style="background-color:blue">My background is blue</div>
Output:
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:
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."
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:
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.
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:
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;
}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;
}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.
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;
}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:
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:
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:
<p style="line-height: 0.7px">This paragraph has a small line-height.<br>This paragraph has a small line-height.<br> </p>
Output:
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:
This property adds a shadow to the text.
Example:
<p style="text-shadow: 3px 2px gray;"> I’ve got a gray shadow</p>
Output:
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.
Example:
<p style="font-style: oblique">This is oblique style.</p>
Output:
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!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
