Menus de navegacion css
Páginas: 11 (2604 palabras)
Publicado: 25 de agosto de 2010
Que es CSS?
Siglas de "Cascading Style Sheets" (Hojas de Estilo en Cascada), es una tecnología desarrollada con el fin de separar la presentacion de la estructura del HTML. Funciona aplicando reglas de estilo a los elementos HTML, entre las que incluyen, tamaño, color de fondo, color del texto, posicion de los elementos, margenes, tipos de letra, etc... quedando de esta manera toda lo que tieneque ver con la parte gráfica de la web, separada completamente de la estructura del HTML.
Este lenguaje desarrollado por la W3C, ha venido haciendose cada vez mas importante entre los diseñadores, gracias a la facilidad de uso y a los optimos y flexibles resultados.
Aprender a conocer CSS nos dará como resultado un mejor flujo de trabajo, mayor organización de nuestro codigo, menos peso en laspaginas, y mas flexibilidad a los cambios. Ademas una vez familiarizados con sus capacidades, nos daremos cuenta de que es mas fácil y rápido diseñar con CSS que de la manera antigua.
Bien, empecemos por el principio. Aqui intentare enseñar como hacer documentos validos y que sean bien interpretados por la mayoría de los navegadores actuales. Lograremos esto conociendo los tres principaleselementos en el desarrollo de CSS:
Atributos
Valores
Selectores
Atributos
Son las palabras que usaremos para indicar cual estilo queremos modificar, por ejemplo, si queremos cambiar el tipo de letra, usamos el atributo "font", si es el fondo, el atributo "background", etc.
Valores
Son para definir como vamos a modificar el atributo, o la propiedad que le daremos. Por ejemplo, si queremos que untipo de letra sea rojo, usamos el atributo "font" y el valor "red".
Selectores
Se usan para definir sobre cuales elementos HTML vamos a aplicar los estilos, si queremos definir un estilo para toda la pagina, debemos usar el selector "body" que se refiere a la etiqueta <body> del documento HTML.
Hay tres tipos de selectores:
* Los selectores de etiquetas HTML, se utilizan escribiendo elnombre de la etiqueta a la que le aplicaremos el estilo.
* Los selectores de identificador, se usan para aplicar estilos solo a las etiquetas identificadas con un nombre.
* El tercer selector es el de clase, se escribe en el documento CSS comenzando con un punto "." seguido del nombre que le queramos poner a la clase, de esta forma:
.mi_clase.
La sintaxis:
Es muy simple, primero secoloca el selector, luego se abre una llave "{" y se empiezan a colocar los atributos, seguidos de dos puntos ":" y luego el valor seguido de punto y coma ";", al final de todo se cierra el estilo para el selector con el cierre de llave "}". Se pueden definir tantos atributos con sus respectivos valores como se desee, separandolos con un espacio o un salto de linea. En CSS se deben escribir losatributos y valores con minusculas y los comentarios se encierran con "/*" para abrir y "*/" para cerrar, como veremos en el siguiente ejemplo:
/*CSS sobre selector de etiquetas*/
body {
font-family: arial;
font-size: 12px;
color: black;
background-color: #cccccc;}
Este tipode selector no requiere de aplicación en el documento HTML, las etiquetas a las que se les defina un estilo de esta forma automáticamente heredarán los estilos.
/*CSS sobre selector de identificador*/
#header {
background-color: #ff0000;
color: #ffffff;
font-size: 26px;}
En este caso, se lo aplicamos a la etiqueta con solo colocarle el identificador, como en este ejemplo:
<div id="header">Aqui el contenido</div>
/*CSS sobre selector de clase*/
.mi_clase {
margin: 5px;
height: 100px;
width: 200px;
}...
Siglas de "Cascading Style Sheets" (Hojas de Estilo en Cascada), es una tecnología desarrollada con el fin de separar la presentacion de la estructura del HTML. Funciona aplicando reglas de estilo a los elementos HTML, entre las que incluyen, tamaño, color de fondo, color del texto, posicion de los elementos, margenes, tipos de letra, etc... quedando de esta manera toda lo que tieneque ver con la parte gráfica de la web, separada completamente de la estructura del HTML.
Este lenguaje desarrollado por la W3C, ha venido haciendose cada vez mas importante entre los diseñadores, gracias a la facilidad de uso y a los optimos y flexibles resultados.
Aprender a conocer CSS nos dará como resultado un mejor flujo de trabajo, mayor organización de nuestro codigo, menos peso en laspaginas, y mas flexibilidad a los cambios. Ademas una vez familiarizados con sus capacidades, nos daremos cuenta de que es mas fácil y rápido diseñar con CSS que de la manera antigua.
Bien, empecemos por el principio. Aqui intentare enseñar como hacer documentos validos y que sean bien interpretados por la mayoría de los navegadores actuales. Lograremos esto conociendo los tres principaleselementos en el desarrollo de CSS:
Atributos
Valores
Selectores
Atributos
Son las palabras que usaremos para indicar cual estilo queremos modificar, por ejemplo, si queremos cambiar el tipo de letra, usamos el atributo "font", si es el fondo, el atributo "background", etc.
Valores
Son para definir como vamos a modificar el atributo, o la propiedad que le daremos. Por ejemplo, si queremos que untipo de letra sea rojo, usamos el atributo "font" y el valor "red".
Selectores
Se usan para definir sobre cuales elementos HTML vamos a aplicar los estilos, si queremos definir un estilo para toda la pagina, debemos usar el selector "body" que se refiere a la etiqueta <body> del documento HTML.
Hay tres tipos de selectores:
* Los selectores de etiquetas HTML, se utilizan escribiendo elnombre de la etiqueta a la que le aplicaremos el estilo.
* Los selectores de identificador, se usan para aplicar estilos solo a las etiquetas identificadas con un nombre.
* El tercer selector es el de clase, se escribe en el documento CSS comenzando con un punto "." seguido del nombre que le queramos poner a la clase, de esta forma:
.mi_clase.
La sintaxis:
Es muy simple, primero secoloca el selector, luego se abre una llave "{" y se empiezan a colocar los atributos, seguidos de dos puntos ":" y luego el valor seguido de punto y coma ";", al final de todo se cierra el estilo para el selector con el cierre de llave "}". Se pueden definir tantos atributos con sus respectivos valores como se desee, separandolos con un espacio o un salto de linea. En CSS se deben escribir losatributos y valores con minusculas y los comentarios se encierran con "/*" para abrir y "*/" para cerrar, como veremos en el siguiente ejemplo:
/*CSS sobre selector de etiquetas*/
body {
font-family: arial;
font-size: 12px;
color: black;
background-color: #cccccc;}
Este tipode selector no requiere de aplicación en el documento HTML, las etiquetas a las que se les defina un estilo de esta forma automáticamente heredarán los estilos.
/*CSS sobre selector de identificador*/
#header {
background-color: #ff0000;
color: #ffffff;
font-size: 26px;}
En este caso, se lo aplicamos a la etiqueta con solo colocarle el identificador, como en este ejemplo:
<div id="header">Aqui el contenido</div>
/*CSS sobre selector de clase*/
.mi_clase {
margin: 5px;
height: 100px;
width: 200px;
}...
Leer documento completo
Regístrate para leer el documento completo.