Que é CSS? Follas de estilo en cascada, CSS receptivo, CSS atrevido, Comprimir, Minimizar, Unminify, Descomprimir ferramenta

Que son as follas de estilo en cascada (CSS)?

Douglas Karr Xoves, febreiro 9, 2023

1 106 4 minutos lidos

Le a continuación para ver unha explicación completa de como funcionan as follas de estilo en cascada. Mostramos as nosas aplicacións na parte superior da páxina para que sexa fácil de atopar e usar. Se estás lendo este artigo por correo electrónico ou feed, fai clic para comprime o teu CSS.

A menos que esteas a desenvolver sitios, é posible que non comprendas completamente as follas de estilo en cascada (CSS). CSS é unha linguaxe de follas de estilo utilizada para describir a aparencia e o formato dun documento escrito HTML or XML. Pódese usar CSS para especificar os estilos de varios elementos como a fonte, a cor, o espazo e o deseño. CSS permíteche separar a presentación do teu documento HTML do seu contido, facilitando o mantemento e actualización do estilo visual do teu sitio web.

Estrutura da linguaxe CSS

o seleccionador é o elemento HTML que quere estilo, e o propiedade valor define os estilos que queres aplicar a ese elemento:

selector {
  property: value;
}

Por exemplo, o seguinte CSS fará todo <h1> os elementos dunha páxina teñen unha cor vermella e un tamaño de letra de 32 píxeles:

CSS

h1 {
  color: red;
  font-size: 32px;
}

Saída

Título

Tamén podes especificar CSS para un ID único nun elemento:

CSS

/* styles for an element with ID "intro" */
#intro {
  font-weight: bold;
  text-align: center;
}

Saída

Intro

Ou aplique unha clase en varios elementos:

CSS

/* styles for elements with class "highlight" */
.highlight {
  background-color: yellow;
}

Saída

Eu quero destacar unha palabra na etiqueta span.

Podes incluír CSS no teu documento HTML de tres xeitos:

CSS en liña, usando o style atributo nun elemento HTML

CSS interno, usando a <style> elemento no <head> do seu documento HTML
CSS externo, usando un ficheiro .css separado ligado ao teu documento HTML usando o <link> elemento no <head> do seu documento HTML

CSS sensible

CSS é incriblemente flexible e pódese usar para axustar a visualización dos elementos en función da resolución da pantalla, polo que podes ter o mesmo HTML pero crealo. responsabilidade á resolución do dispositivo:

/* media query for responsive design */
@media (max-width: 768px) {
  p {
    font-size: 14px;
  }
  #intro {
    font-size: 20px;
  }
}

Compresión CSS

Podes ver no exemplo anterior que hai un comentario, unha consulta multimedia e varios estilos que usan espazos e saltos de liña para organizar a vista do CSS. É unha boa práctica minimizar ou comprimir o teu CSS no teu sitio para reducir o tamaño dos ficheiros e, posteriormente, o tempo que leva solicitar e renderizar o teu estilo. Non é pouca cantidade... podes ver máis do 50 % de aforro nalgúns dos exemplos anteriores.

Moitas configuracións de servidor ofrecen ferramentas que comprimen automaticamente CSS sobre a marcha e almacenan na caché o ficheiro minificado para que non teña que facelo manualmente.

Que é SCSS?

Sassy CSS (SCSS) é un preprocesador CSS que engade funcionalidade e sintaxe adicionais á linguaxe CSS. Estende as capacidades do CSS ao permitir o uso de variables, mixins, funcións e outras funcións que non están dispoñibles no CSS estándar.

Vantaxes SCSS

Mantebilidade mellorada: co uso de variables, pode almacenar valores nun só lugar e reutilizalos en toda a súa folla de estilo, facilitando o mantemento e actualización dos seus estilos.
Mellor organización: cos mixins, podes agrupar e reutilizar conxuntos de estilos, facendo que a túa folla de estilo sexa máis organizada e máis fácil de ler.
Funcionalidade aumentada: SCSS inclúe moitas características que non están dispoñibles no CSS estándar, como funcións, estruturas de control (por exemplo, if/else) e operacións aritméticas. Isto permite un estilo máis dinámico e expresivo.
Mellor rendemento: os ficheiros SCSS compílanse en CSS, o que pode mellorar o rendemento ao reducir a cantidade de código que debe analizar o navegador.

Desvantaxes do SCSS

Curva de aprendizaxe: SCSS ten unha sintaxe diferente da CSS estándar, e terás que aprender esta nova sintaxe para poder usala de forma eficaz.
Complexidade adicional: aínda que SCSS pode facer que a túa folla de estilo sexa máis organizada e máis fácil de manter, tamén pode introducir complexidade adicional na túa base de código, especialmente se non estás familiarizado coas novas funcións e sintaxe.
Ferramentas: para usar SCSS, necesitarás un compilador para traducir o teu código SCSS a CSS. Isto require unha configuración e ferramentas adicionais, o que pode ser unha barreira de entrada para algúns desenvolvedores.

Neste exemplo a continuación, o código SCSS fai uso de variables para almacenar valores ($primary-color $font-size) que se poden reutilizar en toda a folla de estilo. O código CSS que se xera a partir deste código SCSS é equivalente, pero non inclúe as variables. Pola contra, os valores das variables utilízanse directamente no CSS.

$primary-color: blue;
$font-size: 16px;

body {
  font-size: $font-size;
  color: $primary-color;

  h1 {
    font-size: 2em;
    color: $primary-color;
  }
}

Outra característica de SCSS que se demostra neste exemplo son os estilos aniñados. No código SCSS, o h1 os estilos están aniñados dentro do body estilos, que non é posible en CSS estándar. Cando se compila o código SCSS, os estilos aniñados amplíanse a estilos separados no código CSS.

En xeral, SCSS ofrece moitas vantaxes sobre o CSS estándar, pero é importante ter en conta as compensacións e escoller a ferramenta adecuada para o seu proxecto en función das súas necesidades e limitacións.