tablas y css

hola amigos

aqui tenemos un diseño de tabla casi perfecto

Table designs

Design Name	Author	Country	Comment	Download
Total	87 designs
serif my love	Frank Schnappenberger	Germany	A clean and simple table design with serif font	Download
REDandBLACK	Martin Paffenholz	Germany	Style like our website. Best viewed in Mozilla Firefox.	Download
UV Green	Kunimichi Takahashi	USA	Let me know what you think.	Download

Empezamo ahora con una sencilla

Comando	función
TR	Siguiente fila
TH	Encabezado en columna siguiente
TD	Texto en la columna siguiente

ahora voy a intentar una de dos como quiero hacer

Esto es una prueba segunda linea tercera linea cuartalinea quinta linea

y esto es lotro lao con solo dos lineas

Ahora voy a ponerle css con border=0
crearemos la clase tutabla
div.tutabla {
width:100%;
}
table.tutabla {
text-align:center;
margin-left:auto;
margin-right:auto;
width:400px;

padding:0;
border:0;
background:white;

}

tr.tutabla
{

padding:0;
border:0;

}
td.tutabla-left
{
text-align:left;
padding:0;
border:0;
}
td.tutabla-right
{
text-align:left;
padding:0;
border:0;


}

Esto es una prueba segunda linea tercera linea cuartalinea quinta linea

y esto es lotro lao con solo dos lineas

He conseguido centrar la pero con un width fijo. No es lo mas interesante, pero puede valer.
-----------------------
Si no pongo width en la tabla y si lo pongo en los contenidos ¿que pasará?


crearemos la clase tutabla1
div.tutabla1 {
width:100%;
}
table.tutabla1 {
text-align:center;
margin-left:auto;
margin-right:auto;
/*width:400px;*

padding:0;
border:0;
background:white;

}

tr.tutabla1
{

padding:0;
border:0;

}
td.tutabla1-left
{
text-align:left;
padding:0;
border:3pt;
width:300pt;
}
td.tutabla1-right
{
width:100pt;
text-align:left;
padding:0;
border:3pt;


}

Esto es una prueba segunda linea tercera linea cuartalinea quinta linea

y esto es lotro lao con solo dos lineas

comenzando.

Intentando aprender CSS, es una especie de diario de aprendizaje, donde voy apuntando mis experiencias y lo que voy aprendiendo.

CSS, Hojas de estilo en cascada, es una forma de agrupar los estilos (tipo de letra, color.....) para aplicarlos mas facilmente en el diseño de HTML. Definimos el estilo por ejemplo cuadro-de-codigo y decimos que la letra será de tal modo, el color de fondo blablabla...... de forma que cuando vamos montando la pagina web, cuando queremos un cuadro de código, en vez de definir el color, tipo de letra........bla bla bla, solo tenemos que decir que es del tipo cuadro-de-codigo, y ya esta.

Así, se van escribiendo en un ficherete aparte, o en el mismo html los estilos, y luego, la visualizacion de las paginas se puede cambiar, con solo cambiar el ficherete.

Lo de en cascada, se refiere al orden en que se escoje un estilo, es decir, tenemos un estilo por defecto, un estilo de bloque un estilo de....... y segun como decidamos, el visualizador de html escogerá el estilo definitivo.

Pero vayamos un poco a la práctica.

Con las hojas de estilo, se pueden asignar distintos parametros a los elementos
html pero como?.

Un ejemplo de propiedades, los vemos en esta direccion
http://htmlhelp.com/es/reference/css/properties.html


Declaración de propiedades :

Aqui vemos una lista de propiedades a las que hemos dado valores.


Como se declaran las propiedades en CSS:

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
background-color: #333333;
border: 1px solid #A1040D;

Es decir :

propiedad:valores(separados por comas);

SELECTORES
Selectores son unas expresiones que nos indican a que elementos html les vamos a asignar las propiedades.
La sintaxis de la asignación de selectores es:

selector {
propiedad:valores(separados por comas);
......................................
propiedad:valores(separados por comas);
}

Ejemplo:

P {font-size: 10px;
font-weight: normal;
color: #FFFFFF;}

En este ejemplo, al elmento parrafo

le estamos asignando las propiedades que hemos escrito entre llaves: el 'font-size' a 10 px y el 'weight' normal.

Hay unos cuantos tipos de selectores, que son el 'meollo del css'

TIPOS DE SELECTORES:

• - Selectores elementales

Se aplican a elementos html como el

o el
Ejemplos:

P {font-size: 10px;
font-weight: normal;
color: #FFFFFF;}

EN {font-size: 10px;
font-weight: normal;
color: #FFFFFF;}

A partir de ahora siempre que utilizemos p o en, será con estas propiedades.

• - Selectores de clase

Por ejemplo algunos párrafos los queremos de un estilo y otros de estilo distinto, por lo que no nos sirve el selector elemental, entonces nos inventamos un nombre para una clase de párrafos y hacemos esto:
Por ejemplo si decidimos una clase llamada notas, podemos escribir el estilo del parrafo de las notas de este modo:

P.notas {font-size: 10px;
font-weight: normal;
color: #FFFFFF;}

P.texto {font-size: 12px;
font-weight: normal;
color: #FFFBFF;}

A partir de ahora siempre que utilizemos p class="notas" o p class="texto", será con las propiedades que hemos indicado
Incluso se puede definir un estilo para todos los elementos de una clase:

.notas {font-size: 10px;
font-weight: normal;
olor: #FFFFFF;}

• - Selectores de identidad

Si escribimos una identidad en un elemento html como por ejemplo :
<P id=Raro>Hola soy un parrafo con id raro </p>
Podemos asignar propiedades a esta id escribiendo lo siguiente :

#raro {font-size: 10px;
font-weight: normal;
color: #FFFFFF;}

• - Selectores de contexto

Se pueden dar propiedades a dos selectores en comun, por ejemplo si queremos
dar una propiedad a enfasis solamente cuando esta dentro de un parrafo escribimos :

P EN {font-size: 10px;
font-weight: normal;
color: #FFFFFF;}

Declaración común de varios selectores

Simplemente los declaramos juntos con comas. Ejemplo:

P, EN,#raro, p.narrativo  {font-size: 10px;
font-weight: normal;
color: #FFFFFF;}

En este ejemplo, damos las mismas propiedades a los parrafos, enfasis, a la identidad #raro y a los parrafos de la clase narrativo.

PSEUDOELEMENTOS Y PSEUDOCLASES

Son clases y elementos predefinidos que los navegadores tienen que reconocer y la sintaxis es la misma para los dos casos:

selector:pseudoClase  {propiedad: valor;
.................
propiedad:valor;}
selector:pseudoElemento  {propiedad: valor;
.................
propiedad:valor;}

Ejemplos:
La pseudo clase visited corresponde a los enlaces ya visitados, podemos dar propiedades a los links visitados de esta manera:

A.mislinks:visited {
color: green;
font-size: 85% }

Hay un pseudo elemento de un parrafo que es first-line, podemos asignar propiedades asi:

P.notas:first-line {
font-variant: small-caps;
font-weight: bold }

IMPORTANTE

A un elemento html podemos darle propiedades de varias maneras: como elemento, como perteneciente a una clase o incluso a una identidad. Si queremos que provalezca una que hemos dado en concreto, podemos marcarla como importante de esta manera.

P.notas:first-line {
font-variant: small-caps;
font-weight: bold ! important}

.----oOO--OOo----.