• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Diapo03
 
  • 430 views

Introducción a CSS

Introducción a CSS

Statistics

Views

Total Views
430
Views on SlideShare
430
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Diapo03 Diapo03 Presentation Transcript

    • Cascading Style Sheets CSS
    • 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.
    • 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:
    • 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 )
    • 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;.
      • 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
    • 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)
    • 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)
    • 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
      • }
    • 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 }
    • 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>
    • 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:
    • 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.
    • 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.
    • 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:
    • 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.
    • 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.
    • 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.
      • 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