Bagaimana untuk membuat fail css-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk membuat fail css

WBOY

Lepaskan： 2023-05-29 11:34:37

asal

3797 orang telah melayarinya

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;
}

Salin selepas log masuk

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 <head> dalam teg <link> dokumen HTML anda.

<head>
    <link rel="stylesheet" href="style.css">
</head>

Salin selepas log masuk

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;
}

Salin selepas log masuk

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;
}

Salin selepas log masuk

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;
}

Salin selepas log masuk

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!