dom-limpio
Version:
CSS hard styles reset
215 lines (193 loc) • 11.5 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test text elements</title>
<link rel="stylesheet" href="css/dom-limpio.css">
<style>
body {
padding: 20px;
}
#tests-elements {
width: 1024px;
}
.row {
padding-bottom: 16px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
console.log('eo');
});
</script>
</head>
<body>
<div id="tests-elements">
<h1>h1. Lorem ipsum dolor sit amet, <b>b. consectetur <i>i. adipisicing</i></b> elit. Qui dolorum <i>i. blanditiis</i> quae amet tempore fuga quam cumque voluptatem fugiat necessitatibus.</h1>
<h2>h2. Lorem ipsum dolor sit amet, <b>b. consectetur <i>i. adipisicing</i></b> elit. Unde quod, <i>i. tenetur</i> obcaecati qui quae id suscipit facere esse nulla nobis.</h2>
<h3>h3. Lorem ipsum dolor sit amet, <b>consectetur<i> adipisicing</i></b> elit. Tempora, ut <i>fugiat illum</i> explicabo in cupiditate repellat. Repudiandae itaque, quis enim.</h3>
<h4>h4. Lorem ipsum dolor sit amet, <b>consectetur<i> adipisicing</i></b> elit. Voluptatem, maxime? <i>Repellat voluptas</i> sapiente magnam labore eius nam itaque! Cumque, sint.</h4>
<h5>h5. Lorem ipsum dolor sit amet, <b>consectetur<i> adipisicing</i></b> elit. Sint <i>recusandae placeat</i>, dolores aliquam nisi dicta temporibus unde eum consequatur! Provident!</h5>
<h6>h6. Lorem ipsum dolor sit amet, <b>consectetur<i> adipisicing</i></b> elit. Similique magnam facere voluptatibus cupiditate sequi vitae esse voluptate! Laborum, similique, magnam.</h6>
<p>p. Lorem ipsum dolor sit amet, <span>span. consectetur <span>span.adipisicing</span> elit</span>. <b>b. Fugiat facere similique</b> maiores itaque dignissimos rem <i>asperiores</i> esse! Nihil ea iure totam eum itaque qui, animi minima doloribus esse nam nostrum numquam laudantium id voluptatum, similique nulla aut eaque ut nobis vel quas, iusto eius veritatis? A voluptas necessitatibus est quibusdam <span>quam <b>obcaecati fugit</b> asperiores earum saepe anim<i>corporis cupiditate alias</i>e alias, accusantium ut ratione temporibus vel? Velit in itaque nostrum!</span> Nobis dolorem obcaecati <sup>23</sup> iure <sub>2356</sub> dolorum expedita aliquam reprehenderit illo inventore id <i>temporibus eum</i> debitis rem cum, ipsum odit quam iste libero non dolore error. Sint ipsum quo et, illo delectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis praesentium repellendus dolore hic alias commodi quia quod quisquam excepturi ipsam.</p>
<span>span.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem, commodi quas adipisci sint vero cupiditate, repellendus atque totam voluptatibus dolore vitae. <span>span. Omnis <b>aspernatur velit</b>, assumenda sequi <i>veritatis delectus</i> suscipit error alias tempora molestiae dolorem accusamus aliquam, nemo consequuntur</span> ex ducimus <b>accusantium officia</b> nulla natus rerum? <i>Praesentium cupiditate</i> nemo eaque laborum inventore, nihil exercitationem aspernatur, accusamus unde ea ad necessitatibus, iste!</span>
<strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, esse.</strong>
<b>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, sapiente.</b>
<em>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, officia.</em>
<i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, optio.</i>
<addess>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, in.</addess>
<hr><!-- //////////////////////////////// -->
<ul>
<li><b>ul.li.</b> Lorem ipsum dolor</li>
<li><p>sit amet, consectetur</p></li>
<li><span>adipisicing elit</span>
<ul>
<li><span>Quam dolor reiciendis vero</span></li>
<li>doloremque mollitia dolores
<ul>
<li><b>ipsam nisi, veritatis</b></li>
<li><i>deleniti unde vitae optio</i></li>
<li>fugiat cumque!</li>
<li><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores vel <span>nisi <b><i>praesentium</i> sint</b> necessitatibus dignissimos</span> cupiditate iste facilis doloribus exercitationem odio fuga aperiam fugiat officiis non, repellendus ratione suscipit ut ducimus corrupti recusandae modi vero vitae! Distinctio, nulla ab recusandae?</p></li>
<li>iure iste reprehenderit
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem aperiam praesentium non quasi molestiae adipisci sapiente, rem rerum eos. Dolorum.</li>
</ul>
</li>
<li>doloremque, recusandae</li>
</ul>
</li>
</ul>
</li>
<li>in nobis aspernatur</li>
<li>nostrum laudantium
<ul>
<li>eos ea similique</li>
<li>molestias sapiente</li>
<li>laborum quae nobis,</li>
</ul>
</li>
<li>optio cupiditate</li>
<li>necessitatibus, in nihil ipsum</li>
<li>quasi! Ea sunt, doloribus animi!</li>
</ul>
<ol>
<li><b>ol.li.</b> Lorem ipsum dolor</li>
<li><p>sit amet, consectetur</p></li>
<li><span>adipisicing elit</span>
<ol>
<li><span>Quam dolor reiciendis vero</span></li>
<li>doloremque mollitia dolores
<ol>
<li><b>ipsam nisi, veritatis</b></li>
<li><i>deleniti unde vitae optio</i></li>
<li>fugiat cumque!</li>
<li><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores vel <span>nisi <b><i>praesentium</i> sint</b> necessitatibus dignissimos</span> cupiditate iste facilis doloribus exercitationem odio fuga aperiam fugiat officiis non, repellendus ratione suscipit ut ducimus corrupti recusandae modi vero vitae! Distinctio, nolla ab recusandae?</p></li>
<li>iure iste reprehenderit
<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem aperiam praesentium non quasi molestiae adipisci sapiente, rem rerum eos. Dolorum.</li>
</ol>
</li>
<li>doloremque, recusandae</li>
</ol>
</li>
</ol>
</li>
<li>in nobis aspernatur</li>
<li>nostrum laudantium
<ol>
<li>eos ea similique</li>
<li>molestias sapiente</li>
<li>laborum quae nobis,</li>
</ol>
</li>
<li>optio cupiditate</li>
<li>necessitatibus, in nihil ipsum</li>
<li>quasi! Ea sunt, doloribus animi!</li>
</ol>
<dl>
<dt><p>dl.dt.dd. <b>ipsum dolor <i>sit amet</i></b>, consectetur adipisicing elit. Iure deserunt odio ut. Facilis quam libero.</p></dd>
<dt><span>Lorem ipsum <b>dolor sit amet</b>, <i>consectetur adipisicing</i> elit. Odio, error.</span> animi soluta tempore quibusdam numquam </dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea debitis ipsum animi soluta tempore quibusdam numquam libero veniam, sapiente facere. Similique amet excepturi velit quos, quis, suscipit hic eius voluptatum.</dd>
<dt>dd</dt>
<dd>Item que contiene una definición.</dd>
</dl>
<hr><!-- //////////////////////////////// -->
<pre>
pre. Lorem <span>ipsum dolor sit amet,</span> consectetur adipisicing elit. Amet consectetur at, <strong>quisquam aut <i>minus quo quam</i> quod dolor</strong> inventore eos iusto odit aliquam a similique ex? Reprehenderit soluta, modi velit.
</pre>
<code>
code. Lorem <span>ipsum dolor sit amet,</span> consectetur adipisicing elit. Amet consectetur at, <strong>quisquam aut <i>minus quo quam</i> quod dolor</strong> inventore eos iusto odit aliquam a similique ex? Reprehenderit soluta, modi velit.
</code>
<kbd>
kbd. Lorem <span>ipsum dolor sit amet,</span> consectetur adipisicing elit. Amet consectetur at, <strong>quisquam aut <i>minus quo quam</i> quod dolor</strong> inventore eos iusto odit aliquam a similique ex? Reprehenderit soluta, modi velit.
</kbd>
<samp>
samp. Lorem <span>ipsum dolor sit amet,</span> consectetur adipisicing elit. Amet consectetur at, <strong>quisquam aut <i>minus quo quam</i> quod dolor</strong> inventore eos iusto odit aliquam a similique ex? Reprehenderit soluta, modi velit.
</samp>
<blockquote>
blockquote. Lorem <span>ipsum dolor sit amet,</span> consectetur adipisicing elit. Amet consectetur at, <strong>quisquam aut <i>minus quo quam</i> quod dolor</strong> inventore eos iusto odit aliquam a similique ex? Reprehenderit soluta, modi velit.
</blockquote>
<q>
q. Lorem <span>ipsum dolor sit amet,</span> consectetur adipisicing elit. Amet consectetur at, <strong>quisquam aut <i>minus quo quam</i> quod dolor</strong> inventore eos iusto odit aliquam a similique ex? Reprehenderit soluta, modi velit.
</q>
<cite>
cite. Lorem <span>ipsum dolor sit amet,</span> consectetur adipisicing elit. Amet consectetur at, <strong>quisquam aut <i>minus quo quam</i> quod dolor</strong> inventore eos iusto odit aliquam a similique ex? Reprehenderit soluta, modi velit.
</cite>
<hr><!-- //////////////////////////////// -->
<form action="">
<fieldset>
<legend> legend. Reprehenderit soluta, modi velit. </legend>
<div class="row">
<label for="">label. Blanditiis cum itaque enim</label>
</div>
<div class="row">
<input type="text" value="consectetur adipisicing elit. Amet consectetur at">
</div>
<div class="row">
<textarea name="name" rows="8" cols="40">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cum itaque enim, illo, magnam rem ratione asperiores autem commodi quisquam.</textarea>
</div>
<div class="row">
<select name="" id="">
<optgroup label="Group 1">
<option value="">Lorem ipsum</option>
<option value="">Dolor sit amet</option>
<option value="">Consectetur</option>
<option value="">Adipisicing elit</option>
</optgroup>
<optgroup label="Group 2">
<option value="">Lorem ipsum</option>
<option value="">Dolor sit amet</option>
<option value="">Consectetur</option>
<option value="">Adipisicing elit</option>
</optgroup>
</select>
<select name="" id="">
<option value="">Lorem ipsum</option>
<option value="">Dolor sit amet</option>
<option value="">Consectetur</option>
<option value="">Adipisicing elit</option>
</select>
</div>
<div class="row">
<label><input type="checkbox" name="" id=""> checkbox. Ipsum dolor sit amet</label>
</div>
<div class="row">
<fieldset>
<label><input type="radio" name="radio" id="radio"> radio. Ipsum dolor sit amet</label>
<label><input type="radio" name="radio" id="radio"> radio. Ipsum dolor sit amet</label>
<label><input type="radio" name="radio" id="radio"> radio. Ipsum dolor sit amet</label>
</fieldset>
</div>
<div class="row">
<input type="button" value="button. Lorem ipsum dolor sit amet, consectetur">
<input type="submit" value="submit. Lorem ipsum dolor sit amet, consectetur">
<input type="reset" value="reset. Lorem ipsum dolor sit amet, consectetur">
</div>
</fieldset>
</form>
</div>
</body>
</html>