HTML CSS


HTML Gaya - CSS

Gaya CSS (Cascading Style Sheets) yang digunakan untuk memaparkan teg elemen HTML.

Nampak! 🎜>

Cubalah
Cuba - Contoh
Contoh ini menunjukkan cara menggunakan add to <head> Sebahagian daripada maklumat gaya memformat HTML.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>

<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>

</html>

Run Instance»Klik butang "Run Instance" untuk melihat contoh dalam talian

Contoh ini menunjukkan cara menggunakan atribut gaya untuk membuat pautan tanpa garis bawah.
Cara menggunakan atribut gaya untuk membuat pautan tanpa garis bawah.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<a href="http://www.php.cn/" style="text-decoration:none;">访问 php.cn!</a>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian


Pautan ke helaian gaya luaran
Contoh ini menunjukkan cara memautkan teg ke helaian gaya luaran.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
<h1>我使用了外部样式文件来格式化文本 </h1>
<p>我也是!</p>
</body>

</html>

Run instance »

Klik butang "Run Instance" untuk melihat instance dalam talian


Cara menggunakan CSS

CSS telah dimulakan dalam HTML 4 dan diperkenalkan untuk memaparkan elemen HTML dengan lebih baik.

CSS boleh ditambah pada HTML dengan cara Sederhana berikut:

  • Gaya sebaris - gunakan atribut "gaya" dalam elemen HTML

  • Helaian gaya dalaman - dalam The <head> ; kawasan dokumen HTML menggunakan elemen <style> untuk memasukkan CSS

  • Rujukan luaran - gunakan 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 juga 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

Apabila gaya Sebaris khas boleh digunakan apabila gaya 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;">This is a paragraph.</p>

Untuk mengetahui lebih banyak gaya, sila lawati tutorial CSS.

Contoh gaya HTML - latar belakang warna

Atribut warna latar belakang mentakrifkan warna latar belakang elemen:

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>
</html>

Jalankan instance»

Klik butang "Jalankan Contoh" untuk melihat contoh dalam talian

Atribut warna latar belakang awal (warna latar belakang) ditakrifkan menggunakan atribut bgcolor.

Contoh gaya HTML - fon, warna fon, saiz fon

Kita boleh menggunakan fon-famili (font), warna (warna) dan saiz fon (saiz fon) atribut Untuk menentukan gaya fon:

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk lihat contoh dalam talian

Kini menjadi perkara biasa untuk menggunakan atribut keluarga fon (fon), warna (warna) dan saiz fon (saiz fon) untuk mentakrifkan gaya teks dan bukannya menggunakan <. ;font>

Contoh gaya HTML - penjajaran teks

Gunakan atribut penjajaran teks (penjajaran teks) untuk menentukan penjajaran mendatar dan menegak teks:

Contoh 

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p>

</body>
</html>

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Jajaran teks sifat 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. 
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

Teg gaya HTML

Teg dan atribut yang ditamatkan
Dalam HTML 4, teg dan atribut yang pada asalnya menyokong mentakrifkan gaya elemen HTML telah ditamatkan. Teg ini tidak akan menyokong versi baharu teg HTML.

Teg yang tidak disyorkan ialah: <font>, <center>, <strike>
标签描述
<style>定义文本样式
<link>定义资源引用地址

Atribut yang tidak disyorkan ialah: warna dan bgcolor.

←
→