Bagaimana untuk memasukkan CSS dalam halaman HTML

WBOY
Lepaskan: 2023-09-19 18:57:02
ke hadapan
772 orang telah melayarinya

Kami boleh memasukkan CSS dalam halaman HTML dalam tiga cara. Ia adalah -

  • Sebaris

    Di sini kami menentukan gaya CSS dalam atribut gaya elemen. Walau bagaimanapun, adalah disyorkan untuk memodulasi fail melalui pemautan dalaman atau luaran CSS.

  • Di dalam

    Kami boleh memasukkan spesifikasi CSS kami di dalam teg

  • Luaran

    Kami boleh menggunakan pautan ke teg fail .css yang boleh diletakkan secara setempat atau pada pelayan. Dengan memfaktorkan semula fail menggunakan pautan luarannya, kami boleh mempunyai fail CSS biasa yang boleh digunakan pada berbilang halaman web.

Syntax

Sintaks untuk memasukkan fail CSS dalam HTML adalah seperti berikut

/*inline*/
<element style="/*declarations*/"></element>
/*internal*/
<head>
<style>
/*declarations*/
</style>
</head>
/*external*/
<head>
<link rel="stylesheet" href="#location">
</head>
Salin selepas log masuk

Contoh

Contoh berikut menunjukkan cara memasukkan fail CSS dalam halaman HTML

Inline CSS

Demout CSS

Livereee

Ini Ini memberikan output berikut - 如何在 HTML 页面中包含 CSS

Contoh

Pautan Dalaman

Demo Langsung

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="background-color:mistyrose; height: 50px;"></div>
<p style="letter-spacing: 16px; font-size: 1.3em;">
<u>Demo text here</u>
</p>
</body>
</html>
Salin selepas log masuk

Output

Ini memberikan output berikut - 如何在 HTML 页面中包含 CSS

Contoh Pautan Luaran

Fail HTML

Nyata Time Demo

<!DOCTYPE html>
<html>
<head>
<style>
table, table *{
   border: 5px double green;
   margin: auto;
   padding: 20px;
}
tr {
   box-shadow: 0 0 0 3px red;
}
td {
   border-color: blue;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
Salin selepas log masuk

Fail CSS如何在 HTML 页面中包含 CSS

<!DOCTYPE html>
<html>
<head>
<link rel=&rdquo;stylesheet&rdquo; type=&rdquo;text/css&rdquo; href=&rdquo;style.css&rdquo;>
</head>
<body>
<div>
<div></div>
<div>
<div></div>
</div>
<div></div>
</div>
</body>
</html>
Salin selepas log masuk
Output🎜🎜Ini memberikan output berikut-🎜🎜🎜🎜

Atas ialah kandungan terperinci Bagaimana untuk memasukkan CSS dalam halaman HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:tutorialspoint.com
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!