Diseño Web con CSS
Por Alicia Durango
5/5
()
Información de este libro electrónico
CCS es el formato recomendado para las páginas escritas en formato HTML en base a los estándares de "Cascading Style Sheets" (hojas de estilo en cascada), publicado por el World Wide Web Consortium (W3C).
El uso de este estándar Web nos ahorra tiempo, da consistencia y facilita en gran medida la escritura de páginas Web, en este libro vamos a aprender a utilizar las hojas de estilo en cascada (estilos CSS) para crear páginas Web más flexibles y ligeras, controlando su aspecto gráfico con mayor precisión y con mayor facilidad para la corrección de errores.
Primer contacto
Para comenzar haremos cosas muy simples y rápidas, comenzaremos a ver algunos ejemplos y haremos algunos ejercicios prácticos. Más adelante tendremos un capítulo en el que se analizará la situación que llevó a la W3C a crear este patrón y después de varios capítulos nos tomaremos este tema con más seriedad y haremos docenas de ejercicios prácticos.
Alicia Durango
Con experiencia en el mundo de formación desde el año 2010, Alicia empieza a escribir libros y a crear cursos online de informática para sus alumnos. Con una amplia experiencia laboral, Alicia Durango es una profesional con formación en Desarrollo de Aplicaciones Informáticas y Administración de Sistemas Informáticos, con más de 8 años de experiencia en el mundo de la informática, con amplia experiencia en los sectores de formación, publicidad y desarrollo web, llevando a cabo tareas de gestión, diseño gráfico, programación web y Directora de publicidad.
Lee más de Alicia Durango
Ingeniería y Arquitectura del Software Calificación: 3 de 5 estrellas3/5Diseño de Software Calificación: 0 de 5 estrellas0 calificacionesCurso de Programación y Análisis de Software Calificación: 4 de 5 estrellas4/5Las Redes Sociales Calificación: 2 de 5 estrellas2/5Curso de Marketing Online Calificación: 0 de 5 estrellas0 calificacionesCurso de Programación con Java - 2ª Edición Calificación: 5 de 5 estrellas5/5Mercadotecnia en los Medios Sociales - Tercera Edición Calificación: 0 de 5 estrellas0 calificacionesCurso de Programación con Java Calificación: 4 de 5 estrellas4/5Mercadotecnia en los Medios Sociales Calificación: 0 de 5 estrellas0 calificacionesCurso de Programación y Análisis de Software - 2ª Edición Calificación: 0 de 5 estrellas0 calificacionesCurso de Programación y Análisis de Software - Tercera Edición Calificación: 0 de 5 estrellas0 calificacionesLa Guía Rápida del Comercio Electrónico Calificación: 0 de 5 estrellas0 calificacionesLa Guía Rápida de Comercio Electrónico Calificación: 4 de 5 estrellas4/5
Relacionado con Diseño Web con CSS
Libros electrónicos relacionados
Aplicaciones web con Php Calificación: 5 de 5 estrellas5/5Aprender HTML5, CSS3 y Javascript con 100 ejerecios Calificación: 5 de 5 estrellas5/5HTML5, CSS3 y JQuery: Gráficos y diseño web Calificación: 5 de 5 estrellas5/5Bases de Datos con MySQL Calificación: 4 de 5 estrellas4/5Aprende a Programar ASP .NET y C# - Segunda Edición Calificación: 0 de 5 estrellas0 calificacionesAprende Programación Web con PHP y MySQL Calificación: 4 de 5 estrellas4/5AngularJS: Conviértete en el profesional que las compañías de software necesitan. Calificación: 4 de 5 estrellas4/5Programación Orientada a Objetos Calificación: 3 de 5 estrellas3/5Fundamentos de Programación y Bases de Datos Calificación: 0 de 5 estrellas0 calificacionesJAVA. Interfaces gráficas y aplicaciones para Internet. 4ª Edición.: Ofimática Calificación: 4 de 5 estrellas4/5Diseño de Software Calificación: 0 de 5 estrellas0 calificacionesEl gran libro de PHP: Creación de páginas web dinámicas (2ª EDICION) Calificación: 0 de 5 estrellas0 calificacionesBackbone JS Calificación: 0 de 5 estrellas0 calificacionesCurso de Programación y Análisis de Software - 2ª Edición Calificación: 0 de 5 estrellas0 calificacionesDesarrollo web en entorno servidor (GRADO SUPERIOR): Gráficos y diseño web Calificación: 5 de 5 estrellas5/5Aprende a programar en C# Calificación: 5 de 5 estrellas5/5PHP: Programación web avanzada para profesionales Calificación: 0 de 5 estrellas0 calificacionesDomine WordPress. Manual práctico: Programación de web Calificación: 0 de 5 estrellas0 calificacionesCurso de Programación con Java Calificación: 4 de 5 estrellas4/5Diseño de interfaces web (GRADO SUPERIOR): Gráficos y diseño web Calificación: 5 de 5 estrellas5/5Diseño de páginas Web con XHTML, JavaScript y CSS. 3ª edición: Gráficos y diseño web Calificación: 0 de 5 estrellas0 calificacionesProgramación Orientada a Objetos en JAVA Calificación: 0 de 5 estrellas0 calificacionesFundamentos de Programación y Bases de Datos: 2ª Edición Calificación: 0 de 5 estrellas0 calificacionesMicrosoft C#. Lenguaje y Aplicaciones. 2ª Edición. Calificación: 0 de 5 estrellas0 calificacionesJava 2: Lenguaje y Aplicaciones Calificación: 0 de 5 estrellas0 calificacionesAplicaciones web (GRADO MEDIO): Gráficos y diseño web Calificación: 0 de 5 estrellas0 calificacionesAprender a programar en Java desde cero: Curso paso a paso Calificación: 1 de 5 estrellas1/5JEE 7 a Fondo: Diseño y desarrollo de aplicaciones Java Enterprise Calificación: 0 de 5 estrellas0 calificacionesAprender VueJS con 100 ejercicios prácticos Calificación: 0 de 5 estrellas0 calificacionesMicrosoft Visual Basic .NET. Lenguaje y aplicaciones. 3ª Edición.: Diseño de juegos de PC/ordenador Calificación: 0 de 5 estrellas0 calificaciones
Programación para usted
Aprende a programar: Crea tu propio sitio web Calificación: 4 de 5 estrellas4/5Excel de la A a la Z: El Manual Práctico Paso a Paso de Microsoft Excel para Aprender Funciones Básicas y Avanzadas, Fórmulas y Gráficos con Ejemplos Fáciles y Claros Calificación: 0 de 5 estrellas0 calificacionesPython para principiantes Calificación: 5 de 5 estrellas5/5Python Paso a paso: PROGRAMACIÓN INFORMÁTICA/DESARROLLO DE SOFTWARE Calificación: 4 de 5 estrellas4/5GuíaBurros Microsoft Excel: Todo lo que necesitas saber sobre esta potente hoja de cálculo Calificación: 4 de 5 estrellas4/5HTML para novatos Calificación: 5 de 5 estrellas5/5Ortografía para todos: La tabla periódica de la ortografía Calificación: 5 de 5 estrellas5/5El gran libro de Python Calificación: 5 de 5 estrellas5/5Fundamentos de programación: un enfoque práctico Calificación: 5 de 5 estrellas5/5Lógica de programación: Solucionario en pseudocódigo – Ejercicios resueltos Calificación: 4 de 5 estrellas4/5Linux Essentials: una guía para principiantes del sistema operativo Linux Calificación: 5 de 5 estrellas5/5Curso básico de Python: La guía para principiantes para una introducción en la programación con Python Calificación: 0 de 5 estrellas0 calificacionesPython Aplicaciones prácticas Calificación: 4 de 5 estrellas4/5El Libro Práctico Del Programador Ágil Calificación: 5 de 5 estrellas5/5Python a fondo Calificación: 5 de 5 estrellas5/5Arduino. Trucos y secretos.: 120 ideas para resolver cualquier problema Calificación: 5 de 5 estrellas5/5VBA Excel Guía Esencial Calificación: 5 de 5 estrellas5/5Aprende a programar en C# Calificación: 5 de 5 estrellas5/5Fundamentos De Programación Calificación: 5 de 5 estrellas5/5Arduino. Edición 2018 Curso práctico Calificación: 4 de 5 estrellas4/5Aprender a programar con Excel VBA con 100 ejercicios práctico Calificación: 5 de 5 estrellas5/5115 Ejercicios resueltos de programación C++ Calificación: 3 de 5 estrellas3/5JavaScript: Guía completa Calificación: 4 de 5 estrellas4/5Introducción al Uso de Formularios (UserForms) en VBA Calificación: 3 de 5 estrellas3/5Arduino para Principiantes Calificación: 4 de 5 estrellas4/5Aprende a Programar en C++ Calificación: 5 de 5 estrellas5/5Aprendizaje automático y profundo en python: Una mirada hacia la inteligencia artificial Calificación: 0 de 5 estrellas0 calificacionesLa Guía Básica de JavaScript Calificación: 4 de 5 estrellas4/5
Comentarios para Diseño Web con CSS
1 clasificación0 comentarios
Vista previa del libro
Diseño Web con CSS - Alicia Durango
Tabla de Contenidos
TABLA DE CONTENIDOS..............................................2
NOTAS DEL AUTOR........................................................7
DEDICACIÓN.....................................................................8
INTRODUCCIÓN A CSS..................................................9
LA SINTAXIS DE CSS...........................................................9
SELECTORES DE GRUPO...............................................12
SELECTORES DE CLASE................................................12
SELECTOR DE IDENTIFICACIÓN....................................14
POSICIONAMIENTO ABSOLUTO Y POSICIONAMIENTO RELATIVO.. 19 FORMATO CON LAS HOJAS DE ESTILOS 20
VENTAJAS DE USAR CSS...................................................20
GANAR GANAR TIEMPO Y FLEXIBILIDAD.......................21
EL MECANISMO DE CASCADA.......................................22
PROBLEMAS CON LOS NAVEGADORES...........................24
ESCRITURA Y COMBINACIÓN DE ESTILOS........25
INSERTAR UNA HOJA DE ESTILO...................................25
HOJAS DE ESTILOS EN UN ARCHIVO EXTERNO..............28
CÓMO COMBINAR ESTILOS CONCURRENTES.................28
ESTABLECER COLORES EN CSS..............................32
COMO EXPRESAR LOS COLORES...................................33
NOMBRES DE COLOR.........................................................35
FORMAS DE DEFINIR LOS COLORES..............................36
PROPIEDADES DE LOS ELEMENTOS BACKGROUND 37
PROPIEDADES DE LOS FONDOS (BACKGROUND)...........38
UNIDADES DE MEDIDA..............................................41
MEDICIÓN DE DISTANCIAS EN UNA PÁGINA HTML......42
DEFINICIÓN DE COLORES.............................................42
PROPIEDADES DEL TEXTO........................................43
PROPIEDADES DEL TEXTO............................................43
CONTROLAR EL TIPO DE LETRA.............................46
PROPIEDADES....................................................................46
LOS BORDES...................................................................50
PROPIEDADES....................................................................50
CONTROLAR LOS BORDES DE LOS ELEMENTOS 55
PROPIEDADES....................................................................55
PROPIEDADES DE PADDING
.................................57
CONTROLAR LAS DIMENSIONES DE LOS ELEMENTOS.. 60
PROPIEDADES DE LAS DIMENSIONES...........................60
POSICIONAMIENTO DE LOS ELEMENTOS..........62
FORMATO DE LISTAS..................................................64
PROPIEDADES....................................................................64
PROPIEDADES DE CLASIFICACIÓN.......................66
PROPIEDADES....................................................................66
PSEUDO-CLASES...........................................................68
SINTAXIS............................................................................68
PSEUDO-CLASES PARA ENLACES...................................69
LA PSEUDO-CLASE: FIRST-CHILD.....................................70
LA PSEUDO-CLASE: LANG..................................................72
LISTADO DE PSEUDO-CLASES.......................................73
PSEUDO-ELEMENTOS.................................................74
SINTAXIS............................................................................74
EL PSEUDO-ELEMENTO FIRST-LETTER.........................76
LOS PSEUDO-ELEMENTOS EN CLASES CSS.....................77
VARIOS PSEUDO-ELEMENTOS.......................................78
LOS PSEUDO-ELEMENTOS :BEFORE Y :AFTER...............78
LISTA DE LOS PSEUDO-ELEMENTOS..............................79
TIPOS DE SOPORTE.....................................................80
LA REGLA @MEDIA............................................................80
TIPOS DE SOPORTE............................................................82
MATERIAL DE REFERENCIA DE CSS.....................83
FONDOS (BACKGROUND)..................................................83
BORDES (BORDER)............................................................84
PROPIEDADES DE CLASIFICACIÓN................................89
CONTROL DE LOS TAMAÑOS DE LOS ELEMENTOS.........91
TIPOS DE LETRA.................................................................92
GENERAR CONTENIDOS................................................95
LISTAS Y MARCADORES....................................................96
MÁRGENES.........................................................................98
LÍNEAS DE CONTORNO.................................................99
FORMATO DE TABLAS......................................................103
FORMATO DE TEXTO.......................................................104
IMPRIMIR.....................................................................105
PROPIEDADES..................................................................105
CSS 3...............................................................................107
SELECTORES DE ATRIBUTOS......................................107
PSEUDO CLASES..............................................................109
ELEMENTO DE COMBINACIÓN....................................120
FUNCIONES PARA DEFINIR VALORES..........................120
PROPIEDAD HYPHENS.....................................................124
LA DIRECTIVA :: @ FONT-FACE......................................125
COLORES EN CSS3.........................................................128
EL EFECTO DE DESENFOQUE......................................131
COMBINACIÓN DE EFECTOS.......................................132
TRANSICIONES................................................................133
CONSTRUIR UNA PLANTILLA CON PROPIEDADES CSS3 136
EL PSEUDO-ELEMENTO ::SLOT ()..................................140
CONCLUSIONES..........................................................146
REFERENCIA BIBLIOGRÁFICA..............................147
ACERCA DEL AUTOR.................................................148
Notas del Autor
Esta publicación está destinada a proporcionar el material útil e informativo. Esta publicación no tiene la intención de conseguir que usted sea un maestro de las bases de datos, sino que consiga obtener un amplio conocimiento general de las bases de datos para que cuando tenga que tratar con estas, usted ya pueda conocer los conceptos y el funcionamiento de las mismas. No me hago responsable de los daños que puedan ocasionar el mal uso del código fuente y de la información que se muestra en este libro, siendo el único objetivo de este, la información y el estudio de las bases de datos en el ámbito informático. Antes de realizar ninguna prueba en un entorno real o de producción, realice las pertinentes pruebas en un entorno Beta o de prueba.
El autor y editor niegan específicamente toda responsabilidad por cualquier responsabilidad, pérdida, o riesgo, personal o de otra manera, en que se incurre como consecuencia, directa o indirectamente, del uso o aplicación de cualesquiera contenidos de este libro.
Todas y todos los nombres de productos mencionados en este libro son marcas comerciales de sus respectivos propietarios. Ninguno de estos propietarios ha patrocinado el presente libro.
Procure leer siempre toda la documentación proporcionada por los fabricantes de software usar sus propios códigos fuente. El autor y el editor no se hacen responsables de las reclamaciones realizadas por los fabricantes.
Dedicación
Este libro se lo dedico a mi marido y a mis dos hijos por la inspiración en mi trabajo y en las ganas de superarme día a día.
Introducción a CSS
CCS es el formato recomendado para las páginas escritas en formato HTML en base a los estándares de Cascading Style Sheets
(hojas de estilo en cascada), publicado por el World Wide Web Consortium (W3C).
El uso de este estándar Web nos ahorra tiempo, da consistencia y facilita en gran medida la escritura de páginas Web, en este libro vamos a aprender a utilizar las hojas de estilo en cascada (estilos CSS) para crear páginas Web más flexibles y ligeras, controlando su aspecto gráfico con mayor precisión y con mayor facilidad para la corrección de errores.
Primer contacto
Para comenzar haremos cosas muy simples y rápidas, comenzaremos a ver algunos ejemplos y haremos algunos ejercicios prácticos. Más adelante tendremos un capítulo en el que se analizará la situación que llevó a la W3C a crear este patrón y después de varios capítulos nos tomaremos este tema con más seriedad y haremos docenas de ejercicios prácticos.
––––––––
La sintaxis de CSS
La sintaxis de las definiciones CSS consta de dos partes: un selector y una declaración. He aquí un ejemplo:
h1 {color: green} h1—> Selector
color: green—> Declaración
En este ejemplo, el selector h1 dice que el estilo se aplica a los elementos h1 y la definición dice que el color del texto de estos elementos debe ser de color verde (green
).
La declaración se encierra entre llaves ({...}) y puede contener varias definiciones. Cada definición consta de un par propiedad/valor, donde el valor de la propiedad está separado por el carácter (:).
Puede verse de una manera más gráfica de la siguiente manera:
selector {propiedad: valor}
El siguiente ejemplo le permite probar de inmediato lo indicado:
Esta cabecera es de color verde.
El selector es normalmente el nombre de un elemento HTML pero también puede ser un selector de clase, un ID de selector o un selector de contexto (estos conceptos se aclararán más adelante).
––––––––
Si el valor que queremos dar a la propiedad tiene más de una palabra la puede poner entre comillas, como se muestra a continuación:
p {font-family: Comic Sans MS
}
El texto de este párrafo tiene el tipo de letra Comic Sans MS
.
Dentro de llaves ({...}) puede poner múltiples definiciones separadas por el carácter ;
(punto y coma). El siguiente ejemplo define tres propiedades para el elemento
, que son la alineación, el color de texto y la fuente.
{
text-align: center; color: green;
font-family: arial
}