CSS Back to Basics Explicación de terminologías
CSS o hojas de estilo en cascada completan el lenguaje de definición de las reglas de diseño para nuestra web. Los artistas de todas partes utilizan 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 reciente lanzamiento de CSS3. Pero, ¿qué significa todo este código realmente?
El lenguaje en sí ha sido completamente desarrollado desde hace unos años. La confusión puede surgir principalmente debido a la falta de comunicación y mal uso de términos similares. CSS trae muchos nuevos conceptos a la tabla. 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 antes, e incluso al ingresar a 2011 podemos ver los mismos resultados que aparecen. CSS es un lenguaje robusto que no está relacionado con los scripts o la 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 a través de las reglas de CSS. Refinar la semántica de presentación para la web siempre ha sido un gran paso. Esta es la razón principal por la que CSS sigue siendo el jugador líder para los 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 propiedad / valor..
Como ejemplo color rojo; Es un par propiedad / valor muy simple. La propiedad que utilizamos es color Lo que nos permite pasar en cualquier aceptable. valor 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ñoso.
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 repasa las diferentes propiedades y cómo afectan los elementos HTML. Recomendaría comprar un libro de referencia de CSS en cualquier librería cercana. Son bastante baratos y contienen la mayoría de la información que necesitas..
Valores de selector
Se necesitan selectores para completar una línea completa de código CSS. Esto es lo que declaramos para establecer qué tipo de elemento estamos apuntando. Hay muchos selectores y muchos están tan complicados que el diseñador promedio no necesitaría las habilidades. Compruebe los documentos del selector de W3 si desea obtener más información..
La forma más sencilla de comenzar con las definiciones de estilo es usar elementos desnudos como selectores de propiedades. Esto significa manipular código raíz como pag para párrafos, div para divisiones, e incluso cuerpo y html Se puede utilizar para manipular todo el documento de la página web. A continuación se muestra un ejemplo rápido de estilo de todos los elementos de párrafo.
p font-family: Arial, sans-serif; color: # 222; font-weight: negrita;
Lo que le da a CSS el verdadero peso es la precisión que puede tener el selector. La mejor manera de lograr estilos específicos es a través de 2 métodos conocidos como clases y Identificaciones. Estas son ideas comunes en HTML donde puede configurar cualquier elemento para que tenga un ID y un valor de clase a través de atributos. Luego, utilizando CSS es sencillo 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 de altura: 1.3em; / * estilo 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 usamos para describir una propiedad. Las unidades de longitud también son valores en que se usan para describir una propiedad.
La diferencia es que estos valores requieren datos numéricos y, por lo tanto, deben devolver algún tipo de unidades. Los píxeles (px) son los más frecuentes y se pueden usar para casi cualquier cosa: ancho / alto, tamaño de fuente, relleno / márgenes, para nombrar algunos.
Aparte de estos, puede ver porcentajes (%) que se usan a menudo a través de diseños fluidos. Al establecer los valores de ancho en un porcentaje, el compilador asumirá que 100% es el ancho completo del navegador web. Esto le da mucha precisión a los diseñadores cuando aplican estilos a estructuras de diseño e incluso tipografía de página.
El bloque de declaracion
Ahora, después de poner todos estos términos juntos, finalmente podemos discutir la idea central detrás de las hojas de estilo. Los bloques de código se utilizan para delimitar áreas temáticas y especificar el detalle del elemento. Por ejemplo, a continuación hay una línea de código para un contenedor de navegación simple:
div # nav display: block; ancho: 100%; relleno: 3px 6px; margen inferior: 20px;
La forma más fácil de mostrar este código es alinear las propiedades una tras 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 reduce la capacidad de “desnatar” su hoja para encontrar exactamente lo que necesita.
Una mejor manera de dividir bloques de código es separar los elementos enrevesados en sí mismos después de que alcancen un umbral. Este número es personal y será diferente entre desarrolladores. Es el punto de inflexión donde la lógica dicta que es una tontería 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 todos juntos. Esta práctica mantiene los elementos más profundos en la misma ubicación para que las ediciones de todos los elementos de navegación sean mucho más simples.
div # nav display: block; ancho: 100%; relleno: 3px 6px; margen inferior: 20px; div # nav ul estilo de lista: ninguno; bloqueo de pantalla; div # nav ul li float: left; margen derecho: 10px; tamaño de fuente: 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
En los titulares recientemente se ha hablado sin parar sobre los increíbles beneficios de CSS3. Pero lo que realmente tiene cambiado en el idioma Claramente el código antiguo todavía funcionará bien. Esto al menos muestra una compatibilidad completa entre compiladores (siempre es algo bueno).
Las principales diferencias están relacionadas principalmente con las nuevas propiedades. Esto permite que las esquinas redondeadas y los efectos de sombra 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 alfa 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 apuntar a un nombre de elemento específico que contiene atributos con ciertos valores. Estos son principalmente útiles cuando se trabaja con marcas como XML, donde no hay principios de diseño estándar para manipular los nodos. El siguiente ejemplo es una idea relativamente simple:
div [attrib ^ = "1"] / * styles here * /
El código anterior es parte de la biblioteca de selectores de CSS. Esto afectaría a todos los elementos div con un atributo. “atribución” que también tiene el valor “1”. Si esto sigue siendo confuso, consulte el siguiente ejemplo 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 un paseo por el parque. El lenguaje es muy intuitivo y los principiantes pueden comenzar a diseñar en las primeras horas disponibles. Esto es lo que hace que CSS sea tan popular entre los desarrolladores web..
Los beneficios de CSS3 acaban de comenzar a tener efecto. A lo largo de los nuevos años, las tendencias web en evolución nos mostrarán cuánto control tenemos realmente 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 front-end. Practicar habilidades de nivel intermedio incluso rudimentarias puede producir una experiencia de diseño abundante y un mayor conocimiento.
