Encaixonados en CSS

Imos aclarar algo co que xa traballamos: border, padding, margin. Os espacios que podemos ir amoldando para facer mellores sitios web. Chámase o Box Model e na imaxe tratamos de aclarar como vai.

O teu traballo:

Consultando esta web  averigua a resposta a estas preguntiñas:

  1. Que é a área de recheo? Como se di  en inglés “recheo”?
  2. Cales son as propiedades que determinan o espesor do recheo?
  3. A propiedade border de que é abreviatura?
  4. Se quero un marxe superior moi grande que debo usar?

Bloques en HTML e CSS

Un exercicio interesante para ver a influencia dun .css nas nosas páxinas está en w3schools. Xogade cambiando a pinta que ten e mirade o código para ir collendo ideas para o voso proxecto. O truco é que cando queremos definir unha parte da páxina web en bloques temos que usar <div> ou <span>.

O teu traballo:

 

Coloríns en hexadecimal

Érase unha vez hai moitos anos cando íamos á tenda mercar pinturas había que pedir “Siena tostada”, “Amarelo limón”. Co paso dos anos inventouse o sistema Pantone e perdeuse toda a poesía. Un dos usos do hexadecimal é precisamente fabricar cores nunha páxina web. Noutro post velliño falábamos desto.

As cores para internet organízanse en tres números que indican canto de vermello R verde G ou azul B botas na paleta de pintor para obter o tono que desexas. O chiste é que a cantidade de cada non sempre se indica de 0 a 10; indícase en hexadecimal. Se tes unha cantidade de azul de valor 09 e queres un chisco máis azulado tes que poñer 0A non vaia ser que poñendo 10 xa te pases. Imos xogar con todo esto.4756

Baixando por esta páxina fai clic nun tono rosa, nun amarelo e nun marrón. Copia o hexadecimal correspondente e emprégao nos teus .css

CSS follas de estilo

Xa temos o contido das nosas páxinas web usando HTML. Agora queremos  poñelas chulas e mellorar o seu estilazo: cores, marxes, ..

É o momento de aprender CSS. Imos meter nun ficheiro na nosa carpeta web onde describamos a pinta que vai ter o que vai en cada etiqueta de HTML. Hai tres xeitos de facelo. Nós imos aprender o máis complexo 😉

O teu traballo:

  • Crea na carpeta do sitio web un ficheiro que se chame estilazo.css
  • Engade na cabeceira de todos os teus .html  a etiqueta:
<link  rel="stylesheet"  href="estilazo.css">

Un ficheiro algo máis complexo aquí.:


body {
font-family: "Times New Roman", serif;
background-color: #d8da3d; }
h1 {
text-align: center;
font-family: sans-serif; }
h2 {
text-align: right;}
p {
margin-left: 80px;
font-size: 14pt;
color: green;}
a:link {
color: blue; }
a:visited {
color: purple; }

view raw

css_sinxelo.css

hosted with ❤ by GitHub

Seguimos coas páxinas oficiais   para ir de vagar. Fai unha lista de propiedades de CSS que podes engadir na túa folla de estilos. Complétaa con algúns dos valores desas propiedades que te parezan máis interesantes. Hai miles!!