CSS se encuentra entre los lenguajes principales de la web abierta y está estandarizado en todos los navegadores web de acuerdo con las especificaciones del W3C. Anteriormente, el desarrollo de varias partes de la especificación CSS se realizaba de forma sincrónica, lo que permitía el control de versiones de las últimas recomendaciones. Es posible que haya oído hablar de CSS1, CSS2.1, CSS3. Sin embargo, CSS4 nunca se ha convertido en una versión oficial. Desde CSS3, el alcance de la especificación aumentó significativamente y el progreso en los diferentes módulos CSS comenzó a diferir tanto, que se volvió más efectivo desarrollar y publicar recomendaciones por separado por módulo. En lugar de versionar la especificación CSS, W3C ahora toma periódicamente una instantánea del último estado estable de la especificación CSS.
¿Por qué aprender CSS?
Las hojas de estilo en cascada, a las que se hace referencia cariñosamente como CSS, es un lenguaje de diseño simple destinado a simplificar el proceso de hacer que las páginas web sean presentables. CSS es imprescindible para que los estudiantes y los profesionales en activo se conviertan en un gran ingeniero de software, especialmente cuando trabajan en el dominio de desarrollo web. Enumeraré algunas de las ventajas clave de aprender CSS:
Crear un sitio web impresionante: CSS se encarga de la apariencia de una página web. Con CSS, puede controlar el color del texto, el estilo de las fuentes, el espacio entre párrafos, el tamaño y la disposición de las columnas, qué imágenes de fondo o colores se utilizan, diseños de diseño, variaciones en la visualización para diferentes dispositivos y tamaños de pantalla. así como una variedad de otros efectos.
Conviértase en diseñador web: si desea comenzar una carrera como diseñador web profesional, el diseño de HTML y CSS es una habilidad imprescindible.
Control web: CSS es fácil de aprender y comprender, pero proporciona un control poderoso sobre la presentación de un documento HTML. Más comúnmente, CSS se combina con los lenguajes de marcado HTML o XHTML.
Aprenda otros idiomas: una vez que comprenda los conceptos básicos de HTML y CSS, otras tecnologías relacionadas como javascript, php o angular se volverán más fáciles de entender.
Aplicaciones de CSS
CSS - Sintaxis.
selector { property: value }h1 { color: #36CFFF; }
Los selectores universales: En lugar de seleccionar elementos de un tipo específico, el selector universal simplemente coincide con el nombre de cualquier tipo de elemento:
* { color: #000000; }
Los selectores descendientes: Suponga que desea aplicar una regla de estilo a un elemento en particular solo cuando se encuentra dentro de un elemento en particular. Como se muestra en el siguiente ejemplo, la regla de estilo se aplicará al elemento <em> solo cuando se encuentre dentro de la etiqueta <ul>.
ul em { color: #000000; }
Los selectores de clases: Puede definir reglas de estilo basadas en el atributo de clase de los elementos. Todos los elementos que tengan esa clase serán formateados de acuerdo con la regla definida.
.black { color: #000000; }
Los selectores de ID: Puede definir reglas de estilo basadas en el atributo id de los elementos. Todos los elementos que tengan esa identificación serán formateados de acuerdo con la regla definida.
#black { color: #000000; }
Esta regla muestra el contenido en negro para cada elemento con el atributo id establecido en negro en nuestro documento. Puedes hacerlo un poco más particular.
h1#black { color: #000000; }
Los selectores de niños: Has visto los selectores descendientes. Hay un tipo más de selector, que es muy similar a los descendientes pero tiene una funcionalidad diferente. Considere el siguiente ejemplo:
body > p { color: #000000; }
Esta regla representará todos los párrafos en negro si son hijos directos del elemento <body>. Otros párrafos colocados dentro de otros elementos como <div> o <td> no tendrían ningún efecto en esta regla.
Los selectores de atributos También puede aplicar estilos a elementos HTML con atributos particulares. La regla de estilo a continuación coincidirá con todos los elementos de entrada que tengan un atributo de tipo con un valor de texto
input[type = "text"] { color: #000000; }
Reglas de estilo múltiple Es posible que deba definir varias reglas de estilo para un solo elemento. Puede definir estas reglas para combinar varias propiedades y los valores correspondientes en un solo bloque como se define en el siguiente ejemplo.
h1 { color: #36C; font-weight: normal; letter-spacing: .4em; margin-bottom: 1em; text-transform: lowercase; }
Selectores de agrupación Puede aplicar un estilo a muchos selectores si lo desea. Simplemente separe los selectores con una coma, como se muestra en el siguiente ejemplo.
h1, h2, h3 { color: #36C; font-weight: normal; letter-spacing: .4em; margin-bottom: 1em; text-transform: lowercase; }
Esta regla de definición de estilo también se aplicará a los elementos h1, h2 y h3. El orden de la lista es irrelevante. A todos los elementos del selector se les aplicarán las declaraciones correspondientes. Puede combinar los distintos selectores de identificación como se muestra a continuación:
#content, #footer, #supplement { position: absolute; left: 510px; width: 200px; }
Si quieres aprender Css mas completo hay monton de cursos de internet y tutorales te voy a dejar tres recursos de tutoriales de css:
- W3Schools. Tiene recursos, ejemplos y ejercicios para aprender Css básico de forma gratuita. También hay un tutorial de Css a tu ritmo que cuetas nos pocos dolares.
- tutorialspoint. tiene barios tutoriales de barias tecnologias pra aprender no solo de css, una forma gratuita y otra de pago
- Codecademy. Ofrece cursos introductorios gratuitos con tutoriales interactivos. Codecademy utiliza una pantalla dividida que muestra automáticamente el resultado de tu código en un archivo . Hay contenido exclusivo disponible por 19,99 dólares al mes.
Comentarios
Publicar un comentario