Unha visión xeral das follas de estilo en cascada coa folla de estilo de mostra
Cando constrúe un sitio web desde cero, é intelixente comezar cos estilos básicos definidos. É como comezar cunha lona limpa e cepillos frescos. Un dos primeiros problemas que enfrontan os web diseñadores é que os navegadores web son todos diferentes. O tamaño da fonte por defecto é diferente de plataforma a plataforma, a familia de fontes por defecto é diferente, algúns navegadores definen marxes e padding na etiqueta do corpo, mentres que outros non o fan, etc. Evite estas inconsistencias ao definir os estilos predeterminados para as túas páxinas web.
CSS eo conxunto de caracteres
Primeiro, primeiro, configure o conxunto de caracteres dos seus documentos CSS en utf-8 . Aínda que é probable que a maioría das páxinas que desexes estean escritas en inglés, algunhas poden estar localizadas adaptadas para diferentes contextos lingüísticos e culturais. Cando o son, o utf-8 simplifica o proceso. A configuración do conxunto de caracteres na folla de estilo externa non terá prioridade sobre un cabeceiro HTTP , pero en todas as outras situacións, o fará.
É fácil configurar o conxunto de caracteres. Para a primeira liña do documento CSS, escriba:
@charset "utf-8";Deste xeito, se usa caracteres internacionais na propiedade do contido ou como clase e nomes de identificación, a folla de estilo seguirá funcionando correctamente.
Deseñando o corpo da páxina
A seguinte cousa que unha folla de estilo predeterminada precisa de estilos a cero marxes, padding e bordos. Isto asegura que todos os navegadores sitúen o contido no mesmo lugar e non hai espazos ocultos entre o navegador eo contido. Para a maioría das páxinas web, este é demasiado próximo ao límite para o texto, pero é importante comezar aí para que as imaxes de fondo e as divisións de deseño estean aliñadas correctamente.
html, corpo {marxe: 0px; padding: 0px; bordo: 0px; }Establecer a cor predefinida ou a cor do tipo de letra en branco e a cor de fondo por defecto en branco. Aínda que isto probablemente cambie para a maioría dos deseños de páxinas web, ter as cores estándar definidas no corpo e a etiqueta HTML fai que a páxina sexa máis fácil de ler e traballar.
html, corpo {cor: # 000; fondo: #fff; }Estilos de fonte predeterminados
O tamaño da fonte e a familia de tipografías son algo que inevitablemente cambiará unha vez que o deseño agarra, pero comeza cun tamaño de fonte predeterminado de 1 em e unha familia de fontes por defecto de Arial, Xenebra ou algunha outra fonte sans-serif. O uso de ems mantén a páxina o máis accesible posible, e unha fonte sans-serif é máis lexible na pantalla.
html, body, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; }Pode haber outros lugares nos que poida atopar texto, pero p , th , td , li , dd e dt son un bo comezo para definir a fonte base. Inclúe HTML e corpo só no caso, pero moitos navegadores anulan as opcións de fonte se só define os seus fontes para HTML ou corpo.
Titulares
Os encabezados HTML son importantes para usalos para axudar o esquema do seu sitio e permitir que os motores de busca sexan máis profundos no seu sitio. Sen estilos, todos son bastante feos, así que configure os estilos predeterminados en todos eles e defina a familia de fontes e os tamaños de letra para cada un.
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; }Non esquezas as ligazóns
Deseñar as cores da ligazón é case sempre unha parte crítica do deseño, pero se non as define nos estilos predeterminados, as posibilidades son que esquecerá polo menos unha das pseudo-clases. Defina-los con algunha pequena variación en azul e despois cambia-los unha vez que tes a paleta de cores para o sitio definido.
Para establecer as ligazóns en tons azules, configure:
- ligazóns como azul
- visitou ligazóns como azul escuro
- colgar as ligazóns como azul claro
- ligazóns activas como aínda máis pálidas
como se mostra neste exemplo:
a: link {color: # 00f; } a: visita {cor: # 009; } a: pasar {cor: # 06f; } a: activo {cor: # 0cf; } Ao teclear as ligazóns cun esquema de cores bastante inocuo, asegúrase que non esquecerei ningunha das clases e tamén o fai un pouco menos alto que o azul, vermello e vermello por defecto.Folla de estilo completa
Aquí está a folla de estilo completa:
@charset "utf-8"; html, corpo {marxe: 0px; padding: 0px; bordo: 0px; cor: # 000; fondo: #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: visita {cor: # 009; } a: pasar {cor: # 06f; } a: activo {cor: # 0cf; }