Sei sulla pagina 1di 2

HTML

Crea un documento html5 ! Crear un elemento un nivel arriba de la jerarquía ^

! div>ul>li^p div>ul>li>p^^img
<!doctype html> <div> <div>
<html lang="en"> <ul> <ul>
<head> <li></li> <li>
<meta charset="UTF-8"> </ul> <p></p>
<title>Document</title> <p></p> </li>
</head> </div> </ul>
<body> <img src="" alt="">
</div>
</body>
</html>

Incluir texto {}
Crear un elemento con una o varias clase .
p>{Click }+a{aquí}+{para ver mas}
div.container div.row.caption <p>Click
<a href="">aquí</a>para ver mas
<div class = “container”></div> <div class = “row caption”></div> </p>

Crear un elemento con un ID # Agrupar elementos para controlar la jerarquía ()


div#item-container div>(h1>p*3)>form div>(h1>p*2)>form>(input*3)>button{enviar}
<div id = “item-container”></div> <div> <div>
<h1> <h1>
<p></p> <p></p>

Crear un elemento con un ID y una o varias clases <p></p>


<p></p>
<p></p>
</h1>
</h1> <form action="">
<form action=""></form> <input type="text">
div#item-container.container-fluid.caption </div> <input type="text">
<input type="text">
<div id="item-container" class="container-fluid caption"></div>
<button>Enviar</button>
</form>
</div>
Crear un elemento como hijo de otro >
div>a>img
Generar texto Lorem ... lorem
<div>
<a href=""> p>lorem p>lorem2 p>lorem3
<img src="" alt="">
<p> <p> <p>
</a>
Lorem ipsum dolor sit amet, Lorem ipsum Lorem ipsum dolor
</div>
consectetur adipisicing elit. </p> </p>
Voluptates, a, enim. Magnam,
mollitia quam nobis dolor ut ...
Crear un elemento como hermano de otro + </p>

div+h1+p Abreviaciones mas usadas


<div></div>
<h1></h1>
<p></p> link:css form:get
link:favicon form:post
a:link
Crear un elemento n veces - Multiplicación * meta:utf input:h
meta:vp input:t
ul>li*3
script:src input:p
<ul>
<li></li> input:c
<li></li> button:submit input:r
<li></li>
</ul> button:s input:s
btn:s input:b
Recuperación del índice de una multiplicación $ table+ input:search
tr+ input:email
ul>li.item$*3 ul>li.item$@-*3
ol+ input:url
<ul> <ul>
<li class="item1"></li> <li class="item3"></li> ul+ input:tel
<li class="item2"></li> <li class="item2"></li> dl+ input:number
<li class="item3"></li> <li class="item1"></li>
</ul> </ul> map+ input:color
select+ input:datetime, date, month, week, time
ul>li.item$@2*3 ul>li.item$$$*3
<ul> <ul>
<li class="item2"></li> <li class="item001"></li>
<li class="item3"></li> <li class="item002"></li>
<li class="item4"></li> <li class="item003"></li>
</ul> </ul>
CSS
Propiedades de formato visual Propiedades de las fuentes
pos:s position:static; fl:n float:none; f font:; fs:n font-style:normal;
pos:a position:absolute; fl:l float:left; fw font-weight:; fs:i font-style:italic;
pos:r position:relative; fl:r float:right; fw:n font-weight:normal; fs:o font-style:oblique;
pos:f position:fixed; fw:b font-weight:bold; ff:s font-family:serif;
d:b display:block;

d:f fw:br font-weight:bolder; ff:ss font-family:sans-serif;


cl:n clear:none; display:flex;

d:if fw:lr font-weight:lighter; ff:c font-family:cursive;


cl:l clear:left; display:inline-flex;
d:i fz font-size:; ff:f font-family:fantasy;
cl:r clear:right; display:inline;

d:ib ff:m font-family:monospace;


cl:b clear:both; display:inline-block;

ff:a font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

Propiedades de Margin & Padding ff:t font-family: "Times New Roman", Times, Baskerville, Georgia, serif;

ff:v font-family: Verdana, Geneva, sans-serif;

propiedad:numero pt:1 padding-top:1px;

m:10 margin:10px; pr:1 padding-right:1px; Propiedades de texto


m:10% margin:10%; pb:1 padding-bottom:1px;

pl:1 padding-left:1px; va:sup vertical-align:super; ta:l text-align:left;


m:a margin:auto;

mt:a margin-top:auto; va:t vertical-align:top; ta:c text-align:center;

mr:a margin-right:auto;
va:m vertical-align:middle; ta:r text-align:right;

mb:a position:fixed; va:b vertical-align:bottom; ta:j text-align:justify;

ml:a position:fixed;
va:tb vertical-align:text-bottom;

Propiedades de Box Sizing Propiedades de background

propiedad:numero pt:1 padding-top:1px; bg background:#000; bgr background-repeat:;

w:10 width:10px; pr:1 padding-right:1px; bgc background-color:#fff; bgr:n background-repeat:no-repeat;

w:10% width:10%; pb:1 padding-bottom:1px; bgi background-image:url();

pl:1 padding-left:1px;
w:a width:auto;

h:a heigth:auto; maw:n max-width:none; Propiedades de color


mah:n max-height:none;

miw:1 min-width:1px; c color:#000;

mih:1 min-height:1px; c:r color:rgb(0, 0, 0);


c:ra color:rgba(0, 0, 0, .5);

Potrebbero piacerti anche