Your SlideShare is downloading. ×
0
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Css: elementos básicos
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Css: elementos básicos

267

Published on

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

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
267
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. CSSIntroducción: elementos básicos
  • 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. 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. 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. Ejemploh1, p, h2 {font-family: arial,color: #000000;background-color: #FFFFFF;}Grupo de selectoresGrupo de declaracionesPropiedadValor
  • 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. 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. 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. INCLUIR CSS EN UNDOCUMENTO
  • 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. Ejemplo (reglas embebidas)…<style type=‘text/css’><!--h1{color: black;border:6px solidblue;…}--></style>…ReglasInicio de comentarioElemento styleFin de comentario
  • 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. 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. 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. 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. 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. CONTROL DE TEXTO
  • 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. 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. 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. 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. 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. 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. 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. 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. Ejemploh3{color: green;font-family: Verdana;letter-spacing: 10px;}p{color: blue;font-family: Cambria;font-size: 150%;}
  • 27. SELECTORES
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. LONGITUDES Y TAMAÑOS
  • 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. 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. 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. 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. ex• Especifica la altura de una xminúscula, que dependeevidentemente de la fuente.
  • 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. Unidades absolutasUnidad Se corresponde a…pt puntopc picain pulgadacm centímetromm Milímetro
  • 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. 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. 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. 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. 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. EjemplosCada párrafo muestra un tipo de borde
  • 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. 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. 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. 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. 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. 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

×