snipt

Ctrl+h for KB shortcuts

CSS

Base CSS simple pour un nouveau projet HTML5

/* ================================
    Base
================================ */

header,nav,article,main,section,summary,aside,figcaption,figure,details,footer{
	display: block}

figure{margin:0}

*{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box}

body{
	margin:0;
	font:62.5% Verdana,"DejaVu Sans","Bitstream Vera Sans",Geneva,sans-serif;
	background-color:#fff;
	color:#000;
    overflow-y:scroll;
    -webkit-font-smoothing:antialiased}

a,
a:visited{color:#c2c2c2}

a:hover{color:#fff}

a:active{color:gold}

a:focus{outline:thin dotted}

a:hover,
a:active{outline:0}

img{
    max-width:100%;
	width:auto;
    height:auto;
	border:0;
	-ms-interpolation-mode:bicubic}

ul,
li{margin:0}

.clear{clear:both}

::-moz-selection{background:#005a7b;color:#fff;text-shadow:0px 1px 0px #000}
::selection{background:#005a7b;color:#fff;text-shadow:0px 1px 0px #000}

/* ================================
    Titres de niveau Hn
================================ */
h1,h2,h3,h4,h5,h6{margin:0}

h1{font-size:2em}
h2{font-size:1.5em}
h3{font-size:1.17em}
h4{font-size:1em}
h5{font-size:0.83em}
h6{font-size:0.67em}

/* ================================
    Perso
================================ */

Description

Base CSS simple lors de la création d' un nouveau projet HTML5
https://snipt.net/embed/38461c27d155eaa4cca120f103fa39b2/
/raw/38461c27d155eaa4cca120f103fa39b2/
38461c27d155eaa4cca120f103fa39b2
css
CSS
67
2019-06-26T14:02:11
True
False
False
Jan 01, 2015 at 03:01 PM
/api/public/snipt/93740/
base-css-simple-pour-un-nouveau-projet-html5
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1"> 1</a> <a href="#L-2"> 2</a> <a href="#L-3"> 3</a> <a href="#L-4"> 4</a> <a href="#L-5"> 5</a> <a href="#L-6"> 6</a> <a href="#L-7"> 7</a> <a href="#L-8"> 8</a> <a href="#L-9"> 9</a> <a href="#L-10">10</a> <a href="#L-11">11</a> <a href="#L-12">12</a> <a href="#L-13">13</a> <a href="#L-14">14</a> <a href="#L-15">15</a> <a href="#L-16">16</a> <a href="#L-17">17</a> <a href="#L-18">18</a> <a href="#L-19">19</a> <a href="#L-20">20</a> <a href="#L-21">21</a> <a href="#L-22">22</a> <a href="#L-23">23</a> <a href="#L-24">24</a> <a href="#L-25">25</a> <a href="#L-26">26</a> <a href="#L-27">27</a> <a href="#L-28">28</a> <a href="#L-29">29</a> <a href="#L-30">30</a> <a href="#L-31">31</a> <a href="#L-32">32</a> <a href="#L-33">33</a> <a href="#L-34">34</a> <a href="#L-35">35</a> <a href="#L-36">36</a> <a href="#L-37">37</a> <a href="#L-38">38</a> <a href="#L-39">39</a> <a href="#L-40">40</a> <a href="#L-41">41</a> <a href="#L-42">42</a> <a href="#L-43">43</a> <a href="#L-44">44</a> <a href="#L-45">45</a> <a href="#L-46">46</a> <a href="#L-47">47</a> <a href="#L-48">48</a> <a href="#L-49">49</a> <a href="#L-50">50</a> <a href="#L-51">51</a> <a href="#L-52">52</a> <a href="#L-53">53</a> <a href="#L-54">54</a> <a href="#L-55">55</a> <a href="#L-56">56</a> <a href="#L-57">57</a> <a href="#L-58">58</a> <a href="#L-59">59</a> <a href="#L-60">60</a> <a href="#L-61">61</a> <a href="#L-62">62</a> <a href="#L-63">63</a> <a href="#L-64">64</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="c">/* ================================</span> </span><span id="L-2"><a name="L-2"></a><span class="c"> Base</span> </span><span id="L-3"><a name="L-3"></a><span class="c">================================ */</span> </span><span id="L-4"><a name="L-4"></a> </span><span id="L-5"><a name="L-5"></a><span class="nt">header</span><span class="o">,</span><span class="nt">nav</span><span class="o">,</span><span class="nt">article</span><span class="o">,</span><span class="nt">main</span><span class="o">,</span><span class="nt">section</span><span class="o">,</span><span class="nt">summary</span><span class="o">,</span><span class="nt">aside</span><span class="o">,</span><span class="nt">figcaption</span><span class="o">,</span><span class="nt">figure</span><span class="o">,</span><span class="nt">details</span><span class="o">,</span><span class="nt">footer</span><span class="p">{</span> </span><span id="L-6"><a name="L-6"></a> <span class="nb">display</span><span class="o">:</span> <span class="nb">block</span><span class="p">}</span> </span><span id="L-7"><a name="L-7"></a> </span><span id="L-8"><a name="L-8"></a><span class="nt">figure</span><span class="p">{</span><span class="nb">margin</span><span class="o">:</span><span class="m">0</span><span class="p">}</span> </span><span id="L-9"><a name="L-9"></a> </span><span id="L-10"><a name="L-10"></a><span class="o">*</span><span class="p">{</span> </span><span id="L-11"><a name="L-11"></a> <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="n">box</span><span class="o">-</span><span class="n">sizing</span><span class="o">:</span><span class="nb">border</span><span class="o">-</span><span class="n">box</span><span class="p">;</span> </span><span id="L-12"><a name="L-12"></a> <span class="o">-</span><span class="n">moz</span><span class="o">-</span><span class="n">box</span><span class="o">-</span><span class="n">sizing</span><span class="o">:</span><span class="nb">border</span><span class="o">-</span><span class="n">box</span><span class="p">;</span> </span><span id="L-13"><a name="L-13"></a> <span class="n">box</span><span class="o">-</span><span class="n">sizing</span><span class="o">:</span><span class="nb">border</span><span class="o">-</span><span class="n">box</span><span class="p">}</span> </span><span id="L-14"><a name="L-14"></a> </span><span id="L-15"><a name="L-15"></a><span class="nt">body</span><span class="p">{</span> </span><span id="L-16"><a name="L-16"></a> <span class="nb">margin</span><span class="o">:</span><span class="m">0</span><span class="p">;</span> </span><span id="L-17"><a name="L-17"></a> <span class="nb">font</span><span class="o">:</span><span class="m">62.5%</span> <span class="n">Verdana</span><span class="o">,</span><span class="s2">&quot;DejaVu Sans&quot;</span><span class="o">,</span><span class="s2">&quot;Bitstream Vera Sans&quot;</span><span class="o">,</span><span class="n">Geneva</span><span class="o">,</span><span class="nb">sans-serif</span><span class="p">;</span> </span><span id="L-18"><a name="L-18"></a> <span class="nb">background-color</span><span class="o">:</span><span class="m">#fff</span><span class="p">;</span> </span><span id="L-19"><a name="L-19"></a> <span class="nb">color</span><span class="o">:</span><span class="m">#000</span><span class="p">;</span> </span><span id="L-20"><a name="L-20"></a> <span class="nb">overflow-y</span><span class="o">:</span><span class="nb">scroll</span><span class="p">;</span> </span><span id="L-21"><a name="L-21"></a> <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="nb">font</span><span class="o">-</span><span class="n">smoothing</span><span class="o">:</span><span class="n">antialiased</span><span class="p">}</span> </span><span id="L-22"><a name="L-22"></a> </span><span id="L-23"><a name="L-23"></a><span class="nt">a</span><span class="o">,</span> </span><span id="L-24"><a name="L-24"></a><span class="nt">a</span><span class="nd">:visited</span><span class="p">{</span><span class="nb">color</span><span class="o">:</span><span class="m">#c2c2c2</span><span class="p">}</span> </span><span id="L-25"><a name="L-25"></a> </span><span id="L-26"><a name="L-26"></a><span class="nt">a</span><span class="nd">:hover</span><span class="p">{</span><span class="nb">color</span><span class="o">:</span><span class="m">#fff</span><span class="p">}</span> </span><span id="L-27"><a name="L-27"></a> </span><span id="L-28"><a name="L-28"></a><span class="nt">a</span><span class="nd">:active</span><span class="p">{</span><span class="nb">color</span><span class="o">:</span><span class="nb">gold</span><span class="p">}</span> </span><span id="L-29"><a name="L-29"></a> </span><span id="L-30"><a name="L-30"></a><span class="nt">a</span><span class="nd">:focus</span><span class="p">{</span><span class="nb">outline</span><span class="o">:</span><span class="nb">thin</span> <span class="nb">dotted</span><span class="p">}</span> </span><span id="L-31"><a name="L-31"></a> </span><span id="L-32"><a name="L-32"></a><span class="nt">a</span><span class="nd">:hover</span><span class="o">,</span> </span><span id="L-33"><a name="L-33"></a><span class="nt">a</span><span class="nd">:active</span><span class="p">{</span><span class="nb">outline</span><span class="o">:</span><span class="m">0</span><span class="p">}</span> </span><span id="L-34"><a name="L-34"></a> </span><span id="L-35"><a name="L-35"></a><span class="nt">img</span><span class="p">{</span> </span><span id="L-36"><a name="L-36"></a> <span class="nb">max-width</span><span class="o">:</span><span class="m">100%</span><span class="p">;</span> </span><span id="L-37"><a name="L-37"></a> <span class="nb">width</span><span class="o">:</span><span class="nb">auto</span><span class="p">;</span> </span><span id="L-38"><a name="L-38"></a> <span class="nb">height</span><span class="o">:</span><span class="nb">auto</span><span class="p">;</span> </span><span id="L-39"><a name="L-39"></a> <span class="nb">border</span><span class="o">:</span><span class="m">0</span><span class="p">;</span> </span><span id="L-40"><a name="L-40"></a> <span class="o">-</span><span class="n">ms</span><span class="o">-</span><span class="n">interpolation</span><span class="o">-</span><span class="n">mode</span><span class="o">:</span><span class="n">bicubic</span><span class="p">}</span> </span><span id="L-41"><a name="L-41"></a> </span><span id="L-42"><a name="L-42"></a><span class="nt">ul</span><span class="o">,</span> </span><span id="L-43"><a name="L-43"></a><span class="nt">li</span><span class="p">{</span><span class="nb">margin</span><span class="o">:</span><span class="m">0</span><span class="p">}</span> </span><span id="L-44"><a name="L-44"></a> </span><span id="L-45"><a name="L-45"></a><span class="nc">.clear</span><span class="p">{</span><span class="nb">clear</span><span class="o">:</span><span class="nb">both</span><span class="p">}</span> </span><span id="L-46"><a name="L-46"></a> </span><span id="L-47"><a name="L-47"></a><span class="o">:</span><span class="nd">:-moz-selection</span><span class="p">{</span><span class="nb">background</span><span class="o">:</span><span class="m">#005a7b</span><span class="p">;</span><span class="nb">color</span><span class="o">:</span><span class="m">#fff</span><span class="p">;</span><span class="nb">text-shadow</span><span class="o">:</span><span class="m">0px</span> <span class="m">1px</span> <span class="m">0px</span> <span class="m">#000</span><span class="p">}</span> </span><span id="L-48"><a name="L-48"></a><span class="o">:</span><span class="nd">:selection</span><span class="p">{</span><span class="nb">background</span><span class="o">:</span><span class="m">#005a7b</span><span class="p">;</span><span class="nb">color</span><span class="o">:</span><span class="m">#fff</span><span class="p">;</span><span class="nb">text-shadow</span><span class="o">:</span><span class="m">0px</span> <span class="m">1px</span> <span class="m">0px</span> <span class="m">#000</span><span class="p">}</span> </span><span id="L-49"><a name="L-49"></a> </span><span id="L-50"><a name="L-50"></a><span class="c">/* ================================</span> </span><span id="L-51"><a name="L-51"></a><span class="c"> Titres de niveau Hn</span> </span><span id="L-52"><a name="L-52"></a><span class="c">================================ */</span> </span><span id="L-53"><a name="L-53"></a><span class="nt">h1</span><span class="o">,</span><span class="nt">h2</span><span class="o">,</span><span class="nt">h3</span><span class="o">,</span><span class="nt">h4</span><span class="o">,</span><span class="nt">h5</span><span class="o">,</span><span class="nt">h6</span><span class="p">{</span><span class="nb">margin</span><span class="o">:</span><span class="m">0</span><span class="p">}</span> </span><span id="L-54"><a name="L-54"></a> </span><span id="L-55"><a name="L-55"></a><span class="nt">h1</span><span class="p">{</span><span class="nb">font-size</span><span class="o">:</span><span class="m">2em</span><span class="p">}</span> </span><span id="L-56"><a name="L-56"></a><span class="nt">h2</span><span class="p">{</span><span class="nb">font-size</span><span class="o">:</span><span class="m">1.5em</span><span class="p">}</span> </span><span id="L-57"><a name="L-57"></a><span class="nt">h3</span><span class="p">{</span><span class="nb">font-size</span><span class="o">:</span><span class="m">1.17em</span><span class="p">}</span> </span><span id="L-58"><a name="L-58"></a><span class="nt">h4</span><span class="p">{</span><span class="nb">font-size</span><span class="o">:</span><span class="m">1em</span><span class="p">}</span> </span><span id="L-59"><a name="L-59"></a><span class="nt">h5</span><span class="p">{</span><span class="nb">font-size</span><span class="o">:</span><span class="m">0.83em</span><span class="p">}</span> </span><span id="L-60"><a name="L-60"></a><span class="nt">h6</span><span class="p">{</span><span class="nb">font-size</span><span class="o">:</span><span class="m">0.67em</span><span class="p">}</span> </span><span id="L-61"><a name="L-61"></a> </span><span id="L-62"><a name="L-62"></a><span class="c">/* ================================</span> </span><span id="L-63"><a name="L-63"></a><span class="c"> Perso</span> </span><span id="L-64"><a name="L-64"></a><span class="c">================================ */</span> </span></pre></div> </td></tr></table>
css, html5, reset