Css posicionamiento de pag web presentacion de la semana

Definición

• CSS son las siglas de Cascading Style Sheets es decir hojas de estilo en cascada.

• Lenguaje que describe la presentación de los documentos estructurados y dinámicos,

utilizado en la presentación de documentos HTML.

• CSS sirve para organizar la presentación visual y aspecto de una página web.

• Es utilizado principalmente por parte de los navegadores y programadores web para

posicionar la página.

Mtra. Ana Elena García Pumarino

Estructura CSS

• Una página HTML con CSS se divide principalmente en encabezado (header), cuerpo

(section)y pie de página, contrario a lo que se pensaba, organizar la estructura de la

página con tablas. Ya que esto castiga el posicionamiento.

• CSS utiliza las etiquetas <header></header>, que permite contener algunos elementos

de encabezado, un logo, un formulario de búsqueda o cosas parecidas.

• La etiqueta <Section></Section> básicamente encierra el código correspondiente a una

sección genérica del cuerpo dentro de un documento o aplicación.

• La etiqueta <footer></footer> sirve para encerrar todo aquel código típico de las partes

inferiores de las páginas web.


Selectores

• Para crear diseños web profesionales, es imprescindible conocer los selectores de

CSS para aplicar de forma correcta los estilos CSS de una página.

• Una regla de CSS está formada por una parte llamada "selector" y otra parte

llamada "declaración".

• La declaración indica "qué hay que hacer" y el selector indica "a quién hay que

hacérselo".

• Y hay de diferentes tipos como:


Selectores

Nombre Selector

Utilización Sintaxis

Universal El selector universal se indica mediante un asterisco (*), aplica un mismo estilo se pueda aplicar a todos los elementos de una página.

* margin: 0; padding: 0;

Etiqueta Aplica un valor según el selector utilizado, por ejemplo al TODOS los párrafos: letra 12 y a TODOS las etiquetas h3, aplicale color rojo

p font-size:12px;

h3 color: red;

Descendente Selecciona los elementos que se encuentran dentro de otros elementos, es decir, se encuentra entre las etiquetas de apertura y cierre de otro elemento

p span color: red;

<p> ... <span>texto1 </span> ... </p>


SelectoresNombre Selector

Utilización Sintaxis

De clase Una de las soluciones más sencillas para aplicar estilos a un solo elemento de la página consiste en utilizar el atributo class de HTML sobre ese elemento para indicar directamente la regla CSS que se le debe aplicar:

<body> <p class="destacado">Lorem ipsum dolor sit amet...</p>

<p>Nunc sed lacus et est adipiscing accumsan...</p> <p>Class aptent taciti sociosqu ad litora...</p> </body>

De ID Permite seleccionar un elemento de la página a través del valor de su atributo id. Utiliza el símbolo de la almohadilla (#)

#destacado color: red;

<p>Primer párrafo</p> <p id="destacado">Segundo párrafo</p> <p>Tercer párrafo</p>

Combinación de Selectores

CSS permite la combinación de uno o más tipos de selectores para restringir el alcance de las reglas CSS. Separados a través de un punto.

iv.aviso span.especial ...

El selector solamente selecciona aquellos elementos de tipo <span> con un atributoclass="especial" que estén dentro de cualquier elemento de tipo <div> que tenga un atributoclass="aviso".

Clases

Ω Una clase es una definición de un estilo que en principio no está asociado a alguna

etiqueta HTML, pero que podemos asociar a etiquetas concretas a través de CSS.

Ω Mediante la definición de 'clases' se establecen estilos que pueden aplicarse a

cualquier etiqueta de HTML.

Ω El estilo no se vincula a una etiqueta en concreto sino a una 'clase'.

Definimos la clase:

Ω .nombre_de_nuestra_clase valor1: valor; valor2:valor, etc.. “CSS”

Para aplicar el estilo de una clase a una etiqueta utilizamos el parámetro CLASS:

Ω <etiqueta CLASS="nombre_de_nuestra_clase"> ... </etiqueta> “HTML”


Modelo de Caja

• El modelo de caja en CSS describe las cajas que se generan a partir de los elementos

HTML.

• Contiene opciones detalladas en lo referente al ajuste de márgenes, bordes, relleno

(padding) y contenido de cada elemento.

• La siguiente imagen muestra cómo se construye el modelo de caja.

Posicionamiento

• Los navegadores crean y posicionan automáticamente todas las cajas que

forman cada página HTML.

• No obstante, CSS permite al diseñador modificar la posición en la que se muestra

cada caja.

• Haciendo posible realizar efectos

avanzados a través de las propiedades

CSS para alterar la posición de las cajas,

realizar efectos y diseñar estructuras de

páginas bien posicionadas. Pero, ¿Cómo se logra?


Modelos de posicionamiento CSS

Posicionamiento

Normal o estático: Utilizado por los

navegadores si no se indica lo contrario.

Relativo: Consiste en posicionar

una caja según el posicionamiento normal

y después desplazarla respecto de su posición

original.

Absoluto: Respecto de su elemento contenedor y el resto de elementos de la página

ignoran la nueva posición del elemento.

Fijo: Que convierte una caja en un

elemento inamovible, de forma que su posición en la

pantalla siempre es la misma independientemente del

resto de elementos.

Flotante: El modelo más especial, ya que desplaza las cajas todo lo posible hacia la

izquierda o hacia la derecha de la línea en la

que se encuentran.


Modelos de posicionamiento CSS

El posicionamiento de una caja se establece

mediante la propiedad “position” cuyos valores

pueden ser:

1. Static

2. Relative

3. Absolute

4. Fixed

5. Float

• Se puede aplicar a todos los elementos , inician con valor static.


Valor Inherit

Muchas de las propiedades CSS heredan su valor "de padres a hijos", lo que permite no tener que establecer el valor de todas las propiedades CSS para todos los elementos de la página.


Otros aspectosEs importante saber que CSS también permite realizar numerosos cambios para:

• Modificar los textos en cuanto al tamaño, tipo de letra, color, alineamiento,

etc.

• Modificar la apariencia de los enlaces,

• Imágenes,

• Listas,

• Tablas,

• Formularios,

• Impresiones,

• Personalizar cursor,

• Hacks (defectos de los navegadores)y filtros.


JQueryPara terminar, mencionaremos el JQuery

Es una biblioteca de JavaScript, creada inicialmente por John Resig, que permite

simplificar la manera de interactuar con los documentos HTML, manipular el

árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con

la técnica AJAX a páginas web.

Jquery es un software libre y de código abierto con doble licencia, ofrece una

serie de funcionalidades basadas en JavaScript que de otra manera requerirían

de mucho más código, es decir, con las funciones propias de esta biblioteca se

logran grandes resultados en menos tiempo y espacio.

Investiga más de los JQuery ya que podrás utilizarlos en lugar de los CSS.


Fondos Referencias Web

• http://goo.gl/CyV2hK

• http://goo.gl/bKHiy4

• http://goo.gl/7D75wG

• http://goo.gl/CyV2hK


http://goo.gl/bKHiy4




http://goo.gl/7D75wG

http://goo.gl/7D75wG

http://goo.gl/CyV2hK

http://goo.gl/CyV2hK

Education

Css posicionamiento de pag web presentacion de la semana