Rumah > Artikel > hujung hadapan web > Cara menggunakan gaya CSS pada halaman web
Cara menggunakan gaya CSS pada halaman web
- PHPzasal
- 2023-04-23 10:14:031576semak imbas
CSS merujuk kepada Cascading Style Sheets, bahasa yang digunakan untuk menerangkan gaya halaman web. Menggunakan CSS, kami boleh menetapkan pelbagai gaya untuk elemen dalam halaman web untuk menjadikan halaman kelihatan lebih cantik dan profesional. Jadi, artikel ini akan memperkenalkan anda kepada konsep asas CSS dan cara menggunakan gaya CSS dalam halaman web.
1. Konsep asas CSS
CSS ialah bahasa helaian gaya Melalui CSS, kita boleh menentukan gaya setiap elemen dalam dokumen. Gaya CSS biasanya termasuk warna, saiz, fon, kedudukan, dsb. Dalam CSS, setiap tetapan gaya terdiri daripada sifat dan nilai. Contohnya, gaya CSS berikut:
p {
color: blue;
font-size: 16px;
text-align: center;
}
Antaranya, p ialah pemilih, digunakan untuk menentukan elemen yang digunakan gaya ini warna, saiz fon dan penjajaran teks ialah atribut, menentukan warna dan fon teks masing-masing Saiz dan penjajaran; biru, 16px dan tengah adalah nilai yang digunakan untuk menetapkan nilai sifat ini.
2. Kaedah menggunakan gaya CSS dalam halaman web
Terdapat banyak cara untuk menggunakan gaya CSS dalam HTML, termasuk helaian gaya dalaman, helaian gaya luaran dan gaya sebaris.
- Helaian gaya dalaman
Helaian gaya dalaman merujuk kepada teg
<html>
<head>
<title>这是一个网页</title>
<style>
p {
color: blue;
font-size: 16px;
text-align: center;
}
</style>
</head>
<body>
<p>这是一段文字</p>
</body>
</html>
Dalam contoh di atas, kami menentukan helaian gaya dalam teg
, menyatakan warna, saiz dan penjajaran elemen p. Dalam teg , kita boleh menggunakan gaya ini, iaitu, elemenakan ditetapkan kepada biru, dengan saiz fon 16px dan penjajaran tengah.
- Helaian gaya luaran
Selain helaian gaya dalaman, anda juga boleh menggunakan helaian gaya luaran untuk menentukan gaya helaian CSS adalah serupa dengan helaian gaya dalaman. kecuali bahawa mereka tidak dalam fail HTML gaya CSS ditakrifkan dalam fail CSS yang berasingan. Contohnya:
<head> <title>这是一个网页</title> <link rel="stylesheet" type="text/css" href="style.css"> </head>
Dalam contoh ini, kami menyimpan helaian gaya CSS dalam fail yang dipanggil style.css dengan menambahkan teg
- Gaya sebaris
Kaedah menentukan gaya terus dalam teg HTML dipanggil gaya sebaris. Contohnya:
<p style="color: blue; font-size: 16px; text-align: center;">这是一段文字</p>
Dalam contoh ini, kami menambah atribut gaya terus di dalam teg
supaya gaya akan digunakan terus pada elemen. Sudah tentu, kaedah ini boleh digunakan untuk beberapa gaya mudah, tetapi untuk sejumlah besar definisi gaya, disyorkan untuk menggunakan helaian gaya dalaman atau luaran.
Ringkasan
Gaya CSS ialah alat yang berkuasa untuk menentukan dan mengawal gaya paparan halaman dalam halaman web Melalui takrifan pemilih dan nilai atribut, ia boleh mengawal warna dan saiz setiap elemen dengan tepat halaman web , fon dan tetapan gaya lain. Dalam aplikasi web, kita boleh menggunakan helaian gaya dalaman, helaian gaya luaran dan gaya sebaris untuk menentukan gaya CSS. Senario aplikasi yang berbeza menggunakan kaedah yang berbeza, yang membolehkan kami mengurus dan mengekalkan gaya halaman web dengan lebih mudah.
Atas ialah kandungan terperinci Cara menggunakan gaya CSS pada halaman web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!