WarioTeAyuda

Css basico


Css es  diseño

Aqui 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=&quot;2&quot;</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
Actualmente conseguimos: 74881 visitantes (261965 clics a subpáginas)