CSS
Introdución
Nas primeras versións de HTML o código fonte dunha páxina web contiña tanto a información (o contido) como a presentación (o deseño ou formato).
Xa no 1994 hai propostas para separar todo o relacionado co deseño nun documento aparte chamado folla de estilo. As propostas fructificaron no ano 1996 coa aprobación da recomendación CSS 1 - Cascading Style Sheets, level 1. Así, a páxina web (o documento html) pode conter únicamente información mentres que a folla de estilo define o formato.
O termo Cascading Style Sheets (Follas de Estilo en Cascada) fai referencia á forma xerárquica en que as propiedades de estilo se aplican aos distintos elementos da páxina web.
O funcionamento das follas de estilo é o seguiente:
* Na páxina web (ficheiro .html) escríbense as etiquetas que definen categorías ou elementos. * Na folla de estilo (ficheiro .css) escríbese cómo queremos que sexa o estilo de presentación das etiquetas (cor, tamaño, fonte, bordes, márxenes, posición, etc). * Na páxina web escríbese qué folla de estilo queremos utilizar.
Ventaxas
Permiten facer un deseño consistente e fácil de modificar. Se varias páxinas web fan referencia á mesma folla de estilo, para cambiar a apariencia de todas as páxinas é suficiente con facer os cambios nun único lugar: na folla de estilo
Sintaxe das follas de estilo
Unha folla de estilo é un fichero de texto plano (sen formato) no que se define o aspecto das etiquetas dunha páxina web:
/*
Autor: José
Organización: CIFP Rodolfo Ucha
*/
h1 {
color: white;
background-color: black;
}
p {
color: red;
background-color: lightyellow;
}
- Unha folla de estilo está formada por unha ou varias sentenzas.
- Existen dous tipos de sentenzas: as reglas-arroba e as reglas
- As reglas-arroba empiezan por el símbolo de arroba (@) pegado a un identificador y terminan por un punto y coma (;):
- Algunhas reglas-arroba (@import ou @namespace) deben aparecer al principio de la hoja de estilo
- o resto (@font-face, @media, etc.) poden aparecer en calquier lugar da folla de estilo.
- As reglas están formadas por un selector e un bloque de declaración.
- O bloque de declaración comeza e acaba con chaves { }.
- Cada declaración está formada por unha ou varias propiedades e os seus valores correspondentes.
- As propiedades van separadas entre sí por puntos e comas.
- O valor (ou valores) van separados das propiedades por dos puntos.
- En xeneral, se unha propiedad necesita varios valores, irán separados por espazos en branco.
- En xeneral, se unha propiedad admite varios valores alternativos, os valores van separados por comas.
- Os delimitadores do comentario son /* ... */ (coma na linguaxe C). Poden extenderse varias liñas
Sentenzas
Reglas arroba e reglas
Reglas arroba
Selectores e declaracions
Propiedades e valores
Enlaces á folla de estilo
Hai tres xeitos de enlazar coas follas de estilos:
- Como usar CSS!
CSS en liña entre etiquetas HTML
CSS en HTML na etiqueta <style>
CSS en ficheiro externo
O estilo de enlace externo é o máis utilizado por ter entre outros estas ventaxas:
- Limpo: As clases CSS classes e propiedades son almacenadas en ficheiro separado facendo o código HTML máis limpo.
- Facilidade para xestionar: Cambiar unha propiedade pode verse de xeito automático reflexado en todas as páxinas da web
- Carga máis rápida: Cando o ficheiro CSS é cacheado, a páxina cargará máis rápido
Os enlaces ás follas de estilo que se escriben no atributo href (en ficheiro externo) poden ser:
- camiños absolutos (http://... se están noutro servidor público ou /... se están no mesmo servidor)
- pero normalmente son camiños relativos, desde o directorio que contén a páxina web ata o ficheiro CSS.
A imaxe amosa catro exemplos de enlaces a follas de estilo dependendo da estrutura de directorios do sitio web.
Pódense enlazar dúas o máis follas de estilo con tantas etiquetas <link> coma follas enlazadas:
<link rel="stylesheet" href="estilo-1.css">
<link rel="stylesheet" href="estilo-2.css">
O navegador aplica as dúas follas de estilo á páxina web unha tras outra.
Qué pasa se un elemento está definido nas dúas follas? O navegador fará o que diga a última folla de estilo da lista.
Aplicando declaracións a selectores
Poden aplicarse varias declaracións (propiedade e valor asociado) a un mesmo selector:
selector {
property1: value1;
property2: value2;
property3: value3;
}
E tamén se pode agrupar para varios selectores (separándoos con comas). Cun exemplo práctico:
h1, h2, h3 {
color: #964915;
margin: 10px;
padding: 5px;
background: silver;
}
Finalmente pode haber propiedades que tomen varios valores:
p {
border: 2px solid teal;
box-shadow: 3px 3px 5px 5px silver;
}
Profundizando
No artigo CSS en profundidade verase en detalle a sintaxe, selectores, propiedades e valores.
Ferramentas
Algunhas aplicacións web que poden ser de utilidade para o deseñador CSS:
- Clean CSS
- Optimiza, ordena, limpia, corrixe e reduce o tamaño das follas de estilos (ainda que ten moitas máis ferramentas e para outros formatos).
- Typetester
- Permite comparar de forma sencilla diferentes tipos de letra e propiedades relacionadas coa tipografía e o texto, e deseñar novas tipografías.
- BrowserStack ou browserling
- Amosan cómo se visualiza unha mesma páxina web en diferentes navegadores de diferentes sistemas operativos. Permiten ver ou descargar as imáxenes que amosan o aspecto de cada páxina en cada navegador.
- Stripe Generator
- Xenera imaxes preparadas para poder repetirse en todas as direccións de forma correcta para poderen ser utilizadas coma imaxes de fondo.
Cousas interesantes:
- https://caniuse.com/
- https://www.browserstack.com/ y https://es.wikipedia.org/wiki/BrowserStack
- https://www.w3schools.com/cssref/css3_browsersupport.asp
- https://en.wikipedia.org/wiki/Comparison_of_browser_engines_(CSS_support)
- https://cssremix.com/
- Foros del Web: conta con foros específicos adicados a resolver dúbidas relacionadas co deseño web con CSS.
SAAS
- SASS. Syntactically Awesome Style Sheets
- Metalinguaxe de CSS evolucionado a unha linguaxe de script, SassScript
Saas é un linguaxe que se transpila a CSS para ser finalmente interpretada polos navegadores.
Sass é unha metalinguaxe de CSS; é unha linguaje de script que é traducida (transpílase) a CSS. Sass conta con dúas sintaxe:
- a orixinal, chamada indented syntax ("sintaxe con sangrado") que usa a sangría para separar bloques de código e o carácter nova liña para separar regras.
- a máis recente, SCSS, usa o formato de bloques coma CSS. Usa chaves para denotar bloques de código e punto y coma (;) para separar as liñas dentro dun bloque.
A sintaxe indentada e os ficheros SCSS teñen as extensións .sass e .scss respectivamente.
Instalación
De distintos xeitos dependendo da plataforma, coma se indica na documentación.
Exemplo
Sass permite a definición de variables co signo de dólar ($). A asignación de variables faise coos dos puntos (:). Durante o proceso de traducción os valores das variables son insertados no documento CSS de saída
No estilo SCSS:
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color: darken($blue, 9%);
}
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}
No estilo SASS:
$blue: #3bbfce $margin: 16px .content-navigation border-color: $blue color: darken($blue, 9%) .border padding: $margin/2 margin: $margin/2 border-color: $blue
Debe compilar a:
.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}
.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}
Profundizando
Tes un titorial de Sass de w3schools para aprender esta tecnoloxía, e a propia guía da documentación òficial.
Tamén estos outros titoriais:
Frameworks
Son moitos os framework CSS dispoñibles. A primeira pregunta debería ser qué son e cando son recomendables (e cando non é a mellor idea).
Segundo a Wikipedia:
Un framework de CSS é unha biblioteca de estilos xenéricos que pode ser usada para implementar deseños web. Aportan unha serie de utilidades que poden ser aproveitadas frecuentemente nos distintos deseños web.
Os motivos para usar un framework:
- Garante a compatibilidade entre navegadores
- Son mantidos e mellorados pola comunidade
- Facilita o traballo en equipo (o ter unha forma común de traballar)
- Acelera o desenvolvmento (utilizando compoñentes xa facilitados polo framework)
Os inconvintes a destacar:
- ralentizan a carga das páxinas (cargarase moito máis do que utilizarás)
- deseño menos personalizado (semellante ó de todos os que usan o mesmo)
- ten unha curva de aprendizaxe
- ignoras os fundamentos de CSS (e adáptaste ós do framework)
Dos moitos disponibles, detallaremos un pouco máis un dos de uso máis extendido.
Bootstrap
Introdución
Conforme a definición da Wikipedia:
Bootstrap é unha biblioteca multiplataforma ou conxunto de ferramentas de código aberto para deseño de sitios e aplicacións web. Contén plantillas de deseño con tipografía, formularios, botóns, cadros, menús de navegación e outros elementos de deseño baesado en HTML e CSS, así coma extensións de JavaScript adicionais.
Ventaxas
Acorde a w3schools, Boostrap 5:
Advantages of Bootstrap:
- Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap
- Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops
- Mobile-first approach: In Bootstrap, mobile-first styles are part of the core framework
- Browser compatibility: Bootstrap 5 is compatible with all modern browsers (Chrome, Firefox, Edge, Safari, and Opera).
Nota.Para soporte con IE11 e anteriores deberemos usar BS4 ou BS3.
Exemplo
A continuación amósase un exemplo de código que podes probar:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html>
Podes ler esta información inicial de Bootstrap para comprender o código de exemplo
Profundizando con Bootstrap
Podes ler máis sobre esta tecnoloxía no artigo de Bootstrap 4 e Bootstrap 5.
Tailwind
Coma se indica na Wikipedia:
Tailwind CSS es un framework de CSS de código abierto para el diseño de páginas web. La principal característica de esta biblioteca es que, a diferencia de otras como Bootstrap, no genera una serie de clases predefinidas para elementos como botones o tablas. En su lugar, crea una lista de clases CSS "de utilidad" que se pueden usar para dar estilos individuales a cada elemento.
El concepto utility-first (en español, utilidad primero) hace referencia a la principal característica diferenciadora de Tailwind.4 En lugar de crear clases alrededor de componentes (botón, panel, menú, cuadro de texto...), las clases se crean alrededor de cualidades (color amarillo, fuente negrita, texto muy grande, centrar elemento...). A cada una de estas clases se les llama clases de utilidad.
Mientras que en otros sistemas tradicionales existiría una clase mensaje-aviso que aplicaría un color de fondo amarillo y un texto en negrita, para conseguir este resultado en Tailwind hay que aplicar un conjunto de clases creadas por la biblioteca: bg-yellow-200 y font-bold (que traducido al español significa fondo-amarillo-200 y fuente-negrita).
Profundizando
Tes os seguintes recursos:
