Cómo el estilo de listas y tablas con css3

listas y tablas de estilo es un poco diferente de peinar contenido en el cuerpo de la página, ya que ambas listas y tablas tienen etiquetas específicas que pueden ser redefinidos para controlar cómo el contenido se encuentra dentro de esas estructuras.

Video: Programacion HTML y CSS. 24 - Tabla con Formato

Cómo el estilo de listas con CSS3

Con las listas, puede seleccionar los atributos de texto, como la fuente, el tamaño y la alineación, y aplicar un color de fondo y el borde de cada elemento de la lista. Además, puede seleccionar el tipo de lista estilo deseado, seleccionar la posición de la bala en relación con el contenido de la lista de elementos, y optar por utilizar su propio gráfico de bala personalizado.

Video: Curso CSS Avanzado desde 0. CSS a tablas. Vídeo 27

El secreto para mantener todos los estilos de lista con el fin es envolver su lista entre las etiquetas con una carné de identidad atribuir, y luego crear estilos para las etiquetas,, y. Esto es especialmente útil cuando la creación de sistemas de navegación con el formato de lista:

Casa
Acerca de
Servicios
Contacto

Éstos son los estilos que se van a crear para su lista en el CSS. Este código incluye estilos para los estados normales y de enlace emergente:

#nav {position: absolute-width: 539px; altura: 57px; z-index: 4-derecha: 30px;} # nav ul {list-style-type: none; margen: 0px; padding-top: 31px; padding- derecha: 0px; padding-bottom: 0px; padding-left: 8 píxeles;} # nav ul li {display: inline-font-family: Arial, Helvetica, sans-serif-font-size: 14px; font-weight: osada color: # 4e2d17-padding: 0px; margen: 0px;} # nav ul li a: link, #nav ul una li: visited {text-decoration: none; color: # 4e2d17-background-color: # FAF8ED-padding- arriba: 57px; padding-right: 6px; padding-bottom: 10px; padding-left: 6px;} # nav ul li a: hover {color: # FFF-background-color: # E51B24-}

La imagen siguiente muestra cómo este menú de navegación se ve en un navegador cuando un visitante ratones de más de uno de los enlaces.

Cómo el estilo de mesas con CSS3

Con mesas y CSS, puede estilo de toda la tabla, las células individuales, filas o columnas, y el contenido de cada celda.

Video: Como hacer tablas animadas con CSS3

Comience mediante la inserción de una mesa y añadir el contenido deseado a cada una de las celdas de la tabla. Aplicar cualquier relleno y espaciado de celda a la mesa como se desee. Entonces, para que el proceso de labrar su mesa más fácil, asegúrese de añadir una carné de identidad atribuir a la etiqueta de la tabla de apertura y el clase atribuir a la primera fila de la tabla de etiquetas de apertura:

id ="calzoncillos largos" width ="300" border ="0" cellpadding ="10" cellspacing ="0"gt; class ="longjohnsth"gt;
Infantil Johns largo de seda
Precio
Cuello redondo Top ropa interior larga
$ 17.95
 Bragas de la ropa interior larga
$ 17.95

A continuación, cree un estilo para que carné de identidad, que se puede utilizar para dar formato a las partes principales de la mesa, como el tamaño de la tabla, color de fondo, y la frontera:

#longjohns {background-color: # 996-height: 200px; ancho: 300px; color: # FFF-}

Después de completar el formato principal de la tabla, puede crear combinadores avanzada (también llamado selectores dependientes) y estilos personalizados para las diferentes celdas de la tabla, como se ilustra a continuación.

#longjohns tr td {border-top-width: 0px; border-right; anchura: 0px; border-bottom-width: 1px; frontera izquierda; anchura: 0px;-top-estilo de borde: none; border-right; estilo : ninguno;-inferior border-style: salpicado-border-left; style: none; border-bottom-color:. #FFF -} longjohnsth {font-weight: bold-background-color: # C9C9AD-color: # 000- }