Show Menu

DIW Cheat Sheet by

css

Vincular

 
< link href ="st­yle.cs­s" rel ="st­yle­she­et">
 
< link href ="de­fau­lt.c­ss­" rel ="st­yle­she­et" title ="Estilo por defect­o"> < link href ="lu­jo.c­ss­" rel ="al­ternate styles­hee­t" title ="Lu­jos­o"> < link href ="ba­sic­9.c­ss" rel ="al­ternate styles­hee­t" title ="Ba­sic­o">

Contenido

El contenido que se sale se oculta
overflow: hidden;
El contenido que se sale se visualiza mediante scroll
overflow: scroll;
Formato colapsado de una tabla
border­-co­llapse: collapse;

Tamaño del contenido

Ancho
width: medida­|po­rce­nta­je|­aut­o|i­nherit;
Alto
height: medida­|po­rce­nta­je|­aut­o|i­nherit;
auto : se ajusta mediante el navegador;
 
 
padding:
Estilo del borde
borde­r-s­tyle: none|h­idd­en|­dot­ted­|da­she­d|s­oli­d|d­oub­le|­gro­ove­|ri­dge­|in­set­|ou­tse­t|i­nhe­rit;
Ancho del borde
border­-wi­dth:;
Color del borde
border­-co­lor:;
Lados indivi­duales:
border­-to­p-s­tyle:; border­-bo­tto­m-s­tyl­e:;­bor­der­-le­ft-­sty­le:­;bo­rde­r-r­igh­t-s­tyle:;
 
Para centrar elemento horizontal y vertic­alm­ente: margin: 0 auto;
Color de fondo
backgr­oun­d-color
Imagen de fondo
backgr­oun­d-i­mage: url|no­ne|­inherit
=>
url("i­mag­es/­car­ita.pn­g");
Repetir susodicha imagen
backgr­oun­d-r­epeat: repeat­|re­pea­t-x­|re­pea­t-y­|no­-re­pea­t|i­nherit
La reacción de la susodicha al scrolling
backgr­oun­d-a­tta­chment: scroll­|fi­xed­|in­herit;
=>
fixed: imagen se mantiene en el lugar,
La posición de la susodicha en el espacio
backgr­oun­d-p­osi­tion: left top|left center­|left bottom­|right top|right center­|right bottom­|center top|ce­nte­r|b­ottom [10% 20%]|[10px 20px]
El primer valor es horizontal y el segundo vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. . Default value is: 0% 0%
 
El margen
margin:
 
margin­-to­p|m­arg­in-­bot­tom­|ma­rgi­n-l­eft­|ma­rgi­n-right
Cuando dos margin entran en contacto vertic­almente se fusionan. Incluso cuando un elemento está contenido dentro de otro.
 
El tamaño total será la suma de su width, padding y borde
Box-si­zing: border­-box;

Dispos­ición de elementos

Elemento flota a la izq.
float: left;
Elementos flotan izq. uno después de otro
float: left;
Al usar float la caja deja de pertenecer al flujo normal de la página, las cajas ocupan su lugar
 
clear: none|l­eft­|ri­ght­|bo­th|­inh­erit;
Position
position: static­|re­lat­ive­|ab­sol­ute­|fi­xed­|in­herit;
=>
rela­tivo: su posición no afecta a las cajas de su alrededor, se mantienen fijas; absoluto: su movimeinto afecta a su alrededor, las cajas ocuparían su lugar si hubiese espacio; fija:su posición es inamovible dentro de la ventana del navegador. El posici­ona­miento fijo hace que las cajas no modifiquen su posición ni aunque el usuario suba o baje la página en la ventana de su navegador;
Para el posici­ona­miento relativo, absoluto y fijo se deben de indicar las propie­dades top, right, bottom y left, que son las que indicarán la posición de la caja.
 
Acercar unos elementos más que otros, sobre todo en acso de solapa­miento
z-index: 1|2|3|...;
Elemento ocupa todo el espacio de la ventana y se mueve con ella
width: 100%;
+1 elementos van seguidos los unos de los otros
float:­lef­t;|­flo­at:­right; en todos
el elemento que el sigue no flota a su lado, lo queremos debajo; no admite un elemento flotante a su izquierda
clear: left;
El elemento está centrado
margin: 0 auto;
Para que float seguidos no se empujen hacia abajo, hay que tener en cuenta el espacio. Dividir 100% entre nº de partes, o 980 en px.
A veces aunque exista un clear, no se efectúa del todo. para eso posici­onamos debajo de las cajas flotanets un <di­v> vacío, a veces con un clear.
 
hacer que elementos se comporten como inline, block, o inline­-block;
display: inline­|bl­ock­|in­lin­e-b­lock;
display: flex;
 
flex-d­ire­ction: row | row-re­verse | column | column­-re­verse;
Más de una línea
flex-wrap: nowrap | wrap | wrap-r­everse;
Centrar
justif­y-c­ontent: justif­y-c­ontent: flex-start | flex-end | center | space-­between | space-­around | space-­evenly;
 
align-­con­tent: flex-start | flex-end | center | space-­between | space-­around | stretch;
 
Trata al elemento como si no existiese
display: none;
Esconde el elemento
visibi­lit­y:h­idden;

justif­y-c­ontent

align-­con­tent:

vertic­al-­align

Dispos­ición del texto respecto a un elemento.

Selectores

Elemento de clase "­cla­se"
<div class=­"­"­/> & .clase{}
Todos los <a> de clase .clase
a.clase{}
 
a#id{}
 
Con el atributo (href p.e.)
a[href­="a"]
<a> descen­diente de <p>
p a{}
Hijo directo <a> de <p> (hijo inmediato, no nieto)
p>a{}
Hermano directo de <p>, uno después de otro
p+a{}
Elementos hermanos de <p> a contin­uación suya
p~a{}
 
Link que no ha sido visitado
a:link{}
Link que ha sido visitado
a:visi­ted{}
Al pasar el ratón por encima
a:hover{}
Cuando el elemento se activa al pulsar click
a:active{}
Cuando el elemento tiene el foco
a:focus{}
 
:nth-c­hild(n)
Los hijos directos de, no nietos <p>
p:nth-­chi­ld(1){
Todos los <p> pares
p:nth-­chi­ld(­2n){}
Todos los <p> impares
p:nth-­chi­ld(­2n+1){}
 
/ Todos los <p> hijos de algún elemento los agrupamos de tres en tres y a cada uno le asignamos un color de fondo. A los primeros amarillo, a los segundos rojo y a los terceros azul/
 
La primera línea de cada párrafo
a::fir­st-­line{}
La primera letra de cada párrafo
::firs­t-l­etter
ponerle antes del texto
::before
ponerle después del texto
::after
 
::sele­ction
A los <p> pares de la clase “especial” hijos directos del <di­v> con id=”pie”
div #pie > p.espe­cia­l:n­th-­chi­ld(2n) {}
 
 
/ #pie p:nth-­chi­ld(1) selecciona el primer hijo p aunque no es #pie, pero su npadre sí -> hereda id/

Imágenes

Insertar imagen
content: url(../­im­age­nes­/pi­ngu­i.png);
 
Fondos
Imagen de fondo
backgr­­ou­n­d­-i­­mage: url|no­­ne­|­i­nherit
=>
url("i­­ma­g­e­s/­­car­­it­a.p­n­g­");
Repetir susodicha imagen
backgr­­ou­n­d­-r­­epeat: repeat­­|r­e­p­ea­­t-x­­|r­e­p­ea­­t-y­­|n­o­-­re­­pea­­t|­i­n­herit;
La reacción de la susodicha al scrolling
backgr­­ou­n­d­-a­­tta­­ch­ment: scroll­­|f­i­x­ed­­|in­­herit;
=>
fixed: imagen se mantiene en el lugar
La posición de la susodicha en el espacio
backgr­­ou­n­d­-p­­osi­­tion: left top|left center­­|left bottom­­|right top|right center­­|right bottom­­|c­enter top|ce­­nt­e­r­|b­­ottom [10% 20%]|[10px 20px]
El primer valor es horizontal y el segundo vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. . Default value is: 0% 0%
Usar más de un fondo
backgr­oun­d-image : url(fl­ore­s.gif), url(pa­pel.gif) ; backgr­oun­d-p­osition : right bottom, left top ; backgr­oun­d-r­epeat : no-repeat, repeat ; backgr­oun­d-size : 100px 80px ;
La última imagen se posici­onará debajo de la anterior
El tamaño de un fondo
backgr­oun­d-size: []|con­tai­n|c­over;
=>
contain: se ajsuta al tamaño, cover: muestra tamaño real de la imagen
background : url(im­g_f­low­er.jpg) no-repeat center fixed ; backgr­oun­d-size : cover ;*
backgr­oun­d-o­rigin:
border­-bo­x|p­add­ing­-bo­x|c­ont­ent­-box;
=>
desde esquina superior izquierda
backgr­oun­d-clip:
border­-bo­x|p­add­ing­-bo­x|c­ont­ent­-box;
 
List dot
list-s­tyl­e-type: disc | circle | square | decimal | decima­l-l­ead­ing­-zero | lower-­roman | upper-­roman | lower-­greek | lower-­latin | upper-­latin | armenian | georgian | lower-­alpha | upper-­alpha | none | inherit
 
list-s­tyl­e-i­mage: url("im­age­s/f­lec­ha.p­ng­");

Fuente y texto

Importar fuentes de Google Fonts
<he­ad>­<link href="h­ttp­s:/­/fo­nts.go­ogl­eap­is.c­om­/cs­s?f­ami­ly=­Not­abl­e|N­oto­+Se­rif­+JP­" rel="st­yle­she­et">­</h­ead>
Usar fuentes descar­gadas localmente
@font­-face { font-f­amily : Los80; src : url ('font­s/8­0db.ttf'); body { font-f­amily : Los80; }
=>
Por cada fuente un @font-­face{}
 
Indicar una fuente
a { font-f­amily: 'Noto Serif JP'; }
" ", si no funciona coge la siguiente
a { font-f­amily: 'Noto Serif JP', Arial; }
" "
font-f­amily: 'Chicle', cursive;
Tamaño de la fuente
font-size: 10px|2­cm|­2mm­|2i­n|2­pt|­2pc­|2e­m|2­ex|2px;
Cambiar el color
color: red|rg­ba(167, 240, 122, 0.52)|­#CCCCC;
Cursiva, negrita, itálica
font-s­tyle: normal­|it­ali­c|o­bli­que­|in­iti­al|­inh­erit;
Mayúsculas pequeñas
font-v­ariant: normal­|sm­all­-ca­ps|­ini­tia­l|i­nherit;
Grosor de fuente
font-w­eight: normal­|bo­ld|­bol­der­|li­ght­er|­num­ber­|in­iti­al|­inh­eri­t|1­00(...);
 
Sombra de la fuente
text-s­hadow: 2px 2px 0px rgba(237, 150, 150, 1);
Espacio entre líneas
line-h­eight: 40px|1.6|­0.5­cm|10%;
Subrayado de texto
text-d­eco­ration: none|u­nde­rli­ne|­ove­rli­ne|­lin­e-t­hro­ugh­|blink;
Overline no es eclusivo de underl­ine...
Transf­ormar a may., min., o capitalize
text-t­ran­sform : capitalize | uppercase | lowercase | none | inherit;
Sangrado/ tabulación del texto en primera línea
text-i­ndent : 20px;
Espaciado entre letras
letter­-sp­acing : .2em;
Esoaciado entre palabras
word-s­pacing : .5em;

Texto

Alineación del texto
text-a­lign: left | right | center | justify | inherit ;

Efectos

Sombra en caja
box-sh­adow: 3px 3px 4px 0px rgba( 255, 87, 51, 0.75);
Bordes redond­eados
border­-to­p-l­eft­-ra­dius: 42px; border­-to­p-r­igh­t-r­adius: 26px; border­-bo­tto­m-r­igh­t-r­adius: 90px; border­-bo­tto­m-l­eft­-ra­dius: 67px;
 
-webk­it-­bor­der­-ra­dius: 42px; -moz-b­ord­er-­radius: 42px; border­-ra­dius: 42px;
Fondo gradiente
backg­round: rgb(255, 87, 51); backgr­ound: -moz-l­ine­ar-­gra­die­nt(­55deg, rgb(255, 87, 51) 0%, rgb(144, 12, 63) 100%); backgr­ound: -webki­t-l­ine­ar-­gra­die­nt(­55deg, rgb(255, 87, 51) 0%, rgb(144, 12, 63) 100%); backgr­ound: -o-lin­ear­-gr­adi­ent­(55deg, rgb(255, 87, 51) 0%, rgb(144, 12, 63) 100%); backgr­ound: -ms-li­nea­r-g­rad­ien­t(5­5deg, rgb(255, 87, 51) 0%, rgb(144, 12, 63) 100%); backgr­ound: linear­-gr­adi­ent­(14­5deg, rgb(255, 87, 51) 0%, rgb(144, 12, 63) 100%);
Botones
color: rgb(255, 255, 255); font-size: 18px; padding: 20px; text-s­hadow: 0px -1px 0px rgba(30, 30, 30, 0.8); -webki­t-b­ord­er-­radius: 90px; -moz-b­ord­er-­radius: 90px; border­-ra­dius: 90px; backgr­ound: rgb(142, 110, 181); backgr­ound: -moz-l­ine­ar-­gra­die­nt(­90deg, rgb(142, 110, 181) 30%, rgb(142, 131, 234) 70%); backgr­ound: -webki­t-l­ine­ar-­gra­die­nt(­90deg, rgb(142, 110, 181) 30%, rgb(142, 131, 234) 70%); backgr­ound: -o-lin­ear­-gr­adi­ent­(90deg, rgb(142, 110, 181) 30%, rgb(142, 131, 234) 70%); backgr­ound: -ms-li­nea­r-g­rad­ien­t(9­0deg, rgb(142, 110, 181) 30%, rgb(142, 131, 234) 70%); backgr­ound: linear­-gr­adi­ent­(0deg, rgb(142, 110, 181) 30%, rgb(142, 131, 234) 70%); -webki­t-b­ox-­shadow: 0px 2px 1px rgba(50, 50, 50, 0.75); -moz-b­ox-­shadow: 0px 2px 1px rgba(50, 50, 50, 0.75); box-sh­adow: 0px 2px 1px rgba(50, 50, 50, 0.75);

Download the DIW Cheat Sheet

7 Pages
//media.cheatography.com/storage/thumb/lasago_diw.750.jpg

PDF (recommended)

Alternative Downloads

Share This Cheat Sheet!

 

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          CSS2 Cheat Sheet
          Font Awesome Cheat Sheet