CSS és un full d’estil en cascada, que és un llenguatge per descriure l’aspecte de les pàgines web. Un dels principals avantatges de CSS és la possibilitat de substituir el disseny de taula per disseny de blocs.
És necessari
Editor de codi HTML
Instruccions
Pas 1
Creeu el primer bloc. En forma HTML, semblarà una etiqueta div amb l'identificador 'block01'. Aquí, l’identificador block01 indica que a la descripció CSS s’especifiquen totes les propietats d’aquest bloc per al selector # block01.
Pas 2
Descriviu el bloc a CSS. Als estils CSS, especifiqueu el nom de l’identificador (# block01) i, entre claus, descriviu-ne els paràmetres: amplada, posicionament, desplaçament, color de fons, etc. Per exemple, podria tenir aquest aspecte: # block01 {width: 150px; alçada: 150 px; posició: absoluta; superior: 0 px; esquerra: 0 px; color de fons: rosa}. Aquesta descripció suposa que el quadre tindrà 150 píxels de llarg i 150 píxels d’amplada, que estarà rígidament situat a l’angle superior esquerre del document i que el seu fons serà de color rosa.
Pas 3
Doneu al bloc un posicionament relatiu. Si no feu servir un posicionament absolut, sinó relatiu a la descripció CSS, podeu col·locar blocs no amb un ajust rígid a una quadrícula de coordenades, sinó en relació amb altres blocs ja existents. Per fer-ho, canvieu la posició del codi: absolut; superior: 0 px; esquerra: 0px per posició: relativa; superior: 200 px; esquerra: 100 px.
Pas 4
Doneu un arrodoniment al bloc. A CSS, la declaració de radi de frontera és la responsable. Afegiu el codi següent al full d'estil: border-radius: 8px. Ara el bloc tindrà cantonades arrodonides. Si només voleu arrodonir algunes cantonades, descriviu el radi per separat per a cadascuna d'elles: border-radius: 8px 8px 0px 0px.
Pas 5
Doneu un cop al bloc. Per ressaltar l'esquema d'un bloc amb una línia prima, afegiu el codi següent a la seva descripció CSS: border-top: 1px negre ratllat. Aquesta instrucció significa que la vora del bloc serà negra i tindrà un gruix d’un píxel. En aquest cas, la mateixa línia de contorn es mostrarà com una línia discontínua (discontínua: una línia de punts, amb punts, amb punts, amb una línia contínua).
Pas 6
Definiu les propietats del bloc restants. Especifiqueu a la descripció CSS quina tipografia s’ha d’utilitzar per al text dins del bloc, quina hauria de ser la mida de la font, l’alineació i la sagnia de les vores del bloc. Aquestes propietats es descriuen a les definicions font-family, font-size, text-align i padding.
Pas 7
Podeu utilitzar la propietat float per personalitzar el flux d'un bloc sobre un altre. Si l'establiu a "esquerra", la resta d'elements fluiran al voltant del bloc de l'esquerra i "dreta" - a la dreta. Si definiu el valor flotant com a "cap", l'alineació de blocs no s'establirà. La propietat clear de CSS impedeix que el bloc flueixi cap a la dreta, l’esquerra o els dos costats i anul·la la sentència float.
