CSS Volver a lo básico: explicaciones terminológicas

Este artículo es parte de nuestra "serie de tutoriales de HTML5 / CSS3", dedicada a ayudarlo a ser un mejor diseñador y / o desarrollador. Haga clic aquí para ver más artículos de la misma serie.

Las hojas de estilo CSS o en cascada completan el lenguaje de definición de las reglas de diseño para nuestra web. Los artistas de todo el mundo usan CSS a diario para crear, organizar y codificar conjuntos de reglas para diseños de sitios web básicos. Este se ha convertido en el lenguaje más popular para el diseño de front-end y proporciona capacidades increíbles con el lanzamiento reciente de CSS3. Pero, ¿qué significa realmente todo este código?

El lenguaje en sí ha sido desarrollado por completo durante algunos años. La confusión puede surgir principalmente debido a la mala comunicación y el uso indebido de términos similares. CSS trae muchos conceptos nuevos a la mesa. Cubriremos algunos de los términos más populares para dominar como un gurú de CSS.

¿Por qué especializarse con CSS?

Esta pregunta se ha planteado anteriormente, e incluso entrando en 2011 podemos ver los mismos resultados apareciendo. CSS es un lenguaje robusto que no está en los gustos de scripting o programación. Es un lenguaje de estilo, más específicamente un código usado para describir cómo debe comportarse una página web.

Usando CSS podemos manipular directamente los atributos de elementos HTML individuales. Todos los bloques, párrafos, enlaces e imágenes pueden verse afectados por las reglas de CSS. La semántica de presentación de refinación para la web siempre ha sido un gran paso. Esta es la razón principal por la cual CSS sigue siendo el jugador líder de diseñadores: ¡nadie ha creado nada mejor!

Propiedades y valores

Esta es la forma más sencilla de entrar en CSS. Todo el código se divide en dos acciones: elegir un elemento para aplicar diseños y qué aplicar. Este último se crea a través de pares de propiedad / valor.

Como un ejemplo de color: red; es un par muy simple de propiedad / valor. La propiedad que usamos es el color que nos permite pasar cualquier valor aceptable para cambiar el color del texto. Esto también podría ser un código hexadecimal o datos de color RGB (rojo-verde-azul). Muchas veces los diseñadores no mencionan la idea de los valores porque puede ser engañosa.

Las propiedades y los valores son realmente una sola idea. Cada declaración de propiedad requiere un valor, y los valores por sí mismos no tienen sentido. Hay mucha documentación en línea que analiza las diferentes propiedades y cómo afectan los elementos HTML. Recomiendo comprar un libro de referencia de CSS de cualquier librería cercana. Son bastante baratos y contienen la mayor parte de toda la información que necesitaría.

Valores de Selector

Se necesitan selectores para completar una línea completa de código CSS. Esto es lo que declaramos para establecer a qué tipo de elemento nos dirigimos. Hay muchos selectores y muchos son tan intrincados que el diseñador promedio no necesitaría las habilidades. Consulte los documentos de selección de W3 si desea obtener más información.

La forma más sencilla de comenzar las definiciones de estilo es usar elementos desnudos como selectores de propiedades. Esto significa manipular el código raíz como p para los párrafos, div para las divisiones e incluso body y html se pueden usar para manipular todo el documento de la página web. A continuación se muestra un ejemplo rápido de diseño de todos los elementos de párrafo.

 p {font-family: Arial, sans-serif; color: # 222; font-weight: negrita; } 

Lo que da un peso real a CSS es qué tan preciso puede ser el francotirador de selección. La mejor manera de lograr estilos específicos es a través de 2 métodos conocidos como clases e ID . Estas son ideas comunes en HTML donde puede configurar cualquier elemento para tener un ID y valor de clase a través de los atributos. Luego usar CSS es simple aplicar estilos a ese bloque específico.

 p # firstpar {font-size: 14px; } / * párrafo de estilos con ID de "firstpar" * / p.comment {font-size: 1.0em; línea-altura: 1.3em; } / * estilos de párrafo (s) con clase de "comentario" * / 

Unidades de longitud y valores

Muchas veces estos términos se mezclan, no es una gran sorpresa. Los valores se explicaron anteriormente como la ubicación que utilizamos para describir una propiedad. Las unidades de longitud también son valores en el sentido de que se usan para describir una propiedad.

La diferencia es que estos valores requieren datos numéricos y, por lo tanto, deben devolver alguna forma de unidades. Los píxeles (px) son los más frecuentes y se pueden usar para cualquier cosa: ancho / alto, tamaño de fuente, relleno / márgenes, por nombrar algunos.

Aparte de estos, puede ver porcentajes (%) que se usan a menudo a través de diseños de fluido. Al establecer los valores de ancho en un porcentaje, el compilador asumirá que el 100% es el ancho completo del navegador web. Esto le da mucha precisión a los diseñadores al aplicar estilos a las estructuras de diseño e incluso a la tipografía de página.

El bloque de declaración

Ahora, después de unir todos estos términos, finalmente podemos analizar la idea central detrás de las hojas de estilo. Los bloques de código se utilizan para delinear áreas temáticas y especificar detalles de elementos. Por ejemplo, a continuación se muestra una línea de código para un contenedor de navegación simple:

 div # nav {display: bloque; ancho: 100%; relleno: 3px 6px; margen inferior: 20px; } 

La forma más fácil de mostrar este código es alinear las propiedades una después de la otra. Los desarrolladores de CSS han usado bloques de código para dividir cada propiedad en su propia línea. Esta agenda no solo ocupa mucho más espacio sino que también reduce la capacidad de "rozar" su hoja para encontrar exactamente lo que necesita.

Una mejor forma de dividir bloques de código es separar los elementos intrincados en sí mismos después de que alcanzan un umbral. Este número es personal y será diferente entre los desarrolladores. Es el punto de inflexión en el que la lógica dicta que es tonto mantener todo en una sola línea, principalmente debido a la legibilidad.

A continuación he escrito un ejemplo de un bloque de propiedades de navegación en conjunto. Esta práctica mantiene los elementos más profundos en la misma ubicación, por lo que las ediciones de todos los elementos de navegación son mucho más simples.

 div # nav {display: bloque; ancho: 100%; relleno: 3px 6px; margen inferior: 20px; } div # nav ul {list-style: none; bloqueo de pantalla; } div # nav ul li {float: left; margen-derecha: 10px; tamaño de letra: 12px; } div # nav ul li a {color: # 0f0f0f; texto-decoración: ninguno; pantalla: bloque en línea; relleno: 2px 5px; } 

Posibles avances de CSS2 / CSS3

Recientemente, en los titulares se ha hablado sin parar sobre los increíbles beneficios de CSS3. Pero, ¿qué ha cambiado realmente en el lenguaje? Claramente, el código antiguo seguirá funcionando bien. Esto al menos muestra una compatibilidad hacia atrás completa entre los compiladores (siempre es algo bueno).

Las principales diferencias se relacionan principalmente con nuevas propiedades. Esto permite que las esquinas redondeadas y los efectos de sombra paralela se representen en el navegador. CSS3 también ofrece nuevas herramientas para describir los colores en el documento. HSL (Hue-Saturation-Lightness) es el más nuevo además de HSLA que incluye un canal Alpha para reducir la opacidad.

Los selectores de atributos son un gran paso adelante en lo que respecta al estilo de marcado directo. Con este estilo de código, puede orientar un nombre de elemento específico que contiene atributos con ciertos valores. Estos son más útiles cuando se trabaja con marcado, como XML, donde no existen principios de diseño estándar para manipular nodos. El siguiente ejemplo es una idea relativamente simple:

 div [attrib ^ = "1"] {/ * estilos aquí * /} 

El código anterior es parte de la biblioteca de selectores de CSS. Esto afectaría a todos los elementos div con un atributo "attrib" que también tiene el valor "1". Si esto todavía es confuso, consulte el ejemplo a continuación para aclarar. En teoría, estos dos selectores deberían realizar las mismas acciones.

 p [id ^ = "primary"] {/ * styles * /} p # primary {/ * styles * /} 

Conclusión

Después de analizar algunos de los términos más confusos, CSS parece una caminata por el parque. El lenguaje es muy intuitivo y los principiantes pueden comenzar a diseñar en las primeras horas. Esto es lo que hace que CSS sea tan popular entre los desarrolladores web.

Los beneficios de CSS3 apenas han comenzado a tener efecto. En los últimos años, las tendencias en evolución de la web nos mostrarán cuánto control realmente tenemos sobre el diseño de la página web. Actualmente, CSS se enorgullece de ser el idioma dominante para el diseño de sitios web frontales. Practicando hasta habilidades rudimentarias de nivel intermedio puede producir abundante experiencia de diseño y más conocimiento.

Explore y comparta datos de investigación con Datazar

La cantidad de datos en Internet es asombrosa y parece crecer más cada año. Esto lleva a nuevas industrias, como big data, que usan análisis para predecir eventos y encontrar puntos de datos dignos de mención.Con una herramienta como Datazar, puede encontrar, ordenar, analizar e incluso contribuir datos a un repositorio central. El

(Consejos de tecnología y diseño)

Hay una nueva forma de compartir la contraseña WiFi en iOS 11 y te gustará

Con la versión beta de iOS 11 ahora disponible, la gente está descubriendo algunas de las nuevas características en el último sistema operativo de Apple que la compañía no mencionó durante la conferencia inaugural de WWDC 2017.Mientras que un control deslizante de volumen más pequeño y los nuevos controles AirPod son bastante pulcros, quizás la característica más interesante que Apple ha presentado con iOS 11 es la capacidad de compartir contraseñas de Wi-Fi con otros dispositivos .Descubierto

(Consejos de tecnología y diseño)