Aprende css basico
Css es diseñoAqui enseñare algunas cosas para aprender a usarlo mejor
Tablas
Tabla basica :
<table>
<tbody>
<tr>
<td>
Aqui es donde se escribe!
</td>
</tr>
</tbody>
</table>
Aqui es donde se escribe! |
Con fondo :
<table>
<tbody>
<tr>
<td style="background-image: url( url de imagen! );" class="fuente8">
Aqui es donde se escribe!
</td>
</tr>
</tbody>
</table>
| Nota Codigo con fondo xD : |
Agregarle Celdas Filas y columnas :
Para agregar columnas :
<table width="350" cellspacing="2" cellpadding="2" border="1">
<tbody>
<tr>
<td align="center" colspan="2">Celda uno</td>
</tr>
<tr>
<td align="center">Celda Dos</td>
</tr>
</tbody>
</table>
Saldra asi :
| Celda uno | |
| Celda Dos | |
Solo tienes que agregar el :
A cada columna que quieras :
<tr>
<td>Celda uno</td>
</tr>
Para que salgan filas :
<table width="300" cellspacing="2" cellpadding="2" border="1">
<tbody>
<tr>
<td align="center" rowspan="2">Celda uno.</td>
<td align="center">Celda Pequeña dos</td>
</tr>
</tbody>
</table>
Saldra asi :
| Celda uno. | Celda dos |
Solo tienes que agregar el :
<tr>
<td align="center" rowspan="2">Celda uno.</td>
<td align="center">Celda Pequeña dos</td>
</tr>
A cada fila
Para agregar de tres!
<table width="350" cellspacing="2" cellpadding="2" border="1">
<tbody>
<tr>
<td align="center" colspan="2">Esta celda tiene un colspan="2"</td>
</tr>
<tr>
<td align="center">Celda normal</td>
<td align="center">Otra celda</td>
</tr>
</tbody>
</table>
| Celda uno |
|
| Celda pequeña dos |
Celda pequeña tres |
Seria el :
<td align="center" colspan="2">Aqui el grande </td>
Para agregar de tres !
<table width="300" cellspacing="2" cellpadding="2" border="1">
<tbody>
<tr>
<td align="center" rowspan="2">Celda uno.</td>
<td align="center">Celda Pequeña dos</td>
</tr>
<tr>
<td align="center">Celda pequeña tres</td>
</tr>
</tbody>
</table>
| Celda uno. | Celda Pequeña dos |
| Celda pequeña tres |
Seria el :
<td align="center" rowspan="2">Celda uno.</td>
Ahora para agregar de cuatro !
<table width="350" cellspacing="2" cellpadding="2" border="1">
<tbody>
<tr>
<td align="center">Celda normal</td>
<td align="center">Celda normal</td>
</tr>
<tr>
<td align="center">Celda normal</td>
<td align="center">Otra celda</td>
</tr>
</tbody>
</table>
| Celda normal | Celda normal |
| Celda normal | Otra celda |
Imagenes juntas :
<table width="A" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="background-image: url(URL im1); height: H im1px;"></td>
</tr>
<tr>
<td style="background-image: url(URL im2); height: H im2px;">
Aquí el contenido</td>
<td style="background-image: url(URL im3); height: H im3px;"></td>
</tr>
</table>
Ejemplo :
 Hola este gran code ! !! se hizo con tablas xD !  |
Divs
El div es un codigo clase en el css que permite dar varias funciones como la tabla :
Basico :
<div>Aqui el contenido</div>
Aqui el contenido
Para asignarle un nombre esto es muy utilizado te recomiendo tomarlo en cuenta !
<div class="mi_clase">Aqui el contenido</div>Sirve para centrar :
Centrar a la izquierda
<div align="left">Aqui el texto</div>
Aqui el texto
Centrar al centro
<div align="center">el texto </div>
Aqui el texto
Centrar a la derecha
Aqui el texto
<div align="right">Aqui el texto </div>
Posicionar :
<div style="position:absolute;left:570px;top:700px;">
AQUI PONGAS LO QUE DESEES PONER ESTE ES UN GRAN CODE!
</div>
El left es derecha e izquierda
El top es arriba abajo
Style (plantillas )
u
illi
center
Style: (plantillas)
El style es para elaborar plantilas, posicion y todo lo referido :
Empieza un codigo :
<style type="text/css">Y termine :
<!--
-->
</style>
Se pegaria asi :
<style type="text/css">
<!--
body {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color:#333333;
}
-->
</style>
Por ejemplo ese es para fondo
Tambien en css-design se puede pegar en codes sin style sin tags estos codes:
pero sin el style de ahi el nombre :
# body {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color:#333333;
}
Menus :
para ponerlos menus normlamente se dividen en dos partes :
En 1era
Par a poner el menu :
<ul class="panel">
<li><a href="URL ">» MENU</a></li>
<li class="lastitem"><a href="URL">MENU</a></li>
</ul>
Es el menu y desde alli se agregan los links
Comenzo el menu :
<ul class="panel">
Termino :
</ul>
Se agrega:
<li><a href="URL ">» MENU</a></li>
<li class="lastitem"><a href="URL">MENU</a></li>
Siempre te saldran tipos asi cuando agreges
Para identificarlo son asi :
="panel"
En 2da para personalizar el menu :
Que normalmente se pone en codes sin style sin tags :
.panel{
list-style-type: none;
margin: ;
padding: ;
width: 180px;
}
.panel li a:visited, .
panel li a:active{
color: ;
}
.panel li a:hover{
background-color:
color: ;
border-bottom:
during hover.
}
En este sera el fondo , tamaño , posicon , el color , al visitarlo , la font , etc , todo como se vera de lo contrario se vera como un link
Ejem :
.panel a:hover{
background-color: El fondo ;
color: El color de la letra ;
width: El ancho del menu ;
text-decoration: Si quieres que el texto es decorado normalmente no se quiere y se pone none ;
top esta es la posicion del menu arriba y abajo ;
font: Aqui podras agregar el tipo de letra que quieres que haya;
}
.panel es el nombre
hover es cuando pasa el mouse
{ y } es para comenzar y terminar la edicion
Es un ejemplo
En menus despehables se pone estos codigos para agregar :
<script type="text/javascript" src="Agregar archivo jss"></script>
<link href="Agregar archivo css" rel="stylesheet" type="text/css">Ahora con esto podran editar sus menus bien! xD
