Resumen: Entrega nº1: Índice del curso "Tutorial básico del programador web: CSS desde cero".
Codificación aprenderaprogramar.com: CU01001D

 

 

1.            INTRODUCCIÓN A CSS. QUÉ ES Y PARA QUÉ SIRVE CSS. VERSIONES CSS. EL W3C.

1.1.        ¿Qué es CSS? HTML, conocimiento previo necesario.

1.2.        ¿Es CSS un lenguaje de programación? ¿Para qué sirve? Diferencias de HTML, CSS, PHP, ASP...

1.3.        Diferencias entre CSS y HTML. Frontera entre CSS, HTML y programación.

1.4.        CSS en aplicaciones web Joomla, WordPress, Drupal, phpBB... Plantillas, Templates o Themes.

 

1.5.        Empezar a usar CSS a partir de un documento HTML con estructura básica.

1.6.        Versiones CSS. Algo de historia y perspectiva. ¿Qué es el W3C? Recomendaciones oficiales.

1.7.        Documentación especificación oficial CSS. W3schools y W3fools. Validación CSS W3C validator.              

1.8.        ¿Qué necesito para escribir código CSS y crear páginas web?   

 

2.            MODELO DE CAJAS CSS. ESTILOS EN LÍNEA, INTERNO Y EXTERNO. TIPOS DE ELEMENTOS.          

2.1.        De la estructura HTML y su semántica al modelo de cajas CSS. Elementos block e inline CSS.

2.2.        Estilos por defecto, en línea, interno y externo. Sobreescritura de estilos. link rel.        

2.3.        Archivos CSS. Comentarios CSS.

 

3.            SELECTORES POR ID (#) Y POR CLASE(.). CONCEPTO DE HERENCIA Y DE CASCADA.        

3.1.        Selectores por id. Selectores por class. Ejemplos.

3.2.        Concepto de herencia en hojas de estilo CSS. ¿Qué es? Forzar herencia con inherit.

3.3.        Conceptos: cascada y herencia CSS. Estilos de usuario. !important. Ejemplos prácticos.

 

4.            SELECTORES AVANZADOS. PSEUDOCLASES. PSEUDOELEMENTOS. EJEMPLOS PRÁCTICOS.        

4.1.        Selectores avanzados, pseudoclases y pseudoelementos CSS.

4.2.        first-child, nth-child, last, not, -letter -line, after, before.

4.3.        Selector universal. nth-of-type y nth-last-child.

 

5.            COLORES CSS.  

5.1.        Colores HTML y CSS. RGB decimal o porcentual. Códigos de colores hexadecimales.

5.2.        Web safe colors. Colores RGBA, HSL, HSLA. Transparencia CSS. Lista de colores HTML - CSS.

 

6.            FONDOS.           

6.1.        Color de fondo. Propiedad background-color CSS.

6.2.        Definición de fondo CSS. background-image. Efecto fondo página web. background-repeat.

6.3.        CSS background-position, background-attachment, clip, origin y size. Shorthand fondo. Ejemplos.

6.4.        Definición de fondo CSS. background-image. Efecto fondo página web. background-repeat.

 

7.            UNIDADES DE MEDIDA. PROPIEDADES WIDTH Y HEIGHT.          

7.1.        Unidades de medida CSS relativas o absolutas. in, cm, mm, pt, pc, pixel px, porcentaje, em, ex.

7.2.        Propiedades CSS width y height. auto (automático). Ejemplos prácticos y ejercicios resueltos.

 

8.            BORDES CSS. PROPIEDADES RELACIONADAS.   

8.1.        Tipos de borde CSS. border-style hidden, solid... Efectos 3D. border-top right bottom left.

8.2.        Shorthand: notación CSS abreviada. border-width (thin, thick) border-color (transparent).

8.3.        Propiedad outline.

 

9.            MARGEN (MARGIN) Y RELLENO (PADDING). PROPIEDADES RELACIONADAS.  

9.1.        Concepto de margen y relleno CSS. Diferencias entre margin y padding CSS (box model).

9.2.        Padding y margin CSS. Top, right, bottom, left. Margin negativo y centrar con margin auto.

 

10.          POSICIONAMIENTO, MAQUETACIÓN Y DISEÑO CON CSS. POSITION, FLOAT, CLEAR  Y MÁS.    

10.1.      Propiedad position CSS: static, relative, absolute, fixed. Top, right, bottom, left. Ejemplos.

10.2.      Propiedad display CSS. inline, block, none, list-item. Ejercicios de ejemplo resueltos.

10.3.      Concepto float CSS. none, left, right y ¿centrar?. Colocar texto alrededor de una imagen.

10.4.      clear CSS both¿El texto no envuelve una imagen html? Explicación a problemas.

10.5.      Diseño web CSS dos, tres, cuatro columnas con float ¿width en porcentajes no funciona?

10.6.      overflow CSS. scroll. overflow-x, overflow-y. Propiedad visibility (visible, hidden, collapse).

10.7.      z-index CSS ¿no funciona? Superposición de elementos tipo capas, objetos, div o imágenes.

10.8.      CSS vertical-align middle Centrar verticalmente una imagen, texto, div, etc. Ejemplos.

10.9.      Diseño líquido CSS (fluido) frente a responsive-design.

10.10.    Propiedades CSS max-width, min-width, max-height, min-height.

 

11.          FUENTES Y TEXTO.         

11.1.      CSS text-align, color, text-decoration, text-indent, white-space nowrap, pre, pre-wrap, pre-line.

11.2.      CSS efecto sombra con text-shadow y blur, text-overflow clip, ellipsis.

11.3.      Interlineado: propiedad CSS line-height.

11.4.      CSS text-transform y first-letter, letter-spacing y word-spacing.

11.5.      Cortar palabras largas con word-wrap.

11.6.      CSS font-size (uso de larger, smaller).

11.7.      font-weight o negrita (bolder, lighter).

11.8.      font-style o cursiva italic.

11.9.      CSS font-family. tipografía (tipos de letra). Lista de tipos.

11.10.    font-variant (small-caps). Shorthand font.

11.11.    @font-face CSS. Fuentes web gratuitas. Problemas.

11.12.    Convertir woff, eot, ttf, otf, svg. Font converters.

 

12.          ENLACES CSS.   

12.1.      Pseudoclases CSS link, visited, focus, hover y active. Estilos y efectos en links.

 

13.          LISTAS CSS.       

13.1.      Listas CSS. list-style-type, list-style-position (outside, inside), list-style-image.

13.2.      Shorthand list-style.

13.3.      Menú horizontal CSS o vertical. Crear menús con efectos a partir de listas CSS. Ejemplos.

13.4.      Menú desplegable CSS horizontal. Efecto dropdown. Ejemplo de código (float, display…).

 

14.          TABLAS CSS.     

14.1.      Estilos y herencia CSS en tablas. Width, height, font-size y overflow en tablas. border-collapse.

14.2.      Diseño de tablas CSS. border-spacing, caption-side, empty-cells.

14.3.      Diseño de tablas CSS. Colores de filas intercalados alternos.

 

15.          COMPATIBILIDAD Y PREFIJOS DE NAVEGADOR: CHROME, FIREFOX, INTERNET EXPLORER, OPERA, SAFARI.      

15.1.      Comentarios condicionales CSS. Problemas: compatibilidad entre navegadores.

15.2.      Strict mode. Filtros.

15.3.      Prefijos CSS de navegador Chrome, Firefox, Internet Explorer, Opera, Safari.

15.4.      Prefijos -webkit -moz -ms -o Ejemplos.

 

16.          EFECTOS CSS DE ÚLTIMA GENERACIÓN. USO DE SPRITES. ANIMACIONES.         

16.1.      Sprite CSS: concepto. ¿Qué es, cómo crear y usar un sprite? Ejemplos y código resuelto.

16.2.      Columnas CSS: column-count, column-width, columns, colum-gap y colum-rule. Ejemplos.

16.3.      Efecto CSS esquinas redondeadas: border-radius. border-left-top-radius. Círculo o elipse.

16.4.      Efecto sombra CSS: box-shadow. Sombra interior inset. Difuminado blur, spread. Ejercicios.

16.5.      Degradados CSS. Efecto lineal y radial. linear-gradient.

16.6.      Angulos CSS: unidades deg, grad, turn, rad.

16.7.      Efectos CSS. radial-gradient tipo circle o ellipse.

16.8.      Efectos CSS. transform: rotate, scale, skew y translate. Rotar, escalar, sesgar, trasladar.

16.9.      Animaciones CSS. transition-property, transition-duration, timing-function y efecto delay.

16.10.    Animación CSS. Diferenciar transición y animación. @keyframes: fotogramas o estados clave.

16.11.    Animation CSS. name, duration, delay, fill-mode, iteration-count.

16.12.    Animation CSS. direction, timing-function, play-state.

16.13.    cursor CSS. Tipos. Efectos hover: move, no-drop, resize, not-allowed, crosshair, progress, wait.

 

17.          MÁS SOBRE CSS.            

17.1.      Otros aspectos de CSS.

17.2.      ¿Qué hemos aprendido y qué no hemos aprendido con este curso de CSS?

 

 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

 

Descargar archivo: