Una descripció general de les fulles d'estil en cascada amb full d'estils de mostra
Quan creeu un lloc web des de zero, és intel·ligent començar amb els estils bàsics definits. És com començar amb un llenç net i raspalls frescos. Un dels primers problemes que afronten els dissenyadors web és que els navegadors web són diferents. La mida predeterminada de la font és diferent de la plataforma a la plataforma, la família de fonts predeterminada és diferent, alguns navegadors defineixen marges i farcits a l'etiqueta del cos, mentre que altres no ho fan, i així successivament. Obtingueu aquestes inconsistències definint els estils predeterminats de les vostres pàgines web.
CSS i el conjunt de caràcters
Primer, primer, estableixi el conjunt de caràcters dels vostres documents CSS a utf-8 . Si bé és probable que la majoria de les pàgines que dissenyeu s'escriuen en anglès, algunes poden estar localitzades, adaptades per a diferents contextos lingüístics i culturals. Quan són, utf-8 simplifica el procés. L'establiment del joc de caràcters al full d'estils extern no tindrà prioritat sobre capçalera HTTP , però en totes les altres situacions, ho farà.
És fàcil configurar el joc de caràcters. Per a la primera línia del document CSS escriviu:
@charset "utf-8";D'aquesta manera, si utilitzeu caràcters internacionals a la propietat de contingut o com a classe i noms d'identificació, el full d'estil funcionarà correctament.
Estilitzar el cos de la pàgina
El següent que necessiteu un full d'estil per defecte és estils a marges de zero, marges de farciment i vores. Això assegura que tots els navegadors col·loquin el contingut al mateix lloc i no hi ha espais ocults entre el navegador i el contingut. Per a la majoria de pàgines web, aquesta és massa a prop de la vora del text, però és important començar-hi perquè les imatges de fons i les divisions de disseny estiguin alineades correctament.
html, body {margin: 0px; farcit: 0px; frontera: 0 px; }Estableix el color del primer pla o del tipus de lletra predeterminat en negre i el color de fons per defecte en blanc. Tot i que això probablement canviarà per a la majoria dels dissenys de pàgines web, tenint aquests colors estàndard establerts al cos i l' etiqueta HTML, fa que la pàgina sigui més fàcil de llegir i treballar.
html, body {color: # 000; antecedents: #fff; }Estils de font predeterminats
La mida de la font i la família de tipus de lletra són una cosa que, inevitablement, canviarà una vegada que el disseny es mantingui, però comença amb una mida de font predeterminada de 1 em i una font predeterminada d'Arial, Ginebra o alguna altra font sans-serif. L'ús d'ems fa que la pàgina sigui tan accessible com sigui possible, i una font sans-serif sigui més llegible a la pantalla.
html, body, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; }Hi pot haver altres llocs on pugueu trobar text, però p , th , td , li , dd i dt són un bon començament per definir el tipus de lletra base. Incloeu l' HTML i el cos per si de cas, però molts navegadors anul·len les opcions de tipus de lletra si només defineix els tipus de lletra per a l'HTML o el cos.
Titulars
Els encapçalaments HTML són importants per utilitzar-los per ajudar-vos a definir el vostre lloc i deixar que els motors de cerca aprofundeixin al vostre lloc. Sense estils, tots són bastant lletges, així que configureu els estils per defecte en tots ells i definiu la família de tipus de lletra i les mides de lletra per a cadascun.
h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; }No oblideu els enllaços
Estilitzar els colors de l'enllaç gairebé sempre és una part crítica del disseny, però si no els defineix als estils predeterminats, és probable que oblideu com a mínim una de les pseudo-classes. Definiu-los amb una petita variació en blau i, a continuació, canvieu-los una vegada que tingueu la paleta de colors del lloc definit.
Per establir els enllaços en tons blaus, configureu:
- enllaços de color blau
- enllaços visitats com a blau fosc
- col·loca els enllaços com a blau clar
- Els enllaços actius són encara més pàl·lids
com es mostra en aquest exemple:
a: link {color: # 00f; } a: visitada (color: # 009; } a: hover {color: # 06f; } a: actiu {color: # 0cf; } Al dissenyar els enllaços amb un esquema de color bastant inocuo, s'assegura que no oblidaré cap de les classes i, a més, els fa una mica menys fort que els colors blau, vermell i morat per defecte.Full d'estil complet
Aquí teniu el full d'estil complet:
@charset "utf-8"; html, body {margin: 0px; farcit: 0px; frontera: 0 px; color: # 000; antecedents: #fff; } html, body, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; } a: link {color: # 00f; } a: visitada (color: # 009; } a: hover {color: # 06f; } a: actiu {color: # 0cf; }