10 exemples senzills de codi CSS que podeu aprendre en 10 minuts

10 exemples senzills de codi CSS que podeu aprendre en 10 minuts

Un cop hàgiu començat a llançar-vos en HTML, probablement us interessa afegir més cops visuals a les vostres pàgines web. CSS és la millor manera de fer-ho. CSS us permet aplicar canvis a tota la pàgina sense confiar en l'estil en línia.





A continuació, es mostren diversos exemples CSS senzills per mostrar-vos com fer alguns canvis bàsics d’estil a la vostra pàgina web.



1. Codi CSS bàsic per a un format fàcil de paràgrafs

L’estil amb CSS significa que no cal que especifiqueu un estil cada vegada que creeu un element. Només podeu dir que 'tots els paràgrafs haurien de tenir aquest estil particular' i esteu bé.





Suposem que voleu cada paràgraf (

, una de les etiquetes HTML que tothom hauria de saber) per ser una mica més gran de l'habitual. I amb text gris fosc, en lloc de negre.

Relacionat: El full de trucs HTML



El codi CSS per a això és:

p { font-size: 120%; color: dimgray; }

Senzill! Ara, sempre que el navegador fa un paràgraf, el text heretarà la mida (120 per cent del normal) i el color ('dimgray').



Si teniu curiositat per saber quins colors de text pla podeu utilitzar, consulteu-ho Llista de colors CSS de Mozilla.

2. Exemple CSS per canviar majúscules i minúscules

Voleu crear una designació per als paràgrafs que haurien d’estar en majúscules? Una mostra CSS per a això seria:



p.smallcaps { font-variant: small-caps; }

Per fer un paràgraf completament en majúscules, utilitzeu una etiqueta HTML una mica diferent. Això és el que sembla:

Your paragraph here.

Si afegiu un punt i un nom de classe a un element, s’especifica un subtipus d’aquest element definit per una classe. Podeu fer-ho amb text, imatges, enllaços i gairebé qualsevol altra cosa.

Si voleu canviar un conjunt de text a un cas concret, utilitzeu aquests exemples de codi CSS:

text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;

L'última majúscula de la primera lletra de cada frase.

Els canvis d’estil no es limiten als paràgrafs. Es pot assignar un enllaç a quatre colors diferents: el color estàndard, el color visitat, el color del cursor i el color actiu (que mostra mentre hi feu clic). Utilitzeu aquest codi de mostra CSS:

a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }

Amb els enllaços, cada 'a' va seguida de dos punts, no d'un punt.

Cadascuna d'aquestes declaracions canvia el color d'un enllaç en un context específic. No cal canviar la classe d’un enllaç per aconseguir que canviï de color.

Tot i que el text subratllat indica clarament un enllaç, de vegades sembla més agradable desfer-lo. Això s'aconsegueix amb l'atribut 'decoració de text'. Aquest exemple de CSS mostra com eliminar els subratllats dels enllaços:

a { text-decoration: none; }

Tot el que tingui l'etiqueta d'enllaç ('a') continuarà sense subratllar-se. Voleu subratllar-lo quan l’usuari hi passa el curs? Simplement afegiu:

a:hover { text-decoration: underline; }

També podeu afegir aquesta decoració de text als enllaços actius per garantir que el subratllat no desaparegui quan es faci clic a l'enllaç.

Voleu cridar més l'atenció al vostre enllaç? Un botó d’enllaç és una bona manera de fer-ho. Aquesta requereix algunes línies més:

a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; }

Expliquem aquest codi de mostra CSS.

La inclusió dels quatre estats d’enllaç garanteix que el botó no desaparegui quan un usuari hi faci clic o hi faci clic. També podeu establir diferents paràmetres per als enllaços de cursor i actius, per exemple, canviar el color del botó o del text.

El color de fons es defineix amb color de fons i el color del text amb color. El farciment defineix la mida del quadre --- el text està farcit de 10 px verticalment i 25 px horitzontalment.

L'alineació de text garanteix que el text es mostri al centre del botó, en lloc de desactivar-lo cap a un costat. La decoració de text, com en l'últim exemple, elimina el subratllat.

administrador de tasques desactivat per l'administrador de Windows 10

El codi CSS 'display: inline-block' és una mica més complicat. En resum, us permet definir l’alçada i l’amplada de l’objecte. També garanteix que comenci una nova línia quan s’insereixi.

6. Codi d'exemple CSS per crear un quadre de text

Un paràgraf senzill no és gaire emocionant. Si voleu ressaltar un element a la vostra pàgina, és possible que vulgueu afegir una vora. A continuació s’explica com fer-ho amb una cadena de codi CSS simple:

p.important { border-style: solid; border-width: 5px; border-color: purple; }

Aquest és senzill. Crea un límit morat sòlid, de cinc píxels d'ample, al voltant de qualsevol paràgraf de classe important. Per fer que un paràgraf hereti aquestes propietats, només cal declarar-ho així:

Your important paragraph here.

Això funcionarà independentment de la mida del paràgraf.

Hi ha molts estils de frontera diferents que podeu aplicar; en lloc de 'sòlid', intenta 'puntejat' o 'doble'. Mentrestant, l'amplada pot ser 'fina', 'mitjana' o 'gruixuda'. El codi CSS fins i tot pot definir el gruix de cada vora individualment, així:

border-width: 5px 8px 3px 9px;

Això es tradueix en una vora superior de cinc píxels, una vora dreta de vuit, una part inferior de tres i una mida de vora esquerra de nou píxels.

7. Centreu els elements amb el codi CSS bàsic

Per a una tasca comuna, centrar elements amb codi CSS és sorprenentment poc intuitiu. Un cop ho heu fet diverses vegades, és molt més fàcil. Teniu un parell de maneres diferents de centrar les coses.

Per a un element de bloc (normalment una imatge), utilitzeu l'atribut margin:

.center { display: block; margin: auto; }

Això garanteix que l'element es mostri com un bloc i que el marge de cada costat s'estableixi automàticament. Si voleu centrar totes les imatges en una pàgina determinada, fins i tot podeu afegir 'margin: auto' a l'etiqueta img:

img { margin: auto; }

Per saber per què funciona d'aquesta manera, consulteu el fitxer Explicació del model de caixa CSS al W3C .

Però, què passa si voleu centrar el text amb CSS? Utilitzeu aquest exemple de CSS:

.centertext { text-align: center; }

Voleu fer servir la classe 'centre de text' per centrar el text en un paràgraf? Simplement afegiu aquesta classe al

etiqueta:

This text will be centered.

8. Exemples CSS per ajustar el farciment

El farciment d'un element especifica la quantitat d'espai que hauria de ser a cada costat. Per exemple, si afegiu 25 píxels de farciment a la part inferior d'una imatge, el text següent s'enfonsarà 25 píxels cap avall. Molts elements poden tenir encoixinat, no només imatges.

Suposem que voleu que cada imatge tingui 20 píxels de farciment als costats esquerre i dret i 40 píxels a la part superior i inferior. L'execució de codi CSS més bàsica per a això és:

img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; }

Tanmateix, hi ha una instrucció CSS ​​més curta que presenta tota aquesta informació en una sola línia:

img { padding: 40px 25px 40px 25px; }

Això configura els farcits superior, dret, inferior i esquerre al nombre correcte. Gràcies a l’ús de només dos valors (40 i 25), podeu fer-lo encara més curt:

img { padding: 40px 25px }

Quan utilitzeu només dos valors, el primer es defineix per a la part superior i inferior, mentre que el segon serà a l'esquerra i a la dreta.

9. Ressalteu les files de la taula amb codificació CSS

El codi CSS fa que les taules semblin molt més boniques que les quadrícules predeterminades. És senzill afegir colors, ajustar les vores i fer que la taula respongui a les pantalles del mòbil. Aquest senzill exemple de CSS mostra com ressaltar les files de la taula quan es passa el ratolí per sobre.

tr:hover { background-color: #ddd; }

Ara, sempre que passeu el ratolí per sobre d’una cel·la de la taula, aquesta fila canviarà de color. Per veure algunes de les altres coses interessants que podeu fer, consulteu el Pàgina del W3C a les taules CSS de luxe .

10. CSS d'exemple per canviar les imatges entre transparents i opacs

El codi CSS també us pot ajudar a fer coses interessants amb imatges. Aquí teniu un exemple CSS per mostrar imatges amb una opacitat inferior a la total, de manera que apareguin lleugerament 'blanquejades'. Quan passeu el ratolí per sobre de les imatges, arriben a la seva total opacitat:

img { opacity: 0.5; filter: alpha(opacity=50); }

L'atribut 'filtre' fa el mateix que 'opacitat', però Internet Explorer 8 i versions anteriors no reconeixen la mesura de l'opacitat. Per als navegadors antics, és una bona idea incloure’l.

Ara que les imatges són lleugerament transparents, podeu fer-les totalment opaques amb el pas del ratolí:

img:hover { opacity: 1.0; filter: alpha(opacity=100); }

10 exemples CSS amb codi font

Amb aquests exemples de codi CSS, hauríeu de tenir una idea molt millor de com funciona CSS. Plantilles CSS pot ajudar, però comprendre els elements crus és vital.

Aquests 10 exemples senzills de codi CSS resumits:

  1. Format de paràgraf fàcil
  2. Canviar lletra majúscula
  3. Canvieu els colors de l'enllaç
  4. Elimina els subratllats de l'enllaç
  5. Feu un botó d'enllaç
  6. Creeu un quadre de text
  7. Alineació central dels elements
  8. Ajusta el farcit
  9. Ressalteu les files de la taula
  10. Feu que les imatges siguin opaques

En tornar-los a revisar, notareu diversos patrons que podeu aplicar al codi futur. I és llavors quan sabeu que realment heu començat a convertir-vos en un mestre CSS. Però recordar-ho pot ser difícil. És possible que vulgueu afegir aquesta pàgina a les adreces d'interès com a referència futura.

Compartir Compartir Tweet Correu electrònic Full de trucs de les propietats essencials de CSS3

Domina la sintaxi CSS essencial amb el nostre full de trucs de propietats CSS3.

Llegiu a continuació Temes relacionats
  • Programació
  • Web Design
  • CSS
  • Scripting
Sobre l'autor Christian Cawley(1510 articles publicats)

Editor adjunt de seguretat, Linux, bricolatge, programació i tecnologia explicada, i productor de podcasts realment útils, amb una àmplia experiència en suport d'escriptori i programari. Col·laborador de la revista Linux Format, Christian és un fabricant de Raspberry Pi, un amant de Lego i un fan dels jocs retro.

Més de Christian Cawley

Subscriu-te al nostre butlletí

Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.

Feu clic aquí per subscriure-us