Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
09 - Introducción al CSS
#1
Hojas de estilo en cascada (o CSS, siglas en inglés de 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 , es muy usado para establecer el diseño visual de los documentos web, e interfaces de usuario escritas en HTML o XHTML.

Que utilidad tiene el CSS, pues es una pasada, podemos hacer que según si entramos con el ordenador o con la tablet, configurar el tamaño de las imágenes, etc. Para que lo entendais imaginaros que tenemos que crear 30 párrafos en nuestra página web, con las mismas características, según lo aprendido hasta ahora haríamos esto.
Code:
<p align="center"  display="block" margin-top="1em" margin-bottom="1em" margin-left="0" margin-right="0">Primer Párrafo</p>
<p align="center"  display="block" margin-top="1em" margin-bottom="1em" margin-left="0" margin-right="0">Segundo Párrafo</p>
<p align="center"  display="block" margin-top="1em" margin-bottom="1em" margin-left="0" margin-right="0">Tercer Párrafo</p>

Code:
<p>Primer Párrafo</p>
<p>Segundo Párrafo</p>
<p>Tercer Párrafo</p>

p {
   display: block;
   margin-top: 1em;
   margin-bottom: 1em;
   margin-left: 0;
   margin-right: 0;
   align: center
}

Poco a poco vamos a ir viendo como podemos configurar el CSS, para adaptar nuestra web a nuestros móviles o necesidades

Si os surgen dudas, no dudéis en plantearlas por aquí.


Para ello vamos a ver como se crea un CSS y como añadirlo a nuestro HTML
Lo primero que haremos será crear nuestro archivo CSS y posteriormente en nuestra página web incluiremos el siguiente código, dentro del <HEAD>.
Code:
<link rel="stylesheet" type="text/css" href="CSS.css">

Como creamos nuestro archivo CSS, pues muy fácil lo primero que haremos será abrir el bloc de notas o el Notepad++ (Lenguaje CSS)
y comenzaremos a añadir las características de los atributos de nuestra página web.

Code:
/*Aquí pondremos el color de nuestro fondo de página*/
html {
   background-color: #e2e2e2;
   margin: 0;
   padding: 0;
}
/*Aquí pondremos el color de nuestro body, le añadiremos un borde de 10 mp, color, tamaño de imagen, fuente del texto*/
body {
   background-color: #fff;
   border-top: solid 10px #000;
   color: #333;
   font-size: .85em;
   font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
   margin: 0;
   padding: 0;
}
/*Aquí pondremos el color de nuestros enlaces y tamaño*/
a {
   color: #333;
   outline: none;
   padding-left: 3px;
   padding-right: 3px;
   text-decoration: underline;
}
/*Aquí pondremos el color de nuestro enlaces, los cuales denominamos link, visited, active, hover*/
   a:link {
       color: #333;
   }
/*Si el link ha sido visitado podemos decir que se ponga de otro color*/
a:visited, a:active, a:hover {
       color: #555;
   }

   a:hover {
       background-color: #c7d1d6;
   }

h1, h2, h3,
h4, h5, h6 {
   color: #000;
   margin-bottom: 0;
   padding-bottom: 0;
}

Lo guardaremos con el nombre css.css y desde nuestra pagina web lo podremos utilizar utilizando este código.
Code:
<link rel="stylesheet" type="text/css" href="CSS.css">

Para llamar a los objetos tenemos que utilizar el mismo nombre que en el CSS, os pongo un ejemplo.

Si ponemos la etiqueta a tendrá el color #333, como hemos indicado en nuestro CSS. Cuando el link se visite cambiará de color al #555
Code:
<a href="pagina1.html">enlace</a>


Forum Jump:


Users browsing this thread: 1 Guest(s)