Disseny

This translation is incomplete. Please help translate this article from English.

Aquesta és la 12th secció del tutorial CSS Getting Started descriu algunes maneres d'ajustar el disseny del document. Es canvia el disseny del vostre document d'exemple.

Informació: Disseny

Feu servir CSS per especificar diversos efectes visuals que canvïin el disseny del document. Algunes de les tècniques especifiques de disseny son avançades, i van més enllà de l'àmbit d'aquest tutorial bàsic.

En dissenyar una presentació que tingui un aspecte similar en diferents navegadors, la vostre fulla d'estil interactua amb la fulla d'estil i el motor de disseny predeterminats del navegador de formes que poden ser complexes. Aquest és també un tema avançat, que va més enllà de l'àmbit d'aquest tutorial bàsic.

Aquesta pàgina descriu algunes tècniques simples que podeu intentar.

Estructura del document

Si voleu controlar el disseny del document, llavors és possible que hagiu de canviar la seva estructura.

El llenguatge de marcat del document podria tenir etiquetes d'ús general per a la creació de l'estructura. Per exemple, en HTML podeu utilitzar l'element <div> per crear l'estructura.

Exemple

En el vostre document d'exemple, els paràgrafs numerats (Numbered paragraphs), en el marc del segon epígraf, no tenen un contenidor propi.

La vostre fulla d'estil no pot dibuixar una vora al voltant d'aquests paràgrafs, perquè no hi ha cap element per especificar en el selector.

Per solucionar aquest problema estructural, es pot afegir una etiqueta <div> al voltant dels paràgrafs. Aquesta etiqueta és única, pel que pot ser identificada per un atribut id:

<h3>Numbered paragraphs</h3>
<div id="numbered">
  <p>Lorem ipsum</p>
  <p>Dolor sit</p>
  <p>Amet consectetuer</p>
  <p>Magna aliquam</p>
  <p>Autem veleum</p>
</div>

Ara a la vostre fulla d'estil podeu utilitzar una regla per especificar les vores al voltant de les dues llistes:

ul, #numbered {
  border: 1em solid #69b;
  padding-right:1em;
}

El resultat és el següent:

(A) The oceans

  • Arctic
  • Atlantic
  • Pacific
  • Indian
  • Southern

(B) Numbered paragraphs

1: Lorem ipsum

2: Dolor sit

3: Amet consectetuer

4: Magna aliquam

5: Autem veleum

Unitats de mida

Fins ara, en aquest tutorial, s'han especificat les mides en píxels (px). Aquestes són apropiades, en determinats casos, en un dispositiu de visualització com una pantalla d'ordinador. Però quan l'usuari canvia la mida de la font, el disseny pot semblar inadequat.

Per a molts propòsits, és millor especificar les mides com un percentatge o en ems (em). Un em és nominalment la mida de la font actual (l'amplada d'una lletra m). Quan l'usuari canvia la mida de la lletra, el seu disseny s'ajusta automàticament.

Exemple

La vora de l'esquerra d'aquest text té la mida definida en píxels.

La vora de la dreta té la mida definida en ems.

En el vostre navegador, al canviar la mida de la font veureu com la vora de la dreta s'ajusta, però la vora de l'esquerra no ho fa:

RESIZE ME PLEASE
Més detalls

Per a altres dispositius, altres unitats de longitud són les adequades.

Hi ha més informació sobre això en una pàgina posterior d'aquest tutorial.

Per als detalls complets dels valors i les unitats que es poden utilitzar, consulteu Valors en l'especificació CSS.

Disposició del text

Dues propietats defineixen com el contingut d'un element és alineat. Els podeu utilitzar per realitzar ajustos sencills en el disseny:

text-align
Alinea el contingut. Utilitzeu un d'aquests valors: left, right, center, justify
text-indent
Sagna el contingut en una quantitat que especifiqueu.

Aquestes propietats s'apliquen a qualsevol text contingut en l'element, no només al text real. Recordeu que són heretats pels fills de l'element, així que pot ser que hagiu de desactivar-los explícitament en els fills per evitar resultats sorprenents.

Exemple

Per centrar les capçaleres:

h3 {
  border-top: 1px solid gray;
  text-align: center;
}

Resultant:

(A) The oceans

En un document HTML, el contingut que es veu per sota d'una capçalera no està estructuralment contingut per la capçalera. Així que quan s'alinea una capçalera com aquesta, les etiquetes sota de l'encapçalament no hereten l'estil.

Flotants

La propietat float força un element cap a l'esquerra o cap a la dreta. Aquesta és una forma senzilla per controlar la seva posició i mida.

La resta del contingut del document flueix normalment al voltant de l'element flotant. Això es pot controlar mitjançant l'ús de la propietat clear en altres elements per fer que es quedin allunyats dels flotants.

Exemple

En el vostre document d'exemple, les llistes s'estenen a través de la finestra. Això es pot evitar fent que flotin cap a l'esquerra

Per mantenir les capçaleress en el seu lloc, també heu d'especificar que es mantinguin allunyades dels flotants de la seva esquerra:

ul, #numbered {float: left;}
h3 {clear: left;}

El resultat és el següent:

(A) The oceans

  • Arctic
  • Atlantic
  • Pacific
  • Indian
  • Southern

(B) Numbered paragraphs

1: Lorem ipsum

2: Dolor sit

3: Amet consectetuer

4: Magna aliquam

5: Autem veleum

(Una mica de farciment (padding) es necessita a la dreta de les caixes, on la vora (border) està massa a prop del text.)

Posicionament

Podeu definir la posició d'un element de quatre maneres, especificant la propietat position i un dels següents valors.

Aquestes són les propietats avançades. És possible utilitzar-les en formes simples, és per això que s'esmenten en aquest tutorial bàsic. Però el seu ús per a dissenys complexos pot ser difícil.

relative
La posició de l'element es desplaça respecte a la seva posició normal. Utilitzeu aquesta opció per a desplaçar un element en una quantitat especificada. De vegades es pot utilitzar el marge de l'element per aconseguir el mateix efecte.
fixed
La posició de l'element és fix. Definir la posició de l'element respecte a la finestra del document. Fins i tot si la resta del document es desplaça, l'element roman fix.
absolute
La posició de l'element es fixa en relació amb un element pare. Solsament un pare que estugui posicionat amb relative, fixed o absolute. Es pot fer que qualsevol element pare sigui adequat especificant position:relative; però sense especificar cap canvi.
static

El valor per defecte. Utilitzeu aquest valor si cal desactivar el posicionament de manera explícita.

Juntament amb aquests valors de la propietat position (a excepció de static), especifiqueu una o més de les propietats: top, right, bottom, left, width, height per identificar on voleu que aparegui l'element, i potser també la seva grandària.

Exemple

Per situar dos elements en un sobre l'altre, crear un contenidor pare en el vostre document amb els dos elements en el seu interior:

<div id="parent-div">
  <p id="forward">/</p>
  <p id="back">\</p>
</div>

En la vostre fulla d'estil, fer la posició dels pares relative. No hi ha necessitat d'especificar qualsevol canvi real. Fer la posició dels fills absolute:

#parent-div {
  position: relative;
  font: bold 200% sans-serif;
}

#forward, #back {
  position: absolute;
  margin:0px; /* no margin around the elements */
  top: 0px; /* distance from top */
  left: 0px; /* distance from left */
}

#forward {
  color: blue;
}

#back {
  color: red;
}

El resultat es veu així, amb la barra invertida a la part superior de la barra inclinada:

/

\

 
Més detalls

La història completa de posicionament ocupa dos capítols complexes en l'especificació CSS Model de format Visual i Detalls del model de format visual.

Si esteu dissenyant fulles d'estil per a treballar en molts navegadors, llavors també cal tenir en compte les diferències en la manera com els navegadors interpreten la norma, i potser els errors en determinades versions de navegadors particulars.

Acció: Especificació del disseny

  1. Canvieu el document d'exemple, doc2.html, i la fulla d'estil, style2.css, utilitzant els exemples de més amunt en la secció Estructura del document i Flotants.
  2. En l'exemple Flotants afegir farciment per separar el text de la vora dret en 0,5 em.
Reptes

Modifiqueu el document d'exemple, doc2.html, afegint aquesta etiqueta prop del final, just abans de </body>.

<img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin">

Si no heu descarregat l'arxiu d'imatge al principi d'aquest tutorial, descarregar-ho ara, i ho col·loqueu en el mateix directori que els altres arxius d'exemple:

Image:Yellow-pin.png

Predir on la imatge apareixerà en el document. A continuació, actualitzeu el navegador per veure si és correcte.

Afegiu una regla a la fulla d'estil que col·loqui la imatge a la part superior dreta del document.

Actualitzeu el navegador i fer la finestra petita. Comproveu que la imatge es queda a la part superior dreta, fins i tot quan es desplaça el document

(A) The oceans

  • Arctic
  • Atlantic
  • Pacific
  • Indian
  • Southern

(B) Numbered paragraphs

1: Lorem ipsum

2: Dolor sit

3: Amet consectetuer

4: Magna aliquam

5: Autem veleum

 

Yellow map pin

 Veure la solució per el repte.

I ara què?

S'han cobert gairebé tots els temes d'aquest tutorial bàsic de CSS. La pàgina següent descriu selectors més avançats per a regles CSS, i algunes formes específiques en el disseny de taules.

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,