Susun atur dan pemformatan CSS

Dokumen ini menerangkan susun atur dan pemformatan CSS, membezakannya dengan kaedah berasaskan jadual yang lebih lama. Ia menggunakan penjelasan ringkas mengenai Model Objek Dokumen (DOM) dan model kotak CSS untuk menggambarkan bagaimana pelayar membuat laman web. Artikel itu kemudian memberikan jawapan kepada soalan yang sering ditanya (Soalan Lazim) mengenai susun atur dan pemformatan CSS.

Walaupun CSS1 menawarkan keupayaan susun atur grafik terhad, CSS2 dan CSS3 memperluaskan ciri -ciri ini, memberikan alternatif yang lebih kuat kepada jadual susun atur dan markup persembahan. Pelayar membuat dokumen HTML dalam dua peringkat: parsing dan rendering. Parsing melibatkan mewujudkan pokok dom dari markup HTML.

Pertimbangkan contoh HTML ini:

<title>Widgets</title><h1 id="Widgets">Widgets</h1>
<p>Welcome to Widgets, the number one company in the world for selling widgets!</p>

ini diterjemahkan ke pokok dom (nod teks yang ditinggalkan untuk keringkasan):

Pokok DOM terdiri daripada nod (nod elemen dan nod teks). Node akar (sentiasa

elemen) cawangan ke html dan head, selanjutnya bercabang ke dalam nod kanak -kanak. Hubungan antara nod termasuk ibu bapa dan anak, nenek moyang, dan adik beradik. body

Selepas pembinaan DOM dan parsing CSS, fasa rendering bermula. Setiap nod DOM diberikan sebagai satu atau lebih kotak CSS segi empat tepat (kotak blok atau kotak sebaris, dengan subtipe). Lembaran gaya ejen pengguna biasanya menyerahkan kotak blok ke unsur-unsur peringkat blok dan kotak sebaris ke unsur-unsur sebaris, walaupun harta

boleh mengatasi ini. Yang penting, CSS tidak mengubah markup HTML; Pembezaan blok/inline ditakrifkan oleh HTML DTD. display

Soalan -soalan yang sering ditanya:

Q: Apakah perbezaan antara susun atur dan pemformatan CSS?

A: Susun atur menyangkut susunan elemen (kedudukan, saiz, penjajaran) pada halaman (tajuk, footers, sidebars). Pemformatan memberi tumpuan kepada penampilan visual (warna, fon, latar belakang, sempadan, jarak).

Q: Bagaimana untuk membuat susun atur CSS yang responsif? A: Gunakan pertanyaan media (gaya untuk peranti yang berbeza), susun atur berasaskan grid fleksibel (peratusan bukan unit tetap), dan imej/media fleksibel (unit relatif).

Q: Apakah model susun atur CSS yang berbeza?

A: Model blok (unsur-unsur peringkat blok), model sebaris (teks), model jadual (data tabular), model kedudukan (kedudukan eksplisit), dan model flex (susun atur kotak fleksibel).

Q: Bagaimana menggunakan CSS untuk pemformatan teks?

A: Gunakan ,

,

, font-family, font-size, font-weight, dan sifat warna. text-align text-decoration text-transform Q: Apakah model kotak CSS?

A: Konsep asas yang menggambarkan pengagihan ruang di sekitar unsur -unsur. Setiap elemen adalah kotak segi empat tepat yang terdiri daripada kandungan, padding, sempadan, dan lapisan margin.

Q: Bagaimana cara memformat senarai dengan CSS?

A: Gunakan list-style-type, list-style-position, list-style-image, padding, dan margin sifat.

Q: Apakah grid css dan flexbox?

A: Sistem susun atur moden. Grid adalah dua dimensi (baris dan lajur), manakala Flexbox adalah satu dimensi (baris atau lajur). Kedua -duanya responsif.

Q: Bagaimana cara memformat jadual dengan css?

A: Gunakan sempadan, padding, latar belakang, text-align, dan vertical-align sifat.

q: Perbezaan antara unsur -unsur inline dan blok?

A: Unsur -unsur sebaris tidak memulakan baris baru dan hanya mengambil lebar yang diperlukan (mis.,

, <span></span>). Unsur -unsur blok memulakan baris baru dan lebar lebar penuh (mis., <a></a>, <div>). <code><h1></h1>

Q: Bagaimana cara memformat pautan dengan css?

A: Gunakan

, color, text-decoration, dan kelas pseudo (background-color, hover, active). visited