Wiki: Los usuarios registrados de DesarrolloWeb.com pueden modificar los contenidos y realizar aportaciones en esta sección.
  • Editar descripción
  • Crear subtitular
  • Crear subentrada
  • Crea una discusión
  • Envia un enlace
  • Envia una imagen
Es el lenguaje con el que se define el aspecto de la página, por medio de una serie de atributos de estilo que se pueden aplicar a las etiquetas u otros conjuntos de elementos de la página.
Descripción por: Gomez2

Especificaciones de CSS

Desde la creación del lenguaje de Hojas de Estilo en Cascada se han publicado 3 especificaciones, que han ido ampliando las propiedades y posibilidades de aplicación de estilos a páginas web.

CSS 1 y CSS2 están totalmente aceptadas por el panorama actual de navegadores modernos. Sin embargo la más nueva especificación del lenguaje, CSS 3, todavía no está soportada por todos los navegadores. Algunos clientes web como Safari o Firefox ya implementan algunas de las características de CSS 3, aunque otros como Internet Explorer no han empezado aun a incorporar nada nuevo.

CSS 3 será una revolución para los diseñadores y permitirá ahorrar mucho código HTML que hasta el momento se debe agregar a las páginas para llegar a soluciones estéticas como los bordes redondeados o asignación de múltiples fondos a los elementos, colores con degradados, transparencia, etc.

Sintaxis CSS

CSS usa una sintaxis sencilla cuyos componentes más importantes son los selectores y los atributos.

Los selectores permiten seleccionar elementos de la página, ya sea por un nombre de etiqueta, un identificador del elemento o un determinado class.

Los atributos permiten asignar estilos a los elementos seleccionados con los selectores, a través de diversos valores que se pueden indicar.

Bordes

Los estilos en los bordes se pueden aplicar a casi todos los elementos HTML disponibles, como tablas, botones, div, etc.
CSS nos permite personalizar los border especificando su tamaño, color y estilo. Tambien el lado del borde a alterar (left/right/top/bottom).

Propiedades de tamaño -->

tamaño a los cuatro lados: border-width
tamaño lado izquierdo: border-left-width
tamaño lado derecho: border-right-width
tamaño lado superior: border-top-width
tamaño lado inferior: border-bottom-width


Propiedades de color -->

color a los cuatro lados: border-color
color lado izquierdo: border-left-color
color lado derecho: border-right-color
color lado superior: border-top-color
color lado inferior: border-bottom-color


Propiedades de estilo -->

estilo a los cuatro lados: border-style
estilo lado izquierdo: border-left-style
estilo lado derecho: border-right-style
estilo lado superior: border-top-style
estilo lado inferior: border-bottom-style


Los estilos disponibles son: none, dashed, groove, outset, hidden, solid, ridge, inherit, dotted, double, inset.
Y para combinar todo lo demas, existe la propiedad border, en la cual se indica su estilo, color y tamaño a la vez. Sin importar el orden de las propiedades, ejemplo:

border: 1px dashed red;

-moz-border-radius y -webkit-border-radius

El border-radius es una nueva etiqueta implementada en CSS 3 con la cual puedes conseguir sin necesidad de imagenes, jQuerys y demás formas que se han ido utilizando hasta hoy y que comparadas con esto son complicadas, esto es lo mas fácil que te puedes encontrar por aquí para crear tus bordes redondos.

Ventajas:
*No ensucia el código
*No crea demasiadas lineas
*Es una forma fácil de aprender y recordar
*Tiene la posibilidad de ponerle el redondeo que desees a las esquinas

Desventajas:
*No he encontrado ninguna, pero si alguien la encuentra, por favor, escríbase aquí.

Explicación
Antes de empezar a deciros como son los códigos y a ponernos a hacer locuras con el pues primero debemos de aprender por que es -moz- y porqué -webkit-, os lo explico a continuación.
-moz-border-radius es para los navegadores Firefox 3 o posteriores, por lo que si tu haces tus bordes redondos con el -moz- pues solo se verá así en los navegadores Firefox 3 y superiores.
Pero para eso se ha creado también el -webkit- el cual hace este efecto en los navegadores siguientes:

*Safari
*Google Chrome
*Epiphany
*Midori
*Arora
*Rekonq
*Swift
*OmniWeb (a partir de su versión 5.5)
*Shiira
*Web Browser for S60

Uso del Border-Radius Bueno, despues de la anterior explicación ya os empiezo a explicar como se usa el borde-radius. Empecemos, veamos una linea:
#div {
-moz-border-radius: 15px ; //Esta linea hace que todos los bordes del div sean redondos con 15px. Esto en Firefox.
-Webkit-border-radius: 15px ; //Esta linea hace que todos los bordes del div sean redondos con 15px. Y esto en los navegadores anteriormente nombrados.
}

Ahora veamos las lineas exactas para darle esa forma redonda a posiciones específicas, ahora os voy a mostrar los codigos separados para poseer un orden mayor, empecemos por el -moz-:
-moz-border-radius-topleft: 15px ; //Esta linea hace que el borde izquierdo-arriba sea redondo.
-moz-border-radius-topright: 15px ; //Esta linea hace que el borde derecho-arriba sea redondo.
-moz-border-radius-bottomleft: 15px ; //Esta linea hace que el borde izquierdo-abajo sea redondo.
-moz-border-radius-bottomright: 15px ;  //Esta linea hace que el borde derecho-abajo sea redondo.

Espero que no haya problemas al entender esto. Ahora veamos el -webkit-, que es exactamente igual pero se le cambia el principio, véanlo:
-webkit-border-radius-topleft: 15px ; //Esta linea hace que el borde izquierdo-arriba sea redondo.
-webkit-border-radius-topright: 15px ; //Esta linea hace que el borde derecho-arriba sea redondo.
-webkit-border-radius-bottomleft: 15px ; //Esta linea hace que el borde izquierdo-abajo sea redondo.
-webkit-border-radius-bottomright: 15px ;  //Esta linea hace que el borde derecho-abajo sea redondo.

Ya está, eso es todo lo que se tiene que hacer para poder hacer bordes redondos con CSS 3, como podéis ver, es mas fácil que estar instalando un jQuery o estar usando imágenes (algo que en opinión ensucia demasiado el código, me refiero a las imágenes).
Pues creo que esto es todo. Si alguien ve que le falta algo a esto, por favor, comunicarlo o editadlo directamente por favor. Saludos
Entradas relacionadas con CSS
Entradas clasificadas por las etiquetas:
Sumario de entradas hijas:
Entrada padre:
Participación para ampliar las referencias:


Últimas discusiones
22/05/2013 - CSS jquery mobile
Tengo un problema, quiero evitar que jquery mobile aplique sus estilos a algunas etiquetas a las cuales quiero aplicarle estilos mios
0
0
Estimados me podrían ayudar con un tema de diseño web
quisiera saber como personalizar la ubicación de mis imagenes, css + jsp.
Gracias de antemano
0
0
Es posible volcar en un div con determinado tamaño,una cantidad de texto,y que el texto tome la forma del div?
Me pasa que al cargar texto en un div que no tiene el largo del texto,este no se visualiza todo...alguna solucion?
0
0
les dejo la dirección y la CSS
http://www.trazart.com.uy/flash.html

CSS
La hoja se las dejo en este link
http://www.trazart.com.uyCSS/disenio.css


Gracias!
0
0
03/01/2012 - css internet explorer
tengo una imagen como link y funsiona bien en los navegadores, pero en IE me sale un recuadro al rededor de la imagen ya intente ocultarla por css pero me sigue en apareciendo en IE porfa como puedo quitar este recuadro????
0
0
19/12/2011 - CSS con CodeIgniter
Necesito ayuda con unos CSS
0
1
Hola tengo un problema con una de las secciones de mi menu en html y css y es que cuando le doy click no ba las opciones:



pero cuando pongo

si que se ve hay alguna manera de pasar class="menu " a class="menu active" al darle click ???? Gracias
0
0
Hola, tengo problemas con javascript y css en explorer, pero la pagina funciona super bien en firefox o chrome. Como hago para que tambien funcione y se vea bien en explorer? la pagina es selectiva.boxsystem.cl
0
0

Enlaces
Fueron enviados 17 enlaces
17 enlaces enviados:
Pagina no oficial de CSS3
Este es un blog de CSS 3. Bastante interesante y...
Por: Distriker
Current Work
Estado de las especificaciones CSS, en inglés
Por: Adrag
Tutorial de CSS por W3C
Comenzando con HTML + CSS. Este breve tutorial...
Por: Adrag
Trucos y sugerencias para CSS
Todos los trucos y sugerencias de la W3C sobre CSS
Por: Adrag
CSS y XSL
¿Porque la W3C recomienda dos diferentes lenguajes...
Por: Adrag
Trucos y sugerencias para CSS
Hojas de estilo alternativas.
Por: Adrag
Declaraciones de codificación de caracteres...
¿Cómo se declara la codificación de caracteres...
Por: Adrag
CSS3 y texto internacional
Autores de contenido HTML/XHTML y CSS que desean...
Por: Adrag
CSS en contraposición al etiquetado para la...
¿Debo usar CSS o etiquetado en lenguajes de...
Por: Adrag
Técnicas CSS para las Pautas de...
Este documento describe unas técnicas para la...
Por: Adrag
Técnicas CSS para las Pautas de...
Este documento describe unas técnicas para la...
Por: Adrag
accesibilidad CSS
Este documento resume las características de la...
Por: Adrag
Características de Accesibilidad de CSS
Este documento resume las características de la...
Por: Adrag
especificación css 1 castellano
especificación css 1 castellano W3C
Por: Adrag
Guía de Referencia CSS 2.1
Guía de Referencia CSS 2.1 del W3C
Por: Adrag