cari

Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk memasukkan CSS dalam halaman HTML

Bagaimana untuk memasukkan CSS dalam halaman HTML

WBOY
WBOYke hadapan
2023-09-19 18:57:02784semak imbas

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>

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>

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>

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>

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!

css html 重构
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk membuat elemen div kelihatan sebaris menggunakan CSS?Artikel seterusnya：Bagaimana untuk membuat elemen div kelihatan sebaris menggunakan CSS?

Artikel berkaitan

Lihat lagi