CSSIntroducción: elementos básicos
¿Para qué se utiliza?• Una vez generado el contenido de undocumento html, las hojas de estilopermiten proporcionar de un d...
Reglas CSS• CSS trabaja asociando reglas aelementos que aparecen en undocumento web.• Las reglas indican como se mostraráe...
Estructura de una regla• Selector: especifica el elemento oconjunto de elementos a los queafectará la regla• Declaración: ...
Ejemploh1, p, h2 {font-family: arial,color: #000000;background-color: #FFFFFF;}Grupo de selectoresGrupo de declaracionesPr...
Agrupación de selectores• Si un grupo de elementos dispone decaracterísticas comunes se puededisponer en la regla la lista...
Agrupación de declaraciones• Una declaración siempre seencuentra delimitada por llaves• Un grupo de declaraciones asignada...
Ejemploh1{color: black;border:6px solid blue;}h3{color: blue;border:3px solid green;}h1, h2, h3{letter-spacing: 4px;paddin...
INCLUIR CSS EN UNDOCUMENTO
Embeber una hoja de estilo• Se utiliza para este fin el elemento<style type=‘text/css’>.• En su interior se especifican la...
Ejemplo (reglas embebidas)…<style type=‘text/css’><!--h1{color: black;border:6px solidblue;…}--></style>…ReglasInicio de c...
Enlazar a hojas de estilo externas• Con el elemento link es posible hacerreferencia a un fichero que contengalas reglas.• ...
Ejemplo: enlace a CSS<link rel=‘stylesheet’ href=‘usr/css/estilos_1.css’ type=‘text/css’>Contenido del archivo estilos_1.c...
Importar una hoja de estilos• Dentro de un elemento style es paraposible incluir la regla @import con elfin de utilizar un...
Utilizar el atributo style• Se utiliza dentro del elemento<head> para enlazar un archivo csso incluir estilos que únicamen...
Ventajas de utilizar hojas de estiloexternas• Evita que tengamos que repetir lasmismas reglas en cada documento.• Es posib...
CONTROL DE TEXTO
Clasificación• Podemos clasificar las propieadesque controlan la apariencia del textoen:– Aquellas que afectan a la fuente...
Propiedades de la fuentePropiedad Objetivofont Permiten combinar varias propiedades en unafont-family Especifica el tipo d...
Algunos conceptos tipográficos• Una familia de fuentes se denomina«typeface», por ejemplo, Arial• Una fuente en un miembro...
La propiedad font-size• Especifica el tamaño de la fuente, sepuede indicar de varias formas:– Longitud en diversas unidade...
La propiedad font-weight• Se utiliza para modificar básicamentegrosores de las fuentes.• Los posibles valores que le puede...
Las propiedades font-style y font-variant• La propiedad font-style permiteindicar los siguietes valores: normal,italic o o...
Propiedades del formato de textoPropiedad Funcióncolor Especifica el color del textotext-align Especifica la alineación ho...
Algunos valores de laspropiedadesPropiedad Valorescolor Código hexadecimal RGBtext-align left, right, center, justify, sta...
Ejemploh3{color: green;font-family: Verdana;letter-spacing: 10px;}p{color: blue;font-family: Cambria;font-size: 150%;}
SELECTORES
Selectores• Existen una serie de selectores quevan mas allá de los elementos HTML,a saber:– El selector universal– El sele...
El selector universal• Se corresponde con cualquierelemento de un documento HTML• Está representado por el carácter «*»• T...
El selector por tipo• Basta incluir una lista de elementosseparados por coma para que losestilos especificados se apliquen...
El selector por clase• Permite aplicar un estilo a unelemento que pertenezca a unaclase.• Se puede utilizar de tres formas...
Ejemplo (selector por clase)<h3 class="resumen">Estilo aplicado a una cabecera de nivel 3</h3><p class="resumen entradilla...
Selector por ID• Funciona de forma análoga a laselección por clase, pero para un soloelemento• El elemento se identifica c...
Los selectores hijo y descendiente• El selector hijo permite aplicar unestilo que se encuentra dentro deotro. Se utiliza e...
Ejemplostd > i{color: green;font-family: Cambria;font-size: 150%;}Ejemplo de selector hijoA cualquier elemento <i> incluid...
Selector de hermanos adyacentes• Permite seleccionar un elemento quese encuentra a continuación de otro.• Entre ambos elem...
Los selectores de atributos I• Es posible aplicar estilosdependiendo de los atributos yvalores de que disponga unelemento....
Los selectores de atributos IISelector Ejemplo Se corresponde con..existencia p[id] Cualquier párrafo que lleve el atribut...
Ejemplos<p id="intro" class="muestra">Un p&aacute;rrafo que sirvecomo introducci&oacute;n</p>p[id] {color: #000000;}p[id="...
LONGITUDES Y TAMAÑOS
Unidades• Muchas propiedades de las hojas deestilos deben ser expresadas enunidades de longitud o tamaño.• Las cantidades ...
Unidades relativas• Existen tres tipos:– El pixel– Em– Ex• El pixel hace referencia a laresolución de la pantalla, mientra...
Pixeles• El pixel hace referencia a la mínimaresolución de un dispositivo.• El navegador ajusta al dispositivo eltamaño es...
Em• Un «em» es equivalente a la alturade la fuente actual, por tanto, puedevariar dependiendo de laspreferencias estableci...
ex• Especifica la altura de una xminúscula, que dependeevidentemente de la fuente.
Nuevas unidades relativas• «rem», representa el tamaño delelemento raíz. De esta forma sepuede utilizar para hacer referen...
Unidades absolutasUnidad Se corresponde a…pt puntopc picain pulgadacm centímetromm Milímetro
EL modelo de «cajas»• Este modelo ayuda a comprendercomo se muestran los distintoselementos en el navegador.• La idea es q...
Propiedades mas importantes delmodeloPropiedad Descripciónborder Cada caja posee un borde que la separa delrestomargin Es ...
A tener en cuenta: elementos detipo bloque e inline• Los elementos de tipo bloquerespecto al modelo de cajas secomportan c...
Propiedades del borde• Podemos modificar tres propiedadesdel borde, pudiendo especificar cadalado del borde si fuera neces...
Valores para «border-style»Valor Descripciónnone No se muestra el bordesolid Es una línea única sólidadotted Un línea únic...
EjemplosCada párrafo muestra un tipo de borde
Anchura del borde• No es posible utilizar porcentajes,pudiéndose utilizar medidasabsolutas o relativas• Se pueden utilizar...
Agrupar propiedades del bordep[id="solid"] {border-style : solid;}p[id="dotted"] {border : 6px solid blue;}El segundo párr...
La propiedad «padding»• Indica el espacio entre el contenidode un elemento y su borde.• Se puede especificar cualquier tip...
La propiedad «margin»• Esta propiedad controla el espacioentre cajas.• Su valor puede ser una longitud, unporcentaje o el ...
Dimensiones de una caja decontenidoPropiedad Objetivoheight Establece la alturawidth Ancho de la cajaline-height Altura de...
La propiedad «overflow»• Cuando se controla el tamaño de la caja, sucontenido puede que necesite mas espacio paramostrarse...
Upcoming SlideShare
Loading in …5
×

Css: elementos básicos

571 views
342 views

Published on

Esta presentación contiene los elementos de CSS más básicos

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
571
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Css: elementos básicos

  1. 1. CSSIntroducción: elementos básicos
  2. 2. ¿Para qué se utiliza?• Una vez generado el contenido de undocumento html, las hojas de estilopermiten proporcionar de un diseñoal documento.• Con CSS el contenido y el diseñopermanecen independientes, de estaforma la modificación de uno noafecta al otro.
  3. 3. Reglas CSS• CSS trabaja asociando reglas aelementos que aparecen en undocumento web.• Las reglas indican como se mostraráel contenido.• Una regla está formada por unselector y una declaración.
  4. 4. Estructura de una regla• Selector: especifica el elemento oconjunto de elementos a los queafectará la regla• Declaración: Especifica el estilo aaplicar a los elementos.• Propiedad/valor: la declaración seencuentra dividida en una propiedady el valor que tomará.
  5. 5. Ejemploh1, p, h2 {font-family: arial,color: #000000;background-color: #FFFFFF;}Grupo de selectoresGrupo de declaracionesPropiedadValor
  6. 6. Agrupación de selectores• Si un grupo de elementos dispone decaracterísticas comunes se puededisponer en la regla la lista deselectores.• Los selectores irán separados por elcarácter «,».• Puede haber varias reglas para unmismo selector.
  7. 7. Agrupación de declaraciones• Una declaración siempre seencuentra delimitada por llaves• Un grupo de declaraciones asignadaa uno o varios selectores irán entrelas llaves correspondientes.
  8. 8. Ejemploh1{color: black;border:6px solid blue;}h3{color: blue;border:3px solid green;}h1, h2, h3{letter-spacing: 4px;padding: 12px;}Estas reglas seaplicarán a todoslos selectores de lalista
  9. 9. INCLUIR CSS EN UNDOCUMENTO
  10. 10. Embeber una hoja de estilo• Se utiliza para este fin el elemento<style type=‘text/css’>.• En su interior se especifican lasreglas.• Es posible ocultar a los navegadoresque no soporten CSS lasdeclaraciones comentando lasreglas.
  11. 11. Ejemplo (reglas embebidas)…<style type=‘text/css’><!--h1{color: black;border:6px solidblue;…}--></style>…ReglasInicio de comentarioElemento styleFin de comentario
  12. 12. Enlazar a hojas de estilo externas• Con el elemento link es posible hacerreferencia a un fichero que contengalas reglas.• Este elemento necesita que le seanasignados los parámetros:– rel, valor stylesheet– href, url que especifica la localizacióndel fichero– type, el tip MIME del archivo ‘text/css’
  13. 13. Ejemplo: enlace a CSS<link rel=‘stylesheet’ href=‘usr/css/estilos_1.css’ type=‘text/css’>Contenido del archivo estilos_1.css….…...p{font-family: arial;font-size: 12pt;}………..
  14. 14. Importar una hoja de estilos• Dentro de un elemento style es paraposible incluir la regla @import con elfin de utilizar una hoja de estilosexterna.<style type=‘text/css’>@import url(‘usr/css/h_estilos.css’);</style>
  15. 15. Utilizar el atributo style• Se utiliza dentro del elemento<head> para enlazar un archivo csso incluir estilos que únicamente seaplicarán sobre ese documentoHTML.<style type=‘text/css’>H1 {color:#FFFF00;}</style>
  16. 16. Ventajas de utilizar hojas de estiloexternas• Evita que tengamos que repetir lasmismas reglas en cada documento.• Es posible modificar la aparienciadesde un único archivo.• La carga de documentos HTML esmas rápida, una vez que se carga laprimera hoja de estilos.• Es posible seleccionar hojas de estilodistintas dependiendo del navegador.
  17. 17. CONTROL DE TEXTO
  18. 18. Clasificación• Podemos clasificar las propieadesque controlan la apariencia del textoen:– Aquellas que afectan a la fuente y suapariencia– Aquellas que afectan al texto de formaindependiente de la fuente utilizada
  19. 19. Propiedades de la fuentePropiedad Objetivofont Permiten combinar varias propiedades en unafont-family Especifica el tipo de fuente a utilizarfont-size Especifica el tamaño de la fuentefont-weight Especifica si la fuente será normal o negrillafont-style Especifica si la fuente será normal, itálica o cursivafont-variant Establece si la fuente será normal o versalitas
  20. 20. Algunos conceptos tipográficos• Una familia de fuentes se denomina«typeface», por ejemplo, Arial• Una fuente en un miembro específicode una familia, por ejemplo, Arial de 9puntos negrilla• Una familia de fuentes es «serif» sidispone de remates o adornos• Una familia de fuentes esmonoespaciada si todas sus caracteresdisponen de la misma anchura.
  21. 21. La propiedad font-size• Especifica el tamaño de la fuente, sepuede indicar de varias formas:– Longitud en diversas unidades: px, em,ex, pt, in, cm, pc, mm, rem, vw o vh– Tamaño absoluto: xx-small, x-small,small, medium, large, x-large, xx-large.– Tamaño relativo: smalle, larger– Porcentaje, relativo al tamaño delelemento padre.
  22. 22. La propiedad font-weight• Se utiliza para modificar básicamentegrosores de las fuentes.• Los posibles valores que le puedenser asignados son: normal, bold,bolder, ligther, y de 100 en 100empezando por 100 y finalizando en900.
  23. 23. Las propiedades font-style y font-variant• La propiedad font-style permiteindicar los siguietes valores: normal,italic o oblique• La propiedad font-variant permiteindicar si la fuente es normal oversales. Los valores que puedetomar son: normal o small-caps.
  24. 24. Propiedades del formato de textoPropiedad Funcióncolor Especifica el color del textotext-align Especifica la alineación horizontal respecto al elementoque lo contienevertical-align alineación vertical respecto al elemento que lo contienetext-decoration Indica si el texto debe estar subrayadotext-indent Indica una indentación respecto del bordetext-transform Indica si el texto está en mayúscula, minúscula …text-shadow Indica un sombreado en la fuenteletter-spacing Controla el espaciado entre caracteres (tracking)word-spacing Controla el espaciado entre palabraswhite-spacing Establece el comportamiento de los espacios en blancodirection Especifica la dirección del texto (similar al atributo dir)
  25. 25. Algunos valores de laspropiedadesPropiedad Valorescolor Código hexadecimal RGBtext-align left, right, center, justify, start, endvertical-align baseline, sub, super, top, text-top, middle, bottom,text-bottomtext-decoration underline, overline, line-through, nonetext-indent Cantidad que deseamos se encuentre indentada laprimera líneatext-shadow Un código de color y 3 longitudestext-transform None, capitalize, uppercase, lowercaseletter-spacing Longitud de la separación, permite cantidadesnegativasword-spacing Longitud de la separación, permite cantidadesnegativas
  26. 26. Ejemploh3{color: green;font-family: Verdana;letter-spacing: 10px;}p{color: blue;font-family: Cambria;font-size: 150%;}
  27. 27. SELECTORES
  28. 28. Selectores• Existen una serie de selectores quevan mas allá de los elementos HTML,a saber:– El selector universal– El selector por tipo– El selector por clase– El selector por ID– El selector hijo y descendiente– El selector adyacente
  29. 29. El selector universal• Se corresponde con cualquierelemento de un documento HTML• Está representado por el carácter «*»• Todos los estilos especificados coneste selector serán aplicados acualquier elemento del documento.• Estilos más específico podránsobreescribir los estilosespecificados con este selector.
  30. 30. El selector por tipo• Basta incluir una lista de elementosseparados por coma para que losestilos especificados se apliquen aaquellosh1,h2,h3{color: blue;font-family: Cambria;}Estos estilos seaplicarán sobre lascabeceras de nivel 1,2 y 3
  31. 31. El selector por clase• Permite aplicar un estilo a unelemento que pertenezca a unaclase.• Se puede utilizar de tres formas:– Indicando que el elemento pertenece almenos a la clase– Indicando que el elemento es de un tipoy una clase– Indicando que el elemento pertenece auna clase dentro de otra
  32. 32. Ejemplo (selector por clase)<h3 class="resumen">Estilo aplicado a una cabecera de nivel 3</h3><p class="resumen entradilla">Este p&aacute;rrafo sirve de ejemplo para modificar los atributos de texto</p>Se aplicará a todos los elementos de clase resumen.resumen{color: blue;font-family: Cambria;}Se aplicará a todos los elementos de clase resumenque sean párrafosp.resumen{color: blue;font-family: Cambria;}
  33. 33. Selector por ID• Funciona de forma análoga a laselección por clase, pero para un soloelemento• El elemento se identifica con el carácter«#».Se aplicará al elemento de id parrafo_importante#parrafo_importante {color: blue;font-family: Cambria;}
  34. 34. Los selectores hijo y descendiente• El selector hijo permite aplicar unestilo que se encuentra dentro deotro. Se utiliza el símbolo «>» entreel elemento padre e hijo.• El selector descendiente aplicará unestilo a cualquier elemento contenidoy que se corresponda con la regla deestilo. Se utiliza el espacio en blancoentre los elementos.
  35. 35. Ejemplostd > i{color: green;font-family: Cambria;font-size: 150%;}Ejemplo de selector hijoA cualquier elemento <i> incluidoen una celda le será aplicada laregla.table i{color: green;font-family: Cambria;font-size: 150%;}Ejemplo de selectordescendienteA cualquier elemento <i> incluidoen una tabla, independientementedel elemento que sea, le seráaplicada la regla.
  36. 36. Selector de hermanos adyacentes• Permite seleccionar un elemento quese encuentra a continuación de otro.• Entre ambos elementos se situará elcarácter «+».Ejemplo de hermano adyacenteA cualquier párrafo precedido deuna cabecera de nivel 3 le seráaplicada la regla.h3+p{color: blue;font-family: Cambria;}
  37. 37. Los selectores de atributos I• Es posible aplicar estilosdependiendo de los atributos yvalores de que disponga unelemento.• Este tipo de selectores ha sidoampliado con CSS3.
  38. 38. Los selectores de atributos IISelector Ejemplo Se corresponde con..existencia p[id] Cualquier párrafo que lleve el atributoidigualdad p[id=‘val’] Párrafo cuyo id sea igual a val.espacio p[class~=‘var’] Párrafo que contenga en su atributoclass el valor valprefijo p[attr^x] Párrafo que incluya cualquier atributoque empiece con el carácter «x»subcadena p[attr*’pe’] Párrafo que incluya cualquier atributoque contenga la cadena «pe».sufijo p[attr$’e’] Párrafo que incluya cualquier atributoque finalice con el carácter «e»
  39. 39. Ejemplos<p id="intro" class="muestra">Un p&aacute;rrafo que sirvecomo introducci&oacute;n</p>p[id] {color: #000000;}p[id="intro"] {background-color : yellow;}p[class^="m"] {letter-spacing: 10px;El párrafo mostrado se ajusta alas tres reglas:• El párrafo contiene el atributo id• El párrafo tiene por atributo id elvalor intro• El párrafo tiene es de una clasecuyo nombre comienza por m
  40. 40. LONGITUDES Y TAMAÑOS
  41. 41. Unidades• Muchas propiedades de las hojas deestilos deben ser expresadas enunidades de longitud o tamaño.• Las cantidades pueden venirexpresadas como:– Cantidades absolutas– Cantidades relativas– En forma de porcentajes
  42. 42. Unidades relativas• Existen tres tipos:– El pixel– Em– Ex• El pixel hace referencia a laresolución de la pantalla, mientrasque las otras dos hacen referencia altamaño de la fuente.
  43. 43. Pixeles• El pixel hace referencia a la mínimaresolución de un dispositivo.• El navegador ajusta al dispositivo eltamaño especificado en pixels en unaCSS, de tal forma que sea legible sucontenido.
  44. 44. Em• Un «em» es equivalente a la alturade la fuente actual, por tanto, puedevariar dependiendo de laspreferencias establecidas por elusuario en el navegador.• Normalmente se utiliza paraespecificar espaciado entre texto yelementos que tengan relación contexto.
  45. 45. ex• Especifica la altura de una xminúscula, que dependeevidentemente de la fuente.
  46. 46. Nuevas unidades relativas• «rem», representa el tamaño delelemento raíz. De esta forma sepuede utilizar para hacer referencia aaquella.• «vh», es el 1% de la anchura de laventana gráfica. Permite escalar eltamaño de la fuente cuando semodifica la ventana gráfica.
  47. 47. Unidades absolutasUnidad Se corresponde a…pt puntopc picain pulgadacm centímetromm Milímetro
  48. 48. EL modelo de «cajas»• Este modelo ayuda a comprendercomo se muestran los distintoselementos en el navegador.• La idea es que todo elemento HTMLse encuentra contenido en una caja orectángulo, del que puedenmodificarse una serie decaracterísticas.
  49. 49. Propiedades mas importantes delmodeloPropiedad Descripciónborder Cada caja posee un borde que la separa delrestomargin Es la distancia entre el borde de una caja yla siguientepadding Distancia entre el contenido y su borde
  50. 50. A tener en cuenta: elementos detipo bloque e inline• Los elementos de tipo bloquerespecto al modelo de cajas secomportan como si el elementoocupara todo el ancho delnavegador.• Los elementos de tipo inline fluye a lolargo de lo que ocupa el elemento.Las imágenes son tratadas como unelemento inline.
  51. 51. Propiedades del borde• Podemos modificar tres propiedadesdel borde, pudiendo especificar cadalado del borde si fuera necesario(boder-bottom, border-rigrth…)Propiedad Descripcíónborder-color Color del bordeborder-style Estilo del bordeborder-width Anchura del borde
  52. 52. Valores para «border-style»Valor Descripciónnone No se muestra el bordesolid Es una línea única sólidadotted Un línea única punteadadashed Un línea única formada por guionesdouble Línea doblegroove El borde parece tallado en la páginaridge Contrario a grooveinset Aparece el texto como embebido en la páginaoutset Parece que el texto saliera de la páginahidden Comeno none, pero tiene consecuencias cuandohay conflictos con los bordes.
  53. 53. EjemplosCada párrafo muestra un tipo de borde
  54. 54. Anchura del borde• No es posible utilizar porcentajes,pudiéndose utilizar medidasabsolutas o relativas• Se pueden utilizar, además lossiguientes valores:– «thin»– «medium»– «thick»
  55. 55. Agrupar propiedades del bordep[id="solid"] {border-style : solid;}p[id="dotted"] {border : 6px solid blue;}El segundo párrafo reúneen el elemento border lastres propiedadesasignadas a un borde
  56. 56. La propiedad «padding»• Indica el espacio entre el contenidode un elemento y su borde.• Se puede especificar cualquier tipode medida. No se hereda estapropiedad, pero si se puedeespecificar el valor «inherit».• Se puede especificar el tamaño delespaciado utilizando paddding-bottom, padding-top …
  57. 57. La propiedad «margin»• Esta propiedad controla el espacioentre cajas.• Su valor puede ser una longitud, unporcentaje o el valor «inherit».• No es una propiedad que heredenlos elementos hijos.• Se puede utilizar margin-top, margin-bottom…
  58. 58. Dimensiones de una caja decontenidoPropiedad Objetivoheight Establece la alturawidth Ancho de la cajaline-height Altura de la línea de textomax-height /min-heightMáxima altura de la cajaMínima altura de la cajamax-width /min-widthMáxima anchura de la cajaMínima anchura de la caja
  59. 59. La propiedad «overflow»• Cuando se controla el tamaño de la caja, sucontenido puede que necesite mas espacio paramostrarse. Esta propiedad permite gestionarcomo responderá el navegador.Valor Comportamientohidden El texto que sobra no se muestravisible El texto que no quepa se muestra fuerascroll A la caja se le asigna barras deslizantesauto Se muestran barras deslizantes cuandose necesiteninherit Hereda el comportamiento de suelemento padre

×