Módulo II css

Como se define a apresentação dos elementos

de uma página da web
1. CSS: definir el estilo de una lista (1)

Neste vídeo, que faz parte do curso Introdução ao desenvolvimento web, vou te explicar como se define com CSS
o estilo de uma lista.

Este vídeo complementa o vídeo HTML listas. Nesse vídeo eram explicadas as etiquetas de HTML, que são utilizadas
para definir as listas. A apresentação visual de uma lista pode ser alterada, por exemplo, no caso de uma lista não
ordenada, em vez de um círculo preenchido, um disco, pode-se mudar o estilo do marcador para que seja o contorno
de um círculo ou um retângulo. Isso é alcançado com a propriedade CSS list-style-type. Que valores pode assumir esta
propriedade? Se consultarmos a especificação de CSS2 do W3C e procurarmos por esta propriedade, podemos encontrar a
lista de todos os possíveis valores que esta propriedade pode assumir. Esta propriedade assume valores diferentes de acordo com
seja uma lista não ordenada ou uma lista ordenada.

No caso de uma lista não ordenada, list-style-type pode assumir os valores disc, que é o valor padrão, circle e
quadrado. Por exemplo, para o exemplo anterior, seria necessário definir as regras de CSS que são indicadas para esses dois
listas e que você pode ver na imagem.

O estilo de uma lista ordenada ou numerada pode ser alterado diretamente na lista com o atributo type do HTML,
mas também se pode empregar o atributo list-style-type, que se aplica a listas não ordenadas e a listas
ordenadas. En el caso de las listas ordenadas, este atributo puede tomar los siguientes valores que permiten
modificar el formato de numeración de los elementos de la lista, se puede modificar para que se empleen números
romanos, letras o, simplesmente, números. Por exemplo, para o exemplo anterior, podem-se definir estas quatro
classes de CSS nas quais é usado o atributo list-style-type com estes valores, para modificar a apresentação dos
listas.

A próxima propriedade que vamos ver é list-style-position, que permite modificar a posição do marcador que
defina cada elemento em uma lista. Esta propriedade de CSS pode assumir dois valores, outside, que é o valor por
defeito, e dentro. Vamos a ver un exemplo simples para entender seu significado. Neste exemplo, foram definidos
duas classes de CSS, in e out, que modificam a posição do marcador da lista, além disso, também se modifica o
estilo de lista, mas a propriedade list-style-type não é o importante deste exemplo, então, não se confunda.

À esquerda aparece o código HTML de três listas e à direita aparece o resultado como é visualizado em um
navegador web. Se traçarmos uma linha vertical imaginária, podemos apreciar a diferença entre o valor inside e o
valor fora. Em cada caso, o marcador fica de um lado diferente da linha traçada.

A seguinte propriedade, list-style-image, é utilizada para definir uma imagem que é usada como marcador dos
elementos de una lista. Por ejemplo, para utilizar esta imagen, un pequeño triángulo, como marcador de los
elementos de uma lista, pode-se definir esta classe de CSS e, ao aplicá-la a esta lista, obtém-se o resultado que se
pode ver à direita.

Ahora te invito a que veas la segunda parte de este vídeo, en el que se muestra un ejemplo de creación de una
barra de navegación vertical y horizontal con una lista.
OCULTAR

Aspectos chave
No vídeo a seguir, explica-se como se pode definir a apresentação de uma lista de elementos com os
propiedades de CSSlist-style-type, list-style-position ylist-style-image.

Comprueba tus conocimientos

Elena está trabalhando no estilo de suas listas não ordenadas. Sua intenção é personalizá-las ao
máximo dotándolas de originalidade, mas precisa identificar que tipo de valores pode assumir o
comando list-style no caso de não se visualizar sua personalização.

Identifica, das seguintes opções, qual adotaria como padrão.

Escolha a imagem correta e clique em ENVIAR.

1.

quadrado.
2.

círculo.

3.

disco
2. CSS: definir o estilo de uma lista (2)

Neste vídeo, que faz parte do curso Introdução ao desenvolvimento web, eu vou te explicar como se define com CSS
o estilo de uma lista.

Este vídeo es la segunda parte del vídeo: CSS definir el estilo de una lista. En ese vídeo se vieron las principales
propriedades que são utilizadas para definir a apresentação de uma lista, list-style-type, list-style-position e list-style-
imagem. Agora, neste vídeo, vamos ver um exemplo.

As listas podem, e na verdade devem ser utilizadas, para criar as barras de navegação de um site, já que
uma barra de navegação horizontal ou vertical é na verdade um conjunto de links, uma lista de links.
Supongamos que tenemos un sitio web que posee cuatro páginas principales, la página principal, la página de
productos, la página de servicios y la página de contacto. Esta lista formada por cuatro enlaces, inicio, productos,
servicios y contacto, puede ser la barra de navegación principal de este sitio web.

¿Cómo se puede lograr que esta lista, que por defecto se visualiza de esta forma, se muestre como una barra de
navegação vertical ou horizontal? Em primeiro lugar, este é o código HTML que define uma lista com quatro links.
As URLs que aparecem, não têm nenhuma importância neste exemplo. Este código HTML serve tanto para a
barra de navegação vertical como para a barra de navegação horizontal.

Em primeiro lugar, vamos fazer várias alterações na apresentação da lista. Por um lado, vamos eliminar o
sublinhado que aparece por padrão nos links, isso é conseguido com esta regra de CSS, na qual se utiliza a
propriedade text-decoration e o valor none. A seguir, vamos remover o ponto que aparece na lista, para
Aqui definimos esta classe de CSS que vou aplicar à lista. A propriedade list-style-type com o valor nenhum, faz
que desapareça o marcador da lista.

Ahora ya tenemos la lista preparada para darle formato, ya sea vertical u horizontal. Vamos a ver primero la barra
de navegação vertical. Na barra vertical, vou colocar um efeito com CSS, quando o cursor do mouse se posiciona
em cima de um link ou um link recebe foco, o link vai se destacar com uma cor de fundo diferente, como
pode ser visto na lista que aparece à direita. Para isso, defino estas duas regras de CSS. A primeira regra
define la presentación de los enlaces de la lista, cambia su modo de visualización a bloque para poder definir una
anchura. Define el color del texto como blanco y un color de fondo verde, centra el texto y le añade un espacio
interior, com a propriedade padding, para que o link seja maior. A segunda regra define o comportamento
do link, quando o cursor do mouse estiver sobre ele ou receber o foco, mude a cor de fundo para um verde mais
oscuro. En la lista, simplemente hay que añadir las dos clases para lograr el efecto deseado.

Vamos agora ver o código CSS para criar uma barra de navegação horizontal. Neste caso, também teremos
un efecto con CSS. Cuando el cursor del ratón se sitúe encima de un enlace o un enlace reciba el foco, el enlace
se va a destacar con un color de fondo distinto. Para definir la barra de navegación horizontal, defino estas tres
regras de CSS. Na primeira, os elementos da lista são definidos como flutuantes, para que fiquem um ao lado do outro.
continuação do outro de forma horizontal. A segunda regra é muito semelhante à mesma regra que é empregada na
barra de navegação vertical, elimina as margens, define a cor do texto como branco e uma cor de fundo verde,
centra o texto e adiciona um espaço interior, com a propriedade padding, para que fique maior. Por último, na
tercera regla, se define el comportamiento de los enlaces cuando el cursor del ratón se sitúa encima de ellos o
recebem o foco.

Por último, na lista, basta adicionar as duas classes para alcançar o efeito desejado.
OCULTAR

Aspectos chave
No vídeo a seguir é apresentado um exemplo de definição do estilo de uma lista para criar uma barra de navegação
vertical e horizontal.
Teste seus conhecimentos

Paula está creando la barra de navegación de su sitio web. Dispone de cuatro páginas principales:
inicio, producto, servicio y contacto. No sabe cómo eliminar el subrayado con el que aparecen por
defeito os links.

Ajude-o a identificar qual das seguintes regras de CSS é a correta.

Arrastra la mejor respuesta dentro del cuadro. A continuación, haz clic en ENVIAR.

A web de Paula

Arraste-a aqui

a { text-decoration: none; }

a { text-decoration: delete; }

a { text-decoration: none; }

Código HTML para la barra de navegacion ya sea vertcal u horizontal

Assim se visualiza na pág.

Com esta regra de css, elimina-se o sublinhado dos links da barra de navegação

Com esta propriedade, os pontos são eliminados.

1

2
3
4

Dos reglas de presentación de css

La primera define la presentación de la lista en vertcal

Significa que muda sua visualização para bloco

Defina a largura
Defina a cor do texto como branco
4) Cor de fundo verde
5) Centralize o texto
6) Ele adiciona um espaço interno com a propriedade de preenchimento para que o link fique maior

A segunda regra

1)

Para a apresentação em Horizontal

3. CSS: definir el estilo del texto (1)

Neste vídeo, que faz parte do curso Introdução ao desenvolvimento web, vou te explicar como se define com CSS,
el estilo del texto.

No CSS existem muitas propriedades para definir o estilo do texto. Neste vídeo, vamos ver o conjunto de
propiedades que comienzan con el prefijo font. En la recomendación de CSS1, que se publicó en diciembre de
1996, se definiam as propriedades font-family, font-style, font-variant, font-weight e font-size, que são as que vamos
a ver neste vídeo.

A propriedade font é um resumo das anteriores e permite modificar as anteriores com uma única regra.

CSS3 es muy complejo y se ha dividido en varios módulos. Existe un módulo específico para el tipo de letra
chamado Módulo de Fontes CSS Nível 3, que adiciona novas propriedades. A maioria dos navegadores atuais não
admiten estas propriedades, além de que estas propriedades são muito específicas e é muito improvável que você vá a
utilizar alguma vez. As novas propriedades do CSS3 permitem um ajuste tipográfico muito fino e fazem sentido na
atualidade porque a resolução dos dispositivos de visualização aumentou consideravelmente, por exemplo,
compare a resolução VGA, de 640 x 480, tão comum há 15 anos, com a resolução FULL HD 1920 x 1080
que se tornou o padrão atual.

Las propiedades que vamos a ver a continuación, son font-family, font-size, font-weight, font-style y font-variant.

A propriedade 'font-family' permite modificar a família tipográfica, o tipo de letra. Existem milhares e milhares de famílias tipográficas.
Como existem tantas famílias tipográficas, foram propostas várias classificações para poder organizá-las e
compará-las. Uma das mais conhecidas é a classificação tipográfica de Francis Thibaudeau, que divide as
familias tipográficas en tres grupos, con Serifas, sin Serifas y otras tipografías.

As serifas são as terminações, as decorações ou enfeites, que aparecem nas extremidades de algumas letras,
como neste exemplo, a letra s, a r, a i e a f. Estas terminações proporcionam um aspecto mais elegante e
clássico e facilitam a leitura em documentos impressos. Nos tipos de letras sem Serifa, essas terminações não
aparecem. Os tipos de letras sem serifas também são conhecidos em espanhol como de palo seco.

A la hora de especificar la familia tipográfica que se quiere emplear, se puede indicar una lista de tipos de letra, por
exemplo, neste código para o elemento h1, foi indicado o tipo de letra Times New Roman e o tipo Georgia, e
para el elemento p, un párrafo, el tipo de letra Arial y el tipo Helvética.

Um navegador da web tentará usar o primeiro tipo de letra definido, se não puder utilizá-lo, passará para o segundo tipo.
de letra, depois ao terceiro e, assim sucessivamente, até o final. Se nenhum dos tipos de letra definidos puder ser
utilizado, o navegador utilizará um tipo de letra por defeito, mas talvez o tipo de letra não se ajuste ao nosso
diseño. Para solventar este problema, se recomienda indicar siempre un tipo genérico, al final de la lista de tipos de
letra.

As famílias ou tipos genéricos são serif e sans-serif, para os tipos de letra com Serifas e sem Serifas, itálico para
tipografias que simulam a escrita manual, como, por exemplo, Lucida Handwriting, fantasia para tipografias
exageradas que se emplean en anúncios e cartazes e monospace para as tipografias nas quais cada carácter
ocupa, exatamente, a mesma quantidade de espaço horizontal.

O tamanho da fonte especifica o tamanho da letra, que pode ser especificado de várias maneiras. Existem quatro formas, de
forma absoluta, relativa, mediante um tamanho especificado com distintas unidades de medida e mediante um
porcentagem.

Font-weight permite seleccionar el peso del tipo de letra. El peso es el grosor de los caracteres. La propiedad font-
weight pode assumir todos esses valores, mas normalmente, apenas são utilizados normal e bold. A razão para isso é
que normalmente, uma família tipográfica não inclui todos os pesos existentes, apenas alguns poucos, portanto, quando
se emprega uma família tipográfica, convém conhecer suas características para saber o que pode ser usado.
 Font-style permite seleccionar el estilo de la fuente del tipo de letra. La propiedad font-style puede tomar estos tres
valores, normal, italic y oblique. En esta imagen se representan dos letras con los tipos de letra Palatino y
Baskerville. O estilo oblíquo geralmente é o estilo de letra normal, que foi inclinado, como se fosse uma figura
geométrica que sofreu uma transformação. No entanto, o estilo itálico, cursiva, é um design específico das
letras com uma inclinação e uma forma distinta da normal.

A última propriedade, font-variant, permite selecionar variações do tipo de letra. Esta propriedade pode assumir dois
valores, normal e small-caps.

As maiúsculas, em português, é o tipo de letra Versalita, letra em maiúsculas, cujo tamanho é semelhante ao das
minúsculas.

Antes de terminar, te invito a que utilices este configurador de tipos de letra, que puedes encontrar no Mozilla
Developer Network, por exemplo, aqui, eu escolhi como variante Versalitas, small-caps. O tamanho eu defini como 24
píxeis e a família tipográfica selecionada é serif. Este é um exemplo do texto com o tipo de letra selecionado.
Neste outro exemplo, escolhi o estilo itálico, cursiva. O peso é negrito e o tamanho 24 pixels. A família
A tipográfica selecionada é sans-serif. Por último, este é um exemplo de texto com o tipo de letra selecionado.
Agora te convido a ver a segunda parte deste vídeo.

Muito obrigado pela sua atenção.

OCULTAR

Aspectos clave
Você deve assistir ao vídeo CSS: definir o estilo do texto (1), onde são explicadas as seguintes propriedades de CSS:

família de fontes
tamanho da fonte
peso da fonte
estilo de fonte
variante de fonte

Verifique seus conhecimentos

Juan está trabalhando na tipografia de letra para cada uma das áreas do desenvolvimento do seu curso
online. Está definindo tipos de letra para o título do módulo, a unidade e os textos que aparecem em
tela. Como este conteúdo será visualizado em diferentes navegadores, se algum dos tipos falhar
de letra definidos quiere asegurar que para cada elemento pueda contar con un tipo de letra genérico
que se adapte corretamente ao espaço definido para isso.

Del siguiente listado indícale cuales son tipografías genéricas.

Selecione a opção ou as opções corretas e clique em ENVIAR.

1. Serifa
2. Sem serifa
3. Negrito
4. Fantasia
5. Cursivo
6. Monoespaçado
4. CSS: definir el estilo del texto (2)

Neste vídeo, que faz parte do curso Introdução ao desenvolvimento web, vou te explicar os principais
propriedades de CSS que existem para definir o estilo do texto.

Na primeira parte deste vídeo, vimos as principais propriedades que começam com o prefixo font. Font-family,
tamanho-da-fonte, peso-da-fonte, estilo-da-fonte e variante-da-fonte.

Neste vídeo, vamos ver algumas propriedades de CSS que começam com o prefixo text. Especificamente, vamos ver
as propriedades text-align, text-indent, text-decoration e text-transform.

A propriedade text-align é usada para definir a justificação ou alinhamento do texto. Esta propriedade pode assumir
os valores left, à esquerda, right, à direita, center, centrado e justify, justificado, ou seja, alinhado a
esquerda e direita ao mesmo tempo.

Neste exemplo, podemos ver o mesmo parágrafo alinhado à esquerda e à direita e, neste outro exemplo, o
primer párrafo está centrado y el segundo justificado, está alineado a la izquierda y a la derecha.

La propiedad text-indent, especifica la sangría de la primera línea de un bloque de texto. La sangría se puede
indicar utilizando las unidades de medida que se emplean para indicar el tamaño del texto con la propiedad font-
tamanho. Neste exemplo, o primeiro parágrafo não possui recuo na primeira linha, enquanto que, no segundo, foi
definido uma margem de um centímetro e, neste outro exemplo, a primeira linha possui uma margem relativa de 50%,
50% da largura disponível para mostrar o texto.

A propriedade text-decoration é usada para definir alguns adornos que podem ser adicionados ao texto. Este
a propriedade pode ter os valores nenhum, nenhum, sublinhado, sublinhado, sobrelinhado, para o sublinhado pela parte
superior, tachado, para el tachado y piscar, para el parpadeo.

Neste exemplo, é mostrado o uso da propriedade text-decoration com quatro valores: underline, overline, line-
pelo seu piscar.

Por último, a propriedade text-transform é usada para converter um texto em letras maiúsculas ou minúsculas. Esta
a propriedade pode assumir os valores capitalize, uppercase, lowercase e none.

Neste exemplo, é mostrado o uso da propriedade text-decoration, com os valores capitalize, uppercase e
minúsculas. O valor capitalize coloca em maiúsculas a primeira letra de cada palavra, enquanto que uppercase,
transforma a mayúsculas todo el texto y lowercase, a minúsculas.
OCULTAR

Aspectos clave
Debes ver el vÃdeo CSS: definir el estilo del texto (2), en el que se explican las siguientes propiedades de CSS:

alinhamento-do-texto
sangramento de texto
decoração de texto
transformação de texto

Verifica seus conhecimentos

Matilda é desenvolvedora web e uma empresa de venda de flores pediu a ela na semana passada que lhe
fiz uma página web. Na primeira reunião, o cliente não estava muito satisfeito
já que o estilo do texto que Matilda havia utilizado era muito básico. Teve que buscar
propriedades de CSS para tornar os textos mais atraentes que são incluídos na página web e ha
encontrado quatro propriedades.

Identifica o que define ou para que é empregada cada uma delas para ajudar Matilda a dar um
caráter mais dinâmico aos textos da página da web.
Selecciona cada una de las preguntas para ver sus posibles respuestas. Responde a cada pregunta y haz clic
enviar

1Texto-transformar.

A Definição da justificação do texto.

Defina a sangria da primeira linha de um bloco de texto.
CDefine algunos adornos que se pueden añadir al texto.
Defina a ferramenta para converter maiúsculas e minúsculas em um texto.

Alinhamento de texto.

ADefine la justificación del texto.

Defina a sangria da primeira linha de um bloco de texto.
CDefine algunos adornos que se pueden añadir al texto.
DDefine la herramienta para convertir mayúsculas y minúsculas en un texto.

3Texto-recuo.

Defina a justificação do texto.

Defina a sangria da primeira linha de um bloco de texto.
Defina alguns adornos que podem ser adicionados ao texto.
Defina a ferramenta para converter maiúsculas e minúsculas em um texto.

4Text-decoration

Defina a justificativa do texto.

Defina a sangria da primeira linha de um bloco de texto.
Defina alguns adornos que podem ser adicionados ao texto.
DDefine la herramienta para convertir mayúsculas y minúsculas en un texto.

5. CSS: definir o estilo do texto (3)

Neste vídeo, que faz parte do curso Introdução ao desenvolvimento web, vou explicar as principais
propriedades de CSS que existem para definir o estilo do texto.

En la primera parte de este vídeo, vimos las principales propiedades que comienzan con el prefijo font: font-family,
tamanho da fonte, peso da fonte, estilo da fonte e variante da fonte. Na segunda parte deste vídeo, vimos as propriedades que
começam com o prefixo texto: text-align, text-indent, text-decoration e text-transform. Neste vídeo vamos ver
cuatro propiedades que se emplean para configurar la presentación del texto. Letter-spacing, word-spacing, line-
altura y espaço em branco.

A propriedade letter-spacing define a distância entre os caracteres de um texto. O espaçamento pode ser
indicar utilizando las unidades de medida que se emplean para indicar el tamaño del texto con la propiedad font-
tamanho. Esta propriedade pode assumir um valor negativo, conforme mostrado neste exemplo. É preciso ter muito
cuidado com seu uso, já que os resultados podem ser desastrosos, como se pode ver neste exemplo.
 A propriedade word-spacing é semelhante ao letter-spacing, mas define o espaço entre as palavras. Assim como o letter-
spacing, a distância de separação pode ser indicada utilizando as unidades de medida que são empregadas para
indicar el tamaño del texto, con la propiedad font-size. Esta propiedad también puede tomar valores negativos y los
os resultados também podem ser desastrosos, então deve-se usar com muito cuidado.

A propriedade line-height especifica a altura mínima entre as linhas de texto em um elemento, como pode ser um
párrafo. Otra vez, la altura de la línea se puede indicar utilizando las unidades de medida que se emplean para
indicar o tamanho do texto, com a propriedade font-size. Neste exemplo, o primeiro parágrafo é exibido com a altura
por padrão. No segundo parágrafo, foi aumentado para 1,5 em ou 150% e no último parágrafo para 2 em ou 200%.

E, por último, a propriedade white-space, que define como se comportam os espaços em branco dentro de um
elemento. Em HTML, os espaços em branco e as quebras de linha não são significativos. Este parágrafo é representado de
nesta forma em um navegador web, entre as palavras 1, 2, 3, 4, 5 e 6, só se visualiza um espaço em branco,
embora no código haja mais espaços e a frase, "E isso está em outra linha", não apareça em outra linha, aparece em
a primeira linha. Este comportamento pode ser modificado com a propriedade white-space, que pode assumir os
valores normal, pre, nowrap, pre-wrap e pre-line.

Neste exemplo, ao parágrafo do exemplo anterior, aplica-se a propriedade white-space pre, que produz que os
espaços em branco e quebras de linha sejam respeitados. É equivalente à tag pre do HTML para definir texto
pré-formatado. O segundo parágrafo é a forma normal de visualizar um parágrafo. Se o texto do parágrafo não couber em
largura disponível, o navegador insere uma quebra de linha para que o texto continue na linha seguinte.

No entanto, a propriedade white-space nowrap anula esse comportamento e a linha não é cortada, continua além
do largura da janela do navegador e a barra de rolagem horizontal deve ser exibida.
OCULTAR

Aspectos chave
Você deve ver o vídeo CSS: definir o estilo do texto (3), onde são explicadas as seguintes propriedades de CSS:

espaçamento entre letras

espaçamento entre palavras
altura da linha
espaço em branco

Verifique seus conhecimentos

Isabel trabalha na área de acessibilidade web de uma empresa. Trabalhando na página web de
sua própria empresa, percebeu que muitos dos textos estão muito juntos e não
podem ser lidos bem, o que pode dificultar muito a acessibilidade para pessoas com visibilidade
reduzida. Isabel está investigando ferramentas para configurar a apresentação do texto e já
encontrado quatro que podem ser de grande ajuda.

Indica quais dessas afirmações são corretas em relação às quatro ferramentas para definir o
estilo do texto.
Ative os interruptores das opções corretas e clique em ENVIAR.

1. O letter-spacing pode ser usado sem ter muito controle sobre ele.
2. Line-height define a altura mínima entre as linhas de texto em um parágrafo.
3. White-space define como se comportam os espaços em branco dentro de um elemento.
4. Para utilizar o espaçamento entre palavras, devem ser utilizadas as unidades de medida de líquidos.
6. CSS: cores no CSS3

Neste vídeo, que faz parte do curso Introdução ao desenvolvimento web, vou explicar as novidades sobre os
colores en CSS3.

No vídeo anterior, CSS cores, vimos as diferentes formas de especificar uma cor no CSS1 e CSS2. Lembre-se
que estas formas também continuam sendo válidas no CSS3.

No CSS3, o uso da cor está definido na especificação CSS Color Module Level 3. O CSS3 oficializa a lista
estendida dos nomes das cores que já eram usadas no CSS2, portanto, isso não é realmente uma novidade.

No CSS3, incluem-se, principalmente, duas novidades sobre a cor. A opacidade ou transparência da cor e o
modelo de color HSL.

A opacidade pode ser incluída no esquema RGB, adicionando um quarto canal conhecido como alfa, que com
valores entre 0 e 1, onde 0 é completamente transparente e 1 completamente opaco, permite especificar a
opacidade da cor. No exemplo, você pode ver um parágrafo sobre o logotipo do curso com uma cor de fundo RGB e
agora, graças à magia do quarto canal, o mesmo exemplo com uma opacidade de 75%, 50%, 25% e,
finalmente, del 0%, totalmente transparente. A diferença de RGB, não há notação hexadecimal para RGBA.

Vamos a ver agora, a outra novidade importante no uso das cores que inclui CSS3. HSL define as cores
mediante matiz, saturação e luminosidade. O modelo HSL melhora um ponto fraco do modelo RGB, já que HSL é
mais intuitivo, porque define as cores da mesma forma que o olho humano. No entanto, também é um
modelo criticado por ser dependiente del dispositivo. La sintaxis es muy parecida a la del modelo RGB. La
a diferença fundamental é que o matiz se move em uma faixa de valores entre 0 e 360, enquanto a saturação
e a luminosidade são valores percentuais.

Si te lo estás preguntando, sí, puedes utilizar el canal alfa también para HSL, de la misma forma que lo haces para
RGB. Seguramente não você terá reparado antes, mas em muitos quadros de diálogo para selecionar cores,
aparece a possibilidade de usar o matiz, a saturação e a luminosidade. No entanto, recomendo que você utilize
alguma ferramenta específica para HSL, como esta que te mostro aqui e que está disponível de forma gratuita em
a web. Esta ferramenta pode ser muito útil para construir paletas de cores, já que, apenas mudando o matiz, se
podem conseguir cores que combinam de forma harmoniosa.

Agora recomendo que você veja o vídeo: CSS exemplo de uso de cores transparentes. Este vídeo é baseado em
los vídeos: CSS colores y CSS colores, novedades en CSS3, de Guzmán Fernández que puedes encontrar en
estas direcciones de YouTube.
OCULTAR

Aspectos chave
Você deve assistir ao vídeo CSS: Cores - Novidades no CSS3, onde são explicados os novos métodos para definir
colores en CSS3, se explica el canal alfa que permite definir la opacidad o transparencia (RGBA) y el modelo de
cor HSL (Matiz, Saturação, Luminosidade) que define o matiz, a saturação e a luminosidade.

Verifique seus conhecimentos

Héctor está escrevendo um livro sobre as novidades e características que as novas oferecem
ferramentas para escolher cores em CSS3.

Indica qual das seguintes opções não é correta em relação às novidades que o HSL oferece em
Módulo de Cores CSS nível 3.
Selecione a opção ou as opções que deseja riscar e clique em ENVIAR.

Defina as cores por meio de matiz, saturação e luminosidade

É mais intuitivo, pois define as cores como são percebidas pelo olho humano.
Não é importante o dispositivo móvel que utilizamos para escolher cores em CSS3.
7. CSS: exemplo de uso de cores transparentes

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a explicar cómo usar el canal alfa,
que define la transparencia de los colores, para cambiar todos los colores de un diseño modificando una sola línea
de um CSS.

Lembre-se de que no CSS3 a opacidade de uma cor pode ser incluída no esquema RGB, acrescentando um quarto canal
conocido como alfa. Este canal puede tomar valores entre 0 y 1, siendo 0 completamente transparente y 1
completamente opaco.

Aqui está o típico design de uma barra de ferramentas de um site, composta por um link que
navegue até a página inicial, uma caixa de texto para inserir um termo de busca e um botão rotulado com o
sinal +, para ativar alguma opção. O que vou te mostrar é como fazer com que todo o design mude, que, por
exemplo, base em uma cor azul ou base em uma cor verde, simplesmente mudando uma linha de código CSS.
Repare que não só muda a cor de fundo da barra, muda a cor de todos os elementos que a compõem.
barra de ferramentas. Além disso, no código que vou te mostrar, foi definido um efeito para quando o cursor
do mouse se situe sobre o link ou receba o foco. Esse mesmo efeito também ocorre na caixa de texto e
no botão com o sinal +.

Aquí te muestro el código HTML de la página. Como puedes ver, la página es muy sencilla, se compone de un
cabeçalho h1 e um formulário que possui a caixa de texto e o botão. Para que você entenda melhor, aqui está
mostro a página web sem aplicar um CSS.

Ahora te voy a mostrar el código CSS. El cambio del color de la barra de herramientas y de todos sus
componentes, eu fiz isso simplesmente mudando esta linha, apenas mudando esta linha, posso fazer com que todos os
as cores da barra de ferramentas se ajustam à nova cor de fundo da mesma. Como se faz? A chave está
em usar o canal alfa, onde 0 é completamente transparente e 1 completamente opaco. Por exemplo, para os
enlaces, foi definido como cor de fundo o branco, com um nível de transparência 0.6, ou seja, mais opaco que
transparente. Sin embargo, para el color de fondo del cuadro de texto y del botón, también se ha definido un color
de fondo blanco, pero con un nivel de transparencia de 0.3, es decir, más transparente que opaco.

La diferencia la podemos apreciar en esta imagen. El color de fondo del enlace es más blanco, es decir, más opaco
que a cor de fundo da caixa de texto e do botão.

Por último, para alcançar o efeito no link, foi utilizada a propriedade transition, para quando ocorrer um
mudança na propriedade background-color do link. Como vemos aqui, ocorre uma mudança na propriedade
background-color, com as pseudo classes hover e focus, aplicadas ao link.

Para lograr o mesmo efeito na caixa de texto e no botão com o sinal +, foi utilizada novamente a
propriedade transition, para quando ocorrer uma mudança na propriedade background-color da caixa de texto e
do botão. A mudança dessa propriedade ocorre com as pseudo-classes hover e focus, ou seja, quando o cursor
del ratón se sitúa encima del elemento o cuando el elemento recibe el foco del teclado.
OCULTAR

Aspectos chave
Deves ver o vídeo CSS: exemplo de uso de cores transparentes onde se explica o uso da propriedade
de transparência/opacidade de RGBA para configurar uma barra de ferramentas a partir de uma única cor.
Verifique seus conhecimentos

Linda queria que o site de sua empresa tivesse uma aparência mais dinâmica para os
visitantes y que fuera más sencillo encontrar la información que buscaban. Hace unos meses
encarregou sua equipe de designers web que adicionassem à página efeitos de cores, para isso, os
designers recommended using the Alpha Channel to define the transparency of colors.

IndIQUE qual das seguintes opções pode ter sido utilizada pelo Canal Alfa para mudar as cores de
design da página web.
Passe de uma opção para outra. Selecione a que for correta e clique em ENVIAR.

8. CSS: cascata e herança (1)

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a explicar que es la cascada y la
herança, dois conceitos muito importantes que devem ser conhecidos ao escrever um CSS.

CSS é o acrônimo para Folhas de Estilo em Camadas. Se no nome desta tecnologia aparece o termo cascading,
em cascata, é porque se trata de uma característica muito importante. A recomendação oficial do CSS tem uma
sección dedicada a la forma de asignar un valor a una propiedad. El valor se asigna teniendo en cuenta diferentes
regras. Para calcular o valor da propriedade CSS de um elemento específico em uma página da web, é necessário ter
en cuenta el valor especificado, el valor calculado, el valor usado y finalmente el valor real.

O estilo final de um elemento pode ser especificado em diferentes locais e de diferentes maneiras, que podem
interagir de uma forma complexa. Por exemplo, a cor final deste elemento depende de diferentes regras que
existem no CSS que se aplica. Como vemos, existem diferentes regras que definem a cor, mas uma delas
ganhará e será a cor que, finalmente, mostrará o elemento. Este mecanismo proporciona uma grande potência a
CSS, mas também torna confuso e difícil de utilizar, se não se souber como funciona.

Para o cálculo do valor de uma propriedade em cascata, aplicam-se três fontes de informação. Em primeiro lugar, os
estilos por defeito que o agente de usuário tem definido, ou seja, o navegador web do usuário. A seguir,
os estilos especificados pelo usuário que está lendo o documento e, por último, os estilos definidos por
autor da página web. Esta é a ordem de aplicação dos estilos, da menor prioridade à maior prioridade. Todos
estes estilos definem o estilo final que um elemento tem em uma página web.

Os estilos do agente de usuário são os estilos que cada navegador incorpora de fábrica. O lógico é esperar que
todos los navegadores utilicen el mismo estilo por defecto, pero desgraciadamente no es así, y existen algunas
diferenças sutis, que podem ocasionar grandes diferenças quando uma página da web é visualizada em diferentes
navegadores.
CSS2.1 define uma folha de estilo padrão para HTML 4. Se revisarmos esta folha de estilo padrão, podemos
encontrar coisas interessantes. Por exemplo, o corpo da página tem uma margem definida de 8 pixels ou estes
son los tamaños que tienen definidos los encabezados desde h1 hasta h6. Como podemos ver de h1 a h3 el
tamaño es mayor que el texto normal. H4 tiene definido el mismo tamaño que el texto normal y h5 y h6 tienen
definido um tamanho menor. Esta é a folha de estilo por defeito que define o W3C, mas cada navegador tem
definida a sua própria. Nessas direções podemos encontrar as folhas de estilo padrão do Mozilla Firefox,
de varias de las versiones de Internet Explorer y de Safari. Para evitar este problema, existen hojas de estilo que
inicializan o resetean los estilos, para que una página web se visualice de la misma forma en casi todos los
navegadores.

A segunda fonte de informação são os estilos do usuário, que são estilos definidos por cada usuário e que se
podem ser utilizados para substituir os estilos que têm definidos uma página web. Esta característica pode ser utilizada
para melhorar a acessibilidade de uma página da web. No Internet Explorer, é estabelecido o estilo de folha do usuário, a
através do menu ferramentas, opções de Internet e acessibilidade. Em outros navegadores como Google Chrome e
Mozilla Firefox não tem esta opção, mas existem alternativas como a extensão Stylish, que está disponível tanto
para Google Chrome como para Mozilla Firefox. Com esta extensão, o usuário pode aplicar seu próprio estilo de
estilo a um site web.

Por último, os estilos do autor. São os estilos que define o criador de uma página web. Esses estilos podem ser
definir en tres puntos. En un fichero externo enlazado con la etiqueta link, al principio de la propia página con la
etiqueta style e em um elemento concreto com o atributo style. A ordem de aplicação dos estilos pode ser
modificar con important, que aumenta la importancia de una regla. Esta tabla resume el orden de aplicación de los
estilos, de menor prioridad a mayor prioridad, como se ve, si en los estilos del usuario se aplica el modificador
importante, estes estilos têm prioridade sobre todo o resto dos estilos.

Agora te convido a ver a segunda parte deste vídeo, onde te mostro um exemplo de análise de
aplicação dos estilos em cascata.

Muito obrigado pela sua atenção.

OCULTAR

Aspectos chave
Você deve ver o vídeo CSS: cascata e herança (1) onde são explicados a cascata e a herança, dois mecanismos.
de CSS que definem as regras que se aplicam para decidir o valor final que toma uma propriedade de um elemento
concreto de una página web. En el cálculo se tiene que tener en cuenta el valor especificado, el valor calculado, el
valor usado e finalmente o valor real.

Comprueba tus conocimientos

Mariela é designer gráfica em uma importante empresa de exportação. Até agora, ela não utilizava
nenhuma estrutura ao escrever em sua página web e isso causou confusões no
proceso de compra de su web y más de un cliente no ha finalizado su compra online. Además, los
as cores também não eram propícias para dar uma boa imagem ao cliente.

Mariela se perguntou sobre a maneira como projeta seu site e está pensando em usar CSS
(Folhas de Estilo em Cascata). Este linguagem tem três fontes de estilo.

Ajude Mariela indicando quais das seguintes afirmações estão corretas em relação a estas três
fuentes de estilo.
Responda a todas as perguntas e clique em ENVIAR.

1 / 4

Os estilos das páginas da web definidos pelo autor e o navegador web do usuário são os mesmos.
 SIM NÃO

2. 2 / 4

Os estilos do usuário são aqueles que cada usuário define e são usados para substituir estilos que já vêm.
definidos.

SIM NÃO

3. 3 / 4

Os três estilos determinam o estilo final de um elemento em uma página.

SÍNO

4. 4 / 4

Os estilos do autor são os estilos definidos pelo criador de uma página web.

SÍNO

9. CSS: cascata e herança (2)

Neste vídeo, que faz parte do curso Introdução ao desenvolvimento web, vou te explicar o que é a cascata e a
herencia, dos conceptos muy importantes que hay que conocer cuando se escribe un CSS.

No vídeo anterior vimos o conceito de cascata. Lembre-se de que o processo em cascata define uma ordem de
aplicación de los estilos del agente de usuario, del usuario y del autor de la página web. En este vídeo, vamos a ver
um exemplo de análise da aplicação dos estilos em cascata.

Este es el código HTML de la página de ejemplo que voy a utilizar. La página tiene un encabezado y un párrafo. En
a folha de estilo do agente do usuário, a folha de estilo que cada navegador web incorpora, o cabeçalho h1,
tiene definido un estilo por defecto. Ahora a la página le añado un CSS. El CSS es muy sencillo, solo modifica el
peso del encabezado para desactivar la negrita.

A folha de estilo do autor tem prioridade sobre a folha de estilo do agente de usuário, então, o cabeçalho se
muestra sem a negrita. Agora defino uma folha de estilo do usuário. Nessa folha, o cabeçalho h1 volta a ter o
estilo negrita y, además, le añado el estilo cursiva.

No vídeo anterior, eu expliquei como é possível definir a folha de estilo do usuário no Internet Explorer.
outros navegadores como Google Chrome e Mozilla Firefox, não existe esta opção no próprio navegador, mas
lembre-se de que há complementos que adicionam essa opção. A folha de estilo do autor também tem prioridade sobre
la hoja de estilo del usuario, por tanto, el encabezado se muestra en cursiva, pero no se muestra en negrita, porque
na folha de estilo do autor da página web, altera-se o peso do cabeçalho para desativar a negrito e,
esta regra tem prioridade sobre a mesma regra definida na folha de estilo do usuário.

O texto do parágrafo é exibido em azul, pois na folha de estilo do autor não há nenhuma regra que impeça.
Agora eu modifico a folha de estilo do usuário e adiciono o modificador !important à regra que define que um
o cabeçalho deve ser exibido em negrito. A folha de estilo do usuário, quando tem o modificador importante, tem
prioridade sobre a folha de estilo do autor, portanto, o cabeçalho é exibido em negrito, embora vá contra
do que está definido na folha de estilo do autor da página web.

Agora te convido a ver a terceira parte deste vídeo, onde explico o conceito de herança no CSS.
Muito obrigado pela sua atenção.
OCULTAR

Aspectos chave
Você deve assistir ao vídeo CSS: cascata e herança (2) no qual é desenvolvido um exemplo de análise da aplicação dos
estilos en cascada.

Verifique seus conhecimentos

Agora é desenvolvedora web e além disso, tem um negócio de venda de perfumes online. Ela já
designed your own website for your online business applying cascading styles. He/She is
explicando a su amigo Raúl cómo se analizan los estilos en cascada, pero Raúl no lo entiende muy
Bem.

Ordena la prioridad de los siguientes elementos para que Raúl entienda cuál sería el que aparecería
na web.
Clique com o mouse e mantenha pressionado para arrastar os itens até colocá-los na ordem correta.
continução, clique em ENVIAR.

1. Agente de usuario (4)

2. Usuário + !importante (1)
3. Usuario (3)
4. Autor(2)

10. CSS: cascata e herança (3)

Neste vídeo, que faz parte do curso Introdução ao desenvolvimento web, vou te explicar o que é a cascata e a
herança, dois conceitos muito importantes que devem ser conhecidos ao escrever um CSS.

Nos vídeos anteriores vimos os conceitos de cascata e um exemplo de aplicação do conceito de cascata.
Lembre-se de que o processo em cascata define uma ordem de aplicação dos estilos do agente do usuário, do usuário
e do autor da página web.

Além do processo em cascata, no CSS existe outro mecanismo que você deve conhecer: a herança. Este mecanismo
influencia no valor que se atribui a uma propriedade. Nem todas as propriedades são herdadas, então esse mecanismo
pode causar certa confusão. Se você tiver alguma dúvida, o melhor é consultar alguma referência das
propiedades de CSS, como ésta que se incluye en la recomendación oficial de CSS2.1. Podemos ver que las
Propriedades que definem a cor, o estilo ou o tamanho da borda não são herdadas, no entanto, a cor do texto é herdada.
que se herda. A herança de uma propriedade podemos consultar em outras referências, por exemplo, em
w3schools temos a mesma informação.

Por que algumas propriedades são herdadas e outras não? Em alguns casos, pode parecer arbitária a decisão, mas
Em geral, se você pensar bem, verá que isso faz certo sentido.

Para entender a herança de uma propriedade, temos que levar em conta o DOM da página web. Quando uma
propiedad que es heredada, por ejemplo, el color, no tiene asignado un valor, la propiedad toma el valor calculado
da mesma propriedade no pai. Se o pai não a tiver definida, será considerado o valor de seu pai e, assim
sucessivamente, até chegar à raiz do documento. Vamos ver isso com um exemplo. Este é o código HTML do
página de ejemplo que voy a utilizar. Es una página muy sencilla. La página posee un encabezado y un párrafo,
además, en el párrafo hay un enlace y un fragmento marcado en negrita. Ahora a la página le añadimos un CSS, al
corpo definimos uma cor verde para o texto e um estilo negrito, ao contêiner principal, main, definimos um
borda sólida e da cor preta de 2 pixels de largura. E este é o resultado de visualizar esta página no Google
Chrome. A cor verde foi atribuída ao elemento body da página, mas foi herdada pelo resto de
elementos que descem dele. A borda foi aplicada ao elemento principal e só foi aplicada a ele.
 Al ver esto nos pueden surgir dos preguntas. ¿Por qué el enlace no aparece de color verde? ¿Por qué el
O cabeçalho e o parágrafo não têm uma borda? A cor é uma propriedade que é herdada, portanto, o link deveria
aparecer de cor verde, no entanto, os links são especiais porque têm uma cor própria definida na folha
de estilo do agente do usuário. Como pode-se fazer para que o link também tenha cor verde? Claro, a solução
obviamente que se lhe ocorre a muita gente é atribuir a cor verde ao link, mas não é a melhor solução, porque se
agora queremos mudar a cor do texto, precisamos nos lembrar de mudá-lo aqui e aqui. Não dá para fazer isso?
fazer com que o link herde a cor do elemento pai? Assim, teríamos que mudar a cor em um único
ponto. Sim, isso é possível com a palavra-chave inherit do CSS. Ao atribuir esse valor à cor do link, a cor
do link é herdado do pai e, portanto, já aparece na cor verde. O mesmo pode ser feito com
qualquer propriedade de CSS, mesmo com aquelas que não são herdadas. Se este valor for atribuído à borda do
párrafo, el párrafo se muestra con el mismo borde que su padre.

E, agora, o último. Como podemos fazer para que o valor de uma propriedade não seja herdado? Por exemplo,
suponhamos que o texto que está em negrito, não queremos que tenha a cor verde, mas sim a cor por
defeito. Isso é possível com a palavra reservada initial do CSS, cada propriedade tem um valor por padrão, um valor
inicial. En el caso del color depende del agente de usuario, normalmente es el color negro. Si al elemento strong le
designamos uma cor com o valor inicial, o texto destacado em negrito não aparece mais com a cor verde, mas sim com o
cor negra.

Agora te convido a assistir ao vídeo: CSS especificidade das regras, no qual te explico como se calcula a regra.
de CSS que se aplica quando existem várias regras que podem ser aplicadas a um mesmo elemento.

Muito obrigado pela sua atenção.

OCULTAR

Aspectos chave
Você deve assistir ao vídeo CSS: cascata e herança (3) onde é explicado o mecanismo de herança em CSS que se
tem em conta para calcular o valor de uma propriedade. Nem todas as propriedades de CSS são herdadas, por isso
convém consultar a especificação oficial para conhecer o comportamento de cada propriedade.

Confira seus conhecimentos

Mateo trabalha como designer web freelance. Ele foi contratado para analisar e modificar a ordem
de aplicações dos estilos das páginas web de uma instituição importante. Percebeu-se
de que em alguma ocasião, os estilos podem ser herdados e por isso, o processo de cascata pode
mudar.

Indica quais das seguintes afirmações são corretas em relação à herança dos estilos.
Activa los interruptores de las opciones correctas y haz clic en ENVIAR.

1. Todas as propriedades são herdadas. (não)

2. Para entender a herança de uma propriedade, devemos considerar o DOM (Document)
Modelo de Objeto) da página web. (se)
3. A cor é uma propriedade que não se herda.
4. A propriedade initial ajuda a que o valor de uma propriedade não seja herdado. (sim)

11. CSS: especificidade das regras

Neste vídeo, que faz parte do curso Introdução ao desenvolvimento web, vou te explicar o que é a especificidade de
as regras em CSS.

Antes de ver este vídeo, você deveria ter assistido os vídeos sobre os mecanismos do processamento em cascata e a
herança em CSS.
Suponhamos que esta página da web contenha uma lista com cinco elementos. O segundo elemento tem definido
una clase llamada important, el tercer elemento un identificador, el cuarto elemento un identificador y una clase y el
quinto e último elemento, um identificador, uma classe e um estilo em linha com o atributo style.

Este é o CSS que eu defini para a página de exemplo. Existem várias combinações de seletores, com
identificador, con clase y con elemento. Teniendo en cuenta este código HTML y este código CSS, te propongo
Como exercício, que você tente descobrir a cor com a qual cada elemento da lista será mostrado. Você já sabe?
Pausa se você quiser pensar um pouco. De qualquer forma, vou te ajudar um pouco.

O primeiro elemento da lista não tem nem um identificador, nem uma classe, nem um estilo em linha. Portanto, estes são os
das únicas regras CSS que podem ser aplicadas, mas, qual delas vencerá?, qual delas definirá a cor deste
elemento?

O segundo elemento da lista tem uma classe definida. Essas quatro regras podem ser aplicadas a esse elemento.

O terceiro elemento tem um identificador definido, então essas três regras podem ser aplicadas.

O quarto elemento tem um identificador e uma classe definidos, então todas as regras de CSS podem ser aplicadas.

O último elemento também tem um identificador e uma classe definidos, então também se podem aplicar os cinco
regras definidas na folha de estilos, além disso, tem um estilo em linha definido com o atributo style.

Você já sabe com quais cores cada elemento da lista será exibido? Isso é o que finalmente é visualizado, não é?
habías adivinado? Vamos a analizar lo que ha ocurrido.

O primeiro elemento da lista não tem nem um identificador, nem uma classe. Estas são as duas únicas regras que se
podem aplicar, mas esta é a regra que ganhou, por quê? Em breve você saberá.

El segundo elemento de la lista, tiene una clase, se pueden aplicar estas cuatro reglas y ésta es la que ha ganado.

O terceiro elemento tem um identificador e estas são as três regras que podem ser aplicadas. Ele ganhou a primeira.
regra, a que tem um identificador.

El cuarto elemento tiene un identificador y una clase, se pueden aplicar todas estas reglas y ésta es la que ha
ganado, outra vez a do identificador.

Por último, este elemento tem de tudo, identificador, classe e atributo style com uma regra de CSS em linha. No final,
o que ganha é o atributo style.

Claro, pode-se pensar que isso é uma bobagem, que ninguém vai fazer algo parecido com isso, mas quando um CSS
tem milhares de linhas ou, em uma mesma página web, vários CSS se juntam, essas coisas podem acontecer.

Cuando hay varias reglas en conflicto ¿cómo se decide qué regla gana y se debe aplicar? Se decide mediante un
conceito de CSS chamado Especificidade, que se pode traduzir por especificidade. A especificidade de um seletor se
calcula de la siguiente forma: Se tiene que calcular un valor formado por cuatro componentes a, b, c y d. A vale 1 si
existe el atributo style, b cuenta el número de identificadores en el selector, c cuenta el número de clases y pseudo
classes no seletor e, por último, conta o número de elementos e pseudo elementos.

Voltando ao CSS do exemplo, pode-se construir essa tabela com as diferentes regras e sua especificidade. Esta tabela
Podemos reordená-la. Primeiro, ordena-se pelo valor a, depois pelo b e assim por diante. Ou temos esta tabela.
de menor especificidade a maior especificidade, ou dito de outra forma, de menor a maior importância. Com esta tabela
já podemos saber qual regra se aplica em cada caso.

Por exemplo, para o segundo elemento da lista, pode-se aplicar qualquer uma dessas quatro regras de CSS, essas
são as especificidades de cada regra. A primeira regra é a que ganha e por isso se mostra o elemento com o
cor verde. Por último, se você é um pouco fã, com certeza vai gostar do seguinte. Na Especificidade CSS, representa-se a
especificidade do CSS através de uma série de ícones baseados no filme O Iluminado. E na Especificidade do CSS
Guerra, se representa com personagens de A Guerra das Estrelas, curioso, né?

Muito obrigado pela sua atenção.

OCULTAR

Aspectos chave
Você deve assistir ao vídeo CSS: especificidade das regras, onde é explicado como calcular o valor de uma
propiedad de CSS cuando existe un conflicto porque hay varias reglas que se pueden aplicar de forma simultánea
ao mesmo elemento.

Verifique seus conhecimentos

Abel está projetando uma página da web para uma empresa de eletrodomésticos e na hora de
Estabelecer as regras em CSS percebeu-se que muitas das regras existentes servem para a
hora de adicionar valores, mas não sabe qual deles deve utilizar. Pesquisando na Internet, leu que
para determinar qual regra é a melhor, deve-se calcular um valor formado por quatro componentes: A,
B, C e D.

Indica quais das seguintes regras correspondem aos componentes mencionados anteriormente.
Selecione cada uma das perguntas para ver suas possíveis respostas. Responda a cada pergunta e clique
em ENVIAR.

1.-O componente A.

Conta o número de identificadores.

BCuenta o número de elementos ou pseudoelementos.
Conte o número de classes ou pseudoclasse.
DVale 1 se existe o atributo style.

2O componente B.

Conte o número de identificadores.

Conte o número de elementos ou pseudo-elementos.
CCuenta el número de clases o pseudoclases.
DVale 1 se o atributo style existir

3O componente C.

A conta o número de identificadores.

Conta o número de elementos ou pseudoelementos.
CCuenta el número de clases o pseudoclases.
DVale 1 se o atributo style existir

4El componente D.

Conta o número de identificadores.

BCuenta o número de elementos ou pseudoelementos.
Conte o número de classes ou pseudoclases.
DVale 1 se o atributo style existir

12. CSS: escrever um CSS que seja fácil de ler

Neste vídeo, que faz parte do curso Introdução ao desenvolvimento web, vou te explicar como você deve escrever uma
folha de estilo CSS, para que seja fácil de ler.

Um arquivo CSS pode ter centenas de linhas. Dependendo de como você o escreve, pode ser fácil de ler ou muito difícil de ler.
Neste vídeo, vamos ver como utilizar os espaços em branco, os comentários e a agrupação de seletores.
para que um CSS seja mais fácil de ler. Com espaços em branco, refiro-me a espaços em branco, tabuladores e
saltos de linha.

Algumas pessoas preferem escrever um CSS de forma compacta, cada regra em uma única linha, que só se divide
quando for muito longa. Algumas pessoas preferem escrever uma propriedade por linha, e nesse caso, há pessoas
que prefieren que las propiedades aparezcan con sangría, con dos espacios, cuatro espacios o con tabulación.
Também há pessoas que preferem deixar a chave de abertura nesta posição, atrás do seletor, mas há outras
pessoas que preferem que se coloque em uma nova linha. Algumas pessoas preferem alinhar tudo verticalmente,
mas este estilo é difícil de manter. Algumas pessoas preferem uma mistura, mas também é um estilo difícil de
manter.

Outro mecanismo que facilita a leitura de um CSS são os comentários, que começam com barra, asterisco e
terminam com asterisco, barra. Os comentários ajudam a definir partes em um CSS. Os comentários também se
podem ser usados para documentar o CSS e explicar certas coisas, além disso, os comentários também podem ser utilizados.
emplear para comentar partes del CSS, que se quieren eliminar temporalmente para realizar pruebas.

A terceira coisa que se pode fazer para que um CSS seja mais fácil de ler é utilizar a agrupação de seletores.
Quando vários elementos têm o mesmo estilo, podem ser agrupados separados por vírgulas, em uma única regra. Isto
não impede que em outro ponto do CSS, possam ser definidas regras individuais para cada um dos elementos.

Por último, vamos ver uma ferramenta que pode te ajudar a escrever um CSS que seja mais fácil de ler. CSS
embelezar, formatear o código CSS para que seja mais fácil de ler, oferecer opções para definir a indentação, o número
máximo de líneas en blanco que separan dos reglas o propiedades y si las llaves deben comenzar en una línea
nova ou ao lado do seletor. Por exemplo, aqui temos este código CSS escrito em uma única linha.

Mudando os valores desta ferramenta, podemos fazer com que o código seja visualizado desta forma. Interessante
verdade?

Ahora te invito a que veas el vídeo: CSS ordenar un CSS, en el que se explican varias formas de ordenar las reglas
em um CSS, para que seja mais fácil de ler e manter.

Muito obrigado pela sua atenção.

OCULTAR

Aspectos chave
Você deve ver o vídeo CSS: escrever um CSS que seja fácil de ler, no qual se explica que se não for escrito de uma
forma adequada, um CSS pode ser longo e difícil de ler. No entanto, através do uso de espaços em branco,
os comentários e a agrupação de seletores podem facilitar a leitura de um CSS.
Verifique seus conhecimentos

Mónica tem desenhado a página web da sua loja de roupas para animais. Ela percebeu
de que quando no futuro tiver que fazer mudanças em sua página web, pode ser complicado
ler o CSS. Existem mecanismos que facilitam a leitura de um CSS.

Indica cuáles de los siguientes son mecanismos de facilitación de lectura CSS para que Mónica
pode utilizá-los no desenvolvimento de sua página web.
Selecione a opção ou as opções corretas e clique em ENVIAR.

1.

Espaços em branco.

2.

Comentários.

3.

Cores de fundo.
 4.

Agrupação de seletores.

13. CSS: ordenar um CSS

Neste vídeo, que faz parte do curso Introdução ao desenvolvimento web, vou te ajudar com seus primeiros passos.
com CSS, as folhas de estilo em cascata.

Neste vídeo, vou te dar algumas diretrizes para organizar seu CSS.

Um arquivo CSS pode ter centenas e até milhares de linhas, por isso problemas podem surgir.
importantes na sua criação e manutenção futura. Por exemplo, alguns dos problemas que podem surgir
são regras não utilizadas, que nada mais fazem do que aumentar o tamanho do arquivo CSS, regras duplicadas, que
indicam o mesmo ou são contraditórias e criam confusão quando se quer modificar o CSS, propriedades
herdadas que passam despercebidas e não são levadas em conta quando se modifica um CSS e, claro, o
tempo que se perde para localizar uma regra entre milhares de linhas.

Para evitar esses problemas, é necessário organizar um arquivo CSS de alguma forma. Cada um tem que
desenvolver seu próprio estilo, com o qual se sinta mais à vontade. Algumas possibilidades são organizar as regras por
orden alfabético, organizar las reglas por orden de aparición, separar las reglas según la función que realizan,
organizar las propiedades de una regla por orden alfabético y organizar las propiedades de una regla del exterior
do elemento para o interior e, claro, utiliza os comentários de CSS, barra, asterisco, asterisco, barra, para
separar as diferentes partes de um CSS e desativar certas propriedades quando você quiser realizar testes.

Eu aconselho que você leia o artigo: Dicas para organizar seus arquivos CSS e CSS: Como organizar estilos. Em
estos dos artículos encontrarás consejos y ejemplos que te ayudarán a desarrollar tu propia forma de ordenar tus
folhas de estilo CSS.

Por último, algumas ferramentas que podem te ajudar a organizar seu código CSS ou a compactá-lo e otimizá-lo,
reduciendo su tamaño. Primero Styleneat, una aplicación web que organiza el código CSS en función de varios
Parâmetros Styleneat pode aplicar recuo, de forma automática, a um arquivo CSS para que sua leitura seja mais
fácil.

Outra ferramenta é o CleanCSS, que tem a opção de otimizar e reduzir um CSS, além de poder converter os
selectores a minúsculas e poder ordenar o CSS alfabeticamente, embora isso seja uma operação perigosa que
você pode modificar a visualização da página.

Por último, CSS Compressor, que otimiza um CSS eliminando o conteúdo que não é necessário, como quebras de
linha ou espaços em branco. No final do processo de otimização, exibe um resultado no qual é possível
comprobar el porcentaje de reducción obtenido en el CSS optimizado.

Muito obrigado pela sua atenção.

 OCULTAR

Aspectos chave
Você deve ver o vídeo CSS: organizar um CSS onde se fala dos problemas que podem surgir quando um CSS
não está organizado, são oferecidas algumas dicas para organizar um CSS e são mostradas algumas ferramentas para
ordenar e otimizar um CSS.

Comprueba tus conocimientos

Elena acaba de se incorporar à equipe de informática como desenvolvedora da Conservas Matusalén S.A.
Você está trabalhando com o código de outro colega que não está mais na empresa e está se
encontrando muitas dificuldades. O mais seguro é que eu tenha que refazê-lo tudo de novo.

Indique, das seguintes opções, quais são os problemas derivados de não seguir regras de
ordenación.
Ative os interruptores das opções corretas e clique em ENVIAR.

1. Propriedades herdadas.
2. Muito tempo para localizar uma linha.
3. Regras duplicadas.
4. Propriedades do elemento exterior no interior.

14. CSS: o modelo de caixa (1)

Neste vídeo, que faz parte do curso Introdução ao desenvolvimento web, vou te explicar o que é o modelo de caixa.

Em uma página web, os elementos de bloco, como os parágrafos, as listas ou os divs, se comportam como caixas
quando são mostradas. Como veremos a seguir, as caixas têm uma borda que pode estar visível ou oculta e um
margem, que deve ser levada em consideração ao projetar uma página da web.

A especificação 2.1 do CSS tem uma seção dedicada ao modelo de caixa, que explica o
funcionamiento de las cajas que se generan para los elementos que componen una página web.

No CSS existem várias propriedades relacionadas ao modelo de caixa, mas neste vídeo vamos nos concentrar em
las propiedades relacionadas con el tamaño de las cajas.

Una caja tiene cuatro partes: el contenido, el relleno, el borde y el margen. Cada caja tiene un área de contenido,
por exemplo, um texto, uma lista ou uma imagem. Em torno do conteúdo existem três partes que são opcionais.

Em primeiro lugar, o Padding, que pode ser traduzido como preenchimento ou acolchoamento. Ao redor está a borda e por
último el margen, que es transparente. Cada una de estas partes se divide en cuatro segmentos: superior, top;
derecha, right; inferior, bottom e izquierda, left.

O modelo de caixa define a forma de calcular a largura e a altura das caixas. Isso é muito importante, já que quando
se realiza um design, é preciso conhecer as dimensões dos elementos que compõem a página.

Na página sobre o Box Model da Mozilla Developer Network encontra-se esta imagem que explica que a
anchura e a altura de um elemento. As propriedades width e height do CSS referem-se apenas ao conteúdo e não
não consideram nem o preenchimento, nem a borda, nem a margem. Isso também afeta outras propriedades em que aparece
a largura e a altura. Mas a largura e a altura de um elemento, às vezes, incluem não apenas o conteúdo, mas
que também incluiu o preenchimento e a borda e isso causou muita confusão. Em concreto, isso acontecia em
Internet Explorer 6, que tinha vários modos de funcionamento, o modo Quirk, o modo quase padrão e o modo
padrão.

Cada módulo se ativava de acordo com a declaração de DOCTYPE que tinha o código HTML. Por exemplo, se não havia
DOCTYPE, ativava o modo Quirk, o modo próprio do Internet Explorer. No modo Quirk, a forma de calcular
a largura e a altura de um elemento eram diferentes do padrão definido na recomendação de CSS, enquanto que
en el estándar, la anchura hace referencia, únicamente, a la anchura del contenido, en el modo Quirk de Internet
Explorar a largura incluía também o preenchimento e a borda. Isso foi um grave problema durante muitos anos, já que
Internet Explorer 6, fue el navegador más utilizado entre los años 2002 y 2006, como se puede ver en este gráfico
que representa a quota de mercado do navegador Internet Explorer.

Durante esse tempo, muitos desenvolvedores web, que não conheciam a existência do modo Quirks da Internet
Explorer, tiveram muitos momentos de frustração e raiva, pois tiveram que criar diferentes CSS para que
uma página da web se verá corretamente em diferentes navegadores.

Felizmente, isso deixou de ser um problema, uma vez que a própria Microsoft decidiu acabar com o Internet Explorer 6 há
tempo e, para isso, em 2011, iniciou uma campanha para que as pessoas parassem de usá-lo.

Por último, vamos a ver un concepto importante del modelo de caja, los márgenes colapsables. Por ejemplo,
suponhamos que temos dois elementos, duas caixas, uma com uma margem de 10 pixels e outra com uma margem de 30
píxeles. Poderíamos pensar que ao situar uma caixa embaixo da outra, as margens são preservadas e, portanto, entre
entre as duas caixas existirá uma margem de 40 pixels. No entanto, o modelo de caixa não funciona assim. É preciso
cumprir certas condições, mas, em geral, sempre ocorre que as margens adjacentes colapsam, se
superpõem e a margem final é a maior das duas margens adjacentes.

Portanto, a propriedade margin do CSS, podemos entender que não define a margem exata, mas sim a margem mínima.
Por ejemplo, en esta página hay tres párrafos, cada uno con un tamaño de margen distinto. Los márgenes están
definidos em um CSS, além disso, foi definido uma borda para que se vejam os limites de cada parágrafo. O resultado
finalmente, entre o primeiro e o segundo parágrafo, existe uma separação de 20 pixels e, entre o segundo e o
terceiro, uma separação de 30 pixels.

Podemos verificar isso com as ferramentas de desenvolvedor do Google Chrome. Quando consultamos
as propriedades do primeiro parágrafo, vemos que, efetivamente, tem um margem de 10 pixels, mas a
a separação com o segundo parágrafo é maior. No segundo parágrafo, há uma margem de 20 pixels, que é exatamente a
distancia que existe entre el primer y segundo párrafo, pero la separación del segundo párrafo con el tercer párrafo,
É maior. Por último, o terceiro parágrafo tem uma margem de 30 pixels, que é exatamente a separação que existe entre
o segundo e o terceiro parágrafo.

Agora te convido a assistir a segunda parte deste vídeo, onde é explicada a box-sizing, uma nova propriedade de
CSS que permite modificar a forma de calcular a largura e a altura de uma caixa.

Muito obrigado pela sua atenção.

OCULTAR

Aspectos chave
Você deve assistir ao vídeo CSS: o modelo de caixa (1) no qual é explicado que os elementos de bloco, como os parágrafos
y listas, se comportan como caixas com um conteúdo, um preenchimento, uma borda e uma margem. Além disso, explica-se a
forma distinta de calcular a largura de um elemento que o Microsoft Internet Explorer 6 tinha.

Verifique seus conhecimentos

Mario está trabalhando no tamanho das caixas de certos elementos de sua página web, mas uma e
novamente se sobrepõem. Seu colega diz que é porque ele está confundindo os atributos "Margin" e
Reforço

Selecione, das seguintes opções, a que corresponde a uma das características de 'Margin'.
Arrastra la mejor respuesta dentro del cuadro. A continuación, haz clic en ENVIAR.

Margem

Arraste-a aqui

Defina a margem mínima que existe entre um elemento e os que estão ao lado.

Define el margen exacto que existe entre un elemento y los que tiene al lado.

Defina a margem exata que existe entre um elemento e os que estão ao lado, criando um espaço.
entre uma camada e outra.

15. CSS: o modelo de caixa (2)

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a explicar que es el modelo de caja.

Na primeira parte deste vídeo, vimos o conceito de modelo de caixa, que organiza uma caixa em quatro partes: o
contenido, el relleno, el borde y el margen.

CSS3, a última especificação de CSS, incorpora numerosas novidades que ajudam a controlar muito melhor o
diseño de una página. CSS Basic User Interface Module es una especificación independiente que forma parte de
CSS3.

Nesta especificação, é adicionada uma nova propriedade, box-sizing, que define a forma de calcular o tamanho de
uma caixa no modelo de caixa. Box-sizing pode assumir três valores: content-box, padding-box e border-box.

Content-box é o valor padrão. A largura e a altura são calculadas de acordo com a especificação do CSS2.1, por
tanto, width y height, se aplican únicamente al contenido. En padding-box, la anchura y la altura del elemento,
incluem o padding.

Por último, em border-box, a largura e a altura do elemento incluem o preenchimento e a borda.

Se consultarmos a documentação da Microsoft, encontramos algumas coisas importantes. Em primeiro lugar, vemos
que esta propiedad es de CSS3 y está disponible a partir de Internet Explorer 8. Por otro lado, vemos que esta
a propriedade só pode assumir dois valores, content-box e border-box, mas na especificação oficial aparece um
tercer valor, padding-box, ¿qué está pasando? Ahora después lo veremos.

Os dois valores possíveis que admite no Microsoft Internet Explorer são content-box, o valor padrão, e border-
caixa, que é exatamente a forma de calcular a largura que era aplicada nas versões antigas do Internet Explorer.

Vamos ver um exemplo para ver como essa propriedade afeta o tamanho de visualização dos elementos. Neste
página hay dos div, el primero con el identificador content-box y el segundo con el identificador border-box. Las dos
cajas têm as mesmas propriedades de CSS, exceto a propriedade box-sizing. Na primeira caixa, utiliza-se
content-box e na segunda border-box. Isso afeta a forma de interpretar o valor da largura das caixas. Este
é o resultado, a primeira caixa é mais larga do que a segunda caixa. Por quê? Concretamente, a primeira caixa é 40
píxeis mais largas que a segunda, isso se deve ao fato de que na primeira caixa os 200 píxeis se referem apenas ao
contenido, no incluyen el padding o el borde. En la segunda caja los 200 píxeles incluyen el padding y el borde, por
então a caixa é menor.

No Mozilla Developer Network, o site para desenvolvedores da Mozilla, podemos encontrar um aviso muito
importante. Esta propriedade é experimental, por isso pode não ser compatível com todos os
navegadores e pode ser que seu comportamento mude no futuro.

Você se lembra que antes vimos que, no Internet Explorer, a propriedade box-sizing só pode ter dois valores,
content-box e border-box? Na tabela de compatibilidade podemos ver a partir de qual versão do navegador está
a propriedade foi adicionada e, também, podemos ver que o valor padding-box, por enquanto, é aceito apenas pelo Mozilla
Firefox.

Por último, outro exemplo para que você veja uma importante vantagem que a propriedade box-sizing com o valor traz.
caixa-borda.

Nesta página temos duas caixas principais, cada uma delas contém três caixas, mas o que quero lograr é
situar las dos primeras cajas en paralelo, en una misma fila. Para ello a cada una de las cajas le asigno un tamaño
de 50%, veja que o primeiro caso box-sizing toma o valor content-box e no segundo caso, toma o valor border-
caixa. O que vai acontecer? Este é o resultado: no primeiro caso, as duas caixas não podem ser colocadas em paralelo na
mesma fila porque não há espaço suficiente, já que cada caixa tem, realmente, uma largura superior a 50%. Em o
segundo caso sí que es posible, porque a largura de 50%, inclui o conteúdo, o padding e a borda.
Interessante, não é?
OCULTAR

Aspectos clave
Debes ver el vídeo CSS: el modelo de caja (2) en el que se explica la nueva propiedadbox-sizing de CSS3, que
permite indicar a forma de calcular a largura de um elemento de bloco de uma página web.

Verifique seus conhecimentos

Sandra está analisando a propriedade box-sizing do CSS para calcular a altura e a largura de um elemento.
Você viu que tem três valores relacionados: content-box, padding-box e border-box.

Você pode ajudar Sandra respondendo às perguntas que ela tem sobre esta nova propriedade?
e os valores que pode assumir?
Responde a todas las preguntas y haz clic en ENVIAR.

1 / 4

Quando falamos de content-box, largura e altura se aplicam apenas às dimensões que ocupa
o conteúdo.

SIM NÃO
 2. 2 / 4

Quando falamos de Border-box, estamos somando o padding e a borda à largura e à altura do

elemento.

SIM NÃO

3. 3 / 4

Box-sizing está disponível a partir do Internet Explorer 6.

SIM NÃO

4. 4 / 4

Padding-box es compatible con todos los navegadores.

SÍNO

16. [A+] O uso da cor: O que é a cor?

Olá, bem-vindo a este vídeo onde falarei sobre a cor e seu uso no design web. Meu nome é Marina Gutiérrez,
dedico ao design gráfico e web. Podem entrar em contato comigo neste e-mail ou através da minha página.

O uso da cor é uma ferramenta essencial no design web, seja por estética ou por funcionalidade, é um
elemento que não deverá falhar no seu plano de design. Te ajudará a comunicar mensagens, captará a atenção do
espectador, transmitirá emoções, potenciará a presença de um elemento, ajudará a melhorar a acessibilidade e a
navegación de tu página, mejorará el aspecto estético y aportará carácter y personalidad, entre otras cosas.

A escolha da cor em um design não é arbitrária, por isso é importante conhecer um pouco mais sobre essa ferramenta.
de comunicação tão poderosa que vamos usar. O uso adequado da cor no design de um site permite que você
chegar ao usuário de uma maneira direta e emocional. Portanto, é importante tentar escolher e combinar os
cores de forma correta, definir alguns parâmetros para conseguir que seus designs estejam unificados e em
harmonia com a mensagem, a intenção e as necessidades do projeto.

Vou te mencionar alguns conceitos interessantes para te ajudarem a trabalhar com o uso da cor em seus
designs.

Quando tratamos da cor, devemos esclarecer alguns termos básicos que descrevem e dão valor às suas propriedades.
Graças aos estudos sobre a cor e ao trabalho científico iniciado por Isaac Newton, a teoria da cor pode estabelecer
que a luz é a fonte de todas as cores. Seu experimento com o prisma decompõe a luz resultando em
base das cores que conhecemos, as cores primárias e secundárias.

No círculo cromático estão representadas essas cores com suas variantes e fusões. Se estudarmos esse círculo,
veremos as diferentes agrupações da cor. Nós as agrupamos principalmente em primárias, secundárias e
intermediários. Em outros termos, podemos agrupá-los por sua temperatura, como quentes ou frios. Também podemos
agruparlos por sua intensidade, em pastéis ao adicionar branco e apagados ou sujos, ao adicionar preto. Chamaremos
cores neutros nas tonalidades de cinza e os diferentes brancos e cremes.
Algumas das principais propriedades da cor são as seguintes:

O matiz ou tom é a essência de cada cor pura e dá nome a cada uma. A luminosidade ou valor e a opacidade,
variam uma cor de acordo com suas porcentagens de branco ou de preto. A saturação ou brilho define as variantes de uma cor
agregando gris.

Assim, ao criar um grupo de cores, podemos nos ajudar com as chamadas harmonias, que são cinco maneiras de
agrupar cores em paletas de acordo com sua afinidade, são as seguintes:

As complementares são dadas por duas cores opostas no círculo cromático. As complementares próximas,
crie grupos de três cores harmônicas baseados em uma cor e nas duas adjacentes ao seu oposto ou complementar.

Los dobles complementarios son grupos de dos parejas de colores complementarios dispuestos en una equis en el
círculo cromático.

As tríades complementares, com três cores harmônicas, unidas por um triângulo, dentro do círculo cromático.

As gamas múltiplas são dadas com as cores próximas no círculo, que também são harmônicas.

Também conhecemos, através do estudo da cor, as relações que se criam entre elas e como afetam a
percepção do olho humano.

Então, como você vê, não se trata apenas de escolher cores para projetar, mas de saber como elas se relacionam umas com as outras e
qual é o efeito do conjunto final.

É por isso que, ao combinar cores, você deve prestar muita atenção a conceitos como o contraste, que ajuda
a potencializar a mensagem, destacando os elementos importantes. Existem diferentes tipos de contraste. Por um lado,
temos o contraste de luminosidade, que é dado pelo claro-escuro. Depois temos o contraste de valor e
este, está dado pelo ambiente da cor. Se colocarmos a mesma cor em dois ambientes diferentes, seu comportamento
é distinto. O contraste de saturação se origina quando saturo uma cor pura com preto ou branco. O contraste de
a temperatura estará dado quando confrontar uma cor fria com uma quente. As cores quentes e brilhantes criam a
ilusión de estar más cerca del espectador, mientras que los colores fríos, dan la sensación de estar más alejados.
Depois temos o contraste de complementares, que são as cores que aparecem opostas no círculo
cromático, por exemplo, o violeta e o amarelo.

As cores variam de acordo com o que chamamos de peso, baseado em seu tom e em sua intensidade. O vermelho, por exemplo, se
considere uma cor muito pesada. Para melhorar a legibilidade dos textos, tente usar fundos claros, suavizados,
que não cansem a leitura, evitando cores muito brilhantes.

Ao projetar contextos, evite o uso de texturas nos fundos para evitar confusão na leitura, assim como
combinaciones que no permitan leer bien. Evita combinar colores que causen fatiga en el ojo del espectador.

Quando você trabalha com cor, acima de tudo, observe seu comportamento no conjunto do design, às vezes escolhemos os
cores que acreditamos que são as adequadas e depois percebemos que não funcionam como
esperávamos. É melhor experimentar várias opções, antes de escolher sua paleta de cores.

No próximo vídeo, vou contar alguns significados emocionais da cor. Obrigado pela sua atenção.

Aquí te dejo algunos enlaces para profundizar más en el tema del color y su uso en el diseño web. Hasta luego.
OCULTAR

Aspectos chave
Debes ver el vídeo El uso del color: ¿Qué es el color? en el que se habla de la importancia del color en el diseño,
se proporcionan algunas nociones básicas sobre el color, se explica que son los colores primarios, secundarios e
intermediários, fala-se sobre as propriedades da cor (matiz ou tom, luminosidade ou valor, saturação ou brilho), de
harmonias e das relações entre as cores.
Verifique seus conhecimentos

Tomás, que é designer gráfico para a empresa Tomates S.A., percebeu que a página
O site da empresa utiliza a cor vermelha sem considerar matizes, luminosidade, brilho, etc. Há
sugerido harmonizar as cores da página utilizando harmonias que não impliquem mudanças
drásticos, utilizando cores próximas às atuais com o objetivo de melhorar a aparência do
página.

Qual das seguintes combinações de cores atende a este critério?

Elige la imagen correcta y haz clic en ENVIAR.

1.

Complemento múltiplo.
2.

Triada.

3.

Gamas múltiplas.
17. [A+] O uso da cor: Significado das cores

Olá, bem-vindo a este vídeo onde vamos falar sobre o significado das cores. Sabemos, pelos estudos
da psicologia da cor, que estes são capazes de transmitir emoções e sensações e provocar assim reações
em nosso cérebro. As cores têm a capacidade de nos sugestionar.

A reação humana à percepção da cor e como ela influencia nossas emoções é um dos temas mais
interesantes de la teoría del color. A continuación, te muestro alguno de los colores más usados y sus propiedades
que podem ser úteis para os seus trabalhos.

O branco está associado à luz, à bondade, à segurança, à inocência, à pureza e à virginidade. É considerado
el color de la perfección y, generalmente, tiene una connotación positiva. Es símbolo de lo absoluto y de la unidad,
significa paz ou rendição, evoca a simplicidade e o bom gosto, é uma cor muito apreciada em design pois enfatiza
a cor que o acompanha.

O laranja combina a energia do vermelho com a felicidade do amarelo. Está associado à alegria, ao sol brilhante e ao
trópico. Representa o entusiasmo, a felicidade, a atração, a criatividade, a determinação, o sucesso, o ânimo e o
estímulo. Suele utilizarse como color predominante en sitios relacionados con el turismo, empresas jóvenes, por su
sensação de frescura. É uma cor que se encaixa muito bem com as pessoas jovens, por isso é muito recomendável para
comunicar com eles.

O amarelo estimula a atividade mental e gera energia. Associado à vitalidade, é muito usado como cor
secundário ou destacado por sua estridência natural. Atualmente, é comum vê-lo como cor principal em sites
relacionados con el ecommerce o con páginas de comunidades y ongs. El amarillo simboliza la luz del sol,
representa a alegria, a felicidade, a inteligência e a energia, sugere o efeito de entrar em calor, provoca alegria,
estimula a atividade mental e gera energia muscular. É muito adequado para promover produtos para os
crianças e para o lazer.

El color rojo es el del fuego y el de la sangre, por lo que se le asocia al peligro, a la guerra, la energía, la fortaleza,
a determinação, assim como a paixão, o desejo e o amor. Altamente visível e considerado emocionalmente intenso,
é muito comum vê-lo em textos e imagens que funcionam como vínculos ou botões para a chamada à ação
como apúntate, comprar agora e adicionar ao carrinho de compras. Como está muito relacionado com a energia, é
muito adequado para anunciar carros, motos, bebidas energéticas, jogos, esportes e atividades de risco.

O verde é a cor da natureza por excelência. Representa harmonia, crescimento, exuberância, fertilidade e
frescor. Tem uma forte relação, a nível emocional, com a segurança. É utilizado em locais relacionados à ecologia,
finanças e medicina. A cor verde tem um grande poder de cura, é a cor mais relaxante para o olho humano e
sugere estabilidade e resistência.

O azul o associamos à estabilidade, à sobriedade e à segurança. É frequentemente usado como cor principal.
em sites de corporações tradicionais, grandes empresas consolidadas no mercado e sites governamentais.
É considerado uma cor benéfica, tanto para o corpo quanto para a mente, pois produz um efeito relaxante.
É uma cor fortemente ligada à tranquilidade e à calma. É adequada para promover produtos de alta
tecnologia ou de alta precisão, uma cor fria ligada à inteligência e à consciência.

El púrpura contiene la estabilidad del azul y la energía del rojo. Se asocia a la realeza y simboliza poder, nobleza,
luxo e ambição. Sugere riqueza e extravagância. A cor roxa ou violeta também está associada com a
sabiduría, la creatividad, la independencia y la dignidad. El púrpura representa la magia y el misterio y produce
sentimentos nostálgicos e românticos.

O cinza é uma cor neutra e está relacionado com o insensível e indiferente. Estando entre o branco e o preto,
também se relaciona com o equilíbrio. Está associado à indústria e, também, ao intelectual. Inspira a criatividade,
segurança, a maturidade, a inteligência, o sólido, o profissional, o conservador e o sofisticado. Evoca a qualidade, a
calma e, às vezes, a tristeza.
El marrón se asocia al orgánico o lo natural, también se le relaciona con la amistad, la tierra, el corazón, el hogar, lo
econômico, o confortável, o estável, o simples, à tranquilidade, ao masculino, à passividade, fertilidade e
generosidad. Es un color que sugiere al otoño y a la estabilidad, a lo rústico y a lo natural.

A cor preta está associada ao poder, ao status e ao luxo. É utilizada, principalmente, em locais relacionados a
objetos de luxo voltados para um público de alto poder aquisitivo. Pode ser visto, preferencialmente, em sites de artigos
eletrônicos de alta gama, adegas e joalherias. O preto representa a elegância, a formalidade, a morte e o
mistério. Combinado com cores vivas e poderosas, como o laranja ou o vermelho, produz um efeito agressivo e
vigoroso. Também está associado ao prestígio e à seriedade.

Obrigado pela sua atenção.

Aqui estão alguns links para aprofundar mais no tema da cor e seu uso no design web. Até logo.
OCULTAR

Aspectos chave
Você deve assistir ao vídeo O uso da cor: Significado das cores no qual é explicado que as cores podem
transmitir estados de ánimo, emoções, sensações, etc., e comenta-se o significado de algumas cores.

Verifique seus conhecimentos

Marina está pensando sobre as cores que ela quer que sejam o predominante no design de seu
página web. Seu negócio é baseado na venda e distribuição de produtos ecológicos, portanto
precisa que as cores que são mostradas sejam identificadas com a natureza do seu projeto. Seu
o público é mais bem de meia-idade, entre 35 e 50 anos. Algo que realmente quer potenciar é a
venda, por isso precisa estimular a atividade de seus visitantes para que comprem.

Ayuda a Marina eligiendo cuatro colores para que los utilice en su web y le ayuden a lograr sus
objetivos.
Selecione a opção ou as opções que você deseja riscar e clique em ENVIAR.

Verde
Marrom
Negro
Vermelho
Amarillo

18. [A+] O uso da cor: Projetando com cor

Olá, bem-vindo a este vídeo onde falaremos sobre o uso da cor no design web e algumas ferramentas.

Nos vídeos anteriores, pudemos ver como se iniciam os estudos da cor e como a teoria consegue decifrar seu
anatomía. También hemos visto, a grandes rasgos, algunos de los significados que se le atribuyen a estos colores,
segundo a psicologia da cor. Agora que já sabemos um pouco mais sobre a cor, podemos começar a desenhar
usando-os sem medo e com vontade. Você se anima a começar?

Encontrar as cores adequadas para o seu projeto dependerá, entre outras coisas, de alguns fatores como a
temática de la web, la imagen corporativa, la estrategia comunicativa, las jerarquías del contenido, las tendencias
atuais, a influência cultural, a acessibilidade e legibilidade.
Para tu diseño, necesitarás crear una paleta de colores con los que trabajar. Deberás hacer pruebas y descartar las
opciones que no se ajusten al diseño o que no sean viables. Es una cuestión de elegir y combinar con un poco de
mimo.

O bom uso da cor nos servirá, como já sabemos, para criar um impacto emocional, para focar o usuário.
em direção a um elemento concreto na página, para facilitar a leitura, transmitir a mensagem de uma forma impactante e
direta ou melhorar a acessibilidade e a navegação.

No uso da cor, há uma gama de cores que poderia ser denominada justa para aplicar no design e seria sempre
utilizar entre 3 e 5 cores. Para trabalhar com a cor existem múltiplas ferramentas que facilitarão o trabalho e a
documentação. A seguir, explicarei como funcionam algumas dessas ferramentas.

A primeira coisa que você deve fazer é estabelecer uma cor principal e, a partir daí, deve buscar as combinações
adequadas e definir, por exemplo, duas cores a mais para criar seu grupo de cores básicas.

Em suas combinações, você precisa cuidar muito bem de aspectos como o equilíbrio, tentando dar peso à cor.
adequado e tentando equilibrar o uso de cada cor em relação à composição. Sempre haverá uma cor que
domine sobre os outros.

Te recomendo que experimente primeiro com três cores e tente combiná-las dentro de suas gamas e matizes, de
maneiras distintas, assim você poderá ver o efeito final que uma página pode ter, com uma cor ou com outra.

Uma vez escolhidas as cores e os tons que você usará, você pode fazer testes para verificar quais serão a
combinação que melhor se adequa ao seu design e em que medida você dará destaque a cada cor.

Escolher uma paleta de cores adequada é uma parte importante do design de um site, então não a leve a
leve e você verá os resultados muito em breve. Lembre-se de que a cor no design realmente importa.

Existen muchas herramientas para trabajar en tus diseños con el color y con las paletas. Elegir la apropiada
depende de ti e de como gostas de trabalhar. Aqui te mostro algumas com as quais podes começar.

A inspiração é a primeira coisa que devemos buscar, por isso, é bom pesquisar nas últimas tendências e,
também, nas páginas especializadas que falam sobre cor. Nelas você encontrará desde tendências até paletas
de color para inspirarte. La mayoría ofrece búsquedas específicas con filtros muy potentes y son un excelente lugar
para começar um projeto de design.

Para buscar, criar e combinar as cores que formarão sua paleta, você pode usar um desses links. Eles oferecem
a possibilidade de combinar cores e obter fusões ou matizes entre elas e verificar se são eficazes dentro do
design. Aqui você encontrará ferramentas para criar cores ou encontrar a que precisa para a sua paleta básica.

También existen herramientas más completas que trabajan el color y, aquí hay un par que te pueden ser de
utilidade.

Aqui estão duas interfaces que permitem encontrar uma cor e criar uma paleta completa. Esse tipo de
ferramentas, geralmente, te oferecem o círculo cromático para que você escolha uma cor e possa combiná-la. Te
calcula las distintas armonías, te sugiere el balance de colores, así podrás ver el peso y la presencia de cada uno.
Algumas dessas ferramentas permitem exportá-lo, também, como arquivos do Photoshop ou do Illustrator.

Quando você escolher suas cores, obterá uma paleta com todos os códigos e referências das cores escolhidas.

Para gerenciar, testar e encontrar paletas de cores já criadas, você pode experimentar alguns destes links.

Existem várias opções na rede para encontrar a inspiração que você precisa para descobrir as cores da sua paleta.
Aqui estão alguns links para você começar.
COLRD tem uma interface muito agradável e sem tanta publicidade como o resto dos aplicativos. É muito
completa, já que conta com muitas ferramentas distintas para gerenciar paletas, desde inspiração de paletas
aportadas por outros usuários até o cálculo preciso de tonalidades de cores específicas. Você pode criar cores,
paletas, degradados ou encontrar o DNA da cor de uma imagem.

Aqui estão mais links com mais ferramentas de gestão de paletas de cores. Também existem utilidades
concretas, para averiguar cores usadas em outras webs a partir de imagens. Com o Palette Generator, você tem a
opção de adicionar uma URL onde está hospedada uma imagem e calculará o mapa das cores predominantes que
contém essa imagem.

Pictaculous também te oferece as mesmas opções, só que aqui você tem a diferença de que pode enviar uma
imagem do seu disco rígido e descobrir o DNA dessa imagem. Além disso, sugere paletas relacionadas para combinar
esses mesmos colores que encontrou.

Se o que você deseja é encontrar a paleta usada em uma página da web específica, aqui estão dois links que lhe oferecem
essa possibilidade.

Finalmente, te sugiro que também tenhas sempre à mão algum glossário ou folha de referência para cores web
o HTML, para facilitar o trabalho de programação posterior.

Aquí encontrarás muchas referencias y tablas muy útiles para programar una vez que hayas concluido tu diseño. A
continuación, te dejo aquí, unos enlaces más para profundizar en el tema del color y su uso en el diseño web.

Muito obrigado pela sua atenção. Até logo.

OCULTAR

Aspectos chave
Você deve assistir ao vídeo O uso da cor: Projetando com cor, no qual se fala sobre o uso da cor no design web e se
mostram algumas ferramentas que ajudam a criar cores e combinar cores entre si por meio da criação de
paletas de cores.

Verifique seus conhecimentos

Santiago precisa dar uma olhada na gama cromática que utiliza em sua empresa de vendas.
atacadista de material escolar. Ele tem olhado páginas de outros fornecedores do setor e são
muito mais atraentes do que a sua. Agora, você precisa saber quais são os passos que deve seguir
para realizar esta mudança.

Ordena el esquema de trabajo que debe seguir Santiago para lograr su objetivo.
Clique com o mouse e mantenha pressionado para arrastar os elementos até colocá-los na ordem correta. A
continuação, clique em ENVIAR.

1. Haz pruebas (4)

2. Escolha duas cores de referência que combinem na gama cromática com a cor principal (2)
Cuida o equilíbrio (3)
4. Elige un color principal (1 )
EXAME FINAL DO TEMA

Pergunta 1
Em CSS, para definir uma imagem como marcador dos elementos de uma lista, usa-se:

Uma imagem de estilo lista.

B Marcador de estilo de lista.

C Tipo de estilo de lista.

D Nenhuma das respostas está correta.

Pergunta 2
Que propriedade de CSS é usada para mudar o tipo de letra de um elemento?

A Text-type.

B Font-type.

C Texto-família.

D Font-family.

Pergunta 3
Em CSS3, o que significa o 'A' em RGBA?

A Avançado.

B Alfa.

Alternativa C.

D Ambíguo.

Pergunta 4
Para calcular o valor de uma propriedade de um elemento, você deve ter em conta:

O valor especificado e calculado.

B O valor especificado e utilizado.

C O valor especificado, usado e real.

D Nenhuma das respostas anteriores está correta.