masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

gaya HTML

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>


Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <body style="background-color:pink;"> <h2 style="background-color:red;">好好学习</h2> <p style="background-color:green;">天天向上</p> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492784 permainan