Borda | Parte 2 | Tutorial de CSS | #06 | #uninerds | Universo dos Nerds

Channel:

Universe of Nerds

Subscribers:

2,410

Published on January 18, 2018 2:00:01 PM ● Video Link: https://www.youtube.com/watch?v=BP03Ut_GvNs

Category:

Tutorial

Duration: 16:00

30 views

3

Mais informações:
http://www.uninerds.net/?locale=pt_BR#!html-css-e-javascript/tutorial-de-css

Redes Sociais
Facebook: https://www.facebook.com/uninerds
Twitter: https://www.twitter.com/uninerds
YouTube: https://www.youtube.com/user/uninerds?sub_confirmation=1
LinkedIn: https://www.linkedin.com/company/uninerds
Instagram: https://www.instagram.com/uninerds

Gostou do vídeo? Veja 10 opções de como você pode apoiar o Universo dos Nerds:
https://youtu.be/KYAljlRtlb4

Faça parte de um grupo focado em Tecnologia: https://www.facebook.com/groups/DevAt

Hashtags: #uninerds #css

Afiliado: http://www.cursos24horas.com.br/parceiro.asp?cod=promocao131331

Contato: uninerds@uninerds.net

Todas as tags em HTML podem ter borda e para defini-la temos as seguintes propriedades:

- border para definir em uma única propriedade o tamanho, o estilo e a cor nesta ordem
Para definir as três para cada lado temos as seguintes propriedades:
- border-top para a parte de cima
- border-right para o lado direito
- border-bottom para a parte de baixo
- border-left para o lado esquerdo
- border-color para definir a cor da borda e além dos valores possíveis para cor essa propriedade aceita o valor transparent para deixar a borda transparente
Para definir a cor da borda para cada lado temos as seguintes propriedades:
- border-top-color para a parte de cima
- border-right-color para o lado direito
- border-bottom-color para a parte de baixo
- border-left-color para o lado esquerdo
- border-radius para definir curva na borda e além de unidades de medida pode ser definida em porcentagem
Para definir a curvatura da borda para cada lado temos as seguintes propriedades:
- border-top-left-radius para o lado superior esquerdo
- border-top-right-radius para o lado superior direito
- border-bottom-right para o lado inferior direito
- border-bottom-left para o lado inferior esquerdo
PS: Se definirmos dois valores para essas propriedades o primeiro será aplicado na horizontal e o segundo na vertical
- border-style para definir o estilo da borda e pode receber os seguintes valores:
- dashed é tracejada
- dotted é pontilhada
- double é a dupla
- hidden é oculta
- none é nenhuma e está é a padrão
- solid é solida
Para bordas em 3D temos os seguintes valores:
- groove
- inset
- outset
- ridge
Para definir o estilo da borda para cada lado temos as seguintes propriedades:
- border-top-style para a parte de cima
- border-right-style para o lado direito
- border-bottom-style para a parte de baixo
- border-left-style para o lado esquerdo
- border-width para definir o tamanho da borda e além de definir em unidade de medida tem também os seguintes valores:
- medium tamanho médio e este é o valor padrão
- thick tamanho grosso
- thin tamanho fino
Para definir o tamanho da borda para cada lado temos as seguintes propriedades:
- border-top-width para a parte de cima
- border-right-width para o lado direito
- border-bottom-width para a parte de baixo
- border-left-width para o lado esquerdo

Nas propriedades border-color, border-style e border-width podemos definir as seguintes quantidades de valores:

1. Todos os lados terão o mesmo valor
2. O primeiro valor será para a partes de cima e de baixo e o segundo para os lados esquerdo e direito
3. O primeiro será para a parte de cima, o segundo para os lados esquerdo e direito e o terceiro para a parte de baixo
4. O primeiro será para a parte de cima o segundo para o lado direito, o terceiro para a parte de baixo e o quarto para o lado esquerdo

Na propriedade border-radius podemos definir as seguintes quantidades de valores:

1. Todos os lados terão a mesma curvatura
2. O primeiro será para os lados superior esquerdo e inferior direito e o segundo para os lados superior direito e inferior direito
3. O primeiro será para o lado superior esquerdo, o segundo será para os lados superior direito e inferior esquerdo e o terceiro para o lado inferior direito
4. O primeiro será para o lado superior esquerdo, o segundo para o lado superior direito, o terceiro para o lado inferior direito e o quarto para o lado inferior esquerdo

Para definir a curvatura na horizontal e na vertical é utilizado / para separar os valores em que os que ficam do lado esquerdo são na horizontal e os do lado direito na vertical e a quantidade de valores irá seguir a mesma ordem da lista anterior