Cara menggunakan gaya css

CSS (Cascading Style Sheets) ialah bahasa definisi gaya halaman web yang digunakan untuk menerangkan pembentangan dokumen HTML atau XML (termasuk pelbagai cabang XML seperti SVG, XHTML, dll.). CSS membolehkan pembangun mengasingkan kandungan dan gaya fail HTML, yang menjadikan gaya lebih mudah untuk dikekalkan dan diubah suai, serta boleh menjadikan pembentangan halaman lebih fleksibel dan lebih mudah untuk diurus. Artikel ini akan memperkenalkan cara menggunakan gaya CSS untuk mencantikkan dan mengoptimumkan halaman web.

1. Sintaks CSS asas

Peraturan CSS terdiri daripada dua bahagian utama: pemilih dan blok pengisytiharan. Pemilih

menentukan elemen HTML yang digunakan oleh peraturan. Contohnya, anda boleh menetapkan warna teks semua perenggan kepada merah menggunakan pemilih berikut:

p {
    color: red;
}

Blok pengisytiharan mengandungi satu atau lebih atribut yang menentukan peraturan gaya untuk digunakan pada elemen yang dipilih. Dalam contoh di atas, "warna" ialah atribut dan "merah" ialah nilai atribut. Untuk menambah berbilang sifat pada blok pengisytiharan, gunakan koma bertitik ";" untuk memisahkan setiap sifat. Sebagai contoh, anda boleh menggunakan blok pengisytiharan berikut untuk menetapkan warna teks dan saiz fon dalam perenggan:

p {
    color: red;
    font-size: 16px;
}

2. Pemilih CSS

Sebagai tambahan kepada pemilih elemen yang ditunjukkan di atas (seperti p, div, dsb.), CSS juga menyediakan pelbagai pemilih lain.

1. Pemilih kelas

Pemilih kelas membenarkan pembangun menetapkan nama kelas kepada elemen HTML tertentu untuk mencari dan menggunakan peraturan.

Sebagai contoh, jika anda ingin menetapkan warna semua tajuk kepada biru, anda boleh menggunakan CSS berikut:

h1, h2, h3 {
    color: blue;
}

Jika anda hanya mahu menetapkan warna beberapa tajuk pada halaman kepada biru, anda boleh Setiap elemen tajuk ditandakan sebagai kelas tertentu dan peraturan gaya digunakan pada kelas itu. Sebagai contoh, coretan kod ini memberikan peraturan biru yang sama kepada semua tajuk kelas "kelas saya":

<h1 class="my-class">Title 1</h1>
<h2 class="my-class">Title 2</h2>
<h3 class="my-class">Title 3</h3>

.my-class {
    color: blue;
}

2 pemilih ID

Pemilih ID ialah yang paling biasa digunakan dalam CSS Salah seorang pemilih. Pemilih ID digunakan untuk mengenal pasti secara unik satu elemen pada halaman.

Sebagai contoh, anda boleh menggunakan coretan kod berikut untuk menetapkan warna latar belakang elemen dengan ID "elemen saya" kepada merah:

#my-element {
    background-color: red;
}

3 🎜>Keturunan Pemilih bermakna anda boleh memilih semua elemen anak atau elemen cucu di bawah elemen.

Sebagai contoh, jika anda ingin memilih elemen di bawah semua perenggan pada halaman, anda boleh menggunakan sintaks berikut:

p a {
    color: blue;
}

Kod di atas akan menetapkan warna biru untuk semua elemen di bawah setiap unsur p.

4. Menggabungkan pemilih

Menggabungkan pemilih merujuk kepada memilih dua atau lebih pemilih untuk memilih satu elemen atau set elemen pada masa yang sama.

Sebagai contoh, kod berikut akan menetapkan teduhan biru untuk elemen span dengan kelas "my-class":

span.my-class, .my-class span {
    background-color: blue;
}

Kod di atas akan memilih mana-mana span dengan elemen kelas "my-class" atau elemen span dalam mana-mana elemen dengan kelas "my-class" dan gunakan gaya lorekan biru padanya.

3. Reka Letak CSS

CSS membolehkan pembangun mempunyai kawalan yang hampir lengkap ke atas reka letak halaman dan menggunakan pelbagai teknik seperti model terapung, kedudukan dan kotak untuk mengawal saiz dan kedudukan elemen.

1. Reka letak terapung

Reka letak terapung ialah teknik reka letak bendalir yang sesuai untuk mengumpulkan berbilang elemen dan meletakkannya di luar aliran kandungan biasa. Kod berikut mengapungkan bahagian kanan elemen p ke sebelah kiri imej.

p {
    float: right;
    width: 50%;
}

img {
    float: left;
    width: 50%;
}

2. Reka letak penentududukan

Reka letak penentududukan ialah salah satu jenis reka letak yang paling fleksibel dalam CSS, membolehkan pembangun meletakkan elemen menggunakan kedudukan relatif, kedudukan mutlak atau kedudukan tetap. Jika anda ingin meletakkan elemen pada lokasi tertentu dalam tetingkap penyemak imbas, gunakan CSS yang serupa dengan yang berikut:

#my-element {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

3. Susun atur model kotak

Susun atur model kotak merujuk kepada penggunaan CSS untuk menentukan kemunculan unsur suatu kaedah. Model kotak CSS mempunyai empat komponen utama: margin, sempadan, padding dan kandungan. Untuk menggayakan model kotak, gunakan CSS berikut:

.box {
    width: 200px;
    height: 200px;
    margin: 10px;
    padding: 10px;
    border: 10px solid black;
}

CSS di atas akan menetapkan kotak persegi 200x200 piksel dengan 10 piksel jidar, 10 piksel padding dan 10 piksel jidar daripada unsur lain .

4. Animasi CSS

Animasi CSS ialah teknologi berkuasa yang membolehkan pembangun mencipta pelbagai kesan dinamik, termasuk fade-in, slaid, putaran dan transformasi. Berikut ialah contoh CSS kesan teks berkelip pantas:

@keyframes blink {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
 
h1 {
    animation: blink 1s infinite;
}

CSS di atas mentakrifkan animasi yang dipanggil "kelip", di mana elemen h1 beransur-ansur menjadi telus dan berkelip dengan cepat pada halaman.

Ringkasan

CSS ialah alat pembangunan web yang sangat berguna dengan pelbagai aplikasi, membolehkan pembangun menambahkan lebih banyak kesan dinamik pada halaman web statik. Memahami dan mempelajari kemahiran asas sintaks dan reka letak CSS membolehkan pembangun mengawal kesan pemaparan halaman web dengan lebih fleksibel Ia juga merupakan salah satu kemahiran utama yang penting dalam era penekanan pada keindahan halaman dan interaktiviti.

Atas ialah kandungan terperinci Cara menggunakan gaya css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!