Libro CSS3
Desarrollo Web

Libro CSS3 en PDF avanzado

Compártelo

Excelente libro CSS3 que debes leer

Este libro CSS3 aprenderás todo lo relacionado a como aplicar estilos a tu sitio web, un excelente libro que te ayudara adquirir conocimientos avanzadas sobre CSS3.

Capítulo 1 ¿Qué es CSS3?

Si has sido desarrollador web durante un tiempo prolongado, CSS no te resultará extraño. Tú podría, sin embargo, preguntarse de qué se trata el alboroto sobre CSS3.

Al igual que las nuevas especificaciones de HTML 5, CSS3 (o CSS versión 3, para ser más preciso) es el último conjunto de especificaciones diseñadas para moldear, dar forma y definir qué capacidades son las más nuevas
versión de CSS tiene.

Para aprovechar al máximo CSS3, necesita tener una comprensión general del concepto de CSS primero El Capítulo 2 cubrirá un repaso básico para ayudar con esto, pero si nunca ha usado CSS de alguna manera, entonces es posible que se sienta un poco perdido al leer este libro, ya que supone que tener al menos una familiaridad pasajera con la tecnología.

CSS3 tampoco es un “nuevo CSS” como mucha gente piensa; como HTML 5, es compatible con versiones anteriores con todo lo que viene antes. En el futuro, sin embargo, hay una increíble cantidad de nueva funcionalidad, permitiendo una multitud de posibilidades creativas que simplemente no existían en Versión anterior.

Ejemplos de código A medida que avanzamos en el libro, crearé varias muestras de código para que estudies. Estos ejemplos de código no estarán disponibles para su descarga, pero serán lo suficientemente pequeños como para escribirlos
mano. En la mayoría de los casos, el código se dará solo para resaltar un tema específico, especialmente en el caso de código mixto CSS y HTML. Con el código HTML (a menos que sea un ejemplo bastante complejo) en En general, describiré lo que se necesita y luego mostraré el código CSS como muestra de código.

Debido a esto, supondré que el lector entiende HTML, cómo está estructurado y
cómo crear etiquetas y elementos HTML simples estándar. Si no lo haces, te lo aconsejo encarecidamente que lea al menos algunos antecedentes sobre el tema antes de continuar con este libro.

Sin embargo, para intentar facilitar las cosas, el siguiente código HTML debería servir como un ejemplo muy mínimo de un documento de estándares HTML 5. Esto de ninguna manera es un completo ejemplo; su propósito es proporcionar un punto de partida repetitivo para otro código en el libro.

Todos los ejemplos que presento a lo largo de este libro supondrán que estás usando un pieza similar de código, y buscará construir sobre ese código.

<!doctype html>

Basic HTML 5 document

Preste mucha atención a la etiqueta de enlace en el encabezado; esto especifica un archivo con el nombre de styles.css.

Está en un archivo con este nombre (o uno similar) que colocaremos la mayor parte de nuestro código CSS.

La buena práctica dicta que el código CSS se separe del código HTML, y ya que uno de los los principios subyacentes de la serie Succinctly es promover buenas prácticas, entonces tendremos esforzarse por mantener esto a lo largo del libro.
Por supuesto, no tiene que llamar a su archivo styles.css; puedes llamarlo como quieras. Sin embargo, si cambias su nombre, recuerda que has usado un nombre diferente al crear documentos HTML básicos para experimentar.

Una palabra rápida sobre la compatibilidad del navegador

Una última cosa que debemos abordar antes de continuar es la compatibilidad del navegador. Cualquiera que haya realizado algún tipo de desarrollo web impulsado por frontend HTML sabe demasiado bien que dolor involucrado en hacer que el código parezca uniforme en todos los navegadores.

Esto no será más cierto si ha pasado algún tiempo trabajando con los estándares CSS2 y HTML4, y las guerras de navegadores de años no muy lejanos.
Debido a que CSS3 entra, en línea con los nuevos estándares HTML 5, entonces no voy a salir de mi manera de asegurar que el código que presento funcionará sin falta en todos los navegadores más antiguos.

Para el transcurso de este libro, trabajaré con el siguiente navegador:
Google Chrome 39.0.2171.95 m También tendré disponibles las siguientes versiones de navegador, pero no necesariamente las usaré:

  • Firefox 34.0.5
  • Internet Explorer 11.0.9600.17501 Actualización 11.0.15 (KB3008923)
  • Maxthon Cloud Browser 4.4.3.4000

Dado que, en general, me apegaré a las características que están más o menos completas, o tengo un soporte idéntico a través de los cuatro navegadores mencionados, entonces no debería tener problemas para usar otro
navegador. Sin embargo, notaré donde sea posible cualquier cambio que pueda ser necesario.

Tenga en cuenta que puede haber casos, cuando se utiliza un navegador diferente, donde un prefijo de proveedor puede ser necesario (pero me he perdido debido al uso de Chrome).

Como regla general, desarrollo usando Chrome, luego modifico para acomodar otro navegadores. Si algo no funciona como se esperaba, busque la sintaxis de CSS3 para el código que no funciona, en línea, antes de suponer que el código está roto.
En cuanto a las versiones mínimas, no intentaré hacer ningún código en este libro que funcione correctamente.
puede necesitar usar una biblioteca auxiliar adecuada de algún tipo para llenar los vacíos. Debido a la pura
número de ayudantes disponibles, desafortunadamente no hay espacio en este libro para discutirlos todos.

Capítulo 2 Basic CSS Refresher

Antes de comenzar con el núcleo principal del libro, repasemos un repaso básico de CSS. Si trabajó anteriormente con CSS, o está actualizado con el idioma y la forma en que funciona, entonces puede saltear con seguridad esta parte del libro. Si tus habilidades CSS están un poco oxidadas, o eres bastante nuevo
al concepto de CSS en general, entonces debería leer este capítulo, ya que proporcionará los bases para lo que vendrá en los siguientes capítulos.

Definiendo CSS

Entonces, ¿qué es exactamente CSS?

CSS significa Hojas de Estilo en Cascada, y la idea detrás de ellos es muy simple. CSS los documentos se crean únicamente con el propósito de diseñar (es decir, administrar el color, el tamaño, el diseño, posición, y mucho más) el contenido de un documento HTML.

Si bien el propósito del código HTML es definir la estructura del documento, CSS está ahí para definir cómo se presenta ese contenido al usuario final.
CSS se creó originalmente para reducir la cantidad de marcado que se estaba utilizando en un HTML documento para dictar cómo se veía un fragmento particular de HTML.

Muchos desarrolladores web de hoy en día tal vez nunca hayan visto esta sintaxis antigua, así que para darle un
ejemplo de cómo solían hacerse las cosas, mira el Listado de Código 2

Cascading las reglas

El lector astuto ya puede preguntarse qué es la parte de “cascada” de CSS
para. Para la cascada es fluir o seguir hacia abajo, y eso es exactamente lo que hacen las hojas de estilo CSS.

Sin considerar el tema de la especificidad por el momento, que se trata más adelante en este libro, se establece que son obedecidos o descubiertos más abajo en la cadena anulan cualquier cosa más arriba de la cadena. Si eres
no acostumbrado a esto, puede presentarle algunos errores y desafíos interesantes, especialmente cuando primero comienza explorando lo que está disponible y lo que no está disponible.

En el Listado de Código 6a, defino una etiqueta de párrafo HTML estándar. No tiene un estilo asociado información o selectores de clase aplicados a ella; todo lo que tiene es un atributo de identificación simple, que esencialmente
nos permite darle un nombre al elemento.

Sin embargo, si observas la regla de CSS definida en el Listado de Código 6b, verás que en lugar de una El período [.] se coloca delante del nombre de la regla, ahora tenemos un signo de número [#] frente a él.

CSS puede usar varios símbolos diferentes al definir reglas. Estos símbolos son conocidos como Los selectores de CSS y la forma en que define un selector determinan cómo pretende que se use la regla.

En el caso del Listado de Código 6, hemos utilizado el selector de ID. El propósito del selector de ID es Apunte a un elemento específico y nombrado en un documento.

En los listados de códigos 4 y 5, el selector de clase estaba destinado a ser utilizado en muchos diferentes elementos, simplemente agregando un atributo de clase. Porque una identificación dada solo se puede aplicar a una
elemento a la vez, cuando especificamos una regla de CSS que se dirige a una ID, estamos a todos los efectos diciendo que esta regla se aplica a ese elemento y SÓLO a ese elemento, nunca a otro.

Sin embargo (como verá en un momento), los selectores de ID a menudo se usan deliberadamente para controlar jerarquía en un documento CSS, y hacer un uso completo de la naturaleza en cascada de la tecnología.

La conexión en cascada se puede usar con gran efecto cuando encadenamos selectores, porque nos permite profundizar en el lenguaje HTML, sin tener que asegurarnos de dictar qué el marcado debería ser similar.
Imaginemos por un momento que estamos creando un documento HTML que contiene publicaciones de noticias.

Cada publicación de noticias en el documento tiene que obedecer el mismo conjunto de reglas de estilo, y como tal, asume la misma apariencia para cada publicación. Cada publicación debe mostrarse en un fondo de color diferente al resto de la página, y debe siempre tienen encabezados azules, negritas con texto de párrafo rojo más pequeño.

Según lo que hemos visto hasta ahora, podríamos sentirnos tentados de escribir el siguiente código.

VER LIBRO

Compártelo