• Like
Diapo03
Upcoming SlideShare
Loading in...5
×
Uploaded on

Introducción a CSS

Introducción a CSS

More in: Education , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
248
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
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. Cascading Style Sheets CSS
  • 2. Hojas de Estilo en Cascada
    • CSS nos permite:
      • Separar presentación de contenido
      • Mayor flexibilidad, escalabilidad, y posibilidades en la presentación de contenidos web
      • Dinamismo (junto a JScript y DOM)
      • Correctamente utilizado reduce el peso de las páginas
      • Es una metodología para dar uniformidad al uso de tags en documentos HTML / XHTML , el agregar atributos a cada etiqueta HTML / XHTML puede ser un proceso mecánico.
  • 3. Hojas de Estilo en Cascada
      • Imagínese que para centrar todas las celdas (<td> ) de un documento o de todo un sitio, tuviera que agregar el atributo align=&quot;center&quot; a todos sus elementos, es esta facilidad la que precisamente otorga CSS .
    Selector { propiedad : valor ; ...} Declaración H1 {color:#CC9900;} Ejemplo:
  • 4. Cascading (En Cascada)
    • El nombre tiene sus raíces en el funcionamiento de las mismas, ya que es posible definir uniformidades en tres distintos puntos de un documento :
      • Uniformidad en Varios Documentos (Archivo CSS)
      • Uniformidad en Documento (Tags <style> y <span> )
      • Uniformidad en Tag ( Clases y en Linea )
  • 5. Cascading (En Cascada)
    • El efecto en Cascada se debe al nivel de precedencia que se toma al ser interpretadas las diversas uniformidades en un documento.
    • Si en los atributos de los tags <style> existen varias definiciones traslapadas con aquellas definidas en un archivo CSS, entonces las últimas tomarán precedencia.
    • De igual manera, aquellas definiciones por Tag ( Clases y en Linea) tomarán precedencia sobre aquellas de Documento (Tags <style> y <span>) y archivos CSS.
        • Nota.- en dado caso de no definirse ninguna funcionalidad para algún tag el Navegador utiliza sus valores &quot;defaults&quot;.
  • 6.
    • En la Cabecera (<HEAD>)
      • <STYLE TYPE=&quot;text/css&quot;>
      • <!--
      • P {text-align:right}
      • -->
      • </STYLE>
    • Estilo como atributo
      • <P STYLE=&quot;text-align: right&quot;>Estilo propio</P>
    • Hoja de estilo externa
      • <LINK REL=&quot;stylesheet&quot; TYPE=&quot;text/css&quot; HREF=&quot;estilo.css&quot;>
    Aplicar CSS
  • 7. Uniformidad en Varios Documentos
    • Esta implementación es aquella utilizada a lo largo de varios documentos y su funcionamiento depende de un archivo que es llamado dentro del documento HTML / XHTML , este tipo de declaración es similar a la de una imagen, y existen dos posibilidades para ser incorporada a un documento :
    <html> <head> <title> Documento de CSS </title> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/css/estilo.css&quot;> <style type=&quot;text/css&quot;><!— @import url( http://www.osmosislatina.com/css/estilo.css ) --> </style> </head> <body> ........ ........ </body> </html> (Archivo CSS)
  • 8. Uniformidad en Varios Documentos
    • Ambas definiciones para importar el archivo CSS son anidadas dentro del Tag <head> del documento y tienen el mismo funcionamiento.
      • la primer declaración importa el archivo CSS mediante el elemento link con sus respectivos atributos.
      • la segunda declaración hace uso de los Tags <style> para importar el mismo archivo CSS; a pesar de las diferencias en sintaxis,
    • La utilización de comentarios <!-- y --> antes y después de los tags <style> se hace con la intención de evitar errores en los Navegadores que no reconocen el tag <style> y/o tienen desactivado el uso de CSS.
    (Archivo CSS)
  • 9. composición de una hoja de estilo para ser incorporda a un documento HTML / XHTML :
    • /* css/estilo.css */
    • /* Definir el Color de Fondo */
    • body { background-color: #FFFFFF; }
    • /* Para definir una Imagen de Fondo */
    • body { background: url(imagenes/logo.gif) */
    • /* Definir Tipo de Letra para una gran mayoria de Tags */
    • h1, h2, h3, h4, h5, h6, body, a, p, ul, ol, td, th,
    • blockquote, textarea, input, select, form {
    • font-family: arial, helvetica, sans-serif
    • }
  • 10. composición de una hoja de estilo para ser incorporda a un documento HTML / XHTML : /* Definir tipos de letras para tags especiales */ pre, code { font-family: monospace } /* Definir Sangría para cada salto de párrafo */ p {text-indent: 3em } p.sinsangria {text-indent: 0em} /* Definir tamaño de letra para Títulos */ h1 { font-size: 18pt } h2 { font-size: 14pt } h3 { font-size: 14pt } h4 { font-size: 12pt } h5 { font-size: 10pt } h6 { font-size: 8pt }
  • 11. Uniformidad en Documento (Tags <style> y <span> ).
    • Dentro de los tag <style> también es posible definir el comportamiento de tags que afectarán un documento en particular, dichas declaraciones son idénticas a aquellas empleadas en una hoja de estilo (CSS), con la diferencia que estas solo tomaran efecto en solo documento.
    • <head>
    • <title> Documento de CSS </title>
    • <style type=&quot;text/css&quot;>
    • <!–
      • body { background-color:black }
      • h1,h3,h4 {text-align: center}
      • h2 {text-align: right}
      • p b {color: yellow}
      • a:link { color: blue }
      • a:active { color: red; font-weight: bold}
      • a:visited { color: green }
      • span { color: red }
      • span.negrita { font-weight: bold }
    • -->
    • </style>
    • </head>
  • 12. Uniformidad en Documento (Tags <style> y <span> ).
    • body { background-color: black } : Cualquier contenido dentro de los Tags <body> (todo el documento en sí) tendrá fondo negro.
    • h1,h3,h4 {text-align: center} : Cualquier contenido dentro de los Tags <h1> , <h3> , <h4> será alineado en el centro.
    • h2 {text-align: right} : Cualquier contenido dentro de los Tags <h2> será alineado hacia la derecha.
    • p b {color: yellow} : Después de cualquier salto de renglón ( tags <p> ) si precedía de letras negritas ( tags <b> ) el contenido será de color amarillo; aquí es importante mencionar que si existen letras negritas no será asignado el color amarillo salvo estas se encuentren dentro de un salto de renglón, lo anterior se debe a la omisión de comas (&quot;,&quot;) entre los elementos que genera un comportamiento anidado.
    • a:link { color: red } : Todos los links de la página ( tags <a> ) estarán en rojo.
    • a:active { color: blue; font-weight: bold} : Al momento de oprimir el Link, la letras aparecerán azules y la letra se tornará negrita.
    • a:visited { color: green } : Si el usuario observa un Link que ya visito, éste aparecerá de color verde.
    Los parámetros definidos dentro de los tags <style> indican lo siguiente:
  • 13. span
    • Al utilizarse las diversas definiciones mencionadas anteriormente, estas toman un efecto sobre todas las declaraciones del documento, esto correspondería a que el comportamiento de todos los tags <h2> o <a> (links) seria idéntico.
    • Sin embargo, existen ocasiones en las que este comportamiento no es deseado para todos los elementos de un documento, para este tipo de situaciones se utiliza el Tag <span>
    • Las definiciones que inician con span tienen un comportamiento especifico ya que forman parte de CSS.
  • 14. span
      • La siguiente declaración permite que únicamente una sección del contenido sea afectada:
      • <span> este contenido será desplegado en colo rojo </span>
      • Para que el tag <span> pueda ser utilizado en diversas circunstancias, es posible generar clases de la siguiente manera:
      • <span class=&quot;negrita&quot;> este contenido será desplegado en letras negritas </span>
    • Además del uso de clases, el Tag <span> también puede contener declaraciones en linea a través del atributo style.
  • 15. el uso de Clases y declaraciones en linea forma parte de las definiciones más refinadas en CSS.
    • Uniformidad en Tag ( Clases y en Linea )
      • existe la posibilidad de definir el funcionamiento de cualquier tag HTML / XHTML al mismo nivel de tags , esto es, el funcionamiento solo tendrá efecto dentro del tag y ningún otro tag del mismo tipo será afectado en el documento, para esto existen dos posibilidades:
    • Definir Clases (&quot;Classes&quot;)
      • Para realizar este comportamiento es necesario definir clases dentro de los parámetros definidos en <style> , o bien, que sean incluidas estas definiciones en un archivo CSS:
  • 16. el uso de Clases y declaraciones en linea forma parte de las definiciones más refinadas en CSS.
    • <head>
    • <title> Documento de CSS </title>
    • <style type=&quot;text/css&quot;>
      • <!--
      • h2.azul {color: azul}
      • h2.verde {color: green; text-align: center}
      • h2.amarilla { color: yellow }
      • .cursiva { font-style: italic }
      • -->
    • </style>
    • </head>
    Los siguientes parámetros definen tres funcionamientos para títulos con tags <h2> , esto otorga la flexibilidad de emplear títulos con diferentes colores.
  • 17. Para utilizar la funcionalidad los tags son llamados con el parámetro class :
      • <h2 class=&quot;azul&quot;> Titulo en Azul </h2> (Desplegaría el titulo en azul)
      • <h2 class=&quot;verde&quot;> Titulo centrado Verde </h2> (Desplegaría el titulo centrado en verde)
    • La clase genérica .cursiva puede ser utilizada para cualquier tipo de tag , esto es :
      • <p class=&quot;cursiva&quot;> despues del salto letra cursiva ...
      • o
      • <b class=&quot;cursiva&quot;> estas son negritas cursivas ...
    • El uso de clases ( class ) no esta limitado a colores y alineación , esta metodología puede ser empleada para cualquier tipo de funcionalidad que sea apoyada por CSS.
  • 18. Para utilizar la funcionalidad los tags son llamados con el parámetro class :
    • Definir en Linea
    • Aunque muy similar a la metodología utilizada en clases ( class ) esta se especifica dentro del tag de la siguiente manera:
      • <h1 style=&quot;color:blue ; font-style: italic&quot;> Titulo definido con parametros en Linea </h1>
    • Esta última metodología también garantiza que solo tags individuales sean afectados.
    • Nota .-el usuario final puede desactivar sus formatos.
  • 19.
    • Elementos
    • H1 {font-family: Arial, Helvetica, sans-serif; font size: 10pt; font-style: italic;}
    • Elementos agrupados
    • H1, P, B {font-color: blue;}
    • Clases para elementos
    • P.enfatizada {font-weight: bold;}
    • Clases generales
    • .enfatizada {font-weight: bold;}
    • Selectores ID
    • #enfatizada {font-weight: bold;}
    Selectores