CSS

Agenda: Introducción CSS Básico Funcionamiento Cascada Herencia Valores de Propiedad Selectores CSS 3 Selectores Backgrounds y Bordes Multi – columnas Advanced Layout Grid Positioning Media Requies

Inroducción En los orígenes de la Web y en sus primeras versiones, HTML era un lenguaje fácil de aprender y muy reducido en cuanto a sus etiquetas y estructura(1990 al 1993). Empezaron a surgir los primeros navegadores gráficos. Con todos estos cambios que la web había sufrido, nos encontramos con que un lenguaje que en sus inicios había sido "orientado a la estructura", ahora estaba totalmente "orientado a la visualización”. Encontramos etiquetas como, o que definen estilos de visualización sin aportar nada a la estructura del documento representados.

Inroducción Motivos por los que no podemos permitir que nuestros documentos publicados en la web pierdan su estructura: La indexación por los buscadores es mucho más complicada (Google asigna un peso mucho mayor a una página que utliza H1 para definir sus secciones, que a los campos META del documento). Se reduce la acesibilidad. Actualmente existen aplicaciones que permiten la lectura de páginas web como ayuda a los discapacitados. La estructura de la página y la información contenida en la misma es mucho más sencilla de mantener. Actualmente, ciertos aspectos del código HTML pueden hacer que una misma página tenga visualizaciones distintas en distintos navegadores. Estos herrores de diseño son dificilmente depurables cuando la página contiene una estructura de etiquetas complicada y sin ninguna estructuración. Por otra parte, un cambio en un tipo de fuente supone el rediseño de todas las páginas de un site al tener que sustituir todos los valores para el tag FONT.

Inroducción CSS (Cascade Style Sheets) es un estándar del W3C que define las reglas para la presentación del contenido de un documento html o xhtml. Permite definir el aspecto de un elemento o un grupo de elementos dentro de un documento. Ventajas: Simplifica el código de las páginas web. Optimiza el rendimiento de los navegadores. Permite dar una apariencia homogénea a un sitio web al aplicar los mismos estilos a todas sus páginas. Amplía las posibilidades de presentación de HTML al permitir mucho más control. Permite presentar el mismo contenido de diferentes formas sin tener que modificarlo. Permite que los usuarios con necesidades especiales creen sus propias hojas de estilo para ver el contenido según sus preferencias. Desventajas: No todos los navegadores soportan por igual todas las características de CSS.

Inroducción CSS 1 1996 CSS 2 1997 CSS 2.1 Recomendación CSS 3 En desarrollo actualidad

CSS Básico Existen tres formas de añadir estilos a un documento: Estilos en línea. El atributo style de todos elementos html permite añadir estilos particulares a cada elemento. Se aplica al elemento que contiene el atributo. No es recomendable su utilización. Hojas de estilo incrustadas. Se incluyen en el elemento head, mediante la etiqueta style. Se utiliza con el atributo type con el valor "text/css". Hojas de estilo externas. Las definiciones de los estilos se almacenan en un archivo de texto independiente. Se aplica a todos los documentos que enlacen con el archivo mediante… <link href="nombre_archivo" rel="stylesheet" type="text/css" />

CSS Básico Sintaxis Tanto las hojas de estilo externas, como las hojas de estilo incrustadas están formadas una por serie de declaraciones. Estos estamentos pueden ser de dos clases: Reglas. Reglas @. Reglas: h1 { ( SELECTOR) background-color ( ATRIBUTO) : red (VALOR DEL ATRIBUTO) ; Color : white; }

CSS Básico Sintaxis Reglas arroba. Comienzan por el carácter arroba (@). A continuación aparece un identificador. Pueden llevar un conjunto de declaraciones. Permiten dar información adicional al navegador. Ejemplos: @import "otrahoja.css“ Añade en el lugar que aparece la hoja de estilos otrahoja.css. @media print{ * {font-size: xx-large;} } Incorpora estilos especiales cuando el medio de salida es la impresora.

CSS Básico Cascada El estilo de un elemento puede repetirse tanto en una hoja de estilo externa, una hoja incrustada o en un estilo en línea. Además, mediante la regla arroba @import, permite importar estilos desde otras hojas de estilo. @import "hoja_de_estilo.css"; @import url("hoja_de_estilo.css"); Estas declaraciones deberían ir antes que cualquier otra regla en la hoja de estilo. En todas estas definiciones se ha establecido un orden de prioridades en la cascada para determinar el estilo del elemento.

CSS Básico Herencia Las etiquetas de HTML guardan entre sí una relación que suele denominarse padre-hijo . Por ejemplo, en una estructura como <BODY>...</BODY>: <BODY> es padre de y abuelo de . es padre de e hijo de <BODY>. es hijo de y nieto de <BODY>.

CSS Básico Valores de Propiedad Medidas. Están formadas por un número (real o entero) y un identificador que indica la unidad de medida. El identificador puede indicar medidas absolutas o relativas. Medidas relativas. em. Valor computado del cuerpo de letra del elemento en que se usa. Cuando se usa en la propiedad font-size, hace referencia al cuerpo de letra del elemento padre. ex. Altura de la letra x minúscula de la fuente relevante. px. Pixels. Medidas absolutas. in. Pulgadas (2,54 centímetros). cm. Centímetros. mm. Milímetros. pt. Puntos (1/72 pulgadas). pc. Picas (12 puntos). Porcentajes. Número seguido del símbolo %. URL. url( especificaciónDelURL).

CSS Básico Selectores Se utilizan para identificar el elemento sobre el que se aplicará el estilo. Selector universal. Se utiliza el asterísco (*) para indicar que el estilo se aplicará a todos los elementos. Selector de elemento. Se utiliza el nombre del elemento. Selectores de descendiente. La indicación E1 E2 en un selector indicará que el estilo se aplicará a los elementos E2 que sean descendientes de E1. Selectores de hijos. La indicación E1 > E2 en un selector indicará que el estilo se aplica a los elementos E2 que sean hijos directos de E1. Selectores de hermanos adyacentes. La indicación E1 + E2 en un selector indicará que el estilo se aplica al elemento E2 que este inmediatamente después de un elemento E1.

CSS Básico de Id Permite seleccionar los elementos que tengan un valor determinado en el atributo id. Si un elemento tiene un atributo id, su valor debe ser único en todo el documento. El selector de id utiliza el formato #valorId. Por su exclusividad, se suele utilizar para especificar la estructura visual del documento. #menunavegacion {border-color:blue;} #menu-izq a {text-decoration: none;} h1#titulolibro {font-size: 200%;}

CSS Básico Pseudo-elementos y pseudo-clases

CSS Básico Pseudo-elementos y pseudo-clases Pseudo-elemento :first-line. Aplica los estilos a la primera línea de un párrafo. El concepto de “primera línea” dependerá del entorno en el que serepresenta el documento. Pseudo-elemento :first-letter. Aplica los estilos al primer carácter de un párrafo. Se puede utilizar para letras capitulares. Pseudo-clase :first-child. Hace referencia al primer elemento hijo de uno dado. div> p:first-child {text-indent: 0} El primer párrafo de un elemento hijo dentro de un elemento div no tendrá sangría. Pseudo-clase :lang(codigoIdioma). Permite seleccionar los elementos que contengan un atributo lang en un idioma determinado.

CSS Básico Pseudo-elementos y pseudo-clases Pseudo-clases para enlaces. Permiten modificar el formato estándar de los enlaces. :link, hace referencia a un enlace no visitado. :visited, hace referencia a un enlace visitado. Pseudo-clases dinámicas. Permiten actuar por acciones del usuario. :hover, el formato se aplica cuando el dispositivo apuntador pasa por encima del enlace. :active, el formato se aplica en el momento en que el usuario activa el enlace (por ejemplo, al pulsar sobre él). :focus, el formato se aplica cuando es el elemento activo de la página.

CSS3 Backgrounds , Borders y Fuentes: Entre las principales características destacan que se podrá agregar múltiples background a un objeto, los borders podrán ser redondos con posibilidad de indicar el radio de curvatura. .vcard { background-color: #000; background-image: url(a-grad.gif), url(a-bl.gif), url(a-tr.gif); background-repeat: repeat-x, no-repeat, no-repeat; background-position: 0 0, 100% 0, 100%; }

CSS3 Fuentes: Nuevas funciones sobre todo encaminadas a brindar un mejor soporte a múltiples lenguajes. Se pretende volver a incluir el @font-face para utilizar fuentes externas.

CSS3 Ahora será más sencillo crear diseños con múltiples columnas sin etiquetas adicionales. Esta característica me ha parecido extraordinaria y muy útil. En el primer ejemplo, vemos la implementación de esta opción en la versión actual de CSS. Para este caso, debemos crear dos clases CSS y dos objetos DIV para simular la multi-columna. <div class="entry-content" content"> … </div> .entry-content { column-count: 2; column-gap: 30px; }

CSS3 Grid Positioning: Dará la posibilidad que agregar reglas con cuadrículas invisibles para maquetar páginas con un aspecto como libro o revista y jugar con el tamaño y las propiedades de los objetos para hacer que los elementos “floten” entre las posiciones.

CSS3 Selectors: El concepto de selector es un poco complicado de explicar, y todo debido a que este tipo de propiedades son muy poco utilizadas. Algunos ejemplos de selector que si utilizamos son: :hover y :visited (los selector de hipervínculos). Este tipo de selector podrían ser utilizados en otros elementos y de hecho así puede ser, a excepción del navegador Internet Explorer que no los soporta. Los nuevos selector serían: E:only-of-type: un elemento que es único en su tipo. E:not(s): un elemento que no coincide con los selector simples. E ~ F: un elemento F precedido de un elemento E. E:nth-child: un objeto que es el enésimo hijo del nodo padre. E:nth-last-child: un objeto que es el último hijo del nodo padre. E:nth-of-type: un elemento que es el enésimo nodo hijo de otro elemento. E.first-of-type: el primer elemento de un tipo. Las posibilidades para el uso de selector son realmente muchas. Ahora faltará que la nueva versión de CSS 3 este lista para poder empezar a utilizarla en nuevos desarrollos.

Algunas consideraciones h1,h2,h3 { font-family:verdana; font-weight:bold; color:#8A084B; } h1 { font-size:30px; } h2 { font-size:25px; } h3 { font-size:20px; }

Estilo dependiente del contexto h1 b { font-family:verdana; color:#8A084B; } p b { font-family:tahona; color:#8A0808; }

Recursos http://delicious.com/rlramirez tag:css Mail: rlramirez656@gmail.com

CSS

Más contenido relacionado

La actualidad más candente

Destacado

Similar a CSS

Más de rlramirez

Último

CSS