https://www.encuestafacil.com/respweb/cuestionarios.aspx?EID=2852748
Mes: Outubro 2022
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:
- Que é a área de recheo? Como se di en inglés “recheo”?
- Cales son as propiedades que determinan o espesor do recheo?
- A propiedade
borderde que é abreviatura? - 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:
-
- Busca información aquí de como usalas en html e como definir as súas propiedades en css usando padding
- Investiga a diferencia entre
<div>e<span>. Pon no teu proxecto barras laterais como as do exemplo. - Unha das propiedades útiles de CSS pode ser
display:úsaa onde a etiqueta <li>
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.
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">
- Colle ideas deste ficheiro para o teu .css e actualiza a páxina no navegador.
Un ficheiro algo máis complexo aquí.:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; } |
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!!
