CSS

CSS

  1. ¿Qué significan las siglas CSS?
CSS (Cascading Stylesheets). Es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado.

 2. ¿Para que se utiliza CSS?

Es muy usado para establecer el diseño visual de las páginas web, e interfaces de usuario escritas en HTML o XHTML; el lenguaje puede ser aplicado a cualquier documento XML, incluyendo XHTML, SVG, XUL, RSS. Permite aplicar estilos no visuales, como las hojas de estilo auditivas.
Junto con HTML y JavaScript, CSS es una tecnología usada por muchos sitios web para crear páginas visualmente atractivas, interfaces de usuario para aplicaciones web, y GUIs para muchas aplicaciones móviles (como Firefox OS).

 3. ¿Cuales son las versiones de CSS?

 CSS 1: publicada en 1996.
CSS 2: publicada en 1998.
CSS 2.1: publicada en 2004.
CSS 3: publicada en 2011.

CSS 4: se estima que pueda ser especificación oficial en 2019.

 Nota: las fechas indicadas son solo orientativas ya que una version tarda años en ser desarrollada.

 4. CSS y HTML 
  • Incrustar o incluir CSS en el mismo documento HTML
Para incrustar CSS a un documento HTML definimos la etiqueta <style> de HTML la cual la incluiremos en el encabezado de nuestro documento (únicamente en la sección <head>).

Ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de estilos CSS en el propio documento</title>
<style type="text/css">
  p { color: black; font-family: Verdana; }
</style>
</head>
 
<body>
<p>Un párrafo de texto.</p>
</body>
</html>
Esta forma la emplearemos cuando definamos un pequeño numero de estilos o cuando se desee 
incluir un determinado estilo a una página HTML.
    

  • Incluir CSS en HTML desde un archivo externo.
    • 





Incluiremos todos los estilos CSS en un archivo de tipo CSS que las páginas HTML enlazan mediante la etiqueta <link>, este es un archivo simple de texto con la extención ".css"; se     pueden crear los archivos CSS necesarios para una página HTML y esta a su vez puede enlazar         tantos archivos CSS como necesite.










Pasos CSS:












1) Se crea un archivo de texto y se le añade solamente el siguiente contenido:




p { color: black; font-family: Verdana; }





2) Se guarda el archivo de texto con el nombre estilos.css Se debe poner especial atención a que  el archivo tenga extensión .css y no .txt



3) En la página HTML se enlaza el archivo CSS externo mediante la etiqueta <link>:




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de estilos CSS en un archivo externo</title>
<link rel="stylesheet" type="text/css" href="/css/estilos.css" media="screen" />
</head> 
<body>
<p>Un párrafo de texto.</p>
</body>
</html>








La página HTML anterior antes de mostrar sus contenidos también descarga los contenidos CSS      externos, estos enlazados por medio de la etiqueta <link> .










La etiqueta <link> incluye incluye estos atributos cuando enlaza un archivo CSS:











    

  1. rel: indica el tipo de relación que existe entre el recurso enlazado y la página HTML. Para los archivos CSS siempre se utiliza el valor stylesheet.
    2. 



    

  1. type: indica el tipo de recurso enlazado. Sus valores están estandarizados y para los archivos CSS su valor siempre es text/css.
    2. 



    

  1. href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser       relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web.
    2. 



    







    

  • media: indica el "medio" donde se va a aplicar los estilos del archivo CSS.
    • 









    

  1. Selectores CSS:
    2. 



    







    

  • Universal: Selecciona todos los elementos de una página.
    • 








Ejemplo: Elimina el margen y relleno de todos los elementos HTML.






* {
  margin: 0;
  padding: 0;
}


El sector universal se indica por (*), no es muy utilizado habitualmente ya que es difícil que un      mismo estilo se aplica a todos los elementos de una página.






    

  • Tipo etiqueta: 
    • 





Selecciona todos los elementos de una página cuya etiqueta HTML coincide con el valor del sector.




Ejemplo: Selecciona todos los párrafos de la página.











p {
  ...
}


Para utilizar esta etiqueta solo es necesario indicar el nombre de la etiqueta HTML (Sin los caracteres <y>) correspondiente a los elementos que se quieren seleccionar.


Ejemplo: Aplicación de diferentes estilos a los títulos y a los párrafos de una página HTML.


h1 {
  color: red;
}
 
h2 {
  color: blue;
}
 
p {
  color: black;
}


Si se desea aplicar el mismo formato a dos etiquetas diferentes, se pueden encadenar los           sectores.


Ejemplo: 


h1 {
  color: #8A8E27;
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
}
h2 {
  color: #8A8E27;
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
}
h3 {
  color: #8A8E27;
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
}


También CSS nos permite agrupar todas las reglas individuales en una sola regla con un selector multiple. Procedemos colocando una (,) entre cada selector para así de esta forma obtendremos el mismo resultado que el ejemplo anterior.


h1, h2, h3 {
  color: #8A8E27;
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
}


h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }













    

  • Descendentes: Selecciona los elementos que se encuentran dentro de otros elementos (anidados). 
    • 





Ejemplo: selecciona todos los elementos <span> de la página que se encuentren dentro de un elemento <p>.





p span { color: red; }





    

  • Clase:
    • 





Para aplicar estilos a un solo elemento de una página utilizaremos el atributo "class" de HTML         sobre el elemento para indicar la regla CSS que podemos aplicar:











<body>
  <p class="destacado">Lorem ipsum dolor sit amet...</p>
  <p>Nunc sed lacus et est adipiscing accumsan...</p>
  <p>Class aptent taciti sociosqu ad litora...</p>
</body>



Luego se crea en el archivo CSS una regla llamada "destacado" con todos los estilos que se aplicaran al elemento. Para que el navegador no confunda este selector con otros tipos de selectores se prefija el valor del atributo "class" con un punto (.).






destacado { color: red; }



El selector ".destacado" se interpreta como "cualquier elemento de la página cuyo atributo         ' class' sea igual a destacado", por lo que solamente el primer párrafo cumple esa condición.


La principal característica de este selector es que en una misma página HTML varios elementos    puedan utilizar el mismo valor del atributo "class".


<body>
  <p class="destacado">Lorem ipsum dolor sit amet...</p>
  <p>Nunc sed lacus et <a href="#" class="destacado">est adipiscing</a> accumsan...</p>
  <p>Class aptent taciti <em class="destacado">sociosqu ad</em> litora...</p>
</body>










    

  • ID:   
    • 






Permite seleccionar un elemento de la página a través de su atributo "id". Este tipo de selectores      solo selecciona un elemento de la página porque el valor del atributo "id" no se puede repetir en dos elementos diferentes de una misma página. La sintaxis de los selectores "id" es muy parecida a los   selectores de clase, la diferencia es que utiliza el símbolo de numeral (#) en vez de (.) como prefijo de la regla CSS.











#destacado { color: red; }
 
<p>Primer párrafo</p>
<p id="destacado">Segundo párrafo</p>
<p>Tercer párrafo</p>


El selector #destacado solamente selecciona el segundo párrafo (cuyo atributo id es igual a destacado). La diferencia entre este tipo de selector y el selector de clase tiene que ver principalmente con HTML y no con CSS.


El atributo "class" no es obligatorio que sea único, de forma que muchos elementos HTML pueden compartir el mismo valor para su atibuto "class".





    

  • Combinación de selectores:
    • 















    






    

      

        

          

            

            
CSS permite la combinación de uno o más tipos de selectores para restringir el alcance de las
             reglas CSS.
            


            

            .aviso .especial { ... }
            

            El anterior selector solamente selecciona aquellos elementos con un class="especial" que se         encuentren dentro de cualquier elemento con un class="aviso".
            Modificación del selector anterior:
            div.aviso span.especial { ... }
            

            Ahora, el selector solamente selecciona aquellos elementos de tipo "<span>" con un atributo "class= "especial" que estén dentro de cualquier elemento de tipo <div>que tenga un atributo               "class="aviso".
            

            La combinación de estos puede llega a ser tan compleja como sea necesario:
            

            ul#menuPrincipal li.destacado a#inicio { ... }
            

            El anterior selector hace referencia al enlace con un atributo "id" igual a "inicio" que se encuentra dentro de un elemento de tipo <li> con un atributo "class" igual a "destacado", que forma parte de una lista <ul> con un atributo "id" igual a "menuPrincipal.
            

            

            

            Enlaces:
            

            CSS HTML
            

            SELECTORES BÁSICOS

            No hay comentarios:

            Publicar un comentario

            Suscribirse a: Entradas (Atom)

            HTML

            HTML Sigla en inglés de  HyperText Markup Language  (lenguaje de marcas de hipertexto), hace referencia al  lenguaje de marcado  para l...