Bagaimana untuk menetapkan gaya CSS dalam fail HTML-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk menetapkan gaya CSS dalam fail HTML

PHPz

Lepaskan： 2023-04-26 16:05:38

asal

2592 orang telah melayarinya

HTML ialah bahasa penanda yang digunakan untuk membuat halaman web, manakala CSS (Cascading Style Sheets) ialah bahasa yang digunakan untuk menerangkan penampilan dan gaya halaman web. Dengan menggunakan HTML dan CSS bersama-sama kita boleh mencipta laman web yang menarik dan kelihatan profesional. Artikel ini akan memperkenalkan cara menetapkan gaya CSS dalam fail HTML.

Helaian gaya terbenam

Dalam teg kepala dokumen HTML, kita boleh menggunakan teg gaya untuk menentukan gaya CSS. Ini dipanggil helaian gaya terbenam kerana gaya CSS dibenamkan dalam dokumen HTML. Berikut ialah contoh asas:

<!DOCTYPE html>
<html>
<head>
    <title>我的网站</title>
    <style>
        body {
            background-color: #ccc;
            color: #000;
            font-family: Arial, sans-serif;
        }
        h1 {
            color: #00f;
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是我的第一篇博客文章。</p>
</body>
</html>

Salin selepas log masuk

Dalam contoh di atas, kami telah menggunakan helaian gaya terbenam untuk mentakrifkan gaya CSS untuk badan dan elemen h1. Memandangkan kami ingin menggunakan gaya ini pada keseluruhan dokumen HTML, kami meletakkannya dalam teg kepala. Seperti yang kita dapat lihat, sintaks gaya CSS adalah sangat mudah. Kami hanya menentukan nama harta yang ingin kita ubah, diikuti dengan titik bertindih, dan kemudian nilai sifat.

Helaian gaya luaran

Helaian gaya terbenam sangat berguna, tetapi ia hanya berfungsi pada satu dokumen HTML. Jika kami mempunyai berbilang dokumen HTML dan ingin berkongsi gaya CSS antara mereka, kami boleh menggunakan helaian gaya luaran. Helaian gaya luaran ialah fail CSS berasingan yang mengandungi semua takrifan gaya CSS. Kami boleh memautkannya dalam HTML melalui teg pautan, seperti yang ditunjukkan di bawah:

<!DOCTYPE html>
<html>
<head>
    <title>我的网站</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是我的第一篇博客文章。</p>
</body>
</html>

Salin selepas log masuk

Dalam contoh di atas, kami menggunakan teg pautan untuk memautkan fail style.css ke dalam dokumen HTML. Fail CSS hendaklah mengandungi kod CSS yang sama seperti sifat helaian gaya terbenam.

Pemilih kelas dan pemilih ID

CSS juga boleh memilih dan menukar gaya elemen HTML melalui pemilih kelas dan pemilih ID. Pemilih kelas bermula dengan noktah (.) dan digunakan untuk memilih elemen dengan kelas CSS tertentu Berbilang kelas boleh ditakrifkan untuk elemen. Pemilih ID bermula dengan tanda paun (#) dan digunakan untuk memilih elemen dengan ID tertentu Setiap elemen hanya boleh mempunyai satu ID. Berikut ialah contoh asas:

<!DOCTYPE html>
<html>
<head>
    <title>我的网站</title>
    <style>
        .title {
            color: #f00;
            font-size: 32px;
        }
        #intro {
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1 class="title">欢迎来到我的网站</h1>
    <p id="intro">这是我的第一篇博客文章。</p>
</body>
</html>

Salin selepas log masuk

Dalam contoh di atas, kami telah mentakrifkan gaya elemen h1 menggunakan pemilih kelas (.title) dan elemen p menggunakan gaya pemilih ID (#intro) . Ambil perhatian bahawa nama pemilih mestilah sama dengan atribut kelas atau id dalam teg elemen HTML yang sepadan.

Pemilih CSS Lain

CSS mempunyai banyak pemilih lain yang boleh membantu kami memilih dan menukar gaya elemen HTML dengan lebih tepat. Berikut ialah beberapa pemilih yang biasa digunakan:

Pemilih turunan: digunakan untuk memilih elemen dalam elemen anak, contohnya div p akan memilih semua elemen p yang bersarang dalam elemen div.
Pemilih adik beradik bersebelahan: digunakan untuk memilih elemen adik beradik bersebelahan, contohnya, p + span akan memilih elemen span pertama selepas p.
Pemilih kelas pseudo: digunakan untuk memadankan elemen dengan keadaan tertentu, contohnya: tuding memilih keadaan apabila tetikus melayang di atas elemen.

Dalam CSS, pemilih boleh digabungkan untuk memilih elemen dengan lebih tepat. Sebagai contoh, kita boleh menggunakan pemilih kelas dan pemilih turunan untuk memilih semua elemen p dalam div:

div p {
    color: #000;
    font-size: 16px;
}

Salin selepas log masuk

Dalam contoh di atas, kami menggunakan pemilih div dan p untuk memilih elemen bersarang dalam div Semua p unsur dalam .

Ringkasan

Melalui tetapan gaya CSS asas, kita boleh menentukan rupa dan gaya tapak web dalam dokumen HTML. Helaian gaya terbenam dan luaran, pemilih kelas dan pemilih ID, dan pemilih CSS lain semuanya menjadikan reka bentuk halaman lebih fleksibel dan diperibadikan. Kita boleh menggunakannya untuk mencipta laman web yang menarik dan kelihatan profesional.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan gaya CSS dalam fail HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!