Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > CSS dalam HTML dibahagikan kepada beberapa kategori

CSS dalam HTML dibahagikan kepada beberapa kategori

青灯夜游
Lepaskan: 2022-09-21 16:29:39
asal
3044 orang telah melayarinya

css boleh dibahagikan kepada tiga kategori: 1. Gaya sebaris (sebaris), menggunakan atribut gaya untuk memasukkan kod CSS dalam teg HTML, sintaks " ..< ;/nama tag>"; 2. Helaian gaya terbenam, letakkan kod CSS dalam pasangan tag gaya di bahagian kepala dokumen, sintaks ialah ""; 3. Luaran helaian gaya, letakkan Letakkan kod CSS ke dalam fail ".css" dan masukkan ke dalam dokumen html menggunakan teg pautan atau peraturan "@import".

CSS dalam HTML dibahagikan kepada beberapa kategori

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Untuk mencapai beberapa kesan dalam kod HTML, selalunya perlu menambah pengubahsuaian CSS Terdapat tiga jenis CSS dalam HTML: gaya sebaris, helaian gaya terbenam dan helaian gaya luaran.

1. Gaya Sebaris (sebaris)

Gaya sebaris ialah untuk menentukan maklumat gaya secara langsung dalam atribut gaya teg HTML Gaya sebaris ditakrifkan di dalam teg, jadi ia hanya sah untuk teg di mana ia diletakkan.

<body style="background-color:black;">
    <h1 style="color:white;padding:30px;">Hostinger Tutorials</h1>
    <p style="color:white;">Something usefull here.</p>
</body>
Salin selepas log masuk

CSS dalam HTML dibahagikan kepada beberapa kategori

Anda tidak disyorkan untuk menggunakan CSS sebaris kerana setiap teg HTML perlu digayakan secara berasingan dan jika anda hanya menggunakan CSS sebaris, mengurus tapak web mungkin menjadi Sangat sukar . Walau bagaimanapun, ia boleh berguna dalam situasi tertentu. Contohnya, dalam situasi di mana anda tidak mempunyai akses kepada fail CSS atau anda hanya perlu menggunakan gaya pada satu elemen.

Kelemahan:

  • Mentakrifkan gaya sebaris memerlukan penentuan atribut gaya dalam setiap teg HTML, yang sangat menyusahkan

  • Berhati-hati terutamanya apabila menggunakan petikan berganda atau petikan tunggal dalam gaya sebaris, kerana atribut tag HTML biasanya menggunakan petikan berganda untuk membalut nilai atribut, seperti >

  • Gaya yang ditakrifkan dalam gaya sebaris tidak boleh digunakan semula di tempat lain;

  • Gaya sebaris sangat menyusahkan untuk penyelenggaraan kemudian , kerana tapak web biasanya terdiri daripada banyak halaman , dan apabila mengubah suai gaya halaman, halaman perlu diubah suai satu demi satu;

  • 2. Helaian gaya terbenam

Tulis kod gaya dalam halaman

tag

The

struktur teg boleh didapati di mana-mana dalam teg dan boleh muncul beberapa kali. Biasanya keseluruhan struktur <style>...</style> ditulis dalam bahagian ... Ciri-ciri cara memperkenalkan CSS ini ialah kod CSS setiap halaman mungkin disatukan dan dirancang Mudah digunakan semula dan diselenggara dalam halaman, tetapi penggunaan semula kod CSS antara berbilang halaman masih tidak mencukupi. <style>...</style>

<style>
 bdoy{font-size:14px;}
</style>
Salin selepas log masuk

<style>...</style>

Oleh kerana helaian gaya terbenam perlu menentukan gaya CSS di dalam dokumen HTML, ia akan menyebabkan dokumen menjadi lebih besar, dan ia juga diperlukan apabila terdapat dokumen lain apabila menggunakan gaya yang sama dalam helaian gaya terbenam, ia tidak boleh dimasukkan ke dalam dokumen lain dan mesti ditakrifkan semula dalam dokumen lain, yang akan membawa kepada redundansi kod dan tidak kondusif untuk penyelenggaraan kemudian.
<!DOCTYPE html>
<html>
	<head>
		<style>
			body {
				background-color: linen;
			}

			h1 {
				color: maroon;
				margin-left: 40px;
			}
		</style>
	</head>
	<body>
		<h1>PHP中文网</h1>
		<p>https://www.php.cn/</p>
	</body>
</html>
Salin selepas log masuk

CSS dalam HTML dibahagikan kepada beberapa kategori

3. Helaian gaya luaran

digunakan dalam pembangunan sebenar. Sesuai untuk situasi dengan banyak gaya. Gaya ditulis secara berasingan ke dalam fail CSS, dan kemudian fail CSS diperkenalkan ke dalam HTML untuk digunakan. 1) Menggunakan pautan

gaya pautan merujuk kepada mentakrifkan helaian gaya CSS secara luaran dan membentuk fail dengan sambungan

, dan kemudian menghantarnya pada halaman melalui Teg pautan dipautkan ke halaman, dan pernyataan pautan mesti diletakkan di kawasan tag

Sintaks:

.CSS<link>Penjelasan setiap atribut:

<link type="text/css" rel="styleSheet"  href="CSS文件路径" />
Salin selepas log masuk
atribut href menetapkan alamat fail helaian gaya luaran, yang boleh menjadi alamat relatif. Ia juga boleh menjadi alamat mutlak. Atribut

  • rel mentakrifkan dokumen yang berkaitan, yang di sini bermaksud helaian gaya yang berkaitan.

  • Atribut jenis mentakrifkan jenis fail yang diimport Seperti elemen gaya, teks/css menunjukkan fail teks CSS.

  • Secara amnya apabila mentakrifkan teg 3 atribut asas harus ditakrifkan, antaranya href ialah atribut yang mesti ditetapkan.

    Anda juga boleh menambah atribut tajuk dalam elemen pautan untuk menetapkan tajuk helaian gaya pilihan Iaitu, apabila dokumen web mengimport berbilang helaian gaya, anda boleh memilih fail helaian gaya untuk digunakan nilai atribut tajuk.
Petua: Dalam penyemak imbas Firefox, anda boleh memilih pilihan "Lihat --> Gaya Halaman" dalam menu, dan kemudian nilai atribut tajuk akan dipaparkan dalam submenu Hanya pilih atribut tajuk yang berbeza Gunakan fail helaian gaya yang diperlukan secara terpilih. Pelayar IE tidak menyokong ciri ini.

另外,title 属性与 rel 属性存在联系,按 W3C 组织的计划,未来的网页文档会使用多个 <link> 元素导入不同的外部文件,如样式表文件、脚本文件、主题文件,甚至可以包括个人自定义的其他补充文件。导入这么多不同类型、名称各异的文件后,可以使用 title 属性进行选择,这时 rel 属性的作用就显现出来了,它可以指定网页文件初始显示时应用的导入文件类型,目前只能关联 CSS 样式表类型。

外部样式是 CSS 应用的最佳方案,一个样式表文件可以被多个网页文件引用,同时一个网页文件可以导入多个样式表,方法是重复使用 link 元素导入不同的样式表文件。

2)、使用@import

导入式是通过@import