Com definir una imatge de fons a CSS

Com definir una imatge de fons a CSS

Crear un lloc web és una manera excel·lent d’expressar-se. Tot i que hi ha moltes eines de creació de llocs web, escriure-ho vosaltres mateixos és una manera divertida d’aprendre més sobre com funcionen els llocs web entre bastidors. Un bon projecte per a principiants és crear un lloc web i afegir una imatge de fons amb CSS. Aquest projecte us farà funcionar amb HTML i CSS.





Què és CSS?

CSS significa Cascading Style Sheet. És un llenguatge de programació que us permet dissenyar llenguatges de marca. Un d’aquests llenguatges de marcatge és HTML o Hyper-Text Markup Language. L’HTML s’utilitza per crear llocs web. Tot i que podeu controlar alguns estils del lloc web mitjançant HTML, CSS ofereix moltes més opcions de control i disseny.



Creació d’un lloc web bàsic amb HTML

Com que CSS és només un llenguatge d’estil, per utilitzar-lo, primer necessitem alguna cosa per estilitzar. Un lloc web molt bàsic serà suficient perquè comencem a jugar amb CSS. A la nostra pàgina es mostrarà 'Hello World'.









Hello World



En cas que no conegueu l'HTML, repassem ràpidament el que fan tots els elements. Com es va esmentar, HTML és un llenguatge de marques, el que significa que utilitza etiquetes per marcar què és el text. Sempre que veus una paraula envoltada de és una etiqueta. Hi ha dos tipus d’etiquetes, una que marca el començament d’una secció mitjançant una i una que marca el final d’una secció mitjançant. El text d'una secció també pretén facilitar la visió d'aquesta distinció.



En el nostre exemple, tenim quatre etiquetes. El html l'etiqueta indica quins elements formen part del lloc web. El cap L'etiqueta conté la informació de capçalera que no es mostra a la pàgina, però que és necessària per crear-la. Tots els elements mostrats es troben entre el fitxer cos etiquetes. Només tenim un element mostrat, el pàg etiqueta. Indica al navegador web que el text és un paràgraf.

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



Addició de CSS a HTML

Ara que tenim una pàgina senzilla, podem personalitzar l’estil amb CSS. La nostra pàgina és bastant senzilla en aquest moment i no podem fer molt, però comencem per destacar el nostre paràgraf perquè puguem distingir-lo del fons afegint una vora.





Hello World






Ara, el nostre paràgraf estarà envoltat per una vora negra. En afegir una descripció d’estil a CSS a la nostra etiqueta de paràgraf, es va indicar al lloc web com donar estil al paràgraf. Podem afegir més descripcions. Augmentem l'espai en blanc o el farciment al voltant del nostre paràgraf i centrem el text.





Hello World




El nostre lloc web té un aspecte millor, però el nostre HTML comença a semblar desordenat amb totes aquestes descripcions de l’etiqueta de paràgraf. Podem moure aquesta informació a la nostra capçalera. La nostra capçalera és la informació que necessitem per mostrar correctament el lloc web.




p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}



Hello World



Ara el nostre HTML és més fàcil de llegir. Notareu que hem hagut de canviar algunes coses al voltant. L’etiqueta d’estil indica la informació d’estil del navegador web, però també què s’ha d’estilitzar. En el nostre exemple, hem utilitzat dues maneres diferents de dir-li què estil. El pàg a l’etiqueta d’estil li indica al navegador web que apliqui aquest estil a totes les etiquetes de paràgraf. El #paràgraf La secció li indica que només els elements d'estil amb l'identificador el nostre paràgraf . Adona't que identificador es va afegir informació a l’etiqueta p del nostre cos.

xbox one vs xbox series x

Importació d’un fitxer CSS al vostre lloc web

Afegir la informació d’estil a la capçalera facilita la lectura del nostre codi. Tot i això, si volem donar estil a moltes pàgines diferents de la mateixa manera, hem d’afegir aquest text a la part superior de cada pàgina. Pot ser que això no sembli massa treball, al cap i a la fi el podeu copiar i passar, però crea molta feina si voleu canviar un element més endavant.

En lloc d'això, conservarem la informació CSS ​​en un fitxer separat i importarem el fitxer per donar estil a la pàgina. Copieu i enganxeu la informació entre les etiquetes d'estil en un fitxer CSS nou ourCSSfile.css .

p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}

A continuació, importeu el fitxer al fitxer HTML.






Hello World



Afegir una imatge de fons amb CSS

Ara que teniu una base sòlida en HTML i CSS, afegir una imatge de fons serà un pastís. En primer lloc, identifiqueu a quin element voleu donar una imatge de fons. En el nostre exemple, afegirem un fons a tota la pàgina. Això vol dir que volem canviar l'estil del fitxer cos . Recordeu que les etiquetes del cos contenen tots els elements visibles.

body{
background-image: url('sky.jpg');
}
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}

Per canviar l'estil del cos a CSS, primer utilitzeu el fitxer cos paraula clau. A continuació, afegiu claudàtors com abans {}. Tota la informació d’estil del cos ha d’estar entre els claudàtors. L’atribut d’estil que volem canviar és imatge de fons . Hi ha molts atributs d’estil. No espereu memoritzar-los tots. Marqueu un full de trucs de propietats CSS amb atributs que vulgueu recordar.

Relacionat: 8 efectes HTML genials que tothom pot afegir al seu lloc web

fes que el teu propi connecti els punts

Després de l'atribut, utilitzeu dos punts per indicar com canviarà l'atribut. Per importar una imatge, utilitzeu url () . indica que feu servir un enllaç per apuntar a la imatge. Col·loqueu la ubicació del fitxer entre claudàtors entre cometes. Finalment, finalitzeu la línia amb un punt i coma. Tot i que l'espai en blanc no té significat a CSS, utilitzeu sagnat per facilitar la lectura del CSS.

El nostre exemple té aquest aspecte:

Si la imatge no es mostra correctament a causa de la mida de la imatge, podeu modificar-la directament. Tot i això, hi ha atributs d’estil de fons a CSS que podeu utilitzar per modificar el fons. Les imatges més petites que el fons es repetiran automàticament al fons. Per desactivar-ho, afegiu repetir fons:sense repetir; al vostre element.

També hi ha dues maneres de fer que una imatge cobreixi tot el fons. En primer lloc, podeu establir la mida del fons a la mida de la pantalla amb mida de fons: 100% 100%; , però això estirarà la imatge i pot distorsionar-la massa. Si no voleu que es modifiquin les proporcions de la imatge, també podeu establir la mida del fons a coberta . La portada farà que la imatge de fons cobreixi el fons, però no distorsioni la imatge.

Canvi del color de fons

Canviem una última cosa. Ara que tenim antecedents, és difícil llegir el nostre paràgraf. Fem que el seu fons sigui blanc. El procés és similar. L'element que volem modificar és #paragrafisme. El # indica que 'ourParagraph' és un nom d'identificador. A continuació, volem configurar el fitxer color de fons atribut al blanc.

body{
background-image: url('sky.jpg');
}
p {
text-align: center
}
#ourParagraph {
background-color: white;
border-style: solid;
padding: 30px;
}

Molt millor.

Continuar dissenyant el vostre lloc web amb CSS

Ara que ja sabeu com canviar l’estil dels diferents elements HTML, el cel és el límit. El mètode bàsic per canviar els atributs d’estil és el mateix. Identifiqueu l'element que voleu canviar i descriviu com canviar l'atribut. La millor manera d’aprendre més és jugar amb diferents atributs. Desafieu-vos a canviar el color del text a continuació.

Compartir Compartir Tweet Correu electrònic Els 8 millors llocs per obtenir exemples de codificació HTML de qualitat

Voleu aprendre HTML per codificar els vostres propis llocs web i aplicacions? Utilitzeu aquests exemples de pàgines web i codi font per ensenyar-vos HTML i CSS.

Llegiu a continuació Temes relacionats
  • Programació
  • HTML
  • Web Design
  • CSS
Sobre l'autor Jennifer Seaton(21 articles publicats)

J. Seaton és un escriptor científic especialitzat en la descomposició de temes complexos. És doctora per la Universitat de Saskatchewan; la seva investigació es va centrar a utilitzar l'aprenentatge basat en jocs per augmentar la implicació dels estudiants en línia. Quan no treballa, la trobareu amb ella llegint, jugant a videojocs o fent jardineria.

Més de Jennifer Seaton

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