Despre layout-uri de pagină CSS

From Joomla! Documentation

This page is a translated version of the page About CSS page layouts and the translation is 100% complete.

Other languages:
العربية • ‎বাংলা • ‎Deutsch • ‎English • ‎español • ‎فارسی • ‎français • ‎हिन्दी • ‎Bahasa Indonesia • ‎italiano • ‎Nederlands • ‎Nederlands (informeel)‎ • ‎português • ‎português do Brasil • ‎română • ‎русский • ‎中文(台灣)‎

Site-urile profesionale separă stilizarea de conținut. Sunt multe motive pentru a face acest lucru, însă, cel mai evident (pentru un programator) este posibilitatea de a controla modul în care arată un număr multiplu de pagini prin schimbarea unui singur fișier. Informațiile referitoare la stil includ: fonturi; fundaluri; imagini (care se repetă pe fiecare pagină); pozițita și dimensiunile elementelor de pe pagină. Fișierul dumneavoastră HTML va conține acum: informații despre header; o serie de elemente; textul site-ului dumneavoastră. Deoarece creați un template Joomla!, veți avea: unele informații din header, cod php care să ceară restul informațiilor din header; o serie de elemente; cod php care să ceară poziția fiecărui modul; cod php care să ceară conținutul principal.

Informațiile referitoare la stil sunt codate în CSS, listă de stiluri în cascadă, și sunt de obicei stocate în fișiere cu extensia .css. O pagină web conține un link către fișierul .css asociat acesteia, astfel încât un motor de căutare să poată găsi informația referitoare la stilul respectiv și să o aplice paginii. CSS poate fi deasemenea situat în interiorul unui fisier HTML între tagurile <style type="text/css"></style>.

Întregul cod CSS este aplicat unui element al paginii html/xml. Dacă doriți ca un stil să fie prezent pe toată pagina, ar trebui să îl aplicați elementului <body>. Puteți aplica stiluri oricărui element html cum ar fi <p>, <table> sau <div>. Pentru a stiliza un anumit element acesta trebuie să aibă un ID. De exemplu, pentru a aplica stiluri elementelor <div> care conțin titlul, mai întâi trebuie să includeți un ID în html - <div ID="title">.