css3
HOJAS DE ESTILO EN CASCADA CSS (Cascading Style Sheets) INTRODUCCIÓN Las hojas de estilo en cascada
Views 62 Downloads 3 File size 7MB
Recommend stories
- Author / Uploaded
- Juan Tonda
Citation preview
HOJAS DE ESTILO EN CASCADA CSS (Cascading Style Sheets)
INTRODUCCIÓN
Las hojas de estilo en cascada o CSS (Cascading Style Sheets) se utilizan en la presentación de un documento HTML o XML. Describen cómo se va a mostrar el documento en pantalla. Separan el contenido de una página de la forma de presentarla en pantalla. El primer navegador en soportar hojas de estilo fue el Explorer 3.0. y después Netscape aceptó la sintaxis. CSS es el estándar más comúnmente aceptado validado por el comité W3C. El lenguaje por defecto de las hojas de estilo es text/css y se indica con el parámetro: type=“text/css” CSS distingue entre mayúsculas y minúsculas. La última versión de CSS es CSS3 que iremos introduciendo en este tema
INCORPORAR ESTILOS A UN DOCUMENTO HTML Existen tres maneras :
1.
Directamente en la etiqueta HTML (estilo de línea):
(indica el estilo de un párrafo concreto)
2.
Este método no es demasiado práctico pues hay que definir el estilo de cada uno de los elementos por separado. Definiendo una hoja de estilo en la cabecera del documento HTML (head) entre las etiquetas y con los atributos entre llaves:
(indica el estilo de todos los párrafos)
3.
Este método es mejor porque se define el estilo genérico de los elementos y todos los que sean iguales lo comparten. Incorporando una hoja de estilo descrita en otro documento aparte que se invoca con :
(estilos.css es el documento de estilo y todos los que lo invoquen tendrán la misma presentación)
Este método permite que varios documentos compartan el mismo estilo
Método 1: Define un estilo para cada elemento individualmente: el body (amarillo, con una imagen de fondo, etc.), el párrafo (color rojo, etc). Si se especificara otro párrafo, tendría que definirse de nuevo su estilo.
Caso 2: Se define una sección de estilos dentro de la cabecera del documento donde se especifica el del body, párrafo, etc. Todos los párrafos del documento tendrían el mismo estilo (a no ser que se modificara expresamente). Hay que tener cuidado con la sintaxis de cada caso (comillas en el primer caso y llaves en el segundo).
Método 3: Diseñamos un fichero EstilosPrueba.css (con el block de notas incluso) que contenga las especificaciones de estilo:
Invocamos a dicho fichero dentro de la cabecera del documento HTML:
Normalmente se usan los métodos 2 y 3. Si se usa el método 3, el fichero .css que contenga los estilos no debe tener ninguna etiqueta HTML. Este fichero .css se puede invocar desde varios documentos HTML lo que permite diseñar una imagen de marca.
Selectores y declaraciones
En los métodos 2 y 3 la sintaxis del estilo se realiza mediante {}. Se funciona a través de reglas que son declaraciones sobre el estilo de uno o más elementos. La regla tiene dos partes: el selector y la declaración o propiedad: p {color:red}
siendo p el selector y {color:red} la declaración. Los selectores puede aparecer individualmente o agrupados por comas: h1, p {color:red}: la etiqueta h1 y el párrafo p se escriben en rojo
Las declaraciones también pueden agruparse y se separan por punto y coma: p {color:red; font-size=28 pt; margin_left=300 px;} h1, p {color:red; font-size=28 pt; margin_left=300 px;}
Existe un selector universal * que indica que todos los elementos tendrán las mismas propiedades: * {color:red}
Selectores descendientes
Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del primero. Ejemplo:
pone en rojo todos los elementos de la página que se encuentren dentro de un elemento
. Uso: Pondría en rojo ambos textos porque los dos están contenidos en dentro de
(en un caso es un hijo directo de p y en otro es un nieto)
... texto1 ... ...texto2 ...
Selectores hijos
Afecta solo a un elemento hijo de otro elemento. El padre e hijo se separan por >. Ejemplo:
Uso: Pondría en rojo solo el texto1 porque es un hijo directo de p y el otro es un nieto
... texto1 ... ...texto2 ...
Selectores adyacentes
Afecta a elementos que aparecen consecutivos en el mismo elemento padre, es decir, son hermanos. El estilo se aplica al segundo selector no a ambos. Ejemplo:
Uso:
Titulo1 Subtitulo1 ... Subtitulo2 ...
La etiqueta h2 con el subtítulo 1 se escribe en verde porque se especifica a continuación de una etiqueta h1; sin embargo, el título1 será en rojo. La etiqueta h2 del subtítulo2 será en rojo.
Nuevos selectores en CSS3
Selector general de hermanos (~): Similar a los selectores adyacentes pero no es necesario que los elementos aparezcan consecutivos en el código HTML.
Hoja de estilo
selectores adyacentes
selector general de hermanos
Salida:
Nuevos selectores en CSS3
elemento [atributo^=”valor”] {…} Selecciona todos los elementos que contengan un atributo que empiece por el valor especificado Ej: a [href^=“mailto:”] {color: red} Pondría en color rojo todos los enlaces que tengan un href que empiece por “mailto”
elemento[atributo$=“valor”]¨{…} Selecciona todos los elementos que contengan un atributo que termina por el valor especificado Ej: a [href$=“.gif”] {color: red} Pondría en color rojo todos los enlaces que tengan un href que apunten a una imagen de extensión gif
Nuevos selectores en CSS3
elemento [atributo*=”valor”] {…} Selecciona todos los elementos que contengan un atributo que tengan el texto especificado en el valor en cualquier parte de la cadena Ej: a [href*=“prueba”] {color: red} Pondría en color rojo todos los enlaces que tengan un href que contenga la palabra “prueba”
Hoja de estilo
Definición de estilo mediante clases (class) Especifican clases de estilos que
se pueden aplicar a un elemento concreto o a cualquier elemento en general en un documento HTML.
Definición de una clase para un elemento [elemento].nombreclase {propiedades;} concreto El elemento puede ser un párrafo, una cabecera, etc.
Si se define una clase para un elemento concreto, por ejemplo un párrafo, sólo puede aplicarse a elementos de tipo párrafo, no funcionaría para otro elemento. Además solo funciona si se invoca dicha clase en la definición del párrafo. Ejemplo:
Uso:
–
Hola
: mostraría el párrafo en rojo y con un tamaño de 24. –Hola
: mostraría el párrafo con el tipo de letra que tuviera en ese momento porque no se ha invocado la clase. – cabecera : no funcionaría porque esta clase solo es aplicable a párrafosDefinición de una clase para cualquier elemento [*].nombreclase {propiedades;}
Poner * es equivalente a no poner nada porque indica que la definición de clase es para cualquier elemento Ejemplo:
Uso:
hola
cabecera – Tanto la etiqueta h1 como el párrafo p invocan la clase genérica y por tanto se escribirán en rojo y con ese tamaño de letra.Superposición de clases
Varias clases definidas por separado se pueden invocar simultáneamente Ejemplo:
Uso:
hola
Mostraría el párrafo en rojo y con el tamaño 24 porque se están invocando las dos clases en la definición.
En caso de conflicto, prevalece la regla de cascada, es decir, la última regla invocada.
Definición de estilo con identificadores (id)
Definen un estilo que sólo se aplicará a un único elemento. También puede ser aplicado a un elemento concreto o a uno genérico como en el caso de la clase. Definición elemento concreto: [elemento]#nombre {propiedades;}
Ejemplo:
Uso:
cabecera : La cabecera se escribirá en azul y con ese tamaño de letra
hola
: El párrafo no se ve afectado porque solo es para cabeceraDefinición de estilo con identificadores (id)
Definición elemento genérico: [*]#nombre{propiedades;}
Ejemplo:
Uso: cabecera : La cabecera se escribirá en azul y con ese tamaño de letra
La diferencia con la clase es que, al ser el id único para un documento HTML, si se utiliza para un elemento no se puede volver a utilizar para otro elemento en el mismo documento. Es decir, no funcionaría:
hola
: ya que se ha utilizado el id=“idazul” para la cabecera.
Sin embargo, en ocasiones esto no se cumple en algunos navegadores que permiten el uso múltiple del mismo id (aunque dan un error warning indicando que el id ya está definido)
Clases, identificadores y selectores
Las clases e identificadores también pueden combinarse con selectores: .articulo {….} .articulo h1 {color:red;} #cabecera {…} #cabecera h1 {color:blue;}
Solo las etiquetas h1 contenidas en los elementos a los que se aplique la clase artículo o el id cabecera tendrá color red o verde:
Titulo
….. >p>
El contenido del párrafo se verá afectado por la clase artículo pero solo la etiqueta h1 se verá afectada por el color red
Herencia y cascada
Los estilos se heredan de forma que un elemento contenido en otro puede heredar los estilos del primero: –
Si se define un estilo para (color o tamaño de letra) lo heredan todos los elementos contenidos en él (por ejemplo los párrafos
).
Cuando hay conflictos se ejecuta la regla de cascada (el último estilo definido). Ejemplo: definimos el estilo de la clase verde de la siguiente manera: .verde {color: green; margin-left: 30px;}
Los párrafos definidos con
son verdes y con un margen izquierdo de 30 píxeles ( independientemente del tipo de letra del body)
Si definimos el siguiente id: #ej1 { color: blue;}
El párrafo definido por
será azul porque en caso de conflicto siempre actúa la última capa definida (en este caso el id) ya que es la última en ser ejecutada por el navegador.
El orden de especificidad
La siguiente lista muestra el orden de especificidad usado para aplicar propiedades CSS a elementos HTML, desde el más específico al más global Es decir, que los estilos se aplicarán en este orden: – – – – – –
Atributo "style" (ej.,
). Selector ID (ej., p#help {...}). Definición específica de clase (ej., p.second {...}). Definición global de clase (ej., *.second {...}). Definición de elemento (ej., p {...}). Definición global (ej., * {...}).
Ejercicio: ¿Qué tipo de letra tendrá cada párrafo p?
Prueba
hola
pepe
adios
Idem
Prueba
hola
pepe
Div y span
En los ejemplos anteriores hemos usado los contenedores div y span para aplicar un estilo definido. Div y span son contenedores genéricos que permiten agrupar otros elementos html para darles un formato. La diferencia entre ellos es que div es un elemento de tipo block, es decir, define un bloque de forma que inserta un enter antes y después del texto que contiene, mientras que span es un elemento in-line, es decir, un elemento dentro de la línea y no inserta enter, lo que permite alterar el estilo de partes de un bloque mayor que lo contiene (el párrafo en el caso del ejemplo siguiente).
Con el elemento genérico maquetamos el texto como nos interesa. En este caso, se consigue un efecto sombra
Uso de y
En HTML4 se usan mucho los contenedores genéricos para maquetar una página HTML usando clases e identificadores. Lo mismo ocurre con
Elementos de bloque (block) y elementos en línea (in-line)
Elementos en bloque: siempre empiezan en una nueva línea y ocupan todo el espacio disponible hasta el final de la línea (ej.
o ) – address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul. – también se considera que son de bloque: dd, dt, frameset, li, tbody, td, tfoot, th, thead, tr. ... Mi texto1 Mi texto2 Mi texto3 Mi texto4 pueden considerarse hijos del . Podemos hacer referencia a cualquiera de ellos especificando el número de hijo con la pseudoclase :nth-child(numero) Ejemplo div p:nth-child(2){background:#ffff99;} Pondría el fondo amarillo al párrafo 2 dentro del
Elementos en línea: no empiezan necesariamente en nueva línea y sólo ocupan el espacio necesario para mostrar sus contenidos (ej. , enlaces) – a, abbr, acronym, b, basefont, big, br, cite, code, dfn, em, font, i, img, input, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var.
Elementos de bloque (block) y elementos en línea (in-line)
Los siguientes elementos pueden ser en línea y de bloque según las circunstancias: – button, del, iframe, ins, map, object, script.
Ejemplo de elemento bloque y en línea:
Modelo de formato basado en cajas
El modelo de cajas o "box model" es una de las características más importantes de CSS, ya que condiciona el diseño de todas las páginas web. Todos los elementos de las páginas se representen mediante cajas rectangulares que se crean automáticamente y no son visibles. CSS permite controlar el aspecto de todas las cajas: su altura y anchura, el margen existente entre cajas y el espacio de relleno interior que muestra cada caja. Además, CSS permite controlar la forma en la que se visualizan las cajas: se pueden ocultar, desplazar respecto de su posición original y fijarlas en una posición específica dentro del documento.
Modelo de formato basado en cajas
Las cajas de una página se crean automáticamente. Cada vez que se inserta una etiqueta o elemento en la página, se crea una nueva caja rectangular que encierra los contenidos del elemento. El párrafo constituye una caja y, dentro de él, la etiqueta constituye otra caja
Cada caja está formada por seis partes:
Partes que componen cada caja y orden de visualización Contenido (content): se trata del contenido HTML del
elemento (las palabras de un párrafo, una imagen, el texto de una lista de elementos, etc.) Relleno (padding): espacio libre opcional existente entre el contenido y el borde. Borde (border): línea que encierra completamente el contenido y su relleno. Imagen de fondo (background image): imagen que se muestra por detrás del contenido y el espacio de relleno. Color de fondo (background color): color que se muestra por detrás del contenido y el espacio de relleno. Margen (margin): separación opcional existente entre la caja y el resto de cajas adyacentes.
Modelo de formato basado en cajas
El relleno (padding) y el margen son transparentes, por lo que en el espacio ocupado por el relleno se muestra el color o imagen de fondo (si están definidos) y en el espacio ocupado por el margen se muestra el color o imagen de fondo de su elemento padre (si están definidos). Si ningún elemento padre tiene definido un color o imagen de fondo, se muestra el color o imagen de fondo de la propia página (si están definidos). Si una caja define tanto un color como una imagen de fondo, la imagen tiene más prioridad y es la que se visualiza. No obstante, si la imagen de fondo no cubre totalmente la caja del elemento o si la imagen tiene zonas transparentes, también se visualiza el color de fondo. Se pueden combinar imágenes transparentes y colores de fondo.
Modelo de formato basado en cajas
Vamos a estudiar a continuación las propiedades CSS de cada uno de estos elementos
Anchura y altura
width: especifica la anchura del elemento; se puede aplicar a todos los elementos (salvo los elementos en línea que no sean imágenes, las filas de tabla y los grupos de filas de tabla) – | | auto | inherit (si se especifica inherit el valor será el heredado del elemento padre que lo contiene)
height: especifica la altura del elemento; se puede aplicar a todos los elementos (salvo los elementos en línea que no sean imágenes, las columnas de tabla y los grupos de columnas de tabla) – | | auto | inherit
#lateral { width: 200px; }
...
#cabecera { height: 60px; }
...
Propiedades del tipo de letra
font-size: (tamaño)
– //xx-small/x-small/medium/large/xlarge/xx-large/smaller/larger
font-weight:(intensidad de la letra)
– (normal=400 negrita=700)/normal/bold/bolder/ligther/100/200/…/900
font-style: (estilo)
– normal/italic/oblique
font-family: (serif, arial, etc) font-variant: normal/small-caps (las mayúsculas ocupan igual que las minúsculas) font: incluye todos los anteriores en una sola propiedad separados por blancos; el orden es importante: – [font-style] [font-variant][font-size][font-weight][fontfamily]
Unidades de medida
Unidades absolutas: – – – –
in, del inglés "inches", pulgadas (1 pulgada son 2.54 centímetros) cm, centímetros mm, milímetros pt, puntos (1 punto equivale a 1 pulgada/72, es decir, unos 0.35 milímetros) – pc, picas (1 pica equivale a 12 puntos, es decir, unos 4.23 milímetros)
Unidades relativas:
– em, (no confundir con la etiqueta de HTML) relativa respecto del tamaño de letra empleado. Aunque no es una definición exacta, el valor de 1em se puede aproximar por la anchura de la letra M ("eme mayúscula") del tipo y tamaño de letra que se esté utilizando – ex, relativa respecto de la altura de la letra x ( "equis minúscula") del tipo y tamaño de letra que se esté utilizando – px, (píxel) relativa respecto de la resolución de la pantalla del usuario
Ejemplos
Unidades absolutas: – – – – –
body { margin: 0.5in; } h1 { line-height: 2cm; } p { word-spacing: 4mm; } a { font-size: 12pt } span { font-size: 1pc }
Unidades relativas: – body { font-size: 10px; } – h1 { font-size: 2.5em; }
Propiedades del texto
text-decoration:
– none/underline (subrayado)/ overline (raya por encima)/ linethrough (tachado)/blink (parpadeo)(no funciona en Explorer)
text-transform:
– capitalize (letra capital)/ uppercase/ lowercase/ none
text-align: left/right/center/justify text-indent: (sangrado del texto) – /
letter-spacing: (espacio entre letras) – normal/
word-spacing: normal/ line-height: (distancia entre líneas) – normal/ /
vertical-align: //baseline/sub/super/top/texttop/middle/bottom/text-bottom
Propiedades de color, fondo e imagen
color: (del elemento) background-color: (del fondo) – /transparent
background-image (imagen de fondo) – none/ (dirección de la imagen)
background-repeat (si se repite la imagen en el fondo)
– repeat/repeat-x (solo se repite en el eje de las x, es decir, en una línea horizontal)/repeat-y (idem eje de las y o línea vertical) /norepeat
background-attachment: si la imagen se mantiene fija cuando se hace un scroll – scroll (no se mantiene fija) – fixed (sí se mantiene fija)
background-position (de la imagen)
– [/] [top/center/bottom] [left/center/right]
background: genérico para definir todos los anteriores en una sola propiedad
Propiedades de cuadro
TEXTO
margen
borde
padding
(distancia del borde al texto)
Propiedades de cuadro
margin: puede fijarse conjuntamente o por separado según las propiedades margin-top, margin-right, margin-bottom, marginleft:
– //{1,4} (pueden especificar de 1 a 4 valores que son, respectivamente, el margen top, right, bottom y left)
padding: idem con las propiedades padding-top, padding-right, padding-bottom, padding-left – //{1,4}
border-width (anchura)puede fijarse conjuntamente o por separado según las propiedades border-top-width, border-rightwidth, border-bottom-width, border-left-width: – //thin/medium/thick
border-style:
– hidden/solid/dotted/dashed/double/groove/ridge/inset/outset border-
border-color: /transparent border: genérica para definir las anteriores (border-width, border-style, border-color)
Propiedades de cuadro
Los márgenes verticales (margin-top y margin-bottom) sólo se pueden aplicar a los elementos de bloque y a las imágenes. Los márgenes laterales (margin-left y margin-right) se pueden aplicar a cualquier elemento. Ejemplo: div img { margin-top: .5em; margin-bottom: .5em; margin-left: 1em; margin-right: .5em; }
También: div img { margin: .5em .5em .5m 1em; }
Propiedades de listas (viñetas)
list-style-image: permite definir una imagen como viñeta – url (“dirección de la imagen”)
list-style-position: – inside (sangría francesa) /outside
list-style-type: tipo de viñeta – disc/circle/square/decimal/lower-roman/ lower-alfa/ upper-roman/ upper-alpha/ none
Posicionamiento
Los navegadores crean y posicionan de forma automática todas las cajas que forman cada página HTML. CSS permite al diseñador modificar la posición en la que se muestra cada caja. El posicionamiento de una caja se establece mediante la propiedad position
Posicionamiento normal o estático : se trata del posicionamiento que utilizan los navegadores si no se indica lo contrario. Posicionamiento relativo: variante del posicionamiento normal que consiste en posicionar una caja según el posicionamiento normal y después desplazarla respecto de su posición original. Posicionamiento absoluto: la posición de una caja se establece de forma absoluta respecto de su elemento contenedor (padre) y el resto de elementos de la página ignoran la nueva posición del elemento. Posicionamiento fijo: variante del posicionamiento absoluto 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 e independientemente de si el usuario sube o baja la página en la ventana del navegador. Posicionamiento flotante: se trata del modelo más especial de posicionamiento, ya que desplaza las cajas todo lo posible hacia la izquierda o hacia la derecha de la línea en la que se encuentran.
Propiedad position
position: establece la posición del elemento. – static | relative | absolute | fixed | inherit En los posicionamientos relative, absolute y fixed el desplazamiento de la caja se controla con las propiedades top, right, bottom y left que toman los valores: – | | auto | inherit
El posicionamiento flotante se establece con la propiedad float
Posicionamiento normal
Es el modelo que utilizan por defecto los navegadores para mostrar los elementos de las páginas. Ninguna caja se desplaza respecto de su posición original, por lo que sólo se tiene en cuenta si el elemento es de bloque o en línea. El bloque mayor es el body
Posicionamiento relativo
Permite desplazar una caja respecto de su posición original. El desplazamiento de la caja se controla con las propiedades top, right, bottom y left. El desplazamiento de una caja no afecta al resto de cajas adyacentes, que se muestran en la misma posición que si la caja desplazada no se hubiera movido de su posición original.
La posición top:10 em se establece desde donde está situado el elemento imagen. La posición del resto de los elementos permanece inalterable
Posicionamiento absoluto
La nueva posición de la caja se indica también mediante las propiedades top, right, bottom y left. La interpretación de los valores de estas propiedades dependen del posicionamiento del elemento contenedor. Cuando una caja se posiciona de forma absoluta, el resto de elementos de la página la ignoran y ocupan el lugar original ocupado por la caja posicionada.
La posición top:10 em se mide desde el extremo del elemento contenedor que, en este caso, es body. El resto de elementos se desplazan y ocupan su lugar.
Posicionamiento fijo
Es un caso particular del posicionamiento absoluto, ya que sólo se diferencian en el comportamiento de las cajas posicionadas. La forma de obtener el origen de coordenadas para interpretar su desplazamiento es idéntica al posicionamiento absoluto. De hecho, si el usuario no mueve la página HTML en la ventana del navegador, no existe ninguna diferencia entre estos dos modelos de posicionamiento. La principal característica de una caja posicionada de forma fija es que su posición es inamovible dentro de la ventana del navegador. El posicionamiento fijo hace que las cajas no modifiquen su posición ni aunque el usuario suba o baje la página en la ventana de su navegador.
Al desplazarse por la ventana, la imagen permanece fija en la posición top: 10 im;
Posicionamiento flotante
El posicionamiento flotante es el más utilizado. Cuando una caja se coloca con posicionamiento flotante, automáticamente se convierte en una caja flotante, que se desplaza hasta la zona más a la izquierda o más a la derecha de la posición en la que se encontraba y el resto de cajas ocupan el lugar dejado por la caja flotante.
Posicionamiento flotante a la derecha
Posicionamiento flotante
Esto puede acarrear problemas:
La caja 1 se desplaza totalmente a la izquierda y la caja 2 y caja 3 ocupan su lugar, por lo que la caja 2 queda tapada por la caja 1
Si hay varias cajas flotantes, se intentan colocar en los huecos disponibles. En este ejemplo, las tres cajas se colocan a la izquierda, pero al intentar colocarse la segunda encuentra que la primera ya se ha ubicado a la izquierda, por lo que se pone al lado. Lo mismo ocurre con la tercera. Si no hubiera sitio, se coloca en la siguiente línea lo más a la izquierda posible.
Posicionamiento flotante
Las cajas flotantes influyen en la disposición de todas las demás cajas. Los elementos en línea hacen sitio a las cajas flotantes adaptando su anchura al espacio libre dejado por la caja desplazada. Los elementos en bloque no les hacen sitio, pero adaptan sus contenidos para que no se solapen con las cajas flotantes. Una caja flotante se especifica con la propiedad float
float
float: Posicionamiento flotante, se puede aplicar a todos los elementos – left | right | none | inherit
left y right especifica si se desplaza a la izquierda o a la derecha, none indica que se anula el desplazamiento flotante e inherit que se hereda del elemento contenedor (padre)
Posicionamiento flotante
Los elementos que se encuentran alrededor de una caja flotante adaptan sus contenidos para que fluyan alrededor del elemento posicionado. Esto es muy útil para las imágenes: img {float: left;}
Propiedad clear
Sin embargo, en ocasiones queremos que haya elementos que fluyan alrededor de la imagen y elementos que no. Esto se consigue con la propiedad clear, que despeja el posicionamiento flotante
Este párrafo se especificaría con:
Propiedad clear
clear: – none, left, right, both, inherit
Si se indica el valor left, el elemento se desplaza de forma descendente hasta que pueda colocarse en una línea en la que no haya ninguna caja flotante en el lado izquierdo. Ídem el resto
Supongamos que añadimos al ejemplo anterior un marco
El contenedor div se desplaza con el posicionamiento flotante de los span y el marco no se visualiza bien
Borra ambos posicionamientos flotantes: izquierda y derecha
Visualización
Además de las propiedades que controlan el posicionamiento de los elementos, CSS define otras cuatro propiedades para controlar su visualización: display, visibility, overflow y z-index. Utilizando algunas de estas propiedades es posible ocultar y/o hacer invisibles las cajas de los elementos.
Propiedades display y visibility
Las propiedades display y visibility controlan la visualización de los elementos y permiten ocultar cualquier elemento de la página. La propiedad display permite ocultar completamente un elemento haciendo que desaparezca de la página. Como el elemento oculto no se muestra, el resto de elementos de la página se mueven para ocupar su lugar. La propiedad visibility permite hacer invisible un elemento, lo que significa que el navegador crea la caja del elemento pero no la muestra. En este caso, el resto de elementos de la página no modifican su posición, ya que aunque la caja no se ve, sigue ocupando sitio.
La siguiente imagen muestra la diferencia entre ocultar la caja 5 mediante la propiedad display o hacerla invisible mediante la propiedad visibility
En general, cuando se oculta un elemento no es deseable que siga ocupando sitio en la página, por lo que la propiedad display se utiliza mucho más que la propiedad visibility.
Propiedad display
display: Tiene muchos valores, los más utilizados son: – inline | block | none El valor block muestra un elemento como si fuera un elemento de bloque, independientemente del tipo de elemento que se trate. El valor inline visualiza un elemento en forma de elemento en línea, independientemente del tipo de elemento que se trate. El valor none oculta un elemento y hace que desaparezca de la página. El resto de elementos de la página se visualizan como si no existiera el elemento oculto, es decir, pueden ocupar el espacio en el que se debería visualizar el elemento.
El ejemplo muestra el uso de la propiedad display para mostrar un elemento de bloque como si fuera un elemento en línea y para mostrar un elemento en línea como si fuera un elemento de bloque:
DIV normal (elemento de bloque) DIV con display:inline Enlace normal (elemento en línea) Enlace con display:block
Propiedad visibility
visibility: – visible | hidden | collapse | inherit Inicialmente todas las cajas que componen la página son visibles (valor por defecto). Con hidden se convierte la caja en invisible pero el resto de los elementos mantienen su lugar dejando el hueco vacío. El valor collapse sólo se puede utilizar tablas (en filas, grupos de filas, columnas y grupos de columnas) y oculta completamente la fila y/o columna y se pueden mostrar otros contenidos en ese lugar. Si se utiliza el valor collapse sobre cualquier otro tipo de elemento, su efecto es idéntico al valor hidden.
Relación entre display, float y position
Cuando se establecen las propiedades display, float y position sobre una misma caja, su interpretación es la siguiente: 1. Si display vale none, se ignoran las propiedades float y position y la caja no se muestra en la página. 2. Si position vale absolute o fixed, la caja se posiciona de forma absoluta, se considera que float vale none y la propiedad display vale block tanto para los elementos en línea como para los elementos de bloque. La posición de la caja se determina mediante el valor de las propiedades top, right, bottom y left. 3. En cualquier otro caso, si float tiene un valor distinto de none, la caja se posiciona de forma flotante y la propiedad display vale block tanto para los elementos en línea como para los elementos de bloque.
Propiedad overflow
En ocasiones el contenido de un elemento no cabe en el espacio reservado y se desborda. Esto puede ocurrir cuando se establece la anchura y/o altura mediante width y/o height. La propiedad overflow permite controlar la forma en la que se visualizan los contenidos que sobresalen de sus elementos. Overflow: – visible | hidden | scroll | auto | inherit
visible: el contenido no se corta y se muestra sobresaliendo (por defecto). hidden: el contenido sobrante se oculta y sólo se visualiza la parte que cabe en la zona reservada. scroll: ídem a hidden pero con barras de desplazamiento auto: el comportamiento depende del navegador, aunque normalmente es scroll.
Valor visible por defecto
El div se trata como un elemento en línea (display), con posicionamiento flotante a la izquierda. Como hay tres div en el body se colocan en posiciones consecutivas porque hay espacio en la misma línea
Propiedad z-index
Además de posicionar una caja de forma horizontal y vertical, CSS permite controlar la posición tridimensional de las cajas posicionadas. De esta forma, es posible indicar las cajas que se muestran delante o detrás de otras cajas cuando se producen solapamientos. La posición tridimensional de un elemento se establece sobre un tercer eje llamado Z y se controla mediante la propiedad z-index.
z-index: – auto | | inherit
Normalmente se especifica un número entero. Se considera el 0 como el nivel más bajo. Cuanto más alto sea el valor numérico, más cerca del usuario se muestra la caja. Un elemento con z-index: 10 se muestra por encima de los elementos con z-index: 8 o z-index: 9, pero por debajo de elementos con z-index: 20 o z-index: 50. Es obligatorio que la propiedad z-index vaya acompañada de la propiedad position. Si hay que posicionar un elemento sin moverlo de su posición original ni afectar al resto de elementos de la página, se utiliza el posicionamiento relativo (position: relative).
Pseudoelementos
Sirven para aplicar reglas de estilo a aquellas partes de un documento que no existen en el código HTML En CSS2 se escriben con : y en CSS3 con :: :first-line (primera línea de un párrafo) ::first-line (en CSS3) p::first-line {text-transform: uppercase}
::first-letter (primera letra) p::first-letter {font-size:200%; color:red}
Pseudoelementos
elemento::before {..} (nos posiciona al inicio del contenido de un elemento) h1::before {content:”--Ejemplo de”} Añadiría el texto “--Ejemplo de” al inicio de la cabecera h1 elemento::after{..} (nos posiciona al final del contenido del elemento) h1::after {content:”--”} Añadiría el texto “.” al final de la cabecera h1
Pseudoclases
Son aquellas partes de un documento que no existen como elementos HTML porque son un estado particular – :hover (ratón encima), aplicable a cualquier elemento – :focus (recibe el click o tabulador), aplicable a (entrada de datos) o (enlaces)
El texto se pone en negrita con hover
El fondo se pone rojo con focus
Pseudoclases
Asociadas a enlaces: – :link (el enlace normal) – :active (cuando se activa, es decir, se pincha en el enlace) – :visited (cuando se ha visitado el enlace)
Pseudoclases
:nth-child()
Supongamos el siguiente trozo de código:
Todos los párrafos
Pseudoclases
También se puede especificar:
div p:nth-child(odd) {background:green;} div p:nth-child(even) {background:red;} Pondría el fondo verde a los párrafos de lugar impar (1 y 3) y rojo a los de lugar par (2 y 4)
Pseudoclases También podemos referenciar al primer hijo con :first-child, al último hijo con :last-child() o al hijo único con :only-child() div p:last-child() {background:pink} Pondría el fondo rosa al último párrafo
Pone el fondo amarillo en el párrafo 2, el verde en los párrafos impares 1 y 3 y el rosa en el último párrafo
Pseudoclases Otra importante pseudoclase es la negación :not(elemento) :not(p){margin: 0px;} Dejaría un margen de 0 píxeles a todos los elementos menos a los párrafos :not(.clase2){margin: 0px;} Dejaría un margen de 0 píxeles a todos los elementos menos al que tenga asignado class=“clase2”
Diseño de formularios con CSS
Se pueden alinear las etiquetas y los campos de los formularios mediante tablas o mediante propiedades CSS. Esto se puede hacer definiendo propiedades CSS para las etiquetas label del formulario así como para los campos del mismo.
Etiquetas label
Campo s input
Se pueden posicionar con tablas o con CSS:
Por cada elemento del formulario se define un div que agrupa la etiqueta y el input. La etiqueta se formatea con un tamaño y se posiciona con float a la izquierda
Etiquetas CSS div {margin: .4em 0;} div label {width: 25%;float: left;} Formulario
Alta en el servicio
Nombre
Apellidos
...
Formularios a dos columnas
Añadir la regla CSS:
form fieldset { float: left; width: …; height: …; }
Diseño de páginas web
Normalmente las páginas web habituales se divide en bloques: cabecera, menú, contenidos y pie de página. Inicialmente, estos bloques (formados por filas y columnas se definían mediante tablas. Otra opción es utilizar frames. En HTML 4 se utilizan contenedores y para formatear los bloques. En HTML 5 ya se ha estructurado la páginas en bloques específicos llamados , , , etc.
Maquetar una página en HTML 4
Centrar una página horizontalmente: – Todo el contenido del body se encerrará en un afectado por un id donde se establecerán los márgenes necesarios. – Se especificaría la siguiente regla CSS: #contenedor { width: 700px; margin: 0 auto; } (margen superior e inferior a 0 y laterales a auto según el tamaño de su contenedor padre que, en este caso, es body por lo que se centrará en la ventana asociada al body del documento; la anchura se puede establecer en píxeles o en porcentaje)
– En el documento se invocaría con:
Mi sitio web ...
Se ha definido el centrado de la página en la ventana con el id contenedor. Para que se aprecie el efecto del centrado horizontal se ha dado distinto color al body que al div. Sin embargo, no hay centrado vertical
Hay centrado horizontal pero no vertical. Este es más complejo de hacer
Centrar una página verticalmente: trabajar con posicionamiento absoluto Se establece que la anchura y altura de la página son fijas (propiedades width y height) y el desplazamiento necesario para centrarla que también es fijo (propiedades margin-left y margin-top que valen la mitad de la anchura y altura respectivamente). El desplazamiento hasta el centro de la ventana del navegador se calcula dinámicamente gracias al uso de porcentajes en las propiedades top y left, repartiendo el hueco que queda al 50%
Diseño a 2 columnas con cabecera y pie de página
La solución CSS se basa en el uso de la propiedad float para los elementos posicionados como el menú y los contenidos y el uso de la propiedad clear en el pie de página para evitar los solapamientos ocasionados por los elementos posicionados con float. Se definen id para cada bloque (cabecera, menú, etc), así como para el documento en general (contenedor)
Las reglas CSS serían las siguientes: (además se podrían aplicar fondos, colores, tipos de letras, etc) #contenedor {width: 700px;} #cabecera {…} #menu {float: left;width: 150px;} /* se podría poner: width:25% */ #contenido {float: left;width: 550px;} /*width:75%*/ #pie {clear: both;} El documento sería:
….
….
….
….
Diseño a 3 columnas con cabecera y pie de página Similar al anterior usando también usando también float y clear
#contenedor {…} #cabecera {…} Se puede optar #menu {float:left; width: 15%;} por posicionar #contenido {float:left; width: 85%;} #contenido #principal {float:left; width: 80%;} todos los #contenido #secundario {float:left; width: 20%;} elementos mediante #pie {clear: both;}
… …
… …
…
float:left o se puede utilizar float:left para el menú y la zona principal de contenidos y float:right para el contenedor de los contenidos y la zona secundaria de contenidos
Alturas y anchuras máximas y mínimas
Cuando se diseña la estructura de una página web, se debe tomar la decisión de optar por un diseño de anchura fija o un diseño de anchura variable para adaptarse a la ventana del navegador. La mayoría de las veces es conveniente una solución intermedia: que la anchura de la página sea variable, respetando ciertos límites para que la anchura de la página no sea tan pequeña como para que no se puedan mostrar correctamente los contenidos y tampoco sea tan ancha como para que las líneas de texto no puedan leerse cómodamente.
Alturas y anchuras máximas y mínimas
CSS define cuatro propiedades que permiten limitar la anchura y altura mínima y máxima de cualquier elemento de la página. Las propiedades son max-width, min-width, max-height y min-height. Las cuatro pueden tomar los valores: – | | none | inherit
Esta propiedades se suelen utilizarse para estructurar la página. Las propiedades más utilizadas son max-width y minwidth Ejemplo: #contenedor { min-width: 500px; max-width: 900px; }
Estructuración del código CSS
Las reglas CSS de las hojas de estilos complejas se suelen incluir en el siguiente orden: – Estilos básicos (, tipo de letra por defecto, márgenes de , y
Uso de comentarios en CSS Otra característica común de los mejores sitios web es el uso de comentarios CSS para mejorar la estructura de las hojas de estilos muy largas. Los comentarios en CSS se especifican con /* */
/* Global ------------------------------------------------------------------*/ html, body, form, h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl {margin:0;padding:0;} ul,li {list-style-type:none;}
División de los estilos en varios archivos CSS
Normalmente, los estilos de una página compleja se dividen en varios archivos CSS diferentes para hacerlos más manejables. En primer lugar, se suele utilizar un archivo común que contiene todos los estilos básicos de las páginas HTML del sitio web. Además, si existe alguna sección especial del sitio web que requiera nuevos estilos, se puede crear un nuevo archivo CSS.
Una vez creados los archivos CSS, existen dos estrategias para enlazar varios archivos CSS en las páginas HTML: Se pueden incluir tantos elementos como archivos CSS se enlazan:
También se puede enlazar un único archivo CSS que se encarga de importar todos los demás:
El contenido del archivo estilos.css debería ser: @import url("basico.css"); @import url("seccion.css"); @import url("impresora.css"); @import url("movil.css");