css posicionamiento de pag web presentacion de la semana
TRANSCRIPT
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.
Mtra. Ana Elena García Pumarino
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:
Mtra. Ana Elena García Pumarino
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>
Mtra. Ana Elena García Pumarino
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”
Mtra. Ana Elena García Pumarino
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?
Mtra. Ana Elena García Pumarino
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.
Mtra. Ana Elena García Pumarino
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.
Mtra. Ana Elena García Pumarino
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.
Mtra. Ana Elena García Pumarino
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.
Mtra. Ana Elena García Pumarino
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.
Mtra. Ana Elena García Pumarino
Fondos Referencias Web
• http://goo.gl/CyV2hK
• http://goo.gl/bKHiy4
• http://goo.gl/7D75wG
• http://goo.gl/CyV2hK
Mtra. Ana Elena García Pumarino