CSS Dari Atas ke Bawah – Termasuk CSS3

Pendedahan: Sokongan anda membantu mengekalkan laman web ini! Kami memperoleh bayaran rujukan untuk beberapa perkhidmatan yang kami cadangkan di halaman ini.


Cascading Style Sheets, atau CSS, adalah bahasa yang menjadikan web cantik. Bersama dengan HTML dan JavaScript, ini adalah salah satu teknologi yang mesti dikuasai oleh setiap pembangun bahagian depan.

Walaupun web penuh dengan sumber daya untuk membantu anda mempelajari CSS, jika anda seorang pemula, anda mungkin sukar untuk memisahkan sumber yang hebat dari yang baik.

Dalam panduan sumber ini, kami memberikan pengenalan asas mengenai apa itu CSS, kemampuannya, serta ciri-ciri yang dilancarkan dalam versi terbaru: CSS3.

Bermula dengan CSS

Sekiranya anda bersedia untuk melompat masuk, inilah yang merangkumi panduan ini:

  • Pengenalan kepada CSS: jika anda baru menggunakan CSS, inilah tempat untuk memulakan. Bahagian ini memberikan gambaran umum asas mengenai CSS, dan menunjukkan anda ke arah sumber hebat lain.
  • Yang Baru di CSS3: jika anda ingin meneliti modul yang telah diluncurkan dalam CSS3, baca topik ini di mana anda akan belajar mengenai pertanyaan media, ukuran kotak, transformasi 3D, animasi, susun atur pelbagai lajur, dan banyak lagi.
  • Membuat Laman Web Responsif dengan CSS: laman web hari ini mesti dibuat dengan cantik pada peranti dengan saiz apa pun, dan CSS adalah bahasa yang mewujudkannya.
  • Cara Membuat Butang Pintu Gelangsar: peneraju menggabungkan jQuery dengan CSS untuk mencipta kesan yang sangat menarik.
  • Semua Mengenai Warna CSS: bangun dan pergi dengan warna CSS. Bahagian ini merangkumi rujukan warna yang hebat.
  • Menulis CSS Cekap:: mempunyai halaman memuat cepat adalah lebih penting daripada sebelumnya. Ini akan menunjukkan kepada anda cara menulis CSS yang dapat mengurangkan masa muat anda dengan ketara.
  • Master CSS Dalam Talian: sumber-sumber ini menyediakan jalan menuju penguasaan CSS. Sekiranya anda lebih suka gaya pendidikan belajar-dengan-melakukan, bahagian ini sesuai untuk anda.
  • Karya CSS yang Hebat: mencari inspirasi? Di sini kami telah mengumpulkan beberapa ciptaan CSS yang paling menakjubkan di web.
  • Perkataan Rasmi di CSS3: setelah anda mengetahui beberapa CSS, dan telah mengetahui modul mana yang dilancarkan dalam CSS3, adalah idea yang baik untuk membiasakan diri dengan W3C, organisasi yang mendorong pengembangan CSS.
  • Bacaan yang Disyorkan: jika anda lebih suka belajar dengan bantuan ebook atau buku kecil, periksa senarai buku yang disyorkan, di mana anda pasti akan menemui tajuk yang menarik minat anda.

Pengenalan kepada CSS

Pengenalan kepada CSS

CSS, atau Cascading Style Sheets, adalah bahasa yang digunakan untuk menentukan gaya dan penampilan laman web.

Isi laman web, termasuk tajuk, paragraf, dan gambar, dimuat sesuai dengan petunjuk yang terdapat dalam dokumen HTML, dan CSS memberitahu penyemak imbas anda bagaimana menampilkan setiap elemen dalam dokumen HTML tersebut..

CSS digunakan untuk melakukan perkara seperti item kedudukan di laman web, dan untuk menentukan perkara seperti warna latar belakang, ukuran dan gaya sempadan, ruang antara satu item dengan item berikutnya, keluarga fon, dan banyak lagi.

Manfaat utama CSS ialah mewujudkan pemisahan antara reka bentuk laman web, dan kandungan laman web. Dengan memisahkan kandungan dari reka bentuk, perubahan reka bentuk dapat dilakukan ke seluruh laman web dengan menyesuaikan hanya beberapa peraturan CSS dalam satu fail CSS.

Tiga Tempat Untuk Menulis Peraturan CSS

Sebelum anda dapat menulis satu baris CSS, anda perlu tahu di mana menulisnya, dan bagaimana mengaitkannya dengan kandungan HTML yang dipengaruhi. Terdapat tiga tempat berbeza untuk menulis CSS:

  • Lembaran gaya luaran: Dokumen yang dibuat semata-mata untuk memuat aturan CSS yang dapat diterapkan pada banyak dokumen HTML menggunakan elemen LINK dalam tajuk dokumen HTML.
  • Lembaran gaya dalaman: Gaya CSS disisipkan terus ke tajuk dokumen HTML antara tag elemen gaya.
  • Gaya sebaris: Gaya CSS ditambahkan ke elemen HTML tunggal menggunakan atribut gaya dalam dokumen HTML.

Walaupun terdapat masa dan tempat untuk menggunakan kepingan gaya dalaman dan gaya sebaris, sebilangan besar Gaya CSS paling baik digunakan menggunakan helaian gaya luaran.

Lembaran gaya luaran boleh dihubungkan ke sejumlah dokumen HTML yang membolehkan anda mengawal penampilan keseluruhan laman web dari satu fail CSS.

Mengaitkan Peraturan CSS dengan Elemen HTML Tertentu

Peraturan CSS terdiri daripada dua bahagian: pemilih dan deklarasi. Setiap deklarasi juga terdiri daripada dua bahagian: harta dan nilai.

  • Pemilih kenal pasti, atau pilih, elemen HTML yang akan diterapkan peraturan CSS.
  • Hartanah adalah nama yang menggambarkan ciri yang akan ditangani oleh peraturan. Beberapa sifat CSS yang biasa digunakan adalah margin, sempadan, warna latar, penjajaran teks, dan gaya fon.
  • Nilai terangkan bagaimana harta mesti muncul. Sekiranya harta benda tersebut adalah margin, nilai umum mungkin 10 piksel.

Pemilih dan Kekhususan

Selalunya helaian gaya akan mengandungi peraturan yang bertentangan untuk satu elemen HTML. Konsep kekhususan pemilih akan menentukan peraturan mana yang diterapkan pada setiap elemen HTML.

Contohnya, jika senarai pautan digunakan untuk navigasi utama, dan senarai tambahan disajikan di bahagian utama halaman, senarai navigasi dan senarai di badan akan memerlukan set peraturan CSS yang berbeza..

Jika tidak, menu navigasi dan senarai di bahagian halaman akan dikenakan peraturan CSS yang sama.

Memahami bagaimana pemilih CSS berfungsi adalah kunci untuk menulis peraturan yang mempengaruhi elemen HTML yang betul.

Walaupun pemilih CSS yang paling umum adalah pemilih id, kelas, dan tag atau elemen, pemilih lain seperti atribut, pemilih posisi, pemilih semu, dan kombinasi pemilih dapat digunakan untuk membuat peraturan dengan kekhususan yang lebih besar..

Penggunaan Umum CSS

Terdapat banyak sifat CSS yang diterapkan pada hampir setiap halaman HTML. Membiasakan diri dengan sifat CSS biasa ini akan membolehkan anda menangani sebahagian besar tugas gaya dan penentuan kedudukan.

Font Gaya

CSS dapat digunakan untuk membuat gaya font yang diinginkan. Sama ada warna, saiz, berat, ketinggian garis, penjajaran, casing, jenis fon itu sendiri, atau hiasan seperti garis bawah dan garis panduan yang ingin anda kendalikan, sifat CSS dapat digunakan untuk membuat kesan yang diinginkan.

Dengan menerapkan prinsip kekhususan, gaya font yang berbeda dapat diterapkan pada setiap elemen HTML pada halaman.

Model Kotak

Ruang di sekitar setiap elemen HTML difahami dengan baik dengan memikirkan apa yang disebut sebagai model kotak:

Rajah Model Kotak

Model kotak terdiri daripada tiga sifat CSS: padding, border, dan margin. Sifat-sifat ini dapat diterapkan pada elemen HTML apa pun. Paling mudah untuk memahami ketiga-tiga sifat ini sebagai contoh.

Pertimbangkan elemen perenggan HTML berikut:

Perenggan teks.

Apa kesan menulis peraturan CSS berikut?

p {
pembalut: 10px;
sempadan: 1px pepejal;
margin: 10 piksel;
}

Perenggan tersebut akan muncul dikelilingi oleh:

  • Pertama, 10 piksel padding (ruang kosong) di semua sisi teks perenggan,
  • Kedua, batas padat lebar 1 piksel di sekitar perenggan dan padding,
  • Ketiga, margin 10 piksel (ruang kosong) antara sempadan dan elemen yang berdekatan.

Inilah yang dikenali sebagai model kotak. Setiap elemen dikotak terlebih dahulu oleh ruang kosong yang disebut padding, seterusnya dengan sempadan, dan akhirnya oleh ruang kosong yang disebut margin.

Menggunakan Terapung

Float digunakan untuk menghantar elemen HTML ke kiri atau kanan elemen induknya tanpa memecahkannya daripada aliran keseluruhan dokumen HTML. Bersama dengan hak milik kakak mereka, mereka adalah salah satu kaedah terbaik untuk membuat susun atur laman web.

Walaupun kami tidak akan berusaha untuk merangkumi semua perkara yang perlu diketahui mengenai apungan, sangat penting untuk mempunyai pemahaman asas tentang bagaimana ia berfungsi semasa anda mula belajar CSS.

Paling mudah untuk memahami pengapungan dalam konteks dokumen pemproses kata. Pertimbangkan gambar dalam dokumen teks.

Biasanya setiap gambar akan berada di sebelah kanan, dengan teks mengalir di sebelah kiri gambar, atau ke kiri, dengan teks yang mengalir di sebelah kanan gambar. Di laman web, penampilan ini dicapai dengan menggunakan harta apungan.

Properti apungan mempunyai empat nilai yang boleh diterima: kiri, kanan, tidak ada, dan mewarisi. Sekiranya terdapat contoh di atas:

  • Sekiranya gambar tunduk pada peraturan CSS dengan sifat apungan, dan nilai kiri, gambar akan diposisikan di sebelah kiri elemen induk, dengan teks mengalir di sebelah kanan.
  • Nilai yang betul akan berfungsi seperti yang anda harapkan.
  • Tidak ada yang akan menghalang elemen melayang ke arah mana pun.
  • Warisan akan menyebabkan elemen mewarisi nilai apungan yang diterapkan pada elemen induk.

Float biasanya digunakan untuk membuat menu navigasi laman web. Biasanya menu navigasi laman web terdiri daripada senarai HTML yang tidak disusun, dengan setiap item senarai melayang ke kiri atau kanan, menghasilkan item senarai yang muncul di sebelah satu sama lain, dan bukannya disusun dalam gaya daftar bulet.

Sebagai contoh, menu navigasi biasa mungkin kelihatan seperti ini dalam HTML:

  • Rumah

  • Kedai Kami

  • Tentang kita

  • Hubungi Kami.

Tanpa peraturan CSS, menu ini akan muncul sebagai daftar bullet, dengan setiap item muncul di baris baru. Untuk membuat setiap item muncul dalam satu garis mendatar mulai dari sebelah kiri halaman, peraturan CSS berikut dapat digunakan.

li {
terapung: kiri;
}

Perhatikan bahawa untuk mempermudah contoh ini, kami telah menggunakan tag item senarai li sebagai pemilih CSS. Sebenarnya, perkara ini tidak akan pernah dilakukan. Biasanya kelas akan ditugaskan ke senarai itu sendiri, atau ke setiap item senarai, dan kelas itu akan digunakan sebagai pemilih.

Kosongkan Pelampung

Harta lain yang sering digunakan bersama dengan apungan adalah harta yang jelas. Apabila satu elemen terapung, semua elemen seterusnya meluncur ke atas dan menjajarkan diri di sebelah elemen terapung.

Sekiranya anda mahu elemen seterusnya bermula di bawah item terapung, dan bukannya di sebelahnya, anda boleh menggunakan harta yang jelas untuk memaksa mereka memulakannya di baris baru.

Kami baru sahaja mencakar permukaan apa yang dapat dilakukan dengan apungan dan harta tanah yang jelas, tetapi kami dapati artikel hebat dari CSS-Tricks ini memberikan gambaran mendalam mengenai topik ini.

Menggunakan Harta Kedudukan

Properti kedudukan CSS adalah kaedah lain yang sering digunakan untuk membuat susun atur laman web. Tidak seperti harta apungan, sifat kedudukan sering digunakan untuk memecah elemen dari aliran semula jadi dokumen HTML, dan untuk menentukan kedudukan mereka dengan sangat khusus.

Dua nilai boleh digunakan dengan sifat kedudukan: relatif dan mutlak. Setelah menerapkan salah satu dari nilai tersebut, sifat tambahan seperti atas, bawah, kiri, dan kanan dapat digunakan untuk meletakkan elemen yang terkena secara khusus.

Menggunakan properti kedudukan untuk membuat susun atur bukan tanpa risiko. Tidak seperti harta apungan, elemen yang diposisikan oleh harta benda kedudukan akan bertindih dengan item lain, mewujudkan potensi untuk lebih banyak masalah penyemak imbas silang dan ukuran ruang pandang.

Walau bagaimanapun, ia adalah harta yang banyak digunakan dalam dunia pengembangan CSS, dan sebaiknya anda mempelajari asas-asas menggunakan kedudukan kedudukan.

Yang Baru dalam CSS3

Yang Baru di CSS3

Walaupun CSS2 adalah satu spesifikasi, CSS3 telah dipecah menjadi lebih dari lima puluh modul yang berbeda, masing-masing pada tahap pengembangan dan penerimaan yang berbeza.

Kerja yang sedang berjalan di CSS3 dikendalikan oleh World Wide Web Consortium, atau W3C, dan mereka menawarkan lokasi terpusat di mana anda dapat mengawasi semua pekerjaan standardisasi CSS3 yang sedang berlangsung.

Walaupun kerja pada pelbagai modul CSS3 sedang berlangsung, banyak modul sudah mendapat penerimaan yang luas, dan banyak digunakan oleh banyak laman web. Berikut adalah sepuluh sifat CSS3 terpenting yang telah mendapat penerimaan luas, dan disokong oleh semua penyemak imbas moden.

  • Walaupun kemampuan untuk membuat sederhana animasi telah lama mungkin dengan JavaScript, animasi CSS kini dapat dibuat dengan menggunakan sintaks CSS yang lebih sederhana.
  • The pengiraan fungsi yang kini tersedia dengan CSS3 sangat membantu untuk membuat susun atur responsif. Ia dapat digunakan untuk menambah, mengurangkan, mengalikan, atau membelah, dan hasil pengiraan kemudian digunakan sebagai nilai properti.
  • Pelbagai pemilih maju ditambahkan dengan CSS3, memungkinkan peningkatan tahap kekhususan ketika memilih elemen untuk aturan CSS.
  • Penambahan kecerunan sebagai jenis latar belakang telah memberi peluang kepada pembangun CSS untuk membuat latar belakang yang mengagumkan yang dimuat turun dan dipaparkan dengan cepat.
  • Sifat lebar dan tinggi yang diterapkan pada elemen tidak mengandungi padding, border, dan margin. Akibatnya, padding, margin, dan border meningkatkan ukuran elemen melebihi lebar dan tinggi yang ditentukan. Ini telah lama membuat pemaju CSS kecewa yang menggunakan matematik yang rumit untuk menyesuaikan susun atur laman web. Namun, dengan properti ukuran kotak baru, nilai batas-kotak dapat diterapkan, memaksa padding, border, dan margin dalam batasan lebar dan tinggi yang ditentukan, sehingga mempermudah reka bentuk susun atur halaman web.
  • CSS dapat digunakan untuk menerapkan batas pada elemen HTML apa pun, dan dengan properti gambar sempadan, membuat dan menggunakan sempadan khusus lebih mudah daripada sebelumnya. Sintaks harta itu sendiri cukup rumit, tetapi setelah anda mengetahui, anda dapat membuat sempadan satu-satunya-jenis untuk elemen apa pun di laman web dengan cepat.
  • Pertanyaan media tentukan apakah ruang pandang peranti yang digunakan untuk mengakses laman web memenuhi ciri-ciri tertentu yang ditentukan. Modul @media CSS3 adalah salah satu alat utama yang digunakan untuk membuat laman web yang responsif. Dengan menggunakan pertanyaan media, pengembang CSS dapat membuat aturan CSS yang hanya diterapkan ketika fitur media tertentu, seperti lebar dan tinggi area pandang, dan kemampuan paparan warna, dipenuhi. Dengan cara ini, pembangun CSS dapat memposisikan semula dan mengubah ukuran elemen, atau menyembunyikan semuanya bersama-sama, berdasarkan hasil pertanyaan media.
  • Menggunakan pelbagai latar belakang untuk membuat kesan latar belakang tertentu lebih mudah daripada sebelumnya dengan CSS3. Dengan menggunakan sifat latar belakang, banyak gambar latar belakang, warna, dan kecerunan dapat diterapkan pada elemen apa pun.
  • Menggunakan lajur untuk membuat susun atur yang diilhamkan oleh akhbar lebih mudah daripada sebelumnya dengan harta lajur di CSS3. Properti ini dapat digunakan untuk mengatur jumlah lajur dan lebar dengan mudah, membuat wadah di mana kandungan mengalir dengan mudah dari satu lajur ke lajur berikutnya. Lajur juga berguna untuk membuat menu navigasi yang fleksibel.
  • Transformasi 3D dimungkinkan oleh CSS3. Ini adalah subjek yang kompleks untuk dikuasai, dan anda harus memulakannya dengan membaca mengenai transformasi CSS, dan kemudian jalankan beberapa tutorial.

Membuat Laman Web Responsif dengan CSS

Membuat Laman Web Responsif dengan CSS

Terdapat beratus-ratus, jika tidak beribu-ribu, ukuran dan resolusi paparan peranti yang berbeza digunakan setiap hari untuk mengakses web, dan sebagai hasilnya, tidak lagi cukup untuk memiliki satu laman web bersaiz penuh, dan satu atau dua reka bentuk untuk peranti yang lebih kecil.

Hari ini, laman web anda perlu dilihat pada skrin besar, peranti kecil, dan setiap ukuran ruang pandang di antaranya.

Untuk melakukan ini, CSS laman web anda mesti mematuhi tiga prinsip utama reka bentuk web responsif.

  • Pertama, tulang belakang, atau grid, yang menentukan susun atur keseluruhan anda mestilah lancar.
  • Kedua, gambar mesti diubah saiznya secara automatik untuk dihasilkan dengan cantik pada mana-mana peranti.
  • Ketiga, pertanyaan media mesti digunakan untuk mengatasi titik-titik di mana reka bentuk cecair asal rosak.

Semasa mendekati projek reka bentuk web baru, banyak pereka berpengalaman bermula dengan telefon bimbit terlebih dahulu teknik. Laman web yang direka dengan teknik ini dimulakan dengan reka bentuk termudah yang dimaksudkan untuk ruang pandang terkecil, dan gaya tambahan ditambahkan ketika ukuran ruang pandang bertambah.

Teknik pertama bergerak menawarkan dua faedah penting:

  • Pertama, ia memaksa pereka untuk mengenal pasti fungsi penting laman web, dan menggunakannya sebagai asas untuk reka bentuk laman web. Selalunya, laman web bersaiz penuh mengandungi kandungan, seperti widget, menu, dan sebagainya, yang bukan merupakan sebahagian daripada laman web ini apabila dilihat pada peranti mudah alih. Pendekatan pertama yang mudah alih membantu memastikan bahawa tujuan utama dan fungsi laman web menjadi tumpuan utama di semua ukuran ruang pandang.
  • Kedua, pelawat laman web yang mengakses laman web dari telefon bimbit memuat turun lebih sedikit peraturan CSS dan sumber laman web. Sekiranya laman web penuh adalah yang pertama dimuat, pengguna mudah alih akan memuat turun sumber yang jauh lebih banyak daripada yang diperlukan. Pendekatan pertama mudah alih hanya memuat item yang sesuai pada peranti mudah alih, menyimpan beberapa data berharga pengunjung, dan membuat pengalaman memuatkan laman web yang lebih pantas.

Reka Bentuk Responsif Pembelajaran

Salah satu kaedah terbaik untuk mempelajari teknik reka bentuk responsif adalah dengan projek reka bentuk responsif mudah. Dengan membuat reka bentuk laman web responsif pertama anda, anda akan mendapat pemahaman yang lebih baik mengenai konsep yang telah kita bicarakan.

Dengan pertumbuhan popularitas tata letak gaya lajur, muncul tantangan baru bagi pereka laman web: cabaran untuk menyesuaikan susun atur lajur ke perangkat dari setiap ukuran.

Syukurlah, terdapat sumber untuk membantu pemula CSS dan pemaju berpengalaman belajar bagaimana bekerja dengan harta CSS baru ini dalam persekitaran yang responsif.

Kaedah lain yang baik untuk mula memahami bagaimana pembangun CSS terbaik mengadaptasi laman web adalah dengan melihat laman web yang responsif, dalam pelbagai ukuran, berdampingan. Pertanyaan Media adalah satu laman web di mana anda dapat melihat beratus-ratus reka bentuk laman web responsif dalam pelbagai ukuran semuanya pada satu skrin.

Cara Membuat Butang Pintu Gelangsar

Cara Membuat Butang Pintu Gelangsar

Hanya dengan menggunakan CSS, anda boleh membuat butang yang hebat – dan hebat – hebat. Anda boleh melakukan lebih banyak lagi dengan sedikit jQuery.

Di bawah ini, kami akan menunjukkan kepada anda cara mengambil gambar butang yang mudah dan mengaturnya untuk digunakan sebagai butang yang boleh ditukar dari semua saiz di seluruh laman web anda. Pada akhirnya, anda akan menghasilkan kod butang yang boleh digunakan semula yang boleh anda gunakan untuk menghasilkan butang seperti ini.

Klik gambar untuk menukar animasi.

Butang Pintu Gelangsar Contoh 1

Membuat Imej Anda

Teknik yang akan kami gunakan untuk membuat butang ini disebut “sliding-door” CSS. Untuk menyediakan butang ini, kami memerlukan dua gambar untuk setiap versi butang – dalam kes kami, dua gambar butang hitam dan dua gambar butang biru, empat gambar secara keseluruhan.

Untuk membuat gambar ini kita mulakan dengan gambar butang padat.

Butang Biru
Butang Hitam

Apa yang perlu kita lakukan ialah membagi setiap butang menjadi dua gambar:

  • Gambar sebelah kiri akan menjadi sekecil mungkin sambil masih menangkap jejari penuh sudut butang.
  • Gambar sebelah kanan selebar mungkin, sebenarnya, kami ingin menggunakan program manipulasi gambar untuk menyalin badan butang beberapa kali sehingga kami dapat membuat butang yang sangat panjang dengan gambar.

Berikut adalah gambar yang akan kami hasilkan setelah dipotong menjadi ukuran yang sesuai:

Butang Biru KiriButang Biru Kanan
Butang Hitam KiriButang Hitam Kanan

Setelah anda membuat keempat-empat gambar, anda sudah bersedia untuk memulakan pengekodan.

Butang HTML

HTML butang kami akan terdiri daripada tiga komponen: pembungkus div luar, elemen penambat, dan elemen span.

Teks Butang

Dalam blok kod di atas, ketiga-tiga elemen dipecah menjadi garis berasingan sehingga anda dapat dengan lebih mudah melihat apa yang sedang berlaku.

Walau bagaimanapun, dalam praktiknya, anda mungkin ingin memastikan semuanya tetap sejajar, terutamanya jika anda menggunakan sistem pengurusan kandungan (CMS) seperti WordPress yang akan memasukkan tag perenggan setelah setiap jeda baris.

Menambah Imej Butang

Sekarang, jika anda memberikan sedikit HTML dari contoh di atas, semua yang anda dapat adalah pautan yang bertuliskan “Button Text.” Langkah seterusnya yang ingin kita lakukan adalah menambahkan gambar butang ke kod kita.

Namun, sebelum kita melakukannya, mari kita tambahkan sedikit gaya ke pembungkus div luar sehingga kita dapat melihat apa yang terjadi sedikit lebih jelas.

.butang gelangsar {
paparan: sebaris-blok;
lebar: automatik;
margin: 20 piksel;
}

Sedikit kod itu hanya akan menambah ruang di sekitar butang kami, dan memaksa div yang berisi untuk mengecil ke ukuran pautan dan teks. Sekarang kami bersedia untuk menambah gambar butang kami.

.pautan gelangsar {
latar belakang-gambar: url (‘blue-button-right.png’);
ukuran latar: auto 100%;
latar belakang-kedudukan: betul;
latar-ulangan: tidak-ulangan;
}
.teks gelongsor {
latar belakang-gambar: url (‘blue-button-left.png’);
ukuran latar: auto 100%;
latar belakang-kedudukan: kiri;
latar-ulangan: tidak-ulangan;
}

Jadi sekarang kami telah menambah gambar butang kami. Malangnya, belum banyak yang perlu dilihat. Sekiranya anda mengezum masuk dan melihat dengan teliti, anda akan melihat bahawa gambar sebelah kiri sebenarnya hanya duduk di atas gambar sebelah kanan. Bukan kesan yang kita mahukan.

Butang Buruk

Gaya Butang

Mari tambahkan sedikit padding di sekitar teks. Ini akan menjadikan butang kita kelihatan seperti butang. Selain itu, kita perlu mengubah paparan elemen span dan anchor menjadi blok-sebaris agar kedua-duanya bertindak balas terhadap padding dan meminggirkan seperti yang kita mahukan.

.pautan gelangsar {
paparan: sebaris-blok;
}
.teks gelongsor {
pembalut: 20px;
paparan: sebaris-blok;
}

Kod itu akan memberi ukuran kepada butang kita. Walau bagaimanapun, kami masih mempunyai masalah pertindihan yang menyusahkan antara gambar kiri dan kanan. Yang perlu kita lakukan ialah menggunakan margin untuk memindahkan gambar kanan sedikit ke kanan, dan kemudian menerapkan margin negatif yang sama pada gambar sebelah kiri.

.pautan gelangsar {
margin-kiri: 17 piksel;
}
.teks gelongsor {
margin-kiri: -17px;
}

Nilai 17-piksel berlaku untuk gambar butang khusus kami. Sekiranya anda menggunakan gambar yang berbeza, anda perlu menyesuaikan nilai ini dengan percubaan dan ralat sehingga butang kelihatan betul.

Sebelum meneruskan, mari kita teruskan dan tambahkan beberapa gaya pada teks butang kami.

.teks gelongsor {
warna: #fff;
saiz fon: 14pt;
font-family: ‘Open-Sans’, Arial, sans-serif;
text-transform: huruf besar;
font-weight: tebal;
text-align: tengah;
}

Pada ketika ini, butang kita sebenarnya kelihatan seperti butang!

Butang Baik

Kesan Tuding Butang

Sekarang, jika anda mengarahkan mouse ke butang, tidak ada petunjuk visual bahawa tetikus anda berada di atas butang. Mari perbaiki dengan menambahkan kesan hover.

.sliding-text: hover, .sliding-text: aktif {
kotak-bayangan: sisipan 0 0 0 1000px rgba (255,255,255, .2);
}

Walaupun ia pasti berfungsi, agak kasar. Pertama, kesan hover beralih ke dalam dan keluar terlalu keras. Kedua, jika anda meletakkan butang pada latar belakang gelap, anda akan melihat bahawa kesan hover melangkaui sudut bulat butang.

Kami dapat menyelesaikan kedua-dua masalah tersebut dengan beberapa baris kod yang ditambahkan pada elemen span.

.teks gelongsor {
-webkit-peralihan-harta: bayangan kotak; / * Safari * /
-tempoh peralihan-webkit: .2s; / * Safari * /
peralihan-harta: bayangan kotak;
jangka masa peralihan: .2s;
sempadan-jejari: 12px;
}

Sekarang kesan hover kami akan beralih masuk dan keluar selama dua ratus saat – pelonggaran kecil, tetapi cukup untuk membuat peralihan terasa lancar. Kedua, peraturan sempadan-radius akan membulatkan sudut kesan hover agar sesuai dengan gambar.

Perhatikan bahawa nilai 12-piksel yang kami terapkan pada radius sempadan adalah khusus untuk gambar butang kami. Sekiranya anda menggunakan gambar yang berbeza, anda perlu menyesuaikan nilai ini.

Menukar Gambar Butang

Sekarang, kami dapat menambahkan URL ke atribut href elemen sauh, dan butang kami akan berfungsi dengan baik sebagai pautan. Namun, di bahagian atas siaran ini, terdapat gif yang menunjukkan kesan togol yang mengubah gambar butang. Mari kita ikuti proses membuat butang togol sekarang.

Pertama, kita perlu menambahkan gambar baru pada butang. Cara yang akan kami lakukan adalah dengan menambahkan gambar butang ke kelas baru, dan kemudian menggunakan jQuery untuk mengaktifkan dan mematikan kelas apabila butang diklik.

Mari kita mulakan dengan CSS.

.butang semasa .sliding-link {
latar-gambar: url (‘black-button-right.png’);
}
.butang semasa .sliding-text {
latar belakang-gambar: url (‘black-button-left.png’);
}

Buat masa ini, kesan togol tidak berfungsi. Walau bagaimanapun, jika anda secara manual menambahkan butang arus kelas ke div kontena butang, anda akan melihat versi kedua butang anda.

Untuk menukar antara dua versi butang pada klik, anda perlu menggunakan jQuery untuk menghidupkan dan mematikan kelas butang semasa untuk butang.

Namun, sebelum kita melakukannya, kita perlu memutuskan butang mana yang ingin kita ubah sebagai butang. Kita boleh melakukan ini dengan menambahkan kelas ke butang yang ingin kita gunakan sebagai butang togol. Mari gunakan butang togol kelas untuk tujuan ini.

Oleh itu, untuk menetapkan sebarang butang sebagai butang togol, kami hanya perlu menambahkan kelas tersebut ke pembungkus div luar:

Sekarang, kita boleh menggunakan jQuery untuk menghidupkan dan mematikan kelas butang semasa untuk butang itu.

$ (‘. toggle-button’). klik (fungsi () {
$ (ini) .toggleClass (‘current-button’);
kembali palsu;
});

Terdapat beberapa perkara yang berlaku dalam kod tersebut. Mari kita lalui.

Pertama, kami memuatkan jQuery dari Google Hosted Libraries. Sekiranya laman web anda sudah menggunakan jQuery, maka anda boleh menghilangkan elemen skrip pertama.

Elemen skrip kedua mengandungi fungsi jQuery sederhana.

Fungsi memerhatikan sebarang elemen dengan butang togol kelas. Apabila mana-mana elemen dengan kelas itu diklik, fungsi diaktifkan untuk menghidupkan atau mematikan butang semasa kelas untuk elemen yang diklik.

Akhirnya, fungsi mengembalikan nilai palsu yang menghalang tingkah laku pautan lalai, iaitu memuat semula halaman kerana atribut href elemen sauh kami akan kosong pada butang togol.

Dengan sedikit kod yang ditambahkan, kami dapat menukar butang kami ke isi hati kami.

Klik gambar untuk menukar animasi.

Butang Pintu Gelangsar Contoh 2

Kod Sumber Penuh

Sekiranya anda mengikuti, langkah demi langkah, maka anda sudah membuat versi lengkap kod sumber untuk butang ini. Namun, jika anda tidak mengikuti, anda boleh mengambil kod sumber penuh untuk butang dalam tutorial ini dengan menyalin kod di bawah ke dalam dokumen HTML.

Butang Pintu Gelangsar

.butang gelangsar {
paparan: sebaris-blok;
lebar: automatik;
margin: 20 piksel;
}
.pautan gelangsar {
latar belakang-gambar: url (‘blue-button-right.png’);
ukuran latar: auto 100%;
latar belakang-kedudukan: betul;
latar-ulangan: tidak-ulangan;
paparan: sebaris-blok;
margin-kiri: 17 piksel;
}
.teks gelongsor {
latar belakang-gambar: url (‘blue-button-left.png’);
ukuran latar: auto 100%;
latar belakang-kedudukan: kiri;
latar-ulangan: tidak-ulangan;
paparan: sebaris-blok;
pembalut: 20px;
margin-kiri: -17px;
warna: #fff;
saiz fon: 14pt;
font-family: ‘Open-Sans’, Arial, sans-serif;
text-transform: huruf besar;
font-weight: tebal;
text-align: tengah;
-webkit-peralihan-harta: bayangan kotak; / * Safari * /
-tempoh peralihan-webkit: .2s; / * Safari * /
peralihan-harta: bayangan kotak;
jangka masa peralihan: .2s;
sempadan-jejari: 12px;
}
.sliding-text: hover, .sliding-text: aktif {
kotak-bayangan: sisipan 0 0 0 1000px rgba (255,255,255, .2);
}
.butang semasa .sliding-link {
latar-gambar: url (‘black-button-right.png’);
}
.butang semasa .sliding-text {
latar belakang-gambar: url (‘black-button-left.png’);
}


Butang Togol

Butang Pautan

$ (‘. toggle-button’). klik (fungsi () {
$ (ini) .toggleClass (‘current-button’);
kembali palsu;
});

Menggunakan Butang Anda dengan Baik

Teka-teki terakhir adalah meletakkan butang baru anda dengan baik. Berikut adalah beberapa idea untuk memulakan anda:

  • Tambahkan URL ke atribut elemen sauh href dan gunakan butang untuk memaut ke laman web mana pun. Perhatikan bahawa untuk melakukan ini, anda ingin menghilangkan kelas butang beralih dari pembungkus butang div.
  • Gunakan jQuery atau JavaScript tambahan untuk memaparkan atau menyembunyikan maklumat tambahan apabila butang ditukar.
  • Sekiranya anda benar-benar merasa bercita-cita tinggi, gunakan butang untuk navigasi laman web, dan gunakan jQuery untuk menentukan sama ada halaman semasa sepadan dengan URL butang dan beralih kelas butang semasa jika keduanya sepadan.

Semua Mengenai Warna CSS

Semua Mengenai Warna CSS

Salah satu perkara yang paling penting – dan berpotensi membingungkan – yang boleh ditentukan dengan CSS adalah warna. Hampir semua elemen di laman web boleh diwarnai menggunakan CSS.

Ciri Warna CSS

Satu perincian yang sering kali dilakukan oleh pembangun front-end baru adalah harta warna CSS. Yang membuatnya membingungkan ialah warna tidak mengawal elemen itu sendiri, tetapi teks di dalam elemen.

Warna elemen itu sendiri (kotak) biasanya akan dikendalikan oleh warna latar belakang, warna sempadan, atau latar belakang pendek dan sifat sempadan, yang merangkumi maklumat warna. Anda juga boleh menetapkan warna pada bayangan kotak.

Biasanya, warna latar elemen merangkumi kandungan elemen, padding, dan kawasan sempadan. Ini adalah tingkah laku biasa yang dibayangkan oleh pencipta standard CSS. Namun, ada cara membuat pelapik dan isinya berbeza warna.

Pengisytiharan Warna

Selain dari sifat CSS yang berbeza yang dapat digunakan untuk menentukan warna, ada tiga cara yang berbeza untuk mengenal pasti warna dalam CSS: RGB, nilai hex, atau nama.

/ * Ketiganya akan sama warna. * /

.merah-rgb {
latar belakang-warna: rgb (255, 0, 0);
}

.hex merah {
warna latar: # ff0000;
}

.nama merah {
warna latar: merah;
}

Yang kedua (nilai hex) adalah yang paling umum, tetapi kita akan bermula dengan RGB kerana nilai hex tidak masuk akal melainkan anda memahami bagaimana RGB berfungsi.

Nilai RGB

Monitor komputer, skrin televisyen, dan paparan serupa yang lain, mempunyai piksel. Pada paparan warna, setiap piksel dibahagikan kepada tiga sub-piksel: merah, hijau, dan biru.

Ini adalah apa yang disebut “warna utama cahaya.” Gabungan ketiga warna ini pada intensiti yang berbeza-beza dapat digunakan untuk membuat warna apa pun yang dapat dilihat oleh mata manusia. Ini dikenali sebagai “pencampuran warna aditif.”

(Perlu diketahui bahawa ini ada kaitannya dengan mata manusia, dan bukan dengan cahaya itu sendiri.)

Skrin paparan yang berbeza mempunyai keupayaan yang berbeza dari segi jarak intensiti yang dapat dihasilkan oleh setiap sub-piksel. Paparan yang sangat sederhana mungkin hanya mempunyai dua intensiti untuk setiap warna (mati atau aktif), sedangkan paparan berkualiti tinggi mungkin mempunyai lebih banyak gradasi.

Sebagai standard, komputer menggunakan julat dari sifar (0 – sepanjang jalan) hingga 255 (sepanjang jalan) untuk setiap sub-piksel (misalnya, 128 sudah separuh jalan). Ini adalah 256 kemungkinan intensiti untuk setiap sub-piksel, yang bermaksud bahawa nilai setiap sub-piksel dapat disimpan sebagai bait 8-bit (2 8 = 256).

Oleh kerana terdapat tiga warna, masing-masing diwakili dengan 8 bit, jumlah warna yang dapat ditunjukkan dengan cara ini adalah lebih dari 16 juta (256 3 = 16,777,216).

Julat warna ini dapat ditunjukkan dengan hanya memperhatikan nilai setiap sub-piksel, seperti ini:

rgb (0, 128, 255)

Dalam contoh itu, sub-piksel merah sudah habis, sub-piksel hijau sudah separuh jalan, dan sub-piksel biru terus berjalan. Warna itu kelihatan seperti ini:

Dalam sistem ini, putih (semua warna sepanjang jalan) adalah rgb (255, 255, 255) dan hitam (semua warna mati) adalah rgb (0, 0, 0).

Warna RGB juga dapat ditentukan sebagai peratusan, menggunakan perpuluhan bukan dengan satu digit akhir:

rgb (0.0, 50.0, 100.0)

Penggunaan ini tidak biasa.

Nilai hex

Kaedah yang lebih ringkas untuk menulis maklumat tepat yang sama adalah dengan menggunakan nilai hex. Nilai warna heks ditulis dengan tanda hash (paun), diikuti oleh enam aksara perenambelasan, dalam tiga pasang, seperti ini:

# 0080jam

Pasangan pertama mewakili nilai merah, pasangan kedua mewakili nilai hijau, dan pasangan ketiga mewakili nilai biru. Dalam contoh ini, 00 bermaksud tidak ada warna merah sama sekali, 80 bermaksud hijau separuh jalan, dan ff bermaksud biru sepanjang jalan. Jadi ini adalah warna yang sama dengan rgb (0, 128, 255).

Ini mungkin kelihatan sedikit membingungkan jika anda tidak terbiasa dengan nombor heksadesimal. Dalam sistem perpuluhan normal kita, setiap digit boleh mempunyai 10 nilai (0-9). Dalam penomboran heksadesimal, setiap digit mempunyai 16 nilai yang mungkin (0-9, a-f).

Ini memungkinkan untuk mewakili semua nilai dari 0-255 dalam dua digit, 0-ff. Lihat tutorial perenambelasan ini untuk maklumat lebih lanjut.

Dalam sistem ini, putih adalah #ffffff dan hitam adalah # 000000.

Nilai warna hex adalah cara yang paling biasa untuk menentukan warna dalam CSS.

Nama Warna CSS

Cara terakhir untuk menentukan warna tertentu adalah dengan menggunakan salah satu nama warna yang telah ditentukan. W3C mengekalkan, dan kadang-kadang mengemas kini, senarai nama warna rasmi yang dapat digunakan sebagai pengganti kod warna bernombor. Contohnya, warna hitam boleh digunakan dan bukannya # 000000.

Pada hari-hari awal web, warna-warna bernama ini membantu menentukan sekumpulan kecil “warna selamat web” yang tidak disokong dengan baik di sebilangan besar penyemak imbas dan skrin paparan.

Hari ini, kelebihan terbesar memiliki nama warna adalah bahawa mereka lebih mudah diingat. Contohnya, lightblue lebih mudah diingat (dan taip dengan betul) daripada yang setara, # add8e6 atau rgb (173, 216, 230).

Senarai Nama Warna CSS

Nama Warna
Nilai hex
Contoh Warna
aliceblue# f0f8ff
antiquewhite# faebd7
aqua# 00ffff
akuarium# 7fffd4
biru# f0ffff
kuning air# f5f5dc
bisque# ffe4c4
hitam# 000000
blanchedalmond# ffe4c4
biru# 0000ff
biru ungu# 8a2be2
coklat# a52a2a
kayu lapis# deb887
kadetblue# 5f9ea0
penggunaan carta# 7fff00
coklat# d2691e
batu karang# ff7f50
bunga jagung# 6495s
susu jagung# fff8dc
kelim# dc143c
biru gelap# 00008b
kegelapan# 008b8b
darkgoldenrod# b8860b
kelabu gelap# a9a9a9
hijau gelap# 006400
kelabu gelap# a9a9a9
darkkhaki# bdb76b
darkmagenta# 8b008b
darkolivegreen# 556b2f
warna gelap# ff8c00
darkorchid# 9932cc
merah gelap# 8b0000
darksalmon# e9967a
hijau gelap# 8fbc8f
darkslateblue# 483d8b
darkslategray# 2f4f4f
darkslategrey# 2f4f4f
darkturquoise# 00kepada1
ungu gelap# 9400d3
deeppink# ff1493
deepskyblue# 00bfff
dimgray# 696969
dimgrey# 696969
dodgerblue# 1e90ff
batu api# b22222
bunga putih# fffaf0
hutan hijau# 228b22
fuchsia# ff00ff
gainsboro#dcdcdc
hantu putih# f8f8ff
emas# ffd700
goldenrod# daa520
kelabu# 808080
hijau# 008000
hijau muda# adff2f
kelabu# 808080
tembikai susu# f0fff0
hotpink# ff69b4
berketurunan india# cd5c5c
indigo# 4b0082
gading# fffff0
khaki# f0e68c
lavender# e6e6fa
lavenderblush# fff0f5
bidang undang-undang# 7cfc00
lemonchiffon#fffacd
biru muda# tambah8e6
lightcoral# f08080
ringan# e0ffff
lightgoldenrodyellow# fafad2
kelabu cerah# d3d3d3
lampu hijau# 90ee90
kelabu cerah# d3d3d3
merah jambu cerah# ffb6c1
lampu cahaya# ffa07a
cahaya hijau# 20b2aa
lampu terang# 87cefa
lampu terang# 778899
lightslategrey# 778899
cahaya cahaya# b0c4de
cahaya terang# ffffe0
kapur# 00ff00
hijau limau# 32cd32
linen# faf0e6
maroon# 800000
mediumaquamarine# 66cdaa
mediumblue# 0000cd
mediumorchid# ba55d3
mediumpurple# 9370db
seagreen sederhana# 3cb371
pelat sederhana# 7b68ee
mediumspringgreen# 00fa9a
mediumturquoise# 48d1cc
warna ungu sederhana# c71585
tengah malam# 191970
krim pudina# f5fffa
mistirosa# ffe4e1
moccasin# ffe4b5
navajowhite#ffdead
tentera laut# 000080
tempat lama# fdf5e6
zaitun# 808000
olivedrab# 6b8e23
jingga# ffa500
berjeragat# ff4500
orkid# da70d6
palegoldenrod# eee8aa
hijau pucat# 98fb98
paleturquoise#afeeee
pucat ungu# db7093
surat khabar# ffefd5
pic# ffdab9
peru# cd853f
merah jambu# ffc0cb
plum# dda0dd
serbuk serbuk# b0e0e6
ungu# 800080
rebeccapurple# 663399
merah# ff0000
bunga ros# bc8f8f
biru diraja# 4169e1
saddlebrown# 8b4513
ikan salmon# fa8072
coklat berpasir# f4a460
laut hijau# 2e8b57
kerang laut# fff5ee
sienna# a0522d
perak# c0c0c0
langit biru# 87ceeb
slateblue# 6a5acd
slategray# 708090
slategrey# 708090
salji#fffafa
springgreen# 00ff7f
besi keluli# 4682b4
Tan# d2b48c
kelopak# 008080
thistle# d8bfd8
tomato# ff6347
pirus# 40e0d0
ungu# ee82ee
gandum# f5deb3
putih#ffffff
asap putih# f5f5f5
kuning# ffff00
kuning hijau# 9acd32

Sumber Warna CSS yang lain

  • Tutorial Warna CSS dari W3Schools adalah gambaran keseluruhan ringkas topik, dengan contoh tambahan.
  • CSS Color Converter adalah alat dalam talian yang mengambil format warna dan menukarnya ke semua yang lain, serta menyediakan kemungkinan pilihan palet warna.
  • Rujukan Warna CSS dari Rangkaian Pembangun Mozilla adalah salah satu tempat terbaik untuk mendapatkan maklumat mengenai pelbagai standard dan spesifikasi warna.
  • Warna, Latar Belakang, dan Gradien: Menambah Keperibadian dengan CSS (2015), oleh Eric A Meyer, adalah buku hebat yang merangkumi warna CSS secara terperinci.

Menulis CSS Cekap

Menulis CSS Cekap

Menulis CSS yang cekap sangat penting. Pengguna internet hari ini mempunyai rentang perhatian yang sangat pendek, jadi semakin lama laman web anda dimuat, semakin tinggi kemungkinan mereka menekan butang kembali.

Sekiranya anda membina laman web yang mudah, CSS yang cekap tidak begitu penting. Tetapi laman web seperti itu semakin jarang berlaku. Sekiranya anda membina laman web yang besar dan kompleks, anda harus prihatin dengan kecekapan CSS anda.

Di bawah ini kami nyatakan mengapa CSS yang cekap penting, bagaimana menulis pemilih yang lebih cekap, dan menawarkan beberapa alat yang dapat membantu anda mengoptimumkan kod anda dengan lebih lanjut.

Mengapa Perkara CSS Cekap

Tidak mengambil kira kecekapan CSS semasa menulis kod anda boleh menjejaskan prestasi keseluruhan halaman anda dengan serius. Dan perkara terakhir yang anda mahukan ialah mempunyai laman web pemuatan lambat.

Matlamat anda adalah untuk membuat semudah mungkin bagi penyemak imbas membuat kod anda – bahkan penyemak imbas yang berjalan kurang efisien.

Terdapat argumen yang dibuat bahawa bukan tugas penulis untuk bimbang untuk mengoptimumkan pemilih, tetapi harus menjadi mesin mesin yang menyusun kod. Walaupun ini berlaku untuk tahap tertentu, tidak setiap pengguna akan menggunakan penyemak imbas moden.

Masih ada pengguna di seluruh dunia yang hanya mempunyai akses ke komputer dan penyemak imbas yang lebih lama. Anda tidak suka menghukum pengguna tersebut, hanya kerana mereka tidak mempunyai akses kepada teknologi terkini. Mungkin pada waktunya, ini akan berubah.

Tetapi, ingat pengguna anda semasa menulis kod adalah idea yang baik.

Pemilih Adalah Yang Paling Penting

Salah satu aspek terpenting dalam menulis CSS yang cekap ialah memahami bagaimana penyemak imbas membaca dan menyusunnya. Perkara besar yang perlu difahami ialah mereka membaca dari kanan ke kiri.

Ia bermula dengan pemilih kunci dan bergerak ke kiri untuk mencari nenek moyang dalam pemilih peraturan. Kemudian, ia terus bergerak ke kiri sehingga peraturan selesai, atau mengakibatkan ketidakcocokan.

Jadi, jika kod anda berbunyi ul > li a img, maka perkara pertama yang akan ditafsirkan adalah img.

Pemilih kunci adalah bahagian terakhir yang telah kami tetapkan hingga akhir pemilih.

Empat Jenis Pemilih CSS

Terdapat empat jenis pemilih CSS utama yang perlu anda perhatikan dan gunakan cara yang betul agar kod CSS anda cekap. Pemilih di bawah diperintahkan dari segi kecekapannya. Yang paling atas adalah yang paling cekap, dan yang paling rendah.

Pemilih ID

Pemilih ID merujuk kepada elemen HTML tertentu menggunakan atribut ID, dan terlihat seperti berikut:

# pelayaran utama

Dalam HTML, ini akan digunakan seperti berikut:

Pemilih Kelas

Pemilih kelas akan memilih elemen dalam atribusi kelas tertentu, dan kelihatan seperti berikut:

.pusat

Dalam HTML, ini akan digunakan seperti berikut:

Pemilih Teg

Pemilih teg kurang cekap daripada ID dan kelas, jadi mereka harus digunakan dengan lebih bijak. Tetapi mereka masih boleh berkesan dalam keadaan yang betul. Pemilih teg umumnya kelihatan seperti ini:

ul

Dalam HTML, tag hanya akan digayakan seperti yang ditentukan oleh CSS setiap kali tag digunakan (ul dalam hal ini).

Pemilih Sejagat

Pemilih universal boleh digunakan untuk elemen apa pun dalam dokumen anda. Untuk menulis CSS yang cekap, anda harus mengelakkan penggunaan pemilih sejagat apabila mungkin. Pemilih universal ditentukan oleh yang berikut:

*

Peraturan CSS yang Cekap Perlu Diingat

Terdapat beberapa peraturan utama yang perlu diingat yang akan membantu anda menulis CSS yang lebih cekap. Dengan memperhatikan peraturan ini, kod CSS anda akan dimuat lebih cepat dan berkinerja lebih baik di setiap penyemak imbas web di sekitar.

Jangan Gunakan Pemilih Keturunan

Pemilih keturunan adalah dua pemilih yang tidak dipisahkan oleh kombinator. Pemilih keturunan adalah pemilih yang paling tidak cekap, dan benar-benar boleh memberi kesan negatif terhadap prestasi.

Beberapa contoh pemilih keturunan yang tidak boleh anda gunakan, termasuk:

pengepala h3

tapak kaki p

.div badan

Jangan Tag ID-Kelayakan

Oleh kerana ID hanya boleh merujuk kepada satu elemen, tidak masuk akal untuk melayakkan mereka dengan tag khusus yang akan digunakan. Sebagai contoh,

li # navigasi kiri

Tidak perlu memberitahu penyemak imbas kepada tag mana pemilih akan digunakan. Sebaliknya, ini lebih berkesan:

# navigasi kiri

Perhatikan bahawa perkara yang sama berlaku untuk kelas, tetapi pada tahap yang lebih rendah. Oleh itu, jangan juga melayakkan kelas.

Gunakan Warisan CSS Sebanyak Mungkin

Pewarisan harta adalah perkara penting untuk dikuasai. Ketahui sifat mana yang akan diturunkan dari elemen ke elemen, dan biarkan mereka melakukan tugas mereka.

Contohnya, saiz fon diwarisi. Oleh itu, jika anda menetapkannya untuk badan dokumen, tidak perlu menetapkannya untuk tag p dan li.

Hadkan Peraturan Anda

Menambah terlalu banyak peraturan pada tag anda akan memperlahankan kod CSS anda, dan sangat menyukarkan proses pemadanan.

Sebagai contoh

badan .widget-kiri #widget

Ini adalah kod yang buruk. Terlalu banyak yang berlaku. Sebaliknya:

#widget

.widget-kiri

Ini jauh lebih cekap.

Melaksanakan petua di atas akan menjadikan kod CSS anda lebih cekap. Sekiranya anda ingin menguji kod anda atau mencari lebih banyak kaedah untuk menjadikannya cekap, maka periksa beberapa alat yang diserlahkan di bawah.

Alat untuk Meningkatkan CSS Anda

Sekiranya anda mengingati peraturan di atas, kod CSS anda akan lebih berkesan.

Tetapi, jika anda ingin mengoptimumkan kod CSS anda lebih jauh, ada alat yang akan membantu anda sampai di sana. Di bawah ini kami senaraikan beberapa alat yang akan membantu memampatkan CSS anda, menentukan pemilih, dan bahkan membuat ID anda untuk anda.

  • Ujian Tekanan CSS: ini sangat bagus kerana ia membuat penyesuaian mikro ke laman web anda, seperti menatal, mengezum, mengubah ukuran, dan banyak lagi. Tambahan, ia melakukan semua ini dalam masa kurang dari 30 saat. Ia kemudian menghantar laporan mengenai keberkesanan CSS anda kepada anda.
  • Tentukan ID CSS: pemuat CSS pek web adalah alat yang sangat berguna. Ini dapat membantu menentukan kelas dan ID, dan bahkan dapat melakukan pengoptimuman CSS untuk anda.
  • Kurangkan Pemilih CSS Anda: ini menunjukkan semua pemilih CSS yang ada bersama dengan pemilih elemen yang digunakan. Ini membolehkan anda mengurangkan jumlah pemilih yang anda gunakan, sehingga anda dapat mengurangkan beban memori keseluruhan anda. Dengan alat ini, anda boleh memasukkan URL apa pun, jadi anda juga dapat mempelajari laman web lain.
  • Kecilkan Kod CSS Anda: susut kod CSS anda yang ada. Semakin sedikit kod yang anda perlukan, semakin baik. Ini menyediakan tangkapan skrin “sebelum” dan “setelah”, sehingga Anda dapat melihat perubahan yang dibuat alat ini.
  • Memampatkan Fail CSS Anda: gzipping fail CSS anda akan membantu membersihkannya. Oleh itu, ia dapat mengurangkan ukuran keseluruhan tindak balas HTTP dan dengan itu masa tindak balas pelayan.

Menulis CSS yang cekap adalah idea yang baik

Sama ada anda memilih untuk mengoptimumkan CSS anda atau tidak. Tidak semestinya diperlukan dengan penyemak imbas moden hari ini. Namun, jika anda membuat laman web yang rumit, ada baiknya dilakukan.

Terlebih lagi, anda mungkin masih mempunyai pengguna yang mempunyai persediaan yang lebih tua dan idea yang bijak juga dapat memenuhi keperluan mereka. Mudah-mudahan, bahagian ini dapat membantu anda melakukannya dan menulis CSS yang lebih cekap.

Master CSS Dalam Talian

Master CSS Dalam Talian

Terdapat banyak tempat dalam talian di mana anda dapat menonton video, tutorial lengkap, dan bahkan kod dalam penyemak imbas semasa anda mempelajari CSS. Walaupun terdapat puluhan, jika tidak beratus-ratus, sumber yang ada, berikut adalah beberapa tempat percuma kegemaran kami untuk belajar tentang CSS.

Sekiranya anda benar-benar baru untuk CSS, Jangan Takut Internet adalah siri video mesra pemula yang memperkenalkan CSS dan HTML. Sekiranya anda bermula dari awal, ini adalah siri yang dihasilkan dengan baik yang tidak akan menakutkan mereka yang baru memulakan perjalanan untuk belajar CSS.

Sekiranya anda belum pernah menulis helaian gaya sebelum ini, tempat yang baik untuk menulis yang pertama ialah Tutorial CSS yang disediakan oleh World Wide Web Consortium (W3C). Tutorial ini tidak memberikan banyak penjelasan, jadi jika anda seorang pelajar yang praktikal, ini mungkin merupakan tempat yang ideal untuk memulakan.

Menulis HTML dan CSS menghendaki anda menggunakan penyunting teks, menyimpan fail dengan format dan tajuk yang betul, dan menggunakan penyemak imbas untuk melihat karya anda. Sekiranya anda lebih suka menjalani program yang membolehkan anda mengedit fail secara langsung di penyemak imbas anda, Codecademy betul-betul yang anda cari.

Sumber lain yang merangkumi asas yang sama dengan Codecademy, tetapi sumber yang memerlukan anda belajar bagaimana menggunakan editor teks dan cara menyimpan fail dalam format yang betul, adalah Belajar Kod HTML dan CSS oleh Shay Howe. Setelah anda menguasai asas-asasnya, program lanjutan juga tersedia.

Mengendalikan susun atur halaman adalah salah satu tugas paling sukar dan paling penting yang diselesaikan dengan CSS. Sekiranya anda menghadapi masalah untuk mengatur tata letak kawalan, tutorial dari Belajar Tata Letak hanya apa yang anda perlukan.

Rangkaian Pembangun Mozilla menawarkan tutorial CSS yang merangkumi semua fungsi asas CSS dengan cara yang akan mempersiapkan anda untuk beralih ke topik yang lebih mencabar.

Sekiranya anda mahukan asas yang kukuh dari mana anda dapat berkembang menjadi pembangun CSS yang lengkap, anda boleh melakukan jauh lebih buruk daripada tutorial MDN CSS.

Terakhir, tidak ada senarai sumber yang akan lengkap tanpa menyebut organisasi yang mendorong pengembangan CSS.

Walaupun tentunya bukan tutorial yang paling mudah dalam senarai ini, ia adalah komprehensif dan terperinci. Sekiranya matlamat anda adalah untuk mempelajari sedikit CSS, ini bukan tutorial untuk anda, tetapi jika anda memulakan perjalanan untuk menjadi pembangun CSS yang lengkap, ini adalah tutorial yang baik untuk mengikuti anda.

Inspirasi Reka Bentuk

Karya CSS yang Hebat

Sekiranya anda mencari inspirasi reka bentuk, atau ingin mengetahui apa yang boleh dilakukan oleh CSS, berikut adalah beberapa tempat untuk melihat karya CSS yang dipamerkan.

  • Creative Bloq telah mengumpulkan senarai dua puluh dua animasi CSS yang disusun ini. Semasa anda melihatnya, ingatlah bahawa banyak animasi ini juga menggunakan JavaScript selain CSS.
  • CSS Design Awards membuat senarai sepuluh animasi lengkap dengan demo dan tutorial sehingga anda dapat menerapkan konsep pada projek anda sendiri..
  • MDN DemoStudio adalah tempat di mana anda dapat melihat beratus-ratus demo CSS yang disusun sama ada mengikut populariti, jumlah tontonan, status tren, atau dengan melihat demo terbaru terlebih dahulu.
  • Sebilangan besar animasi yang dipilih untuk senarai sebelumnya dihoskan di Code Pen, dan menuju langsung ke pen akan memberi anda akses ke sejumlah besar animasi yang mengagumkan yang dibuat menggunakan HTML, CSS, dan JavaScript.
  • Sekiranya anda telah melihat semua animasi mewah yang anda ingin lihat, dan sebaliknya ingin melihat bagaimana CSS dapat digunakan untuk mengubah keseluruhan laman web sepenuhnya tanpa membuat satu perubahan pada HTML, lihat reka bentuk laman web elegan ini yang menekankan kehebatan CSS.

Perkataan Rasmi di CSS3

Perkataan Rasmi di CSS3

W3C adalah organisasi yang mendorong pengembangan standard web, termasuk modul CSS3. Semasa anda belajar CSS dan meningkatkan kemahiran anda, anda harus membiasakan diri dengan W3C, dan dokumentasi teknikal yang mereka tawarkan.

Halaman utama W3C CSS adalah pad pelancaran untuk semua perkara CSS di W3C. Dari halaman ini anda dapat mencari maklumat mengenai kerja pembangunan standard yang sedang berjalan.

Bacaan yang Disyorkan

Bacaan yang Disyorkan

Salah satu kaedah yang paling berkesan untuk mengembangkan pemahaman dan kepakaran yang lebih mendalam dengan CSS3 adalah dengan menggunakan pelbagai sumber dan kaedah pengajaran.

Sekiranya anda telah mencuba satu atau dua tutorial dan ingin mencuba kaedah tambahan, atau jika anda lebih suka menggunakan teks bertulis, berikut adalah beberapa teks CSS terbaik di pasaran:

  • CSS3 Untuk Pereka Web (2010), oleh Dan Cedarholm: Dengan kata pengantar oleh Jeffrey Zeldman, pengasas A List Apart, dan sokongan dari Chris Coyier dari CSS-Tricks, dan Eric Meyer, pengarang beberapa buku mengenai CSS, teks ini oleh Dan Cedarholm, pengasas bersama Dribbble, adalah standard emas untuk teks CSS3.
  • HTML dan CSS: Reka Bentuk dan Bina Laman Web (2011), oleh Jon Duckett: Teks ini merangkumi HTML dan CSS, dan merupakan salah satu pengenalan yang paling popular dan dihormati untuk kedua-dua topik.
  • Pelajari CSS dalam Satu Hari dan Belajarlah dengan Baik (2015), oleh Jamie Chan: Sekiranya anda seorang pemula CSS, dan ingin mengetahui asasnya dengan cepat, buku ini sesuai untuk anda.
  • CSS: The Missing Manual (2015), oleh David Sawyer McFarland: Teks ini tidak ditujukan semata-mata untuk pemula, melainkan merangkumi topik lanjutan seperti Flexbox dan penggunaan Sass. Sekiranya anda sudah bersedia untuk naik taraf dari status pemula, teks ini akan membantu anda sampai di sana.
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me