Abril 5 del 2017

0 comentarios
Hoy fue la primer clase del segundo periodo, en la cual comenzamos a ver programación CSS, este consiste en el diseño de la página web. CSS tiene las tres siguientes reglas:

- La del punto (.)

- La del #

- Reutilización del HTML

La estructura básica es la siguiente:




Imágenes tomadas de: http://www.mclibre.org/consultar/amaya/css/css_quees.html

Hay que recordar digitar el punto y coma al final de cada "elemento", esto es importante, ya que si no se pone, el siguiente "elemento" no funcionará.

A continuación, un ejemplo de CSS:

Este es el código HTML:
(Con la etiqueta <link rel="stylesheet"> llama al código css) 

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<link rel="stylesheet" type="text/css" href="estiloej1.css">
<body bgcolor="#F00" text="#FF0">

      <h1>HOLAAAAAAAAAAAAAAAAAA</h1>

  
    <h1 class="jaja">ADIOOOS</h1>
          <br><hr>
      <h2><p><span>A B C<span><p></h2>
      

</body>
</html>

Este es el código CSS:

body{color:#fff;
     background-color: #d0dc81 ;
     }

h1{font-family: "Helvetica";
   font-size:"8px";
   color: #225e2a ;
   text-transform: lowercase;
   background-color: #6a94b7;
   text-shadow: 3px 3px #000; }

h1.jaja{color:#F00;
       background-color:#66c292;}
   
h2 p span{font-family: "arial";
  font-size:"8px";
  color: #225e2a ;
  text-transform: lowercase;
  background-color: #6a94b7;
  text-shadow: 60px 30px #999;}

  hr{border-color: #F00;}


En el "h1.jaja" la función del punto ( .jaja ) es para que ese estilo CSS que está a continuación sea aplicado solamente a los h1 con clase .jaja, como por ejemplo, este h1

 <h1 class="jaja">ADIOOOS</h1>

Ese h1 tiene la class="jaja"






Publicar un comentario