Hoje vamos falar sobre links de estilo e listas de estilos.
Quando chega a hora de estilizar os links em sua página,
é realmente importante que você se lembre que os links são o que compõem um site.
É essa interconectividade que ajuda as pessoas a ganhar conhecimento.
É o que ajuda os mecanismos de pesquisa a ajudar a vincular seu texto e
conteúdo ao texto e conteúdo de outra pessoa.
Então, hoje vamos falar especificamente sobre links porque
eu quero que você pense sobre como você está estilizando.
Em geral, quando você vai para estilizar um link, você pode usar
todos os mesmos atributos diferentes que você tem usado para todo o resto.
Seus cabeçalhos, seus parágrafos, coisas assim.
No entanto, links têm uma propriedade adicional especial
chamada text-decor.
Então, neste exemplo aqui, o que eu tenho acontecendo é que
em vez de ter meus links em linha, o que significa que eles vão ao lado um do outro,
eu vou dizer, hey, eu quero que meus links sejam separados, um em cima do outro.
Então, espero que a maior parte desse código pareça familiar para você.
Você tem essa idéia de que a tela é bloqueada, ele vai para baixo um do outro.
O peso da fonte, quero que seja um pouco ousado.
Defini uma nova cor e uma nova cor de fundo.
Agora eu defini uma largura, e, se você tentar definir uma largura e
ela não funcionar, lembre-se, os links por padrão são inline e
eles não levam uma largura a menos que você os altere para bloco embutido.
Eu também vou alinhar o texto, adicionar um pouco de preenchimento, e esta decoração de texto,
nenhuma, isso é novo.
Aqui diz, hey,
eu quero me livrar desse sublinhado que geralmente aparece por baixo de links.
Então eu passei deste aqui no canto superior
para algo que um pouco mais estilizado aqui em baixo.
Na verdade, quase nem parece um link.
Então vamos falar sobre isso.
Às vezes, ao instalar seus links,
as pessoas realmente tentam fazer com que pareça muito mais com botões.
E queremos evitar isso porque queremos ser semânticos.
Se você quiser um botão, use um elemento de botão em vez disso.
E você pode fazer isso muito simplesmente colocando a tag de botão em vez
da tag âncora.
E novamente, da mesma forma que você pode estilizá-lo de muitas maneiras diferentes.
Mas o que eu quero que você entenda é que há
tantas coisas diferentes que você pode fazer com links e tanto estilo que você pode fazer com
eles, certifique-se de que as pessoas entendam que é um link que eles estão olhando.
Ou, se eles estiverem usando um leitor de tela, é um link que eles estão ouvindo falar.
Então, outra coisa nova sobre links,
que nunca vimos antes, é essa ideia de que os links têm estados.
Você já notou que, quando você vai a uma página web,
algumas das ligações são azuis, e algumas delas são roxas?
E, você percebe, depois de um pouco,
os que são roxos, eles estão lá porque você já os visitou, antes.
Então, o que temos, é que temos esses estados diferentes.
E eu vou revê-las muito rapidamente e depois,
quando falarmos sobre o que são chamadas de pseudo-aulas, falaremos sobre elas ainda mais.
Mas rapidamente, um a com este link de dois pontos aqui
simplesmente diz que este é apenas um link normal, você já viu isso antes,
um; visitado diz aqui está um link e meu navegador me diz.
Ele sabe que eu já cliquei nele antes.
Por padrão do navegador, ele será uma cor diferente.
Nós também temos um link com a atividade sobre ele.
Então você deve ter visto isso quando você segura o mouse sobre
algo, como se eu estivesse segurando a caneta aqui.
É que vai fazer algo louco.
Talvez mude a cor ou coisas diferentes como essa.
Portanto, o cursor do mouse é ativado mantendo o mouse sobre um link.
Que tipo de traz à tona uma questão interessante de
se isso funciona em telas sensíveis ao toque?
Quando você está desenvolvendo sua página, você precisa lembrar que o pairar não é necessariamente
vai funcionar se as pessoas estão acessando em um telefone ou tablet ou algo assim.
O que me leva a outro estado chamado foco.
Então, o estado de foco é o que acontece quando alguém está abando sua página.
Como eles batem aba ele vai saltar de elemento para elemento.
E quando chegar a este link em particular, ele vai saber que eu estou em foco, então
se você quiser fazer algo diferente, talvez a mesma coisa que você faz quando as pessoas pairam,
é assim que você pode acionar essa atividade.
Ok, e o último é aquele que eu realmente acho que é o mais estranho de todos,
eu talvez até chamá-lo de burro, mas eu não
criei a Internet e HTML e respeito, mas é muito estranho, porque o que este diz é hey,
este é o link assim que eu estou clicando nele.
E a razão pela qual eu acho que isso é estranho é porque para a maioria de nós
, quando clicamos em um link, vamos para uma nova página
para que nem vamos ver o estilo aconteceu.
Tudo bem?
Vamos falar sobre como fazemos isso.
Mas antes de o fazer, mais uma vez voltamos a esta ideia de precedência.
As folhas de estilo em cascata são muito grandes nisso.
Se você decidir que deseja usar esses estados diferentes,
há algumas regras que você precisa lembrar quando estiver escrevendo suas folhas de estilo.
Primeiro, se você estiver indo para usar um:pairar ele deve vir depois de um:link.
E em seguida, um:visited e a:active eles devem vir depois de um:pairar.
Então é apenas essa hierarquia que está acontecendo enquanto você está revestido suas páginas.
Então vamos ver um exemplo agora de algum código e como eu estou estilizando meus links.
Neste exemplo,
o que eu tenho aqui é que eu apenas tenho três links que eu não estilizei de forma alguma.
Eu tenho um link para introdução ao web design,
um link para a Universidade de Michigan, e um link para a Universidade Estadual de Kent,
que é onde eu fiz minha graduação.
Mas o que acontece quando eu vou em frente e eu adiciono algum CSS a ele?
Aqui em cima, eu tenho todas as coisas típicas que temos falado antes,
a largura e a cor.
Eu adicionei a decoração do texto, e
o que eu também queria adicionar é essa idéia de margem onde eu posso centralizar cada
um dos meus links um em cima do outro com um pouco de espaço entre eles.
Tudo bem, então vamos dar uma olhada no que parece e
você pode ver que cada link parece muito diferente, ok?
E você pode ver quando eu vejo minha caneta,
quando eu passar o mouse sobre cada uma delas, o que acontece é que a cor muda.
Como consegui que isso funcionasse está bem aqui.
Sempre que meu link entra em um estado de foco,
ele sabe mudar a cor de fundo e a cor da fonte.
Ok, bem, o que é um: foco, e o que eu tenho aqui em baixo um pouco, um: ativo?
O que está acontecendo aqui é que eu coloquei no a:focus para
as pessoas que estão abbing através da minha página.
Então, enquanto você me observa guia, você pode ver Introdução ao Web Design entra em
foco, e então a Universidade de Michigan,
e então Kent State, e eu estou fazendo isso por tabulação através da página.
A última regra, a regra ativa, é algo que eu vou mostrar a vocês e
depois meio que partir daí.
Como funciona o ativo é que quando você está realmente clicando em uma página,
ele vai adicionar uma borda em torno desse link.
Agora, o tipo de coisa estranha é que assim que eu terminar de
clicar nós vamos para uma nova página.
Então ele meio que se rompe, você não consegue ver essa fronteira
a menos que eu a segure deliberadamente, apenas assim.
Então, neste exemplo eu tentei mostrar as duas maneiras diferentes que você pode
estilizar links.
Agora vamos continuar e pensar sobre isso com um pouco mais de detalhes.
Quando você estiliza esses links, mais uma vez eu não posso enfatizar o suficiente a importância da
acessibilidade, nós queremos ter certeza de que seus links são links e
que as pessoas sabem que eles estão lá.
Uma vez que você terminar de brincar com links, vamos em frente e
começar a pensar sobre os itens da lista de estilo.
Quando você lista de estilos, o tipo de propriedades padrão todas elas têm a mesma aparência.
Você tem o um, dois, três ou o círculo, círculo, círculo, mas
podemos mudar tudo isso, podemos mudar as coisas além da fonte e
da margem para olhar para o estilo que suas listas estão assumindo.
Algumas das coisas que podemos ver são o seu tipo de lista, a
sua imagem de estilo de lista.
A posição do estilo da lista e apenas o estilo da lista em si.
O tipo de estilo da lista basicamente diz como você quer que eu indique os diferentes
itens da lista?
Por padrão para listas ordenadas novamente, temos o um, dois, três, mas
você pode dar valores diferentes.
Você pode dizer que eu quero que ele seja menor número romano, número romano superior,
menor alfanumérico, você pode jogar com eles para obter a sensação que você quer.
Então, neste caso, passamos de 1 e 2 para A e B.
E se em vez disso eu tivesse feito alfa menor, teríamos tido minúsculas a e minúsculas b.
Quando você faz list-style-type para listas não ordenadas, tipicamente o que você tem, e
depende do seu navegador, é o pequeno círculo ou o pequeno disco.
Podemos mudar isso, e
podemos colocar exatamente o que você quer ter certeza que vai ser.
Outra opção com a qual você pode jogar é essa idéia de se livrar
completamente desses marcadores padrão, e
em vez disso, usar uma imagem personalizada em vez desse marcador tradicional.
E quando você faz
isso, meio que traz de volta a essa idéia da posição do estilo da lista.
Muitas vezes você vai mudar sua posição,
dependendo do estilo de lista que você está usando.
Aqui em baixo eu tenho um exemplo de onde eu estou dizendo que eu quero minha imagem de estilo de lista.
Eu tenho quadrado primeiro, isto diz, hey, se você não consegue encontrar a foto, vá em frente e
use o quadrado, caso contrário eu quero que você use esta foto aqui.
Tudo bem? Então vamos em frente e
olhar para outro exemplo.
No arquivo list.html, o que eu coloquei aqui são dois tipos diferentes de lista,
uma lista não ordenada e uma lista ordenada.
E eu apenas os preenchi com algumas informações diferentes.
E quando você olhar para esta tela, que eu vou fazer um pouco maior para
você aqui, se eu puder.
Você pode ver que as listas não ordenadas estão usando apenas os círculos, e
as listas ordenadas estão usando os números padrão.
Então, vamos brincar com isso agora.
Vamos em frente e colocar uma folha de estilo.
Na minha folha de estilo, eu fui lá disse, o que eu quero fazer com meus
estilos de lista é que eu quero mudá-lo para romano superior e numeral e também usar um quadrado em vez disso.
Então, isso é o que parecia antes, e isso é o que parecemos depois.
Então, você pode ver, há apenas um pouco mais de algo nisso.
E, essa é uma maneira muito simples de mudar sua página para cima
de como outras pessoas normalmente fazem sua página.
Uma outra opção que eu só queria mostrar a vocês,
porque todo mundo realmente gosta disso, é a idéia de usar a imagem do estilo da lista.
Então, eu vou descer aqui e descomentar este código.
E se você se lembra, se você tem prestado atenção a esta idéia de que quando você tem
precedência esta nova regra aqui embaixo vai sobrescrever todas as regras acima dela.
Então vamos em frente e garantir que salvei minha página, e vamos recarregar.
E agora, neste caso, o que aconteceu é que removemos esses marcadores regulares
e coloquei meu relâmpago lá dentro.
Então, fazer coisas assim não é difícil, mas
para ser honesto, leva um pouco de tempo, especialmente se você estiver usando imagens,
para ter certeza de que tudo está escrito exatamente da mesma maneira.
Os erros de digitação são realmente o assassino.
Não é uma questão de ser difícil,
é uma questão de você ter muito cuidado quando está fazendo essas coisas.
Certo, então vamos rever o que temos falado até agora.
E não só nesta palestra, mas no curso até onde chegamos hoje.
E o que eu quero enfatizar é que até agora, nós temos estilizado tags, e
essas tags sempre podem pegar esses pares de valor de propriedade e
você pode transformar sua página em algo realmente ótimo.
Estamos prestes a entrar em algo novo e um pouco diferente.
Vamos falar sobre pseudo-classes, identificações e seletores.
E eu quero ter certeza que você está confortável
construindo essas regras diferentes por conta própria antes de progredir.
Estar confortável não significa que você seja perfeito.
Isso não significa que você saiba como fazer tudo.
O que isso significa é que você está confiante o suficiente para sair e
começar a usar algumas das ferramentas que estão lá fora para melhorar seu site.
Estou listando dois deles aqui só porque eles são muito bem conhecidos no
caso do site Chris Pederick, ou eu pessoalmente apenas os achei realmente útil.
Outra opção é apenas lembrar que você pode ir lá fora e
você pode fazer uma pesquisa na web para ferramentas de desenvolvedor.
Você não é o primeiro, e você não vai ser a última pessoa a ter
problemas quando você está estilizando sua página.
Minha esperança geral seria que você realmente iria para os fóruns no
curso Coursera ou em qualquer sala de aula em que você está e pedir ajuda aos seus colegas alunos.
Porque, na verdade, a única maneira de aprender é
praticar, praticar, ter problemas, obter ajuda e continuar.
À medida que você faz mais e mais web design, eu espero que você esteja ganhando confiança
para ajudar a fazer algo realmente legal de que você vai se orgulhar.
Então, fique aí.
Obrigado.