Gaya HTML
Mari kita ambil contoh dahulu:
<html>
<body style="background-color:PowderBlue;">
<h1>改变颜色</h1>
<p style="font-family:verdana;color:red">
字体颜色变红色</p>
<p style="font-family:times;color:green">
字体颜色变绿色</p>
<p style="font-size:30px">字体高度变为30px</p>
</body>
</html>
Atribut gaya HTML
Peranan atribut gaya:
Menyediakan cara biasa untuk menukar gaya semua elemen HTML.
Gaya telah diperkenalkan dalam HTML 4 dan merupakan cara pilihan baharu untuk menukar gaya elemen HTML. Gaya HTML membolehkan anda menambah gaya terus pada elemen HTML menggunakan atribut gaya, atau secara tidak langsung dengan mentakrifkannya dalam helaian gaya berasingan (fail CSS).
Anda boleh mempelajari semua tentang gaya dan CSS dalam tutorial CSS kami.
Dalam tutorial HTML kami, kami akan mengajar anda tentang gaya HTML menggunakan atribut gaya.
Cara menggunakan CSS
CSS telah dimulakan dalam HTML 4 untuk memberikan elemen HTML yang lebih baik .
CSS boleh ditambahkan pada HTML dengan cara berikut:
Gaya sebaris - menggunakan atribut "gaya" dalam elemen HTML
Helaian gaya dalaman - dalam The <head> kawasan dokumen HTML menggunakan elemen <style> untuk mengandungi CSS
Rujukan Luaran - Menggunakan fail CSS luaran
Cara terbaik ialah merujuk fail CSS secara luaran.
Dalam tutorial HTML di tapak ini, kami menggunakan gaya CSS sebaris untuk memperkenalkan contoh Ini adalah untuk memudahkan contoh dan memudahkan anda mengedit kod dalam talian dan menjalankan contoh dalam talian.
Anda boleh mempelajari lebih banyak pengetahuan CSS melalui tutorial CSS tutorial CSS di tapak ini.
Gaya sebaris
Gaya sebaris digunakan apabila gaya khas perlu digunakan pada elemen individu. Cara untuk menggunakan gaya sebaris adalah dengan menggunakan atribut gaya dalam teg yang berkaitan. Sifat gaya boleh mengandungi sebarang sifat CSS. Contoh berikut menunjukkan cara menukar warna dan margin kiri perenggan.
<p style="color:blue;margin-left:20px;">Ini ialah perenggan.</p>
Contoh gaya HTML - warna latar belakang
Atribut warna latar belakang mentakrifkan warna latar belakang elemen:
<!DOCTYPE html>
<html>
<body style="background-color:pink;">
<h2 style="background-color:red;">好好学习</h2>
<p style="background-color:green;">天天向上</p>
</body>
</html>
Contoh gaya HTML - fon, warna fon, saiz fon
Kita boleh menggunakan fon-family (font ), warna (warna) dan atribut saiz fon (saiz fon) untuk mentakrifkan gaya fon:
contoh
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>
Kini biasanya menggunakan font-family (font), warna (warna) dan atribut saiz fon (saiz fon) untuk menentukan gaya teks dan bukannya menggunakan teg <fon>
Contoh gaya HTML - penjajaran teks
Gunakan atribut penjajaran teks (penjajaran teks) untuk menentukan penjajaran mendatar dan menegak teks:
Contoh
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Atribut penjajaran teks penjajaran teks menggantikan teg lama <center>.
Helaian gaya dalaman
Apabila satu fail memerlukan penggayaan khas, anda boleh menggunakan helaian gaya dalaman. Anda boleh menentukan helaian gaya dalaman melalui teg <style> dalam bahagian <head>
Helaian gaya luaran sesuai apabila gaya perlu digunakan pada banyak halaman. Menggunakan helaian gaya luaran, anda boleh menukar rupa keseluruhan tapak anda dengan menukar satu fail.
<html>
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
<body>
</body>
</html>
bahagian seterusnya