Nesta aula aprendi a como usar o css in-line e duas propriedades: font-size, background e o color. Para usar este tipo de css usamos a sintaxe <elemento syle="propriedades css: valor(; como separador entre as propriedades)">
- color > troca a cor do elemento
- background > troca a cor de fundo
- font-size > tamanho da font das letras do elemento
Nesta aula aprendi a estilização viza css interno (ou incorporado) usando a tag style, e que o css inline tem prioridade sobre ela caso utilizemos os dois juntos. Também que neste tipo de css as declarações não se aplicam as outras páignas do projeto.
Aprendi a prioridade de aplicação das propriedades: Aprendi também o css externo que é a forma mais correta de usar o css, e usando este conseguimos com que as propriedades sejam re-utilizaveis em outra páginas.
- em primeiro lugar vem o css inline
- em segundo lugar o css interno
- em terceiro vem o css externo Devemos ter muita atenção e organição ao escrever o css para não problemas com propriedades conflitantes.
Aprendi nesta aula sobre os seletores de css para seletores de classe usamos .nome-da-classe e para seletores de identificadores usamos #id-do-seletor para seletores de tags como já tinhamos visto é só utilizar o nome da tag e para não repetirmos propriedades parecida para diferentes seletores podemos utilizar seletor1, seletor2 { propriedades que ambos seletores usam } Classes e identificadores não podem começar com numeros.
- nome-da-tag { para selecionar tag }
- .nome-da-classe { para selecionar classe }
- #nome-do-id { para selecionar id } id geralmente é usado para itens unicos
Na aula 5 aprendi sobre a propriedade color que pode ser usada de três formas:
- nome da cor, exemplo: blue
- valor hexadecimal, exemplo #ccc
- rgb, exemplo: rgb(255,0,2)
Nesta Aula aprendi sobre a propriedade background e umas formas de usa-la incluindo a shorthand.
- background-image: para imagens
- background-size: define otamanho das imagens de fundo
- background-color: para cor
- background-repeat: especifica como as imagens de plano de fundo serão dispostas lado a lado depois de dimensionadas e posicionadas.
- background-position: especifica a posição inicial da(s) imagem(s) de fundo (após qualquer redimensionamento) dentro da área de posicionamento de fundo correspondente.
Nesta aula aprendi sobre a propriedade border, aprendi que podemos usar uma borda por completo ou em uma direção individual e os varios tipos de bordas disponíveis
Nesta aula aprendi sobrea propriedade margin, da qual promove o afastamento direcional dos demais elementos. Podemos usa-la nas 4 direções e também o shorthand passando o valor devido para cada direção.
As propriedades CSS relacionadas ao padding são utilizadas para definir o espaçamento interno de um elemento. O padding pode ser aplicado nas quatro direções (topo, direita, baixo e esquerda) ou de forma individual. É possível utilizar valores absolutos, como pixels, ou valores relativos, como porcentagem, para definir o tamanho do padding. O padding também pode ser definido de forma abreviada, especificando os valores para cada direção em uma única propriedade. O padding é útil para criar espaçamento entre o conteúdo de um elemento e suas bordas, proporcionando uma melhor organização visual.
Nesta Aula aprendi sobre as propriedade width and height, largura e altura respectivamente que estabelecem o tamanho destas dimensões nas tags em que são aplicadas e também sobre max-width e max-height que estabelecem a largura e altura máxima de um elemento.
Nessa aula aprendi tantas propriedades de texto que demoraria muito tempo para descrever, mas as principais se tratam de alinhamento de texto, identação, decoração, transformações, espaçamento (entre letra, palavras e linhas), sombreamento e etc...
As propriedades CSS relacionadas à fonte permitem controlar o estilo, tamanho, cor e outras características do texto em um elemento HTML. Algumas das principais propriedades incluem:
- font-family: define a família de fontes a ser usada, como Arial, Times New Roman, etc.
- font-size: especifica o tamanho da fonte, em pixels, em pontos ou em porcentagem.
- font-weight: define a espessura da fonte, como normal, bold, etc.
- font-style: especifica o estilo da fonte, como normal, italic, etc.
- text-decoration: controla a decoração do texto, como underline, line-through, etc.
- text-align: alinha o texto horizontalmente, como left, center, right, etc.
- line-height: define a altura da linha, controlando o espaçamento entre as linhas de texto.
- letter-spacing: ajusta o espaçamento entre as letras do texto.
- word-spacing: controla o espaçamento entre as palavras do texto.
- text-transform: transforma o texto em maiúsculas, minúsculas ou em outros formatos.
- text-shadow: adiciona uma sombra ao texto, permitindo criar efeitos visuais.
- Essas propriedades permitem personalizar a aparência do texto em um site, tornando-o mais legível e esteticamente agradável.