Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Bagaimana untuk memanggil css

Bagaimana untuk memanggil css

王林
Lepaskan: 2023-05-27 10:45:37
asal
1352 orang telah melayarinya

CSS是网页设计的重要组成部分,它用于定义HTML标记的显示效果,包括字体、颜色、布局和动画效果等。在编写HTML文件时,通常需要使用CSS来设置样式,让页面更加美观、易于阅读。

下面是关于如何调用CSS的详细讲解:

一、CSS样式的书写方式

CSS有三种不同的书写方式,分别是:内部样式表、外部样式表和内联样式,每种样式都有各自的优缺点,适用于不同的设计需求。下面我们分别来看一下。

  1. 内部样式表

内部样式表是将CSS样式嵌入到HTML文件的头部区域内。使用内部样式表能够使得页面的样式更加紧凑,且不需要为每个标签单独设置样式。使用此方式时,在HTML的标签内部,添加

  1. 外部样式表

外部样式表是将CSS样式写在单独的CSS文件中,使用标记将CSS文件引入到HTML文件中。使用外部样式表可以使得CSS代码的复用更加方便,而且可以让页面结构与样式分离,便于维护。此方式一般适用于多个页面使用同一个样式文件的情况。示例如下:


页面标题

在上述代码中,href属性指定了样式文件的路径,可以是相对路径或者绝对路径。在样式文件中,只需要编写CSS代码即可。

  1. 内联样式

内联样式是在HTML标记中直接设置CSS样式,一般作为临时解决方案,适用于临时修改某个元素的样式的情况。使用此方式,需要在标记中添加style属性,然后写入CSS代码。示例如下:

文字

2. Pemilih CSS

Pemilih CSS digunakan untuk memilih elemen dalam dokumen HTML dan menggunakan gaya CSS. Gunakan pemilih untuk mengawal setiap elemen pada halaman secara fleksibel, menjadikan reka bentuk gaya lebih halus. Jenis pemilih yang biasa digunakan ialah:

  1. Pemilih kelas

Pemilih kelas menggunakan simbol noktah (.), diikuti dengan nama kelas, yang boleh digunakan untuk Kumpulan elemen menetapkan gaya yang sama. Contohnya adalah seperti berikut:

.butang {
warna latar belakang: #4CAF50;
warna: putih;
padding: 12px;
jejari sempadan: 4px;
saiz fon: 16px;
}

  1. Pemilih ID

Pemilih ID menggunakan simbol paun (#) diikuti dengan nama ID sepanjang dokumen , setiap nama ID hendaklah unik. Pemilih ID boleh digunakan untuk menetapkan gaya untuk elemen tertentu dan juga boleh digunakan untuk menambah pengendali acara JavaScript. Contohnya adalah seperti berikut:

header {

warna latar belakang: #333;
warna: putih;
tinggi: 50px;
padding: 5px;
}

  1. Pemilih Teg

Pemilih Teg memilih semua elemen teg HTML yang ditentukan dan boleh digunakan untuk menetapkan gaya untuk teg tertentu. Contohnya adalah seperti berikut:

p {
saiz fon: 16px;
ketinggian baris: 1.4;
}

3 Peraturan untuk memanggil CSS

Terdapat dua cara utama untuk memanggil CSS dalam fail HTML:

  1. Pengenalan melalui teg

Gunakan teg fail. Contohnya adalah seperti berikut:


Tajuk halaman

  1. Menentukan gaya dalam kawasan Gaya CSS, Buat kod CSS dan kod HTML dalam fail yang sama Contohnya adalah seperti berikut:

Tajuk halaman

/* 内部样式表 */
body {
  background-color: #f8f8f8;
  font-family: Arial, sans-serif;
  font-size: 16px;
}
Salin selepas log masuk
Salin selepas log masuk


4. Aplikasi CSS

CSS boleh digunakan kepada semua aspek elemen halaman , termasuk tetapi tidak terhad kepada aspek berikut:

Gaya teks

  1. Anda boleh menetapkan fon, saiz fon, berat fon, warna dan sifat-sifat lain.

Gaya reka letak

  1. Anda boleh menetapkan lebar, tinggi, padding, jidar dan atribut lain model kotak, serta atribut seperti terapung dan kedudukan.

Gaya latar belakang

  1. Anda boleh menetapkan imej latar belakang, warna latar belakang, ulangan latar belakang, penjajaran tepi dan atribut lain.

Gaya Sempadan

  1. Anda boleh menetapkan gaya, lebar, warna dan sifat jidar yang lain.

Gaya senarai

  1. Anda boleh menetapkan gaya senarai, termasuk senarai tertib dan senarai tidak tertib.

Gaya jadual

  1. Anda boleh menetapkan sempadan, warna, penjajaran sel dan sifat lain jadual.
Ringkasnya, menggunakan CSS untuk reka bentuk web boleh meningkatkan kebolehbacaan dan estetika halaman web, menjadikan reka bentuk web lebih menarik dan interaktif. Anda boleh memilih kaedah penulisan dan pemilih gaya yang sesuai mengikut keperluan anda, dan memberikan permainan sepenuhnya kepada kelebihan CSS untuk memberikan pengguna pengalaman yang lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk memanggil css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
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