Rumah > Artikel > hujung hadapan web > CSS dalam HTML dibahagikan kepada beberapa kategori

CSS dalam HTML dibahagikan kepada beberapa kategori

青灯夜游asal: 2022-09-21 16:28:452951semak imbas

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".

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>

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>

<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>

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文件路径" />

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在

语法：

<style type="text/css">
  @import url("css文件路径");
</style>

在 @import 关键字后面，利用 url() 函数包含具体的外部样式表文件的地址。

简单实例：

css外部样式表 style.css

h1{
	color:red;
}
p{
	font-size:14px;
	color:green;
}

HTML文档

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link type="text/css" rel="styleSheet"  href="style.css" />
		<!-- <style>
			@import url("style.cs");
		</style> -->
	</head>
	<body>
		<h1>link标签或@import的应用</h1>
		<p>外部定义CSS样式表以.CSS为扩展名文件，然后在页面中通过link标签或@import链接到页面中。</p>
	</body>
</html>

实现效果：

CSS dalam HTML dibahagikan kepada beberapa kategori

两种导入样式表的方法比较：

1、从属关系区别

@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

2、加载顺序区别

加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

3、权重区别

link 方式的样式的权重高于 @import 权重。

4、兼容性区别

@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

5、DOM可控性区别

可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

说明：

一般推荐使用 link 导入样式表的方法，@import 可以作为补充方法使用。

（学习视频分享：web前端）

Atas ialah kandungan terperinci CSS dalam HTML dibahagikan kepada beberapa kategori. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html5 firefox css css3 html JS dom href 样式表 input

Kenyataan：

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

Artikel sebelumnya：Adakah html dan css dianggap sebagai bahasa pengaturcaraan?Artikel seterusnya：Adakah html dan css dianggap sebagai bahasa pengaturcaraan?

Artikel berkaitan

Lihat lagi