2017/10/22

Estilos con css



Código html:
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>Posicionamiento con div</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="libraries/p5.js"></script>
    <script src="libraries/p5.sound.js"></script>
    <script src='libraries/p5.dom.js'></script>
    <script src="code.js"></script>
</head>
  <body>
    <p>Esto está escrito directamente en archivo .html, sin estilo</p>
  </body>
</html>

Código css:
body{
 background-color: gold;
 font-family: sans-serif;
 text-align: center;
 margin: 0px;
 border: 0px;
 padding: 0px;
}

p{
 margin: 0px;
 border: 0px;
 padding: 0px;
}

div{
 margin: 0px;
 border: 0px;
 padding: 0px;
}

.uno{
 background-color: orange;
 color: #FFFFFF;
 font-size: 10pt;
 margin: 0px;
 border: 0px;
 padding: 0px;
}

.canvas1{
 margin: 0px;
 margin-bottom: -4px;
 border: 0px;
 padding: 0px;
}

Código p5.js:
var div1;
var div2;
var div3;
var canvas1;

function setup() {
  div1 = createDiv('Esto está escrito en el archivo .js, dentro de la etiqueta div1, con estilo .css');
  div1.class('uno');
  canvas1 = createCanvas(200,300);
  canvas1.class('canvas1')
  canvas1 = background(150);
  div2 = createDiv('Esto está escrito en el archivo .js, dentro de la etiqueta div2, con estilo .css');
  div2.class('uno');
  div3 = createDiv('Esto está escrito en el archivo .js, dentro de la etiqueta div3');
  div3.class('dos');
}

function draw(){
  fill(255);
  ellipse(mouseX,mouseY,20,20);
}