body{
background-color: antiquewhite;
}
/* el padre y luego el hijo */
ul {
background-color: #fff;
border: solid 1px #ddd;
border-radius: 4px;
padding-left: 0px;
list-style-type: none;
}
li{
padding: 15px;
border-bottom: solid 1px #ddd;
}
table{
width: 100%;
background-color: white;
border-collapse: collapse;
}
/* tambien puede ser odd */
tr:nth-child(even) {
background-color: #f2f2f2;
}
td{
border: solid 1px #ddd;
padding: 8px;
}
/* el padre y luego el hijo */
table th {
background-color: #4caf50;
color: white;
text-align: left;
padding-top: 12px;
padding-left: 8px;
padding-right: 8px;
padding-bottom: 12px;
}
a{
color: hotpink;
background-color: #f00;
border: solid 1px #d00;
padding: 10px;
margin: 15px;
border-radius: 4px;
}
a:link{
color: red;
text-decoration none;
}
a:visited{
color:white;
}
a:active{
color: black;
}
a:hover{
color: white;
background-color: #f55;
}
p {
font-family:'Times New Roman', Times, serif;
font-weight: ;
font-style: italic;
font-size: 1.5em;
color : blue;
text-align: left;
text-indent: 40px;
line-height: 1.7;
word-spacing: 10px;
text-shadow: 1px 2px 2px rgba(255,0,0,0.3);
}
.caja{
background-color: #fff;
border-style: solid;
border-width: 1px;
border-color: #ccc;
border-radius: 2px;
border-top: solid 0px;
}
.contenido{
padding: 10px;
}
.header{
padding: 10px;
border-bottom: solid 1px #eee;
}
.footer{
padding: 10px;
border-top: solid 1px #eee;
}
.primario{
background-color: #0092ff;
padding: 5px;
color: #fff;
border: 0px;
}
.secundario{
background-color: #aaa;
padding: 5px;
border: 0px;
color: #fff;
}
<html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> hola</title></head> <link href="main.css" rel="stylesheet" type="text/css"><body> <p>Juan ya tiene la web de su negocio desarrollada. Ahora está valorando los costes que le supondría contratar un servidor de alojamiento, aunque también está investigando la posibilidad de hosting gratuito. ¿Qué va a detectar Juan con su investigación? </p>
<h1>Bloque h1</h1>
<div>Bloque div</div>
<form>Form</form>
<header>Header</header>
<footer>Footer</footer>
<section>Section</section>
<p> hola soy un bloque ! </p>
<span>Hola soy inline !!</span>
<a>Hola soy inline !!</a>
<div id=invisible>Hola soy inline !!</div>
<a href="https://www.google.com" >Google!</a>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
</ul>
<table>
<tbody>
<tr>
<th>Empresa</th>
<th>Contacto</th>
<th>Pais</th>
</tr>
<tr>
<td>Coca</td>
<td>Victor</td>
<td>Venezuela</td>
</tr>
<tr>
<td>Cola</td>
<td>Manuel</td>
<td>Chile</td>
</tr>
</tbody></table>
<div class="caja">
<div class="header">Soy cabecera</div>
<div class="contenido">soy
un Contenido dentro de la caja</div>
<div class="footer">
<button class="primario" >Aceptar</button>
<button class="secundario">Cancelar</button>
</div>
</div>
</div>
No hay comentarios:
Publicar un comentario