Rumah > Artikel > hujung hadapan web > Bagaimana untuk membuat fail css
Bagaimana untuk membuat fail css
- WBOYasal
- 2023-05-29 11:34:373791semak imbas
CSS (Cascading Style Sheets) ialah bahasa yang digunakan untuk mengawal gaya dan reka letak halaman web. Mencipta fail CSS boleh membantu kami mengurus gaya halaman web dengan lebih baik dan menjadikannya lebih cantik dan boleh dibaca. Berikut ialah beberapa langkah penggunaan dan petua untuk membantu anda membuat fail CSS anda sendiri.
1. Fahami sintaks asas CSS
Fail CSS terdiri daripada pemilih dan atribut digunakan untuk memilih elemen yang perlu digayakan, manakala atribut menentukan gaya elemen. Contohnya:
p {
color: red;
font-size: 16px;
}Pemilih di sini ialah p, yang bermaksud gaya ini akan digunakan pada semua elemen perenggan. Dalam pendakap kerinting, kami mentakrifkan dua sifat: color dan font-size. color Menentukan warna teks menjadi merah dan font-size menentukan saiz fon menjadi 16 piksel.
2. Cipta fail CSS
Pertama, kita perlu mencipta fail CSS pada komputer. Anda boleh mengikuti langkah berikut:
- Buka editor teks anda (seperti Notepad, Sublime, dll.).
- Pilih Fail >
- Pilih Fail >Simpan Sebagai.
- Tambah akhiran ".css" pada penghujung nama fail, seperti "style.css".
- Pilih pengekodan fail, biasanya UTF-8.
- Simpan fail.
3. Sambungkan fail CSS ke dokumen HTML
Setelah kami mencipta fail CSS, kami perlu menyambungkannya ke dokumen HTML. Ini boleh dilakukan dengan mengikut langkah berikut:
- Tambah elemen
93f0f5c25f18dab9d176bd4f6de5d30edalam teg2cdf5bf648cf2f33323966d7f58a7f3fdokumen HTML anda.
<head>
<link rel="stylesheet" href="style.css">
</head>- Nyatakan alamat URL fail CSS dalam atribut
href.
Sekarang, kami telah menyambungkan fail CSS ke dalam dokumen HTML. Di bawah ini kami akan menunjukkan cara menulis gaya dalam fail CSS.
4. Menulis gaya CSS
Dalam fail CSS, kami boleh menentukan berbilang pemilih dan atribut untuk mengawal gaya halaman web. Berikut ialah beberapa peraturan gaya yang berguna:
- Tetapan Semula Gaya
Gaya lalai elemen mungkin berbeza dalam penyemak imbas yang berbeza. Untuk menjadikan semua elemen mempunyai gaya yang sama, kita selalunya perlu menggunakan tetapan semula gaya. Berikut ialah beberapa peraturan tetapan semula gaya asas:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}Peraturan ini menetapkan jidar, padding, jidar, rupa dan sifat lain semua elemen kepada 0 atau nilai lalai untuk memastikan gaya yang kami tentukan boleh Betulkan permohonan.
- Gaya Teks
Berikut ialah beberapa peraturan penggayaan teks asas:
body {
font-size: 16px;
font-family: Arial, sans-serif;
line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
}
p {
margin-bottom: 1em;
}
a {
color: blue;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}Peraturan ini mengawal penggayaan asas teks dalam halaman web. Kami menentukan saiz fon, fon dan ketinggian baris teks kandungan. Untuk tajuk, kami menetapkan gaya berani. Untuk perenggan, kami menetapkan margin bawah. Warna pautan ditetapkan kepada biru, dan garis bawah akan muncul di bawah pautan apabila tetikus dituding di atasnya.
- Gaya model kotak
Berikut ialah beberapa peraturan gaya model kotak yang biasa digunakan:
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.box {
width: 50%;
margin: 20px auto;
padding: 10px;
border: 1px solid #ccc;
}Peraturan ini digunakan untuk mengawal saiz, kedudukan, dalaman dan luaran jidar dan gaya Sempadan. Dalam contoh ini, kami mencipta dua elemen yang mengandungi kotak. Elemen .container akan menduduki 80% daripada lebar elemen induk dan dijajarkan secara mendatar di tengah. Elemen .box ialah 50% lebar dengan beberapa jidar dalam dan luar serta jidar kelabu.
5. Simpan dan uji
Selepas melengkapkan langkah di atas, kami boleh menyimpan fail CSS dan menguji gayanya. Letakkan fail CSS dalam direktori yang sama dengan dokumen HTML dan buka fail HTML dalam penyemak imbas. Jika semua gaya berjaya digunakan, anda boleh mula mengoptimumkan reka letak dan penampilan halaman web anda.
Ringkasnya, mencipta fail CSS ialah salah satu langkah yang perlu semasa mereka bentuk halaman web. Mempelajari bahasa CSS membolehkan kami mengawal reka letak dan penampilan halaman web dengan lebih baik, dan pada masa yang sama meningkatkan pengalaman pengguna.
Atas ialah kandungan terperinci Bagaimana untuk membuat fail css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!