Rumah > Artikel > hujung hadapan web > Tutorial CSS yang ringkas dan mudah difahami untuk mengajar anda membuat rangka kerja halaman web yang unik
Tutorial CSS yang ringkas dan mudah difahami untuk mengajar anda membuat rangka kerja halaman web yang unik
- PHPzasal
- 2024-01-16 10:14:061263semak imbas
Tutorial CSS yang ringkas dan mudah difahami untuk mengajar anda mencipta rangka kerja halaman web yang unik
CSS (Cascading Style Sheet) ialah bahasa penanda yang digunakan untuk mentakrifkan gaya dan reka letak halaman web. Melalui CSS, kita boleh menukar penampilan halaman web seperti fon, warna, saiz, jarak, dll., dan mengawal kedudukan dan susunan elemen halaman web. Tutorial ini akan memperkenalkan anda kepada sintaks CSS asas dan atribut gaya yang biasa digunakan, dan menyediakan contoh kod khusus untuk membantu anda menguasai cara menggunakan CSS dengan cepat untuk mencipta rangka kerja halaman web yang unik.
- Sintaks Asas CSS
CSS menggunakan pemilih dan pengisytiharan untuk menentukan gaya. Pemilih digunakan untuk memilih elemen HTML untuk menggunakan gaya, manakala pengisytiharan terdiri daripada satu atau lebih atribut dan nilai yang sepadan. Berikut ialah contoh ringkas peraturan CSS:
h1 {
color: red;
font-size: 24px;
font-weight: bold;
}Pemilih dalam kod di atas ialah "h1", yang bermaksud elemen yang digunakan gaya ialah teg <h1></h1>. Bahagian pengisytiharan dalam pendakap kerinting mengandungi tiga sifat dan nilai sepadannya, iaitu "warna", "saiz fon" dan "berat fon". Sifat ini menentukan warna fon, saiz dan berat elemen.
- Sifat gaya CSS
Berikut ialah beberapa sifat gaya CSS yang biasa digunakan, serta fungsi dan penggunaannya.
2.1 Atribut fon
- keluarga fon: digunakan untuk menetapkan keluarga fon (seperti "Arial", "宋体", dll.).
- saiz fon: digunakan untuk menetapkan saiz fon (unit boleh px, em, rem, dll.).
- berat fon: digunakan untuk menetapkan berat fon (boleh "normal", "bold", dll.).
2.2 Atribut warna
- warna: digunakan untuk menetapkan warna teks (anda boleh menggunakan nama warna, kod HEX, nilai RGB atau RGBA, dsb.).
- warna latar belakang: digunakan untuk menetapkan warna latar belakang elemen.
2.3 Atribut model kotak
- lebar: digunakan untuk menetapkan lebar elemen.
- tinggi: digunakan untuk menetapkan ketinggian elemen.
- padding: digunakan untuk menetapkan saiz padding dalaman elemen.
- margin: digunakan untuk menetapkan saiz jidar dalam empat arah elemen.
- sempadan: digunakan untuk menetapkan gaya, lebar dan warna sempadan elemen.
2.4 Atribut penentududukan
- kedudukan: digunakan untuk menetapkan kaedah penentududukan elemen Nilai biasa adalah "relative" (relative positioning), "absolute" (absolute positioning) dan "fixed" (fixed positioning). ).
- atas, bawah, kiri, kanan: digunakan untuk menetapkan jarak atas, bawah, kiri dan kanan antara elemen dan elemen induk yang diletakkan.
- Contoh: Buat bingkai halaman web
Contoh diberikan di bawah untuk menunjukkan cara menggunakan CSS untuk mencipta bingkai halaman web yang ringkas.
Kod HTML:
<!DOCTYPE html>
<html>
<head>
<title>CSS Tutorial</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>Welcome to CSS Tutorial</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<section>
<h2>About Us</h2>
<p>This is a CSS tutorial to help you learn CSS and create unique web page layouts.</p>
</section>
<footer>
<p>© 2021 CSS Tutorial. All rights reserved.</p>
</footer>
</body>
</html>Kod CSS (style.css):
/* 全局样式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* 头部样式 */
header {
background-color: #333;
padding: 20px;
color: #fff;
}
header h1 {
font-size: 30px;
}
/* 导航栏样式 */
nav {
background-color: #f2f2f2;
padding: 10px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
font-size: 18px;
}
/* 主内容样式 */
section {
padding: 20px;
background-color: #fff;
}
section h2 {
color: #333;
}
section p {
color: #666;
}
/* 页脚样式 */
footer {
background-color: #333;
padding: 10px;
color: #fff;
font-size: 14px;
text-align: center;
}Dalam contoh di atas, kami mencapai kesan penampilan yang berbeza dengan menambahkan gaya CSS yang berbeza pada elemen HTML yang berbeza. Dengan menetapkan gaya global, gaya pengepala, gaya bar navigasi, gaya kandungan utama dan gaya pengaki, kami mencipta rangka kerja halaman web yang ringkas.
Dalam penggunaan sebenar, anda boleh mengubah suai atribut gaya CSS dan melaraskan reka letak dan penampilan halaman web mengikut keperluan anda sendiri.
Melalui tutorial ini, anda telah memahami sintaks asas dan atribut gaya biasa CSS, dan mempelajari cara menggunakan CSS untuk mencipta rangka kerja halaman web yang ringkas. Saya harap tutorial ini membantu dan membolehkan anda membuat halaman web unik menggunakan CSS. Semoga anda lebih berjaya dengan CSS!
Atas ialah kandungan terperinci Tutorial CSS yang ringkas dan mudah difahami untuk mengajar anda membuat rangka kerja halaman web yang unik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!