Cum se utilizează Opțiunile de Layout în panoul de proprietăți CSS al Dreamweaver - dummies

În partea de sus a panoului CSS Designer Properties găsiți de obicei proprietățile CSS folosit pentru a crea machete de pagini. Utilizați aceste opțiuni pentru a specifica înălțimea, lățimea, alinierea, poziționarea și spațierea. Aceste setări sunt ideale pentru a crea machete de pagini cu stiluri de clasă și ID pentru a face lucruri precum alinierea imaginilor și a etichetelor de poziție pentru a crea machete de mai multe coloană.

Puteți utiliza opțiunile de dispunere din panoul Proprietăți CSS pentru a seta aceste valori:

• Lățime: Specificați o lățime pentru orice element care poate avea dimensiunile specificate, cum ar fi o etichetă. Opțiunile de dimensiune sunt pixel (px), punct (pt), pica (pc), procent (%), em, rem, ex și ch.

• Înălțime: Specificați o înălțime pentru orice element care poate avea dimensiunile specificate.

  • Min și Max Lățime: Specificați lățimile minime și maxime pentru etichete și alte elemente de bloc. Aceste opțiuni sunt utile atunci când specificați lățimea ca procent din fereastra browserului. De exemplu, puteți seta lățimea designului la 80% din fereastra browserului și apoi setați o lățime maximă de 1000 px pentru a împiedica aspectul să se întindă mai mult de 1000 de pixeli.

  • Înălțimea minimă și maximă: Specificați înălțimile minime și maxime pentru etichete și alte elemente de bloc.

  • Margine: Setați spațiul în jurul unui element. Marginile pot fi utilizate pentru a crea spațiu între marginea unui element și alte elemente de pe pagină, cum ar fi între o imagine și un text sau între două etichete. Puteți stabili marginea separată pentru partea superioară, dreaptă, partea de jos și spre stânga. Suprafața este măsurată în pixeli, puncte, inci, centimetri, milimetri, picas, ems, exs și procente.

  • Plăcuță: Setează spațiul din interiorul unui element. De exemplu, puteți utiliza un strat de umplutură pentru a crea spațiu între marginile unei etichete și conținutul acesteia. Puteți seta separarea separată pentru partea superioară, dreapta, partea de jos și spre stânga. Suprafața este măsurată în pixeli, puncte, inci, centimetri, milimetri, picas, ems, exs și procente.

    Reglarea umpluturii și spațierea marginilor pot fi dificilă. Atunci când adăugați margini și elemente de umplutură unui element, cum ar fi o imagine sau o etichetă, creșteți mărimea globală a elementului respectiv și spațiul necesar în aspect.

• Poziție: Opțiunea Poziție, disponibilă din partea inferioară a secțiunii Layout a panoului Properties, modifică modul în care elementele sunt poziționate pe o pagină. Poziționarea poate schimba dramatic modul în care elementele de nivel bloc (de exemplu, tabel, listă, antet, paragraf și etichete) apar într-un browser.

  • Moștenire: Nu este necesar să specificați această opțiune implicită. Cu excepția cazului în care este selectată o altă opțiune, fiecare element moștenește poziționarea elementului părinte.

  • Static: Plasați conținutul în locația acestuia în fluxul documentului. În mod implicit, toate elementele HTML care pot fi poziționate sub sunt statice. Absolută:

  • Utilizați coordonatele de sus și de stânga pentru a controla poziția unui element în raport cu colțul din stânga sus al ferestrei browserului sau colțul din stânga sus al unui element care conține elementul. Fix:

  • Poziționați un element în raport cu colțul din stânga sus al browserului. Conținutul unui element care utilizează poziționarea fixă ​​rămâne constant chiar dacă utilizatorul scroll în jos sau de-a lungul paginii. Relativ:

  • Utilizați o poziție relativă la punctul în care introduceți elementul în pagină sau relativ la containerul său. Float:

    

  • Aliniați elemente, cum ar fi imagini și etichete, la stânga sau la dreapta unei pagini sau a altui container, cauzând text sau alte elemente care se înfășoară în jurul acesteia. Faceți clic pe pictogramele din câmpul Float pentru a specifica următoarele patru opțiuni: Moștenire, Dreapta, Stânga sau Niciuna. Clear:

  • Împiedicați conținutul plutitor să suprapună o zonă spre stânga sau spre dreapta sau spre ambele părți ale unui element. Această opțiune este utilă atunci când un element plutitor, cum ar fi o etichetă folosită pentru a crea o bară laterală, suprapune un alt element la nivel de bloc, cum ar fi o etichetă folosită pentru a crea subsolul unei pagini. Overflow-x și -y:

  • Spuneți browser-ului cum să afișeze conținutul unui element dacă containerul, cum ar fi o etichetă, nu poate să se potrivească înălțimii sau lățimii întregului element. Opțiunile de suprapunere sunt Vizibile:

  • Mențineți conținut, cum ar fi o imagine sau un text, vizibil, chiar dacă acesta se extinde dincolo de înălțimea sau lățimea definită a unui container. Ascuns:

  • Reduceți conținutul dacă depășește dimensiunea containerului. Această opțiune nu oferă bare de defilare. Derulați:

  • Adăugați bare de defilare în container, indiferent dacă conținutul său depășește dimensiunea elementului. Auto:

  • Faceți barele de derulare afișate numai atunci când conținutul unui container depășește limitele sale. Afișați:

• Indicați dacă sau cum să faceți un element într-un browser. De exemplu, schimbați poziționarea unei liste neordonate de la orizontală la verticală prin alegerea Inline sau ascunderea unui element, făcându-l invizibil, selectând None. Puteți utiliza opțiunea Afișare cu o limbă de scriptare pentru a modifica dinamic afișarea elementelor. Vizibilitate:

• Controlați dacă browserul afișează sau nu un element. Opțiunile Vizibilitate sunt Moștenire:

  • Elementul are vizibilitatea elementului în care este conținut (implicit). Vizibil:

  • Elementul este afișat. Ascuns:

  • Elementul nu este afișat. Reducere:

  • Pentru utilizarea cu tabele HTML. Restrângerea poate fi utilizată pentru a elimina o coloană sau un rând fără a afecta restul aspectului tabelului. Z-Index:

• Controlați poziția unui element pe coordonatul Z, care controlează ordinea de stivuire a elementelor în raport unul cu celălalt.Elementele cu numere mai înalte se suprapun cu elemente cu numere mai mici. Opacitate:

• Controlează nivelul de opacitate pentru un element de la 0. 0 (complet transparent) la 1. 0 (complet opac). De exemplu, dacă intrați. 5 în câmpul de opacitate, opacitatea unui element va fi redusă la 50%.