Personalizando unha páxina web creada con Bloc de notas con CSS

01 de 10

Crea a folla de estilo CSS

Do mesmo xeito que creamos un ficheiro de texto separado para o HTML, creará un ficheiro de texto para o CSS. Se precisa visual para este proceso, consulte o primeiro tutorial. Aquí tes os pasos para crear a folla de estilo CSS no Bloc de notas:

1. Escolla Ficheiro> Novo no Bloc de Notas para obter unha fiestra baleira
2. Garda o ficheiro como CSS premendo en Ficheiro
3. Navega ata a carpeta my_website no teu disco ríxido
4. Cambia o "Gardar como tipo:" a "Todos os ficheiros"
5. Nomee o ficheiro "styles.css" (deixe de lado as comiñas) e faga clic en Gardar

02 de 10

Enlace o Folla de Estilo CSS ao teu HTML

Unha vez que teña unha folla de estilo para o teu sitio web, necesitarás asociala á propia páxina web. Para facelo, usa a etiqueta da ligazón. Coloca a seguinte etiqueta de ligazón en calquera lugar dentro das etiquetas do teu documento pets.htm:

03 de 10

Corrixir os marxes da páxina

Cando estás escribindo XHTML para diferentes navegadores, unha cousa que aprenderás é que todos parecen ter diferentes marxes e regras de como mostran as cousas. A mellor forma de estar seguro de que o seu sitio ten o mesmo aspecto na maioría dos navegadores é non permitir que as marxes sexan estándar para a elección do navegador.

Prefiro comezar as miñas páxinas na esquina superior esquerda, sen ningún recheo ou marxe extra en torno ao texto. Mesmo se vou a controlar os contidos, configuroi as marxes a cero para que comece coa mesma pizarra en branco. Para facelo, engade o seguinte ao seu documento styles.css:

html, body {
marxe: 0px;
padding: 0px;
bordo: 0px;
esquerda: 0px;
arriba: 0px;
}

04 de 10

Cambiar a fonte na páxina

A fonte adoita ser o primeiro que desexa cambiar nunha páxina web. A fonte predefinida nunha páxina web pode ser feo, e é realmente o propio navegador web, polo que se non defina a fonte, realmente non saberá como será a súa páxina.

Normalmente, cambiarías a fonte nos parágrafos, ou a veces en todo o documento. Para este sitio definiremos a fonte no cabeceiro e no nivel de parágrafo. Engada o seguinte ao seu documento styles.css:

p, li {
fonte: 1em Arial, Helvetica, sans-serif;
}
h1 {
fonte: 2em Arial, Helvetica, sans-serif;
}
h2 {
fonte: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
fonte: 1.25em Arial, Helvetica, sans-serif;
}

Comecei co 1em como o meu tamaño base para os parágrafos e os elementos da lista e, a continuación, usei para configurar o tamaño para os meus titulares. Non espero usar un título máis profundo que o h4, pero se pensas que o quererá estilear tamén.

05 de 10

Facendo as ligazóns máis interesantes

As cores por defecto para as ligazóns son de cor azul e vermello para as ligazóns non visitadas e visitadas respectivamente. Aínda que isto sexa estándar, pode que non se axuste ao esquema de cores das túas páxinas, polo que imos cambialo. No ficheiro styles.css, engade o seguinte:

a: ligazón {
font-family: Arial, Helvetica, sans-serif;
cor: # FF9900;
text-decoration: subliñado;
}
a: visitou {
cor: # FFCC66;
}
a: hover {
fondo: #FFFFCC;
fonte-peso: negra;
}

Instalei tres estilos de ligazón, a a: link como predeterminada, a: visitada por cando foi visitada, cambio a cor e a: deslice. Con un: paira teño a ligazón obtendo unha cor de fondo e vaia en negra para enfatizar que é unha ligazón a facer clic.

06 de 10

Personalizando a sección de navegación

Dende que poñemos a sección de navegación (id = "nav") primeiro no HTML, primeiro o estilemos. Necesitamos indicar o ancho que debe ser e poñer unha marxe máis ampla no lado dereito para que o texto principal non se abrace contra el. Tamén coloque un borde ao redor.

Engada o seguinte CSS ao seu documento styles.css:

#nav {
ancho: 225px;
marxe dereita: 15 px;
bordo: sólido medio # 000000;
}
#nav li {
estilo de lista: ningún;
}
.footer {
tamaño de fonte: .75em;
claro: ambos;
ancho: 100%;
alinear texto: centro;
}

A propiedade do estilo da lista configura a lista dentro da sección de navegación para non ter balas ou números e os estilos .footer permiten que a sección de dereitos de autor sexa máis pequena e centrada dentro da sección.

07 de 10

Posicionamento da sección principal

Ao posicionar a sección principal con posicionamento absoluto, pode estar seguro de que estará exactamente onde quere que permaneza na súa páxina web. Fixen o meu 800 píxeles de ancho para acomodar monitores máis grandes, pero se tes un monitor máis pequeno, podes querer facelo máis reducido.

Sitúe o seguinte no seu documento styles.css:

#main {
ancho: 800px;
arriba: 0px;
posición: absoluta;
esquerda: 250 píxeles;
}

08 de 10

Estilizando os seus parágrafos

Dende que xa fixei a fonte do parágrafo anterior, quería dar un pouco máis a cada parágrafo para que destaque mellor. Fíxeno poñendo un borde na parte superior que destacaba o parágrafo máis que só a imaxe.

Sitúe o seguinte no seu documento styles.css:

.topline {
borde superior: sólido groso # FFCC00;
}

Decidín facelo como unha clase chamada "topline" en lugar de definir todos os parágrafos desta forma. Deste xeito, se eu decidiro que quero ter un parágrafo sen unha liña amarela superior, simplemente podo deixar a clase = "topline" na etiqueta do parágrafo e non terá o bordo superior.

09 de 10

Estilizando as imaxes

As imaxes normalmente teñen un bordo ao redor delas, isto non sempre é visible a menos que a imaxe sexa unha ligazón, pero gústame ter unha clase dentro da miña folla de estilo CSS que desactiva o bordo automaticamente. Para esta folla de estilo, crearei a clase "noborder", ea maioría das imaxes do documento forman parte desta clase.

A outra parte especial destas imaxes é a súa localización na páxina. Eu quería que fosen parte do parágrafo no que estaban sen usar táboas para alinearlas. O xeito máis sinxelo de facelo é usar a propiedade CSS flotante.

Sitúe o seguinte no seu documento styles.css:

#main img {
flotar: esquerda;
marxe dereita: 5 píxeles;
marxe inferior: 15 píxeles;
}
.noborder {
bordo: 0px ningún;
}

Como podes ver, tamén hai propiedades de marxe definidas nas imaxes para asegurarse de que non se eliminen contra o texto flotante que se atopa ao carón deles.

10 de 10

Agora mira a túa páxina completa

Despois de gardar o seu CSS, pode recargar a páxina pets.htm no seu navegador web. A túa páxina debería ser semellante á que se mostra nesta imaxe, con imaxes aliñadas e a navegación colocada correctamente no lado esquerdo da páxina.

Siga estes mesmos pasos para todas as páxinas internas deste sitio. Queres ter unha páxina para cada páxina na túa navegación.