Bagaimana untuk mengalih keluar elemen terakhir dalam css

CSS ialah bahagian penting dalam reka bentuk web bahagian hadapan secara khusus digunakan untuk menyediakan pereka web cara untuk menggayakan halaman web. Dengan pembangunan berterusan rangkaian dan teknologi hadapan, CSS juga sentiasa berkembang dan berinovasi Selain definisi gaya tradisional, terdapat banyak penggunaan baharu. Artikel ini akan meneroka kegunaan lain CSS kecuali yang terakhir, termasuk kaedah definisi gaya yang biasa digunakan, kaedah susun atur, kesan animasi, dll. Saya berharap dapat membawakan anda beberapa inspirasi dan teknik berguna.

1. Kaedah definisi gaya yang biasa digunakan

1. Pemilih kelas

Pemilih kelas ditakrifkan menggunakan simbol "." Elemen digayakan sama. Sebagai contoh, kita boleh menggunakan kod CSS berikut untuk menetapkan warna semua perenggan kepada merah:

p {
    color: red;
}

Jika kita hanya mahu menggayakan beberapa perenggan ini secara berbeza, kita boleh menambah nama kelas pada perenggan tersebut , Kemudian gunakan pemilih kelas untuk menentukan gaya untuk kelas ini. Contohnya:

.custom-para {
    font-size: 18px;
    color: blue;
}

<p>这是一个自定义的段落。</p>

Di sini, kami mentakrifkan kelas yang dipanggil "custom-para", yang menetapkan saiz dan warna fon. Kemudian kami menambah nama kelas ini pada salah satu perenggan, dan perenggan ini akan mewarisi takrifan gaya ini.

2. Pemilih ID

Pemilih ID ditakrifkan menggunakan simbol "#" dan ia adalah cara terbaik untuk menggayakan satu elemen. Setiap ID hanya boleh digunakan sekali, yang menjadikannya sesuai untuk elemen unik seperti pengepala, pengaki, navigasi, dsb. Contohnya:

#header {
    background-color: gray;
    height: 60px;
    line-height: 60px;
}

Dalam contoh ini, kami menggunakan pemilih ID "#header" untuk mentakrifkan pengepala halaman web dan menetapkan warna latar belakang, ketinggian, ketinggian garisan dan gaya lain.

3. Pemilih atribut

Pemilih atribut memilih elemen berdasarkan atributnya dan mereka boleh menetapkan gaya untuk elemen berdasarkan nilai atributnya. Sebagai contoh, kita boleh menggunakan kod berikut untuk memilih semua pautan dengan atribut "sasaran" dan menetapkan warnanya kepada biru:

a[target] {
    color: blue;
}

Dengan cara ini, semua pautan yang menyasarkan tetingkap atau bingkai baharu akan muncul dalam biru.

2. Kaedah reka letak

Selain definisi gaya, CSS juga boleh digunakan untuk susun atur kandungan halaman web. Berikut ialah beberapa kaedah susun atur biasa:

1. Apung

"Apung" dalam CSS ialah teknik untuk meletakkan elemen yang membenarkan satu elemen ditinggalkan atau Pindahkannya ke sehinggalah ia hampir dengan elemen atau sempadan lain. Biasanya, kami menggunakan sifat terapung CSS untuk mengapungkan elemen, dan kami biasanya menggunakannya untuk melaksanakan reka letak halaman web. Contohnya:

#sidebar {
    float: left;
    width: 200px;
}

#content {
    float: right;
    width: calc(100% - 200px);
}

Dalam contoh ini, kami menggunakan dua pemilih ID untuk menentukan bar sisi dan kawasan kandungan halaman web. Kami menggunakan sifat apungan untuk mengapungkan bar sisi ke kiri dan kawasan kandungan ke kanan, dan menetapkan lebarnya kepada nilai tetap atau peratusan berbanding tetingkap penyemak imbas.

2. Kotak fleksibel

Reka letak kotak fleksibel ialah teknologi reka letak CSS3 baharu yang menggunakan model kotak yang fleksibel dan boleh disesuaikan, yang menjadikannya Lebih fleksibel. Ia membolehkan pereka web untuk menyusun kandungan dengan lebih mudah tanpa perlu risau tentang isu seperti lebar tetap atau elemen terapung. Sebagai contoh, kod CSS berikut menunjukkan reka letak kotak fleksibel yang mudah:

.container {
    display: flex;
    height: 300px;
}

.item {
    flex: 1;
}

Dalam contoh ini, kami menggunakan atribut flex untuk mentakrifkan kotak fleksibel, dan kemudian menambah tiga elemen pada kotak. Kami menetapkan ketinggian untuk kotak dan nilai flex untuk elemen, yang menentukan saiz relatifnya dalam kotak.

3. Kesan animasi

CSS juga boleh digunakan untuk mencipta pelbagai kesan animasi, seperti fade in dan fade out, putaran, penskalaan, dsb. Berikut ialah beberapa kesan animasi biasa:

1. Peralihan

Peralihan CSS merujuk kepada peralihan yang lancar dari satu keadaan ke keadaan yang lain, dan ia boleh digunakan untuk mencipta pelbagai peralihan Kesan, seperti pudar masuk dan pudar, perubahan warna latar belakang, dsb. Berikut ialah kod peralihan CSS mudah yang akan membuat imej pudar dalam:

img {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

img:hover {
    opacity: 1;
}

Dalam contoh ini, kami mula-mula menetapkan ketelusan imej kepada 0, dan kemudian menggunakan atribut peralihan untuk mentakrifkan Peralihan, yang menukar ketelusan daripada 0 kepada 1 selama 1 saat, menggunakan fungsi mudah masuk untuk peralihan yang lancar. Apabila kita menuding tetikus di atas elemen, imej akan pudar masuk.

2. Animasi

Selain peralihan, CSS juga boleh digunakan untuk mencipta pelbagai kesan animasi yang kompleks. Sebagai contoh, berikut ialah kesan putaran yang dilaksanakan menggunakan animasi CSS:

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

img {
    animation: spin 2s linear infinite;
}

Dalam contoh ini, kami telah mentakrifkan animasi kerangka utama yang dipanggil "spin" yang akan menyebabkan elemen berputar. Kami kemudian menggunakan animasi ini pada imej dan menjadikannya gelung tanpa had selama 2 saat.

4. Ringkasan

Artikel ini memperkenalkan penggunaan CSS yang lain kecuali yang terakhir, termasuk kaedah definisi gaya yang biasa digunakan, kaedah reka letak, kesan animasi, dsb. Selain kaedah ini, CSS juga mempunyai banyak ciri dan teknologi baharu, seperti susun atur grid, sifat tersuai, dsb., yang membolehkan kami mereka bentuk dan membangunkan tapak web dengan lebih baik. Dalam proses mempelajari dan mengaplikasikan teknologi ini, kami perlu sentiasa mengekalkan semangat dan rasa ingin tahu kami untuk belajar untuk meningkatkan kemahiran kami secara berterusan dan mencipta pengalaman web yang lebih baik untuk pengguna.

Atas ialah kandungan terperinci Bagaimana untuk mengalih keluar elemen terakhir dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!