'Bagaimanakah CSS berfungsi di belakang tabir?'-tutorial css-php.cn

'Bagaimanakah CSS berfungsi di belakang tabir?'

WBOY

Lepaskan： 2023-09-17 10:33:02

ke hadapan

1441 orang telah melayarinya

Bagaimanakah CSS berfungsi di belakang tabir?

CSS (Cascading Style Sheets) ialah bahasa helaian gaya yang digunakan untuk menambah kesan visual pada halaman web. Ia digunakan untuk menerangkan susun atur halaman dan paparan elemen HTML. Anda boleh menjimatkan banyak masa dengan CSS. Gunakannya untuk mengurus reka letak berbilang halaman web pada masa yang sama. Ia membolehkan pembangun melaksanakan pelbagai sifat tersuai untuk elemen yang berbeza, sekali gus meningkatkan penampilan halaman web. Dalam artikel ini, kita akan belajar tentang CSS dan cara ia berfungsi.

CSS pada asasnya terbahagi kepada 3 jenis -

CSs luaran - Pada setiap halaman, gunakan elemen dan tag pautan> Jika anda ingin menukar berbilang halaman pada masa yang sama, gunakan helaian gaya luaran. Ia amat berguna dalam situasi ini kerana ia membolehkan anda menukar rupa keseluruhan tapak web dengan mengubah suai hanya satu fail.
Inline CSS - Jika satu halaman HTML mempunyai gaya yang unik, anda boleh menggunakan helaian gaya dalaman. Elemen gaya> dalam bahagian kepala mengandungi takrifan gaya dalaman.
CSS Dalaman - Untuk memberikan elemen individu rupa yang unik, gunakan gaya sebaris. Gunakan gaya sebaris dengan menambahkan atribut gaya pada elemen yang sesuai. Atribut gaya ialah bekas untuk sebarang sifat CSS.

Tatabahasa

selector{
   property: value;
}

Salin selepas log masuk

Contoh

Di bawah adalah contoh cara menggunakan CSS dalam halaman HTML. Di sini kita mempunyai CSS sebaris. Elemen h1 digariskan, manakala elemen div berwarna hijau.

<!DOCTYPE html>
<html>
<head>
   <title> Using CSS within a HTML page </title>
   <style>
      h1{
         text-decoration: underline;
      }
      div{
         width: 30%;
         height: 30px;
         background-color: green;
      }
   </style>
</head>
<body>
   <h1> Inline CSS </h1>
   <div> This is an example. </div>
</body>
</html>

Salin selepas log masuk

Mengapa kita perlu menggunakan CSS?

Jimat Masa- Ia menjimatkan banyak masa. Oleh kerana takrifan gaya CSS disimpan dalam fail CSS yang berasingan, menukar salah satu daripadanya boleh memberi kesan pada keseluruhan tapak web.
Berbilang Atribut - Berbanding dengan HTML biasa, CSS menyediakan pilihan yang lebih tepat untuk menentukan rupa dan rupa tapak web anda.
Pemuatan Halaman Pantas- Apabila menggunakan CSS, tidak semestinya perlu menulis atribut penanda HTML. Anda boleh menulis peraturan sekali untuk label dan gunakannya pada semua tika label itu. Memandangkan CSS menggunakan kurang kod, ia memuat turun lebih cepat.
Penyelenggaraan Laman Web- Laman web memerlukannya untuk penyelenggaraan. Jika kami perlu membuat pengubahsuaian global pada fail, kami hanya boleh menukar gaya dan semua komponen pada halaman web akan dikemas kini dengan serta-merta. Oleh kerana fleksibiliti fail CSS, reka bentuk tapak web boleh diubah suai dengan mudah.
Keserasian Berbilang Peranti- Kami boleh menggunakan CSS dengan versi bahasa sebelumnya kerana ia serasi secara tradisi dengan mereka. Oleh itu, jika aplikasi CSS dicipta menggunakan versi bahasa pengaturcaraan yang lebih awal dan pembangun menggabungkannya dengan kandungan pembangunan yang lebih baharu, CSS boleh disepadukan dengan mudah dengan pelarasan yang diperlukan, membolehkan pembangun berjaya mengemas kini kod sedia ada. Kandungan menggunakan CSS boleh menyesuaikan diri dengan pelbagai jenis peranti.

Kerja asas CSS

Proses sebenar mengira sifat CSS akhir untuk elemen HTML tertentu ialah siri langkah yang sangat kompleks -

Pengumpulan data

Pada peringkat ini, semua pengisytiharan gaya untuk elemen tertentu dikumpulkan daripada pelbagai sumber seperti ejen pengguna, pengarang dan pengguna. Pengisytiharan ini mesti ditapis dan disahkan untuk menentukan sama ada ia datang daripada helaian gaya yang kini digunakan pada dokumen ini dan sah dari segi sintaksis.

Lata

Perkataan CSS bermaksud Cascading Style Sheets, yang merupakan konsep asas CSS. Peringkat ini mesti difahami secara menyeluruh kerana ia adalah satu-satunya peringkat yang sangat dipengaruhi oleh pembangun sebagai sumber pengarang. Peringkat ini mengambil senarai pengisytiharan tidak tertib yang dikumpul dalam langkah sebelumnya dan menyusunnya dalam urutan keutamaan menurun menggunakan kriteria berikut -

Berdasarkan sumber perisytiharan (ejen pengguna, pengguna, pengarang, peralihan, animasi) dan! Gabungan nota penting.
Keistimewaan berdasarkan pemilih
Berdasarkan susunan di mana ia ditulis

Tetapkan nilai lalai

Jika tidak diisytiharkan, langkah ini dipanggil apabila cuba menetapkan nilai untuk sifat CSS elemen.

Tetap

Untuk fleksibiliti maksimum dalam reka bentuk responsif, kami menggunakan beberapa unit relatif (auto, em, rem, vh), URL relatif, peratusan atau kata kunci tertentu yang boleh dibaca manusia (kecil, biasa, tebal) . Peringkat ini akan cuba menyelesaikan seberapa banyak nilai atribut yang mungkin tanpa perlu meletakkan dokumen, melakukan pertanyaan rangkaian atau mendapatkan nilai dari tempat selain daripada induk.

Memformat

Peringkat ini akan memformat keseluruhan dokumen dan menyelesaikan kerja yang tinggal dari langkah sebelumnya dengan cuba mengira nilai teori mutlak yang digunakan dalam susun atur dokumen. Peringkat ini tertumpu terutamanya pada senario seperti penyelarasan relatif elemen, reka letak automatik dan reka letak Flex. Ia memerlukan banyak pengiraan tetapi menghasilkan nombor mutlak yang hampir boleh digunakan sepenuhnya untuk pelayar untuk digunakan.

Perubahan terakhir

Sebelum melukis, peringkat akhir akan melakukan beberapa pengubahsuaian berdasarkan persekitaran melayari, seperti enjin penyemak imbas, jenis media, ketumpatan piksel peranti atau sistem pengendalian. Membundarkan nombor titik terapung kepada nilai integer atau menukar saiz fon berdasarkan fon yang tersedia ialah dua perubahan biasa.

Kesimpulan

Memandangkan CSS melata ialah salah satu aspek CSS yang paling disalahfahamkan (dan selalunya menjadi punca banyak kesilapan), memahami cara ia berfungsi akan memberi anda kelebihan yang ketara dalam memastikan helaian gaya anda terurus. Walau bagaimanapun, semakin besar pemahaman tentang lata CSS, semakin besar tanggungjawabnya. Bahagian lata yang lebih khusus (seperti !important, gaya sebaris dan pemilih id) menghasilkan helaian gaya yang lebih sukar untuk diubah atau ditindih pada masa hadapan.

Atas ialah kandungan terperinci 'Bagaimanakah CSS berfungsi di belakang tabir?'. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!