Show Menu
Cheatography

HTML/CSS TW Cheat Sheet by

HTML structure

<!DOCTYPE html>
<html>
  <head>
    <title>Exemple</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  </head>
  
  <body>
  </body>
</html>

Formul­aires

<f­orm­></­for­m>
Déclare un formulaire
name, action, method (GET, POST), enctype
<fieldset></fieldset>
Regrou­pement
<l­ege­nd>­</l­ege­nd>
nom dans un fieldset
<l­abe­l><­/la­bel­>
Donne un label à un element de forumu­laire
for="id­"
<input />
type (text, password, checkbox, radio, submit, image, reset, file), placeh­older, name, value
<t­ext­are­a><­/te­xta­rea­>
 
rows, cols
<s­ele­ct>­</s­ele­ct>
contient des option
name, size, multip­le=­"­mul­tip­le", code

Base du html

<p­></­p>
<h­1><­/h1­>
jusqu'à 6
<b­r><­/br­>
saut de ligne
<h­r><­/hr­>
horizontal rule
Elements inline HTML5
em, strong, cite, code, samp, kbd, var, dfn, abbr
<u­l><­/ul­>
Contient des <li­></­li>
<o­l><­/ol­>
Contient des <li­></­li>
<d­l><­/dl­>
Contient des <dt> et des <dd>
<img src="" alt=""/>
width, height
<a href="">­tex­te<­/a>

propriétés css

font-size
font-style
font-f­amily
font-w­eight
line-h­eight
text-align
text-t­ran­sform
height
width
display
block, inline, inline­-block
float
left, right
margin
padding
border
2px solid black
position
absolute, fixed, relative
top; left; right; bottom
décalage
z-index
profondeur
 

Commen­taires

HTML
<!-- ceci est un commen­taire -->
CSS
/* commen­taire */

Tableau

<t­abl­e><­/ta­ble­>
Englobe le tableau
<c­apt­ion­></­cap­tio­n>
titre du tableau
<t­hea­d><­/th­ead­>
entete
<t­foo­t><­/tf­oot­>
pied
<t­bod­y><­/tb­ody­>
corps
<t­r><­/tr­>
row
<t­d><­/td­>
cellule (att rowspan, colspan pour fussionner cellules)
<t­h><­/th­>
cellule important

Structure html5

Inclure du css

inline
<p style=­"­col­or:­red­"­></­p>
interne
<style type="t­ext­/cs­s"><­/st­yle­>
externe
<link href="f­ich­ier.cs­s" rel="st­yle­she­et" type="t­ext­/cs­s"/>

Base css

selecteur {
  prop1: valeur;
  prop2: valeur;
}

selecteurs

*
universel
#
id
.
classe
p h2
descendant (h2 dans un p)
p > h2
enfant (h2 direct­ement dans p)
p + h2
adjacent (h2 direct­ement après p)
a:visited
pseudo­-classe lien visité
pseudo­-cl­asse:
:first­-letter ; :before ; :after
   
 

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

          Web Programming Exam Cheat Sheet
            Bootstrap Glyphicons Cheat Sheet by James Croft