Manual de CSS, hojas de estilo

Tutorial completo y práctico sobre hojas de estilo en cascada (CSS). Aprende a utilizar esta tecnología que te ayudará a crear páginas más atractivas y precisas. El curso contiene la descripción, uso, sintaxis, y lista de atributos para crear estilos

Listado de los capítulos

Qué es CSS Comenzamos presentando las Hojas de Estilo en Cascada y explicando de qué manera ayudan a los diseñadores de páginas web.

1.- Introducción a las CSS

Una breve introducción a CSS, para las personas que no saben nada sobre la tecnología el por qué de su creación y cómo ayuda a hacer páginas web mejores.

2.- Características y ventajas de las CSS

Conoce las principales características del lenguaje, su potencia y sus posibilidades.

3.- Arquitectura CSS: problemas

Proponemos contemplar CSS como si fuera un lenguaje de programación, analizando algunas de las inofensivas costumbres, que resultan no serlo tanto.

4.- Arquitectura CSS – Soluciones

Después de ver en el artículo “Arquitectura CSS – Problemas” los problemas de código y las consecuencias que podemos tener por tenerlos, es hora de darte algunos consejos para mejorar.
Distintas maneras de incluir estilos Existen distintas formas de definir estilos en una página, a diversos niveles que van desde las más específicas, que permitirían definir estilos en un pequeño texto de una página, hasta las más generales, para definir estilos para toda una página o incluso un sitio web.

5.- Usos de las CSS I

Describimos las distintas aplicaciones de las Hojas de Estilo en cascada. En este capítulo veremos las más sencillas.

6.- Usos de las CSS y II

Te describimos los usos más avanzados de las hojas de estilo en cascada. Para poder utilizarlas de la manera más potente.

7.- Otra manera de definir estilos en un archivo externo

También podemos incluir estilos en un archivo externo con un código con la sintaxis @import url("estilo.css"). Se utiliza para definir estilos comunes cuando hay también definición de estilos específicos.
lenguaje CSS Distintos apartados que tienen que ver directamente con el lenguaje utilizado para definir los estilos en páginas web, el CSS. Veremos su sintaxis, los diferentes atributos o reglas de estilo que podemos aplicar a los elementos y cómo seleccionar conjuntos de elementos de la página para aplicarles estilo agrupados o por separado.

8.- Sintaxis y unidades CSS

En este capítulo explicamos la sintaxis CSS, de hojas de estilo en cascada, con especial atención a las unidades CSS.

9.- Notación de colores CSS

Varias maneras, sintaxis o notaciones para definir colores con CSS de los elementos de la página.

10.- Atributos de las hojas de estilo

Explicación y ejemplos de los distintos atributos de las CSS. Podrás encontrar la lista en una tabla para imprimirtela y trabajar fácilmente.

11.- Definición de estilos CSS Shorthand

Disminuye el peso de tus hojas de estilo utilizando la forma shorthand de especificación CSS, que no es más que una manera reducida de escribir las propiedades de estilos.

12.- Pseudo-element en CSS (pseudo elementos)

Vamos a conocer los pseudo elementos en CSS, hojas de estilo en cascada, que sirven, entre otras cosas, para definir estilos para la primera línea o letra de un texto.

13.- Trucos avanzados con CSS

Vamos a ver una serie de técnicas con hojas de estilo, imprescindibles para utilizar esta tecnología con toda su potencia.
Modelo de caja En CSS se crea un nuevo modelo de caja que nos sirve para agrupar elementos en contenedores, a los que luego podremos aplicar estilos con CSS. Se trata de las capas, o cajas, que cobrarán una gran importancia a la hora de realizar tus diseños.

14.- Qué son las capas

Vemos las diferencias entre varias etiquetas para aplicar estilos y crear capas y una pequeña introducción a las capas.

15.- Atributos para capas

Veamos el posicionamiento de capas y otros atributos que podemos utilizar al definirlas.

16.- Problema con el posicionamiento absoluto de capas

A veces el posicionamiento absoluto de capas es demasiado rígido, pues si la definición de pantalla cambia de un usuario a otro las capas pueden quedar colocadas en lugares donde no deseamos. He aquí una solución.

17.- El Modelo de Caja en CSS

Un aspecto especialmente relevante de CSS es el Modelo de Caja. Este artículo brinda una primera aproximación a su arquitectura y a las distintas posibilidades que ofrece.

18.- Problemas del Modelo de Caja en Internet Explorer 5

Si no se toman ciertos recaudos nuestros diseños se verán distinto en distintos navegadores y aún peor: en distintas versiones del mismo navegador. Este artículo analiza esos comportamientos anómalos y brinda algunos trucos para que nuestros diseños

19.- Por qué diseñar con CSS

Mostramos algunas ventajas al maquetar con CSS respecto a otras formas de hacerlo.
Posicionamiento CSS y maquetación A partir de la implantación de CSS el estándar se volvió la herramienta indicada para la maquetación de las páginas web. En los próximos artículos hablaremos sobre el posicionamiento de elementos en la página y sobre la maquetación de los contenidos atendiendo a cualquier distribución que el diseñador necesite.

20.- Maquetación CSS

Una introducción sobre cómo maquetar una página utilizando capas, que ilustra el funcionamiento y la potencia de las CSS con ejemplos.

21.- Formas de aplicar estilos en maquetación CSS

Repaso a los métodos por los que se pueden aplicar estilos a las páginas web mediante CSS.

22.- Flujo HTML y atributos CSS

El flujo HTML es el modo en el que se van colocando los componentes de la página, a partir de cómo aparecen en el código HTML y los atributos CSS de los elementos.

23.- Posicionamiento CSS

Las hojas de estilo en cascada incorporan múltiples formas para posicionar elementos en la página, lo que comúnmente se conoce como posicionamiento CSS.

24.- Tipos de posicionamiento con el atributo position de CSS

Explicamos los distintos valores que puede tener el atributo position de CSS, con detalle.

25.- EL atributo Overflow de CSS

Explicamos esta propiedad interesante contemplada en la especificación CSS 2.
Trucos y consejos avanzados sobre CSS Algunos trucos y consejos fundamentales que debemos conocer si deseamos realizar un uso de CSS medianamente avanzado.

26.- Trucos CSS para no enloquecer

Algunas soluciones a los problemas tipicos que te puedes encontrar con CSS.

27.- Lo que nadie te contó de la propiedad z-index

Analizamos la propiedad CSS z-index para intentar descifrar su correcto uso más allá del habitual conocimiento que tenemos de ella, normalmente consistente en saber que las capas con mayor valor de z-index se colocan delante de las de valor menor.

28.- Utilizar porcentajes para tamaños de texto con CSS

El tamaño del texto se puede cambiar por medio de CSS, para agrandarlo o disminuirlo, por medio de porcentajes, de modo que el nuevo tamaño sea relativo al tamaño actual.

29.- CSS semánticas. Un nuevo enfoque

Existen infinidad de sitios en Internet que ofrecen miles de propuestas diferentes a la hora del uso de hojas de estilo CSS en la maquetación de portales web, como sabemos aplicables a múltiples tecnologías: XHTML, Flash, etc…

30.- CSS semánticas. Un nuevo enfoque (II)

Este artículo es la continuación de CSS semánticas. Un nuevo enfoque, y trata de dar una serie de consejos o recomendaciones a la hora del uso de hojas de estilo y escritura de código XHTML.

31.- 10 errores comunes en los css

Esta es una recopilación de errores comunes en las hojas de estilo. Es bastante provechoso hacer una lista con estos y otros errores comunes.

32.- Reglas de estilo CSS de usuario y de autor

Veamos qué son las reglas de estilo de usuario, configuradas opcionalmente por cada usuario en su navegador, y las reglas de estilo de autor, que define el desarrollador de cada web.

33.- Declaración !important en CSS

En CSS podemos declarar reglas de estilos como !important para que tomen precedencia sobre otras reglas de estilos que se puedan encontrar en una página web.

34.- Regla @media de CSS

Explicamos la regla @media permite definir estilos CSS específicos para distintos medios en los que se pueda mostrar una página web.

35.- Depurar CSS

Una lista de los errores más comunes en el código CSS y cómo averiguar cuál de esos errores se está produciendo en tu código, para depurar tus CSS.
Por dónde continuar Ahora que ya sabes bastante sobre CSS, quizás quieras abrir nuevos horizontes y para ello te damos algunas referencias para continuar aprendiendo.

36.- Listado de distintos frameworks CSS

Un listado de los frameworks CSS que hay en el mercado para ayudar en la maquetación de páginas web con CSS.

37.- Frameworks CSS: Ventajas e inconvenientes

Ventajas e inconvenientes del uso de Frameworks CSS, Discutimos acerca de la conveniencia o no de usar frameworks CSS.

38.- Introducción a CSS 3

CSS 3 trae grandes novedades para el diseño de webs y algunos navegadores comienzan a implementar CSS 3.

39.- Unidades CSS viewportwidth y viewportheight

Nuevas unidades de CSS3: viewportwidth y viewportheight. Cómo podemos hacer un útil uso de ellas al aplicarlas a tamaños de las tipografías.

Descargas

 Si eres usuario de DesarrolloWeb:
Archivo de descarga Manual de CSS, hojas de estilo Texto completo en PDF, listo para imprimir, del manual de DesarrolloWeb.com Manual de CSS, hojas de estilo.
Tamaño: 880 KB
Fecha creación: 18/09/2013
Páginas: 84

Bibliografía recomendada

CASCADING STYLE SHEETS

Este libro explica paso a paso el lenguaje HTML para crear sitios web, acompañados por CSS y XHTML.

Compra este libro en Agapea, la librería urgente a domicilio.
Manual en portugués
Esta disponible en CriarWeb.com:

Compartir

Comentarios

Betto

27/6/2009
Comentario
Hola, buen articulo, me será de granutilidad..... gracias

peyukin

16/7/2009
Gracias
Hola amigos de DesarrolloWeb!!... solo queria agradecerles x los manuales q contiene su pagina. Estoy empezando en esto del diseño de paginas y hasta ahora sus manuales de HTML y CSS, mas los videos explicativos de los mismos, me estan viniendo 'de pelos'.... solo eso... sigan asi!...

caed

19/8/2009
Manual de css
Muy bueno el manual de css, de gran utilidad y me ayudo a aclarar muchas dudas.

Daniel

17/9/2009
Mi opinión......
El manual me pareció excelente ....pero se me ocurre no sería práctico pornerlo también en formato .zip,.rar o .loquesea para los que queremos leerlo y además tenerlo impreso???

Es molestoso tener que Ctrl+c y Crtl+V en todas los capitulos para hacer lo mismo... y no lo digo por este sinó por varios de los manuales de ustedes que he leido y me han parecido igual de buenos.

Gracias por el trabajo de todas formas. Vale la pena.

midesweb

07/10/2009
El manual está disponible para imprimir
El PDF del manual para imprimir está disponible para los usuarios que deseen leerlo. El enlace para descarga está en la página de cada artículo y en la portada del manual.

9120

10/10/2009
Exelente
Exelente manual gracias por el aporte...Ok

951753

30/1/2010
ECXELENTE SITIO
Hola!!! solo quiero agardecer por toda la informacion,que e obtenido en este sitio web es buenisimo,mm soy principiante con desarrollo de pag pero,con esto es suficiente para empesar, FELICIDADES!!!!!!! ,saludos a todos los que son usuarios buena elecion de sitio.

mccl

16/2/2010
Felicitaciones
Muchas gracias por el manual, me sirvio muchisimo, es básico pero perfectamente entendible para quienes somos nuevos en estos asuntos :D

eunice

24/3/2010
¡¡¡hello!!! k tal
esta bueno el manual ya que de igual forma soluciona algunas cosas, ufff esque un choro esó de los comandos, pero si lainformacion es muy buena heee

La_Nena

24/4/2010
Felicidades
es un sitio genial..

Skata

25/5/2010
Exelente
Los manuales me han ayudado mucho, gracias

WIDO

31/5/2010
descargar manual
Alguien me podria ayuadar para como puedo descargar el manual si es necesario ser usuario de desarrolloweb

gerbergar

21/6/2010
Descarga del manual css pdf incompleto, faltan ultimos capítulos
Hola amigos de desarrollo web, tremendisima página la vuestra, os felicito por la ayuda que prestais a gente que como yo no tiene posibilidad de ir a una academia a aprender lo que le gusta o le interesay vosotros nos ofreceis la posibilidad de hacerlo desde casa.

Bueno, al grano: el caso que como usuario registrado de la página que soy tengo derecho a 6 descargas, y ya he gastado 2, pero con tan mala suerte que 1 de ellas esta mal, el manual de css en pdf para descargar esta incompleto, le faltan los ultimos cápitulos.

Lo digo por si me podeis devolver la descarga (recargar) y sobre todo para que lo arregleis y completeis que me interesa tenerlo entero.

Bueno gracias de antemano y un gran saludo.

07/8/2010
Buenisimo!!
=O cierto, en el pdf faltan todo lo que viene despues de la introduccion a CSS 3.

De todas formas, un excelente manual !!! esta muy bueno =D

usuario_borrado_713459

21/10/2010
Imagenes de fondo
Hola, perfecto manual para estilos externo.

Queria saber, como dejar imagenes fijas de fondo, y que el texto que he metido, se pueda deslizar independientemente de la imagen trasera.

angelosigasm

10/1/2011
Muy buenooooo
PErfecto el manual.. basico y sencillo, muchas gracias

angelosigasm

10/1/2011
Gracias
SE que me ayudara mucho con los fines que me propuesto, Gracias

fre_saga

21/1/2011
exelente maual
es un exelente manual esta muy bien explicado
gracias

DuendeB25

15/2/2011
Manual CSS
Hola a tod@s los que participan en está Web, me va a ser de mucha ayuda el manual de CSS. Gracias por poner esta información a tod@s las personas que nos interesa la creación de páginas web. Saludos

arlex

22/2/2011
descarga del pdf css
hola en mi caso la pagina me parece excelente y de utilidad para aprender y tener mas conocimiento.

tuve la oportunidad de registrarme para poder descargar el pdf css y la verdad ya ingrese a la pagina como usuario y al momento de descargar el archivo pdf no me deje, no genera ese archivo para descargar es para que el administrador de esta pagina chekee el link para poderlo descarga ya que no se puede o no genera nada. repito esto lo hago estando registrado. muchas gracias

earagona

11/3/2011
Archivo dañado
Hola que tal me descargo el manual y me dice que el archivo esta daniado, hay alguna posibilidad de resubirlo?
Gracias!

sr_nilsson

24/3/2011
Manual descargable
Buenas. A pesar de que me parece un sitio fantástico y estoy aprovenchándolo al máximo, he de decir que el manual descargable me parece un poco flojo, básicamente porque pasa de puntillas sobre muchos temas. En cambio el manual en línea está mucho mejor.
Saludos

elbert jose

03/4/2011
agradecer
que buen sitio los felicito sigan asii

manuel_garduo

05/5/2011
mas k exelente...
gracias por facilitar este tipo de informacion,,,, tan util, clara, y sencilla,,, ojala no cambien su forma de trabajo y de compartir el conocimiento,,, gran sitio el de ustedes..

aguilavzla

29/6/2011
manual CCS
Excelente manual, muy explicativo. mil gracias

OSKARIVAN

19/7/2011
agradecimiento
Lo voy a revisar, con mucho cuidado les agrdezco muchisimo po el material para la proxima descarga haré una donación con mucho gusto........

jaimejf

19/7/2011
Bueno
Que buen trabajo estan haciendo, gracias

Gerardo

30/7/2011
agradecimiento
Es un tutorial muy completo y muy agradable de estudiar, Quiero felicitarlo por su capacidad de ensenar y de compartir sin egoismo sus conocimientos.
Dios lo Bendiga.

angelsanchezjr

10/8/2011
Ayuda con carrusel vertical de Caja de "Ultimas Noticias"
Hola, necesito ayuda para crear este carrusel vertical de texto, deseo hacerlo en texto y en fotos, pero no encuentro el codigo, no se si es css o java o los 2, este es el link:
http://www.desarrolloweb.com/articulos/problemas-modelo-caja-css.html
y es la caja que dice: "Ultimas noticias", y el texto se va desplegando hacia arriba"
Gracias por su ayuda.

BonJovi

26/8/2011
CSS
Los felicito por todo el contenido en su dominio, sus manuales son explícitos y comprensibles, mucha gente obtendrá más conocimientos y saldrá beneficiada con sus artículos . Felicidades ¡¡

jeliasincio

14/9/2011
Excelente manual
Estuve chequeando el manual, excelente pero ahora quiero descargarlo como lo puedo hacer porque me pide recargar o algo asi

LadyRyddle

26/11/2011
Excelente sitio
Excelente sitio, y muy util manual,
felicitaciones:)

Jonez David

09/2/2012
Esta es mi primera oportunidad de visitar este sitio web.
Esta es mi primera oportunidad de visitar este sitio web. He encontrado algunas cosas interesantes y que se aplicará al desarrollo de mi blog. Gracias por compartir información útil.

<a href="http://www.customwriting.co.uk/">Coursework</a> | <a href="http://www.customwriting.co.uk/CW/Assignment.asp">Custom Assignment</a>

eduardocelaya

04/4/2012
Muchas gracias
Excelente el manual, me ha quedado muy claro, ahora sólo falta adentrarme más en el tema, pero con su trabajo me será mucho más fácil.

Iris Ivonne

08/4/2012
css
tengo un problema cuando guardo mi pagina no reconoce todos mis efectos que hago habra otra forma que pueda hacerla

Fangosto.net

20/7/2012
¡¡¡ Gracias !!!
Muchas gracias por el Manual. Su utilidad y practicidad es evidente.

miguel

04/12/2012
felicitaciones
me parecio muy buebo exelnte

luiscr269

13/1/2013
Asco de publicidad
Hola, quiero felicitaros por este manual, está muy currado pero hoy ha aparecido un banner de publicidad de tal tamaño que ha roto vuestra maquetación e impide leer el curso. Arregladlo, por favor.

Victoria y Juan

28/3/2013
Gracias!!
Muchísimas gracias por compartir estos conocimientos.
Una gran aporte para los autodidactas que aprendemos desde la red.
Felicitaciones!!

Bala1434

28/2/2014
posible estafa
Todo muy bueno, exelentes cursos pero la estafa de las descargas diciendo que si se dona algo tendriamos acceso a los cursos en pdf les funciona de maravilla, no se si es un error de vinculos en la construccion de su web o es a proposito pero deberian arreglarlo, tengo 4 browsers y no me funciona con ninguno, a aquellos que van a cometer el error en donar, aguanten un poquito a ver que solucion se realiza, me vi obligado a publicarlo de esta forma porque no he tenido respuesta de otra via, gracias

Marco Sanchez

17/5/2014
excelente
Muy bueno el tutorial , por si acasom ustedes nop pueden venderme un codigo para rating de comentarios con php

maam51

24/5/2014
Excelente MANUAL
Muy agradecido por tomarse la molestial de entregarnos buen material. Gracias nuevamente.

ARMANDO BUELOT

01/6/2014
buen manual
el aporte es mu yimportante muchas gracias por aportar a usuarios como nosotros que somos novatos en esto de la programacion