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>

Selectores
Nombre
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 { ... }
Elselector 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.

Modelos de posicionamiento CSS
Posiciona
miento
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 aspectos
Es 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.

JQuery
Para 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

Css posicionamiento de pag web presentacion de la semana

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (15)

Similar a Css posicionamiento de pag web presentacion de la semana

Similar a Css posicionamiento de pag web presentacion de la semana (20)

Más de Anel García Pumarino

Más de Anel García Pumarino (20)

Último

Último (20)

Css posicionamiento de pag web presentacion de la semana