tetapan gaya html

Penggayaan HTML ialah bahagian penting dalam mencipta reka bentuk web. Gaya HTML boleh melaraskan pelbagai aspek seperti reka letak, warna, saiz fon dan gaya, serta mencapai kesan khas interaktif. Artikel ini akan memperkenalkan pengetahuan asas penggayaan HTML, daripada menulis helaian gaya CSS kepada menerapkan gaya CSS dalam elemen HTML, untuk membantu pembaca mencapai matlamat reka bentuk web mereka.

1. CSS Style Sheets

CSS merujuk kepada Cascading Style Sheets, yang dicadangkan untuk menyelesaikan masalah kekeliruan dalam dokumen HTML kerana kekurangan pemisahan persembahan dan kandungan. Helaian gaya CSS boleh digunakan untuk mengawal penampilan elemen HTML dengan mentakrifkan pemilih kelas, ID dan teg serta pemilih lain untuk menukar warna, latar belakang, saiz fon, ketinggian baris, lebar, ketinggian dan jidar elemen HTML. Beberapa operasi helaian gaya CSS biasa akan diperkenalkan di bawah.

1. Cara membuat fail CSS

Kami biasanya menyimpan fail helaian gaya sebagai fail CSS dan akhiran fail tersebut ialah .css. Berikut ialah langkah untuk mencipta fail helaian gaya:

• Buat fail teks dengan membuka Notepad atau perisian lain yang menyokong penyuntingan teks.
• Tambahkan kod helaian gaya pada baris pertama fail, iaitu teg "c9ccee2e6ea535a969eb3f532ad9fe89" dan teg "/style>".
• Tambahkan kod helaian gaya CSS antara teg, yang boleh menjadi pemilih seperti kelas, ID dan teg serta atribut gaya CSS yang lain.
• Dalam fail CSS, perlu ada pendakap kerinting antara setiap pemilih dan atribut gaya yang sepadan untuk menunjukkan perhubungan.
• Selepas melengkapkan definisi gaya CSS, kita harus menyimpan fail CSS sebagai fail .css dan memautkannya ke dokumen HTML.

2. Komen helaian gaya CSS

Fungsi ulasan helaian gaya CSS adalah untuk memudahkan pembangun menerangkan dan menerangkan apabila mengekalkan kod. Komen helaian gaya CSS bermula dengan / dan berakhir dengan /. Contoh berikut:

/*Ini adalah baris ulasan
Ini adalah baris kedua ulasan*/

3. Operasi asas helaian gaya CSS

CSS Penulisan helaian gaya adalah berdasarkan operasi asas pemilih dan atribut, seperti:

• Pemilih: Helaian gaya CSS menggunakan simbol khusus untuk memilih elemen HTML untuk diubah suai, seperti sebagai pemilih kelas ("." ) dan pemilih ID ("#"), dsb.
• Atribut: Helaian gaya CSS menggunakan atribut untuk menentukan gaya elemen HTML, seperti atribut seperti "saiz fon", "warna" dan "latar belakang".

Kod berikut menunjukkan pelarasan gaya elemen HTML asas, iaitu tajuk:

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
< ;head> ;

<title>CSS样式表调整标题样式的例子</title>
<style>
    h1 {
        color: red;
        font-size: 36px;
        background: yellow;
    }
</style>

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<h1>这是一级标题</h1>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

Tukar kod di atas saiz teks tajuk kepada 36 piksel (saiz fon: 36px;), tetapkan warna latar belakang kepada kuning (latar belakang: kuning;), dan tetapkan warna teks kepada merah (warna: merah;). Sifat ini boleh diubah suai atau dialih keluar untuk disesuaikan dengan keperluan gaya, warna, fon, dsb.

2. Helaian gaya CSS digunakan pada elemen HTML

Sekarang, kami telah mencipta fail helaian gaya CSS ringkas dan nilai yang ditentukan untuk sifat gaya CSS. Seterusnya, kita perlu mengaitkan atribut gaya ini dengan elemen HTML untuk mencapai kawalan gaya elemen HTML.

1. Penggayaan sebaris

Penggayaan sebaris merujuk kepada penggunaan atribut gaya pada atribut "gaya" di dalam elemen HTML Kaedah ini digunakan terutamanya dalam Tulis kod gaya CSS secara langsung dokumen HTML. Kaedah ini berguna untuk melaraskan gaya elemen HTML dengan cepat. Kod berikut ialah contoh gaya sebaris:

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>内嵌样式CSS设置</title>

9c3bca370b5104690d9ef395f2c5f8d1
75b561857b53372bf8fa3e38343e4252

<h1 style="color: MediumBlue; font-size: 50px;">大标题</h1>
<p style="color: Black; font-size: 30px;">小标题</p>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

Dalam kod di atas, kami akan Tetapkan warna latar belakang kepada kelabu muda (warna latar belakang: LightGray;), warna tajuk besar kepada biru tua (warna: MediumBlue;), saiz fon tajuk kepada 50 piksel (saiz fon: 50px;), dan Set sari kata warna kepada hitam (warna: Hitam;) dan saiz fon tajuk kepada 30 piksel (saiz fon: 30px;).

2. Penggayaan dalaman

Kaedah helaian gaya dalaman ialah meletakkan kod helaian gaya dalam teg "gaya" dalam teg "kepala" dokumen HTML , untuk ubah suai gaya yang digunakan oleh semua dokumen HTML. Kaedah ini lebih fleksibel daripada gaya sebaris dan mengekalkan pemisahan fail HTML dan helaian gaya. Kod berikut ialah contoh helaian gaya dalaman:

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>内部样式表CSS设置</title>
<style>
    body {
        background-color: LightGray;
    }
    h1 {
        color: MediumBlue;
        font-size: 50px;
    }
    p {
        color: black;
        font-size: 30px;
    }
</style>

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<h1>大标题</h1>
<p>小标题</p>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

在上述代码中，我们将背景颜色设置为浅灰（body {background-color: LightGray;}），将大标题颜色设置为深蓝（h1 {color: MediumBlue;font-size: 50px;}），将标题字体大小设置为50像素（h1 {color: MediumBlue;font-size: 50px;}），并将小标题颜色设置为黑色（p {color: black;font-size: 30px;}），将标题字体大小设置为30像素（p {color: black;font-size: 30px;}）。

3. 外部样式表（external styling）

外部样式表是指在HTML文件中以CSS文件的形式链接到HTML文档的样式表，这种方式最好适用于大型网站或多个页面，对于一些共享设计风格的网站更为便捷。下面是示例代码：

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>外部样式表CSS设置</title>
<link rel="stylesheet" type="text/css" href="style.css">

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<h1>大标题</h1>
<p>小标题</p>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

在上述代码中，我们通过c29ea0143d4a2d5dc6725f7851494a02属性将外部样式表链接到HTML文档，这包含了全部HTML文档所用到的样式定义。样式表文件的代码如下：

body {

background-color: LightGray;

}
h1 {

color: MediumBlue;
font-size: 50px;

}
p {

color: black;
font-size: 30px;

}

以上就是HTML样式设置的基础知识，包括创建和使用CSS样式表的不同方法。通过这些基本操作，我们可以对网页的排版、字体、颜色和特效等方面进行控制，创造出各种个性化的网页设计。

Atas ialah kandungan terperinci tetapan gaya html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!