Redimensionar elementos com CSS e Douglas o javascript Robot
Cada elemento em um documento HTML é um retângulo. Mesmo se um elemento parece com um círculo (como os olhos de Douglas), é realmente tratado como um retângulo em torno do círculo. Porque tudo é um retângulo, você pode alterar o tamanho dos elementos com CSS ajustando a sua largura e altura.
Para começar, abra o navegador web e log para o dashboard pública. Em seguida, siga estes passos:
Encontrar o violino chamado Capítulo 6: Estilo Robot - Iniciar e clique no título para abrir.
Você também pode ir diretamente para o app Robot.
Você verá uma tela com HTML no painel HTML e alguns CSS no painel CSS.
Clique Fork no menu superior para fazer uma cópia do violino em sua própria conta jsFiddle.
Ao medir a largura ea altura das coisas no mundo real, você usa unidades de medida como polegadas, centímetros ou metros. Quando você medir as coisas no mundo do CSS, você tem várias unidades de medida diferentes. Esses incluem px (pixels) e % (por cento):
Píxeis: O pixel é o menor ponto que pode ser exibido no seu navegador web. Ao especificar as larguras e alturas usando pixels, você diz ao navegador exatamente quantos pixels de largura e altura de um elemento deve ser. O problema com o uso de pixels para medições é que ele sempre exibe as coisas do mesmo tamanho - mesmo se a janela do navegador do usuário é muito grande ou muito pequeno.
Por cento: Ao especificar as larguras e alturas com por cento, você está dizendo o navegador para fazer o elemento de uma determinada porcentagem do tamanho do pai do elemento.
Você especificou todas as medições de Douglas usando cento. Isso é benéfico, porque isso significa que, independentemente de se você está olhando para Douglas sobre um telefone móvel ou no Jumbotron em Times Square, o tamanho dele vai se adaptar para caber na tela. Para ver a magia de dimensionamento relativo em ação, arraste as bordas do painel em jsFiddle para fazer o painel Resultado maior ou menor. Note como Douglas muda de tamanho, juntamente com o tamanho da janela.
Você pode ter ouvido o termo design responsivo. design responsivo visa criar conteúdo web que é flexível e responde ao tamanho da tela do usuário. A maneira como você especificado o tamanho de Douglas é um exemplo de design responsivo.
Faça algumas alterações em algumas das peças de Douglas:
Localizar a regra CSS para a classe olho.
Alterar a largura para 30% e a altura para 30%.
Você vai notar que os olhos de Douglas ficam maiores. Mas eles também não está mais centrado em seu rosto, como mostrado aqui!
Os grandes olhos de Douglas estão fora do centro.Localizar a regra CSS para a classe braço.
.braço {background # 8208-color: # cacaca-position: absolute-top: 35% -width: 5% -Altura: 40% -}A regra .arm CSS controla a cor eo tamanho de ambos os braços.
A regra .arm também controla a distância dos braços da parte superior da janela.
Alterar a largura dos braços para 3% e, em seguida, clique em Executar para dar Douglas braços magros.
Localizar a regra CSS para o braço esquerdo de Douglas.
Adicionar propriedades para alterar a largura seja maior do que a altura.
Por exemplo:
#leftarm {position: absolute-left: 70% -width: 27% -Altura: 5% -}Clique em Executar para ver a alteração. Douglas agora está apontando para fora da tela, como você pode ver aqui.
Douglas está apontando!
Na última etapa, você adicionou uma largura e altura de uma regra com um selector de ID, embora o elemento selecionado já tinha uma largura e altura aplicado usando um seletor de classe.
Mesmo que já havia uma largura e altura para o braço esquerdo, o braço assumiu a nova largura e altura da regra com o seletor de ID.
cascata compreensão
braço esquerdo de um robô só pode haver uma largura e altura. Então, o que acontece quando duas regras CSS diferentes tentar definir a largura e altura do braço separadamente? O que acontece é que o navegador detém uma competição entre as duas regras CSS.
O navegador olha para fatores como qual regra CSS foi definido passado e qual deles é mais específica para determinar qual a largura e altura será realmente utilizado.
Nesta competição em cascata, os atributos ID conquistar atributos de classe, porque eles são exclusivos de um único elemento e, portanto, mais específico do que atributos de classe.
elementos de posicionamento com CSS
Além de dar-lhe a capacidade de mudar as cores e como elementos aparecem em um navegador, CSS também permite alterar o local onde na tela um elemento aparecerá. Alterar o local onde um elemento aparece é chamado posicionamento um elemento.
Alterar a posição de algumas peças de Douglas:
Localizar a regra CSS que controla o olho direito de Douglas.
#righteye {position: absolute-left: 20% -top: 20% -}A primeira propriedade, posição, diz ao navegador como interpretar as propriedades de localização específicas (tais como superior e esquerda). Quando você usa posicionamento absoluto, o elemento selecionado (o olho neste caso) pode ser posicionado em qualquer lugar na cabeça sem a sua necessidade de se preocupar se um outro elemento na cabeça vai empurrá-lo para fora do caminho. Se dois elementos posicionados absolutamente são posicionados no mesmo lugar, eles simplesmente se sobrepõem.
O olho direito está definido para mostrar-se abaixo de 20% (da altura da cabeça) a partir do bordo superior do elemento de cabeça e 20% (da largura da cabeça) para a direita da margem esquerda da cabeça.
Mova o olho direito para a esquerda e para cima, alterando o valor de ambos para a esquerda e de cima para porcentagens menores.
Por exemplo:
#righteye {position: absolute-left: 10% -top: 10% -}Clique em Executar para ver os resultados, como mostrado aqui.
Douglas elevando seu olho direito.