Diseño web codigo html y css
Hola que tal sea bienvenido a codisource en este articulo te proporcionare menús realizados con hojas de estilo css
Ver ejemplo.
El modo de funcionamiento de las CSS consiste en definir, mediante una sintaxis especial, la
forma de presentación que le aplicaremos a:
• Un web entero, de modo que se puede definir la forma de todo el web de una sola vez.
• Un documento HTML o página, se puede definir la forma, en un pequeño trozo de
código en la cabecera, a toda la página.
• Una porción del documento, aplicando estilos visibles en un trozo de la página.
• Una etiqueta en concreto, llegando incluso a poder definir varios estilos diferentes para
una sola etiqueta. Esto es muy importante ya que ofrece potencia en nuestra
programación. Podemos definir, por ejemplo, varios tipos de párrafos: en rojo, en azul,
con margenes, sin ellos...
dejare el enlace de descarga al final de este articulo y una descripción de cómo modificarlos para adaptarlos para tu sitio web también creare una vista previa de los menús que les proporciono.
Descripción: Menús animados con hojas de estilo css o cascada
Antes que nada deberemos tener los conocimientos básicos en html o puede ver las instrucciones para darse cuenta cómo funcionan y que debe realizar para usar estos menús
En el archivo que descargara contiene
13 menús diferentes en cada carpeta hay 3 archivos
Una es una carpeta llamada
Images: contendrá las imágenes de nuestro menú.
menu_style.css: esta es la hoja de estilo que le brindara al menú los colores del texto animación etc.
Index.html: este es archivo principal que usted podrá abrir con su explorador preferido.
Comenzaremos explicando menu_style.css y algunas de sus características seré breve y solo explicare las más importantes tu puedes practicar cambiando colores tamaño tipo de fuente etc.
Abreviaturas para tamaño de texto e imagen
Pixels (px) y porcentaje (%).
Pulgadas (in)
Puntos (pt)
Centímetros (cm)
font-size
atributos
xx-small | x-small | small | medium | large | x-large |
xx-large
ejemplo
font-size:12pt;
font-size: x-large;
uso
Sirve para indicar el tamaño de las fuentes de manera más rígida y con mayor exactitud.
font-family
atributos
serif | sans-serif | cursive | fantasy | monospace
Todas las fuentes habituales
Ejemplos
font-family:arial,helvetica;
font-family: fantasy;
uso
Con este atributo indicamos la familia de tipografia del texto. Los primeros valores son genéricos, es decir, los exploradores
las comprenden y utilizan las fuentes que el usuario tenga en su sistema.
También se pueden definir con tipografías normales, como ocurría en html. Si el nombre de una fuente tiene espacios se
utilizan comillas para que se entienda bien.
font-style
atributos
normal | italic | oblique
ejemplos
font-style:normal;
font-style: italic;
Backgroundcolor
Attributos
Un color, con su nombre o su valor RGB
ejemplo
background-color: green;
background-color: #000055;
uso
Sirve para indicar el color de fondo de un elemento de la página.
Backgroundimage
atributo
El nombre de la imagen con su camino relativo o
absoluto
ejemplos
background-image: url(mármol.gif) ;
background-image:url(http://www.imagen.gif )
uso
Colocamos con este atributo una imagen de fondo en cualquier elemento de la página
Ahora les mostrare las carecteristicas de index.html
El codigo que enlazar la hoja de estilo con nuestro archivo html es el siguiente se encontrara entre las etiquetas
<head></head>
<head>
<link rel="stylesheet" type="text/css" href="menu_style.css"> </head>
Los enlaces se encontraran en el cuerpo del código html
<body></body>
<body>
<div id="menu">
<ul>
<li><a href="#enlace1">texto</a></li>
<li><a href="#enlace2">texto</a></li>
<li><a href="#enlace3">texto</a></li>
<li><a href="#enlace4">texto</a></li>
<li><a href="www.ejemplo.com">texto</a></li>
</ul>
</div>
</body>
Asi es como se muestran los links en html
<a href="www.paginaweb.com">texto</a>
www.paginaweb.com: lo cambiaremos por la url hacia donde nos enlazara, ejemplo www.google.com
texto: es el texto que se mostrara en la pantalla
Atributos en los enlaces
<a href="#paginaweb"
target="_blank" > abre una nueva ventana al hacer click en el enlace
<a href="#paginaweb"
target="_self"> abre el enlace en la misma ventana
<a href="#paginaweb"
target="_parent"> abre el enlace en la misma ventana
Descarga pack completo con 13 menus interactivos
Si el contenido de codisource te gusta por favor dale +1 o compartelo en facebook
Compartir
