01 de 10
Creeu la fulla d'estil CSS
De la mateixa manera que hem creat un fitxer de text independent per a l'HTML, crearà un fitxer de text per al CSS. Si necessiteu visuals per a aquest procés, consulteu el primer tutorial. Aquests són els passos per crear el vostre full d'estil CSS al Bloc de notes:
- Trieu Fitxer> Nou al Bloc de notes per obtenir una finestra buida
- Deseu el fitxer com a CSS fent clic a Fitxer
- Aneu a la carpeta my_website del vostre disc dur
- Canvia el "Desa com a tipus:" a "Tots els fitxers"
- Assigneu un nom al vostre fitxer "styles.css" (deixeu de banda les cometes) i feu clic a Desa
02 de 10
Enllaçar la fulla d'estils CSS al vostre HTML
Un cop tingueu un full d'estil per al vostre lloc web, haureu d'associar-lo a la pròpia pàgina web. Per fer-ho, utilitzeu l'etiqueta d'enllaç. Col·loqueu l'etiqueta de l'enllaç següent dins de les etiquetes
del vostre document pets.htm:03 de 10
Arregla els marges de la pàgina
Quan escriviu XHTML per a diferents navegadors, una cosa que aprendreu és que tothom sembla que té diferents marges i regles per mostrar-les. La millor manera d'assegurar-se que el vostre lloc es veu igual a la majoria dels navegadors és no permetre que elements com a marges es mostrin per defecte a l'elecció del navegador.
Prefereixo començar les meves pàgines a la cantonada superior esquerra, sense cap recull o marge addicional al voltant del text. Fins i tot si vaig a emplenar el contingut, fixo els marges a zero perquè estigués començant amb la mateixa taula en blanc. Per fer-ho, afegiu el següent al vostre document styles.css:
html, body {
marge: 0px;
farcit: 0px;
frontera: 0 px;
esquerra: 0 px;
top: 0px;
}
04 de 10
Canviar la font a la pàgina
La font sol ser el primer que voleu canviar en una pàgina web. El tipus de lletra predeterminat en una pàgina web pot ser lleig, i en realitat és el mateix navegador web, de manera que si no definiu la font, realment no sabreu què aspecte tindrà la vostra pàgina.
Normalment, canviaríeu la font als paràgrafs, o de vegades en tot el document. Per a aquest lloc, definirem la font a la capçalera i el nivell de paràgraf. Afegiu el següent al vostre document styles.css:
p, li {
font: 1em Arial, Helvetica, sans-serif;
}
h1 {
font: 2em Arial, Helvetica, sans-serif;
}
h2 {
font: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
font: 1.25em Arial, Helvetica, sans-serif;
}
Vaig començar amb 1em com la meva mida base per a paràgrafs i elements de la llista, i després la feia servir per establir la mida dels meus titulars. No espero utilitzar un títol més profund que l'h4, però si teniu previst que vulgueu estilitzar-lo també.
05 de 10
Fer els teus enllaços més interessants
Els colors predeterminats dels enllaços són blaus i violeta per als enllaços no visitats i visitats, respectivament. Tot i que això és estàndard, és possible que no s'ajusti al esquema de colors de les vostres pàgines, així que ho canviem. En el fitxer styles.css, afegiu el següent:
a: link {
font-family: Arial, Helvetica, sans-serif;
color: # FF9900;
text-decoration: underline;
}
a: visitada {
color: # FFCC66;
}
a: hover {
antecedents: #FFFFCC;
font-weight: bold;
}
Vaig configurar tres estils d'enllaços, l'enllaç a: link per defecte, un: visitat per a quan el visitava, canvi el color i a: passeu el ratolí. Amb un: passeu el rellotge, tinc l'enllaç que obtingui un color de fons i vagi a negreta per emfatitzar que es fa clic a un enllaç.
06 de 10
Estilització de la secció de navegació
Com que primer vam posar la secció de navegació (id = "nav") en HTML, primer l'estilem. Hem d'indicar el grau d'amplitud que hauria d'ésser i posar un marge més ampli al costat dret, de manera que el text principal no s'hi inclini. També vaig posar una vora al voltant.
Afegiu el següent CSS al vostre document styles.css:
#nav {
ample: 225 px;
marge-dreta: 15 px;
frontera: sòlid mitjà # 000000;
}
#nav li {
estil de llista: cap;
}
.footer {
font-size: .75em;
clar: tots dos;
ample: 100%;
align-text: centre;
}
La propietat de l'estil de llista estableix la llista dins de la secció de navegació per no tenir bales ni números, i els estils .footer estenen la secció de drets d'autor per ser més petits i centrats a la secció.
07 de 10
Posicionament de la secció principal
Si col·loca la secció principal amb un posicionament absolut, pot estar segur que es mantindrà exactament on voleu que es mantingui a la vostra pàgina web. He fet 800 píxels d'ample per allotjar monitors més grans, però si teniu un monitor més petit, podeu fer-ho més estret.
Col·loqueu el següent al document styles.css:
#main {
ample: 800 px;
top: 0px;
posició: absoluta;
esquerra: 250 px;
}
08 de 10
Estilització dels paràgrafs
Com que ja he establert la font del paràgraf a dalt, he volgut donar un petit "puntada" addicional a cada paràgraf perquè resulti millor. Ho vaig fer posant una vora a la part superior que va ressaltar el paràgraf més que només la imatge.
Col·loqueu el següent al document styles.css:
.topline {
frontera superior: sòlid gruixut # FFCC00;
}
Vaig decidir fer-ho com una classe anomenada "topline" en lloc de definir tots els paràgrafs d'aquesta manera. D'aquesta manera, si decideixo que vull tenir un paràgraf sense una línia groga superior, simplement puc deixar la class = "topline" a l'etiqueta del paràgraf i no tindrà el límit superior.
09 de 10
Estilització de les imatges
Les imatges normalment tenen un límit al voltant d'aquestes, això no sempre és visible a menys que la imatge sigui un enllaç, però m'agrada tenir una classe dins del meu full d'estils CSS que desactivi el límit automàticament. Per a aquest full d'estil, he creat la classe "noborder", i la majoria de les imatges del document formen part d'aquesta classe.
L'altra part especial d'aquestes imatges és la seva ubicació a la pàgina. Volia que formessin part del paràgraf en què es trobaven sense utilitzar taules per alinear-les. La manera més senzilla de fer-ho és utilitzar la propietat CSS flotant.
Col·loqueu el següent al document styles.css:
#main img {
flota: esquerra;
marge-dret: 5px;
marge inferior: 15 px;
}
.noborder {
frontera: 0 px no;
}
Com podeu veure, també hi ha propietats de marge establertes a les imatges, per assegurar-se que no s'aprofiten del text flotant que hi ha al costat dels paràgrafs.
10 de 10
Ara mira la pàgina completada
Un cop hàgiu desat la vostra CSS, podeu tornar a carregar la pàgina pets.htm al vostre navegador web. La vostra pàgina hauria de ser similar a la que es mostra en aquesta imatge, amb imatges alineades i la navegació situada correctament a la part esquerra de la pàgina.
Seguiu aquests passos per a totes les pàgines internes d'aquest lloc. Voleu tenir una pàgina per a cada pàgina de la vostra navegació.