Estilos Personalizados Una vez que se han definido las plantillas
Anuncio
Estilos Personalizados
Una vez que se han definido las plantillas, se pueden empezar a crear hojas de
estilos para cada una de ellas, esto facilita el modificarlas de manera
personalizada sin afectar al resto de las plantillas.
En la carpeta css, crear una hoja de estilo para cada una de las plantillas, en
este caso:
generica.css
informacion.css
seleccion.css
Es necesario incluir en cada archivo html que se tendrá acceso al archivo de
estilos correspondiente. En este caso para el archivo de información.html se
tiene:
<head>
<meta charset = “utf-8”/>
<meta keywords = “información general, últimas noticias, artículo de
moda”/>
<meta description = “Página de Información General”/>
<title>Información General del Sitio</title>
<link rel="stylesheet" href="../css/general.css">
<link rel="stylesheet" href="../css/informacion.css">
</head>
De esta manera para un mismo html, se tienen dos hojas de estilo disponibles.
Personalizando Estilos
Se manejará un tipo de encabezado, varios bloques de información, una lista
de elementos y una imagen en el cuerpo principal de la página que mostraría
información general. Además se incluirá un estilo para manejar una especie de
comentarios.
Primero se utilizará un nuevo <header>, pero este solo aplicará para la sección
en donde se declaró, en este caso “cuerpo_principal”.
<section id="cuerpo_principal">
<header>
El Título de Algo
</header>
</section>
1
Para dar estilo al header de esta sección, en la hoja de estilo
informacion.css se especifica que hay un elemento <header> que es hijo de
cuerpo_principal, sin importar si este identificador está en otro archivo de
estilo. También se puede especificar con el operador > para indicar que es hijo
del identificador en donde se ha declarado
#cuerpo_principal header{
padding:5px;
height:30px;
background-color:#640923;
font-size:20px;
border-radius:5px;
color:#FFFFFF;
}
Después se creará un párrafo que sirva como una introducción, se desea que el
párrafo esté centrado, con un estilo itálica en la letra y justificado.
La etiqueta <article>
La etiqueta <article> sirve para indicar que se tiene un texto en el sitio web,
en este caso se le identifica con el id “introduccion” para poder darle estilo
posteriormente
<article id="introduccion">
</article>
Se le da el estilo correspondiente al contenedor introduccion, en este caso un
ancho predeterminado, un espacio entre lo que sería el borde y el texto y se
centra en el contenedor superior (section cuerpo_principal)
#introduccion{
padding:5px;
width:500px;
text-align:center;
margin:auto;
}
Al colocársele un identificador, no se debe especificar que es hijo de
cuerpo_principal, eso sería si se manejara solamente como un <article>
2
El texto que aparecerá se colocará entre una etiqueta de párrafo <p> </p> a
la cual también se le dará formato, en este caso el tamaño de letra, el
justificado y el estilo itálica. Si bien se podría aplicar este estilo en
introduccion, es conveniente manejar uno para el contenedor y otro para el
contenido. De esta forma en el html, el contenido queda de la siguiente
manera
<article id="introduccion">
<p>
Lorem ipsum dolor sit amet consectetuer Donec laoreet pharetra neque
diam.
Consequat risus et tellus volutpat Vestibulum Lorem eros ipsum magnis
orci.
Semper ut gravida tincidunt elit orci sagittis sollicitudin laoreet aliquet
consequat.
Urna iaculis In odio Cum porttitor Curabitur nascetur vel sed In.
Nam auctor urna ridiculus ac Praesent in pretium venenatis convallis at.
</p>
</article>
En este caso se especificará que p es un hijo del identificador introduccion
por lo que el estilo necesario es:
#introduccion p{
font-size:16px;
font-style:italic;
color:#000000;
text-align:justify;
}
También se creará otro elemento de tipo <article> en el cuál se colocará el
contenido general del artículo. En este caso será con el identificador
cuerpo_articulo
<article id=”cuerpo_articulo”>
</article>
3
Insertar una imagen flotada
Posiblemente se desee insertar una imagen en el cuerpo del contenido, una
imagen puede estar sola, es decir sin tener texto al lado, o estar rodeada por el
texto.
Primero se definirá la imagen, para indicar que se tiene una imagen en el
contenido, se tiene la etiqueta <figure>, en esta se involucran dos nuevas
etiquetas <img> que establece la ruta de la imagen y <figcaption> que se
utiliza (de manera opcional) como pie de imagen.
<figure>
<img src="../imgs/spider-verse.jpg" alt="Llega Spider-Verse"/>
<figcaption>
Spider-Verse
</figcaption>
</figure>
En img, se tiene src que sirve para identificar la ruta en donde está la imagen,
al igual que su nombre. Se puede expresar ahí mismo el tamaño de la misma,
pero no es lo más conveniente. Entre las etiquetas <figcaption> se especifica
el texto que se desea aparezca debajo. La etiqueta alt sirve para poner un
mensaje en caso de que la imagen no aparezca.
Dando estilo a la imagen y al pie de imagen
Cómo figure no tiene un identificador, se expresa como hijo de
cuerpo_articulo, en este caso se le da un margen de 5px a los lados y se flota
a la izquierda
#cuerpo_articulo figure{
margin:5px;
float:left;
width:300px;
}
Se le da formato a la imagen (img), que al no tener identificador, se expresa
como hijo de figure. Es conveniente que se le de el tamaño limitante de la
imagen en el estilo y no en el html, esto facilita un manejo y modificación
posterior.
#cuerpo_articulo figure img{
width:300px;
height:300px;
}
4
Finalmente se le da un formato a pie de imagen
#cuerpo_articulo figure figcaption{
text-align:center;
margin:auto;
font-size:15px;
color:#640923;
}
Si debajo de la imagen (en el código) se coloca más texto, este quedará al lado
de la imagen, para finalizar con este efecto, es necesario “limpiar” los estilos
como se había hecho anteriormente.
<div class="estira"></div>
Después de limpiar el estilo, los siguientes elementos ya no serán afectados
por el efecto de flotación de la imagen.
Dentro de “cuerpo_artículo” se colocará un encabezado <h2> para indicar que
se tiene el inicio de una nueva sección.
<h2> Comentarios </h2>
Que tendrá el siguiente estilo:
#cuerpo_articulo h2{
padding:5px;
border-bottom:1px solid #640923;
font-size:20px;
color:#640923;
}
Creando una nueva sección
Ahora se creará una nueva sección, pero dentro de lo que es la sección definida
como cuerpo_principal, aquí se creará una sección para los comentarios de
los usuarios. Dentro de cada una de ellas se definirá un artículo para el
comentario de cada usuario, formado por el texto y el nombre del usuario.
<section id="comentarios">
5
<article class ="comentario_usuario">
<h1>
Usuario 1
</h1>
<p>
Consequat risus et tellus volutpat Vestibulum Lorem eros ipsum
magnis orci.
Semper ut gravida tincidunt elit orci sagittis sollicitudin laoreet aliquet
consequat.
</p>
</article>
<article class ="comentario_usuario">
<h1>
Usuario 2
</h1>
<p>
Consequat risus et tellus volutpat Vestibulum Lorem eros ipsum
magnis orci.
Semper ut gravida tincidunt elit orci sagittis sollicitudin laoreet aliquet
consequat.
</p>
</article>
</section>
Cómo se espera que haya varios comentarios, se define <article> como una
clase, comentario_usuario, en donde se encuentran dos elementos, un
encabezado <h1> para el nombre del usuario y un párrafo <p> para lo que es
el comentario.
Los estilos para este bloque son:
#comentarios{
margin-left:10px;
}
.comentario_usuario{
width:500px;
font-size:20px;
border: 1px solid #640923;
margin-bottom:10px;
6
margin-top:5px;
border-radius:5px;
color:#FFFFFF;
}
.comentario_usuario h1{
height:30px;
background-color:#640923;
font-size:20px;
color:#FFFFFF;
}
.comentario_usuario p{
font-size:20px;
color:#000000;
margin:3px;
font-size:16px;
}
Plantilla Genérica
Se creará un nuevo archivo de hoja de estilos en la carpeta css para especificar
los estilos correspondientes a la plantilla generica.html
Dentro del código html se colocará un encabezado h2, dentro de la sección
“cuerpo_principal”
<header> ¿Quiénes Somos? </header>
Que tendrá el siguiente estilo:
#cuerpo_principal header{
padding:5px;
height:30px;
font-size:30px;
color:#640923;
background-color:#FFFFFF;
border-bottom: 1px solid #640923;
}
7
Se creará una sección llamada información con el siguiente estilo:
#informacion{
padding:5px;
margin:auto;
}
Dentro de la sección se tendrán varios párrafos a los cuáles se les dará el
siguiente estilo:
#informacion p{
font-size:18px;
color:#000000;
text-align:justify;
margin-bottom:10px;
}
Se desea que algunas palabras dentro del párrafo se destaquen como
negritas, para esto se debe especificar un estilo para la etiqueta <b> que se
encuentra en la etiqueta <p> de la sección #informacion
#informacion p b{
font-size:18px;
color:#640923;
font-style:italic;
}
8
Estilo para información genérica
En la plantilla de información genérica, se tendrá un estilo muy sencillo, para
comenzar se indicará en el archivo html que se tendrá acceso a otro archivo de
estilos además del general.
<head>
<meta charset = "utf-8"/>
<meta keywords = "primera página, página ejemplo HTML 5, introducción
HTML 5, curso interacción humano computadora"/>
<meta description = "¿Quiénes Somos?"/>
<title>¿Quiénes somos?</title>
<link rel="stylesheet" href="../css/general.css">
<link rel="stylesheet" href="../css/generica.css">
</head>
Al igual que en la plantilla de información, aquí se tiene un <header> y una
sección llamada informacion dentro de lo que es la sección
cuerpo_principal.
Aquí se quiere que <header> tenga un estilo diferente al de la página general,
este se define de la siguiente manera en el archivo de estilos generica.css
#cuerpo_principal > header{
padding:5px;
height:30px;
font-size:30px;
color:#640923;
background-color:#FFFFFF;
border-bottom: 1px solid #640923;
}
9
El estilo del párrafo se mantiene igual que en la información.
#informacion{
padding:5px;
margin:auto;
}
#informacion p{
font-size:18px;
color:#000000;
text-align:justify;
margin-bottom:10px;
}
Sin embargo, se desea que al utilizar la etiqueta de negritas <b>, el color y el
estilo del texto cambien y no sean solo más gruesos. Como se utiliza la
etiqueta <b> dentro del un párrafo <p> en la sección información, la
declaración del estilo debe ser:
#informacion p b{
font-size:18px;
color:#640923;
font-style:italic;
}
10
