Transcrições
1. Introdução: Olá e seja bem-vindo a outra
classe do Skillshare do turno médico, que é a segunda
no Skillshare. Isso será uma
introdução ao CSS, indo do iniciante
ao web designer. E uma hora. Como pré-requisito
para este curso, esperaria que você tenha que
concluir o designer iniciante de
chamadas HTML em 30 minutos, o que eu coloquei na minha
outra classe do Skillshare. Então você vai com isso primeiro
porque esse curso foi construído sobre o qual você
aprendeu nesse curso. E enquanto estamos
passando por cima é CSS, o aprendizado das
regras e estruturas. Então, você aprenderá diferentes tipos de propriedades para selecionar como declarações e
como você pode realmente aplicar CSS em seu próprio arquivo, além de incorporar isso
no arquivo HTML. Mencionado, você precisa
aplicar seu conhecimento e construir sobre o HTML
no curso anterior. Se você é completamente
novo na codificação, o que eu sugiro é ir
para o curso HTML primeiro, aprender a projetar
sua primeira página da web e, em
seguida, ir a este curso
para estilizar sua página da Web. Então, porque quando você está
projetando uma página da Web, você simplesmente não quer que ela
seja reproduzida apenas com texto. Você não terá
imagens e vídeos, mas precisa
ter significado
para o seu site
adicionando cor a ele, o plano de fundo a ele. Mais importante ainda, como você ajusta as imagens a estilos diferentes
e confusos. Este é um
curso introdutório e como você pode fazer, é claro, o projeto também. Nós seremos dados para que você tenha
uma chance de praticar habilidades. E, finalmente, você
usará o Visual Studio Code, a versão gratuita
para Windows ou Mac, e baixará no Google o código do
Visual Studio no navegador da Web e acessará o site oficial
onde você pode obter sua
versão específica, dependendo do sistema operacional
que você está usando. É isso para o primeiro vídeo, vou ser CU em toda
a classe Skillshare nas próximas duas
imagens, enquanto
demonstramos a você como você pode realmente estilizar e construir em
sua página da Web. Vejo você na próxima vez.
2. Como criar e vincular um arquivo CSS: Olá e seja bem-vindo de volta
ao segundo vídeo da série de web designers CSS. Vamos analisar como você pode realmente desenvolver seu
site com cores, plano de fundo e
estilo como desejar. Então, como você pode ver aqui, se você já passou
pelo curso anterior, verá
que este é
o site básico que
criei com HTML. Agora você deve estar pensando em
como podemos realmente expandir isso para melhorar o
seu lote. Então este é o site aqui. O que eu fiz foi que
abri isso em servidores ativos, então você pressiona Control, clica e abra com o Live Server. Você pode
ver isso automaticamente aqui, certo? Então, se você quiser
saber mais sobre isso, se você voltar ao curso HTML
anterior, você pode ver como eu fiz tudo
isso voltando aqui. Se você quiser desenvolver CSS, primeira coisa é CSS
significa Cascading Style Sheets. É basicamente o arquivo que ajuda seu
site a criar, agarrar cor, fundo
e como estilizá-lo. Então, vamos criar um arquivo CSS. Então, se você entrar neste
sinal de mais aqui, aqui, primeiro ponto de página CSS. Agora, o motivo de eu
colocar a primeira página é porque o arquivo HTML é o HTML de ponto da
primeira página. E será uma boa
maneira de lembrar esta primeira página, apenas CSS aqui. Uma vez que criamos isso, agora queremos saber como
podemos vincular os arquivos juntos. Para vincular
a arquivos juntos, primeiro
você deve entender que esses dois não estão conectados. primeiro estágio, o
segundo estágio seria, é conectá-los. O terceiro estágio seria
ver se você fez isso corretamente e isso
está realmente funcionando, o que estaremos trabalhando
em alguns vídeos. Vamos dar uma olhada aqui. Para que
seu site funcione, você teria que escrever um link. Digamos, por exemplo, que você queira
ter o CSS de ponto da primeira página. Esta será uma folha de estilo
igual distorcida, pois aqui você criou um link para sua página CSS. Então é basicamente
assim que você
primeiro realizaria o documento CSS. Na verdade, vincule-o. Neste momento, você não deve
ver nenhuma atualização usar em nada lá uma vez
ou colocar algo lá dentro, então você poderá
ver se funciona. É isso que a primeira parte é realmente fazer
o documento CSS. E as próximas
partes
se concentrarão em como você pode realmente expandir isso e como ele pode realmente atualizar
sua página da Web à medida que você avança. E te vejo
no próximo problema.
3. Como adicionar a primeira cor: Olá e seja bem-vindo
à terceira parte desta aula do
Skillshare, onde verei como você pode começar a adicionar cor
ao seu site, começando com a fonte. Vamos aqui. Você pode ver aqui que isso está
vinculado ao seu HTML. CSS de ponto da primeira página.
Este é o arquivo. Então, se você quiser começar a
escrever código e CSS, a primeira coisa que
você quer fazer é entender o que está
escrito em HTML. Se quisermos estilizar
o título aqui. Meu primeiro site vai
até aqui. Um está escrito aqui, meu tipo aberto H1, gravata
fechada, meu primeiro site. Você quer estilizar isso? Então, a maneira como ele é escrito é um, abra colchetes curly,
colchetes fechados usando
IntelliSense. Fechar. Basicamente, é
assim que você escreve em CSS. Agora, como isso parecerá óbvio, você quer ajustar a
cor, a codificação de cores à ortografia
americana e ela será codificada por cores, assim como pode fazer disso uma
cor vermelha, ponto e vírgula vermelha. Sempre não se esqueça
do ponto e vírgula porque muitos ponto-e-vírgula
ainda falham. Agora pressione Salvar ou Command Save no Mac, controle as janelas salvas. Automaticamente, a
magia começa a acontecer. A cor do primeiro site acabou mudar para a
cor preta para a cor vermelha. Vamos tentar uma mistura
de cores do que
tentarmos azul e depois por mudanças
para azul com o trabalho. Sim, funcionará
porque só muda de cor. Azul, violeta talvez
vamos tentar isso. Isso virou sem fio azul. Então você entende, é realmente solicitado quando você escreve na sintaxe correta, então você pode ficar de pé. Como você deseja fazer é que
este é o selecionado que a propriedade type
foi assinada a ela. Depois de entender
o código aqui, na verdade
é bem simples a maneira como você
o escreve para os outros. Então, digamos que você queira estilizar parágrafo talvez com
o parágrafo fora, digamos que seja a tag p, ok, então é uma tag p. A melhor maneira de aprender é ir até aqui, certo? Espaço P, etiqueta aberta, fechar, cor. Vamos tentar cores aqui. Digamos que você queira colocar essa nova cor verde, ponto e vírgula. Basta ficar verde. Então
você deve ser para você, por que está ficando
verde para esses três aparecerem verdes aqui? Porque eu os coloquei
na tag de parágrafo. Quando ele os colocou na tag de
parágrafo, acontece é a mudança de cor do que esta? É por essa
parte do vídeo. Você vai passar por cima. A próxima parte é como
você estiliza sua cor. Então eu te vejo
no próximo.
4. Como adicionar cores de fundo: Bem-vindo de volta a
outro vídeo dentro da classe Scotia de CSS desde o
início do site AT. E este estará
vendo como você pode realmente adicionar cores de fundo e partes coloridas diferentes a um site sem alterar
algumas outras partes. Se você pode ver aqui
você tem uma rede div id. Então, se você se lembrar
no vídeo anterior, vimos como
colorir cada um dos desejos. Então, temos o primeiro site de
malware. Isso é basicamente em H1. Colocamos isso em uma tag,
portanto, tínhamos um seletor. Agora, por exemplo,
se não
tivermos esse pote e cor e não
tivermos essa parte, digamos que uma cor aqua que temos que fazer é realmente anexar isso a
essa parte específica do site. A principal coisa a
lembrar sobre isso é que você precisa usar
algo chamado ID. Se você voltar para o
curso HTML, você o verá. Um ID é basicamente o que dá
aos parágrafos o nome. Div id igual significa usar isso
apenas para colorir esta seção especificamente
ir daqui para aqui. Para colorir esta primeira
ferramenta para empurrar a rede de hashtag, abrir colchetes encaracolados
e, a partir daí, você
pode digitar a cor, que pode ser verde. Cor de fundo. É assim que você coloca o
fundo no aqua. Eu salvei isso. O que deve acontecer é que você
veja essa cor ficar verde neste texto aqui cercada
por uma coluna azul. É assim que
geralmente colocamos cores com o ID e,
na
verdade, estilizamos ainda mais. É assim que você pode criar
diferentes partes do site. Cores diferentes não são praias. Aqui, vamos ver o melhor
código como destino. E poderíamos ter aqui, esta é uma aula. Em vez de ter
essa aula mudar ID
hoje à noite e torná-lo melhor
do que eu quero que você aprenda. O ID é igual ao destino. Então, ok, vamos
mudar isso para uma div. Mudou todo o caminho aqui. Então você tem sua div aqui. Vamos ter outra tag
go discover h2. Melhor, o codificador não deve ver
nada muda muito aqui. Então o que acontece é se você voltar aqui
já que temos a div, agora vamos chamar esse div
id igual a destino. Depois de fazer isso, o que acontece
é se você voltar aqui, destino capaz de ter uma cor de
fundo de roxo. O que deve acontecer é o autoatendimento atualizado
não está funcionando. Vou olhar por
que não está funcionando partir daí para
descobrir como você fez para basicamente olhar para destino aqui,
dividir melhor codificador. Aqui. O que deve acontecer
é se você clicar aqui, clicar aqui, então o que acontece? Ele se atualiza. Donut aqui. Você precisa salvar
cada página em página, HTML ou CSS
para atualizar isso. É para este vídeo, onde olhamos nos
próximos vídeos,
como mudou o peso da fonte, o tamanho da
fonte e o estilo da fonte. E te vejo
no próximo.
5. Aplicando elementos universalmente usando Asterisk: Olá e seja bem-vindo de volta outro vídeo na classe
CSS Skillshare. E desta vez veremos
como podemos aplicar propriedades que têm uma infecção toda a página da
web e a coisa será analisada hoje é
usar o asterisco selecionado. Então, se eu colocar o
asterisco selecione aqui, acontece é para que eu possa
aplicar uma propriedade, assim tem o uso de uma borda. Portanto, se você quiser aplicar uma borda específica
a
todos os sites, basta atingir a borda de
um pixel, cor sólida. Portanto, o que acontecerá? Deve ver um quadro
ou contornar
todo o seu site
e o rodeia. Então, como mudamos a cor? Então, novamente, podemos colocar isso aqui. E isso também mudará a cor dependendo da
espessura que você deseja ir lá. Se você o tornar muito grosso, isso também pode afetar a intensidade
da aparência no site. Então, portanto, quanto menos
for, melhor. Depende do
quanto ela queria
ter a vocês dois a
razão sendo aparecida em torno de certas palavras porque elas estão sob certos
títulos e desenvolvedores. É por isso que o
quadro aparecerá. Isso é o que
olhamos agora. Assim, também podemos ajustar
a cor de fundo, que você poderia ter,
digamos, uma cor de praia. Isso lhe dá uma cor de pêssego que você pode mudar
isso para uma cor vermelha. E isso lhe dará uma cor vermelha. E, portanto, você tem amarelo, nenhuma mudança para amarelo. É assim que você pode
realmente estilizar seu site para dar uma cor completamente
diferente. Então, parece bastante
interessado em saber
como você pode usar a função
asterisco. Para isso, apenas uma
boa cor receberia pH. Então, na verdade, mostra
como funciona. Às vezes, você pode realmente ter um erro e ele não funcionará. Portanto, certifique-se de verificar
por que não funcionou em
primeiro lugar. Isso ajudará você a melhorar completamente
suas habilidades, porque se sua sintaxe for a maneira como você escreve o
código está incorreta, ela mostrará um erro e a propriedade exata que você
não aparecerá então. É isso para este vídeo. E o próximo é,
vou mais longe sobre como você pode
estilizá-lo também. Obrigado por assistir isso e te vejo
no próximo.
6. Como adicionar como alterar cores após o Hovering: Olá e seja bem-vindo a
outro vídeo da série
Scotia ou o CSS indo do
início ao web designer. E bem, vou
mostrar como você pode tornar seu site
mais interativo, especialmente onde mais
público visita seu site e
realmente colhe alguns de seus parágrafos. Então, digamos que quiséssemos ter essa linha verde ou
verde na cor. E quando alguns paira sobre a raiz atualmente quando você passa o
mouse sobre ela, na verdade não
há cor. A maneira de melhorar
isso seria
escrever o seguinte selecionado. Então escreva espaço de dois pontos P. Agora, o motivo de refazer
isso e apenas nos dar pouco espaço sem suporte
encaracolado aberto, então tente colorir a ganância da
linha. Diga isso. Agora, o que deve acontecer é sua cor basicamente passe o
mouse sobre quando está aqui, então isso parece muito
mais interessante, não muda de
cor quando você paira o mouse? Agora, a próxima coisa que vou fazer
é ter uma cor de fundo. Vamos economizar em cima do azul. Acontece é, na verdade,
substituir a cor azul. Cor verde aqui. Parece verde abaixo do azul aqui, tornando-o um pouco mais interessante em comparação com antes. Portanto, há alguma forma de
interação, então é CSS. Você não precisa particularmente outra
linguagem de programação como JavaScript para criar cores. Css é um serviço muito poderoso e forneceu
o fundo colorido e também os diferentes tipos de formatação que você deseja
em seu site. Isso realmente
ajuda seu público a se envolver mais com o
site aumenta o tráfego, bem
como o fato de
que eles acham que você é realmente mais experiente
e criando sites. E, na verdade, aprendemos isso, escrevendo alguns pequenos
pedaços de código. Você pode alterar a parte superior do
convidado do seu site. Então, novamente, esse é o tipo
de
interatividade do site. É isso para este
vídeo fazendo o show, que é para ajudá-lo a entender as diferentes pausas de como
você pode criar no
site do repositório e realmente aumentar sua compreensão de
criar um site em geral. Obrigado por assistir a este
vídeo se você gostou, continue assistindo a
esta aula do Skillshare. E espero que você se junte a
nós e nos veremos no próximo.
7. Cursos: Olá, e bem-vindo de volta
ao outro redu na classe
CSS Scotia enquanto analisamos como podemos usar algo chamado classes para tornar
seu site mais interativo. Então, se você voltar
aos vídeos anteriores, verá
que
falei sobre o
ID do consultor e como você pode usar uma hashtag especificamente para usar a
TI para colorir seu site. Ok, então desta vez
olhamos para as aulas e a diferença
entre classes e IDs. Comece com a aula. Você o tem aqui dentro da própria seção de Davis
incorporada. Você verá que o
destino é hashtag. destino com a classe
que precisamos é classe de pontos. Então, neste caso, título de ponto. É disso que queremos
mudar de cor,
portanto, seu sinal. Isso é falso. Se eu apenas atualizar esta
página, acontecerá. Ainda está lá? Então, o que precisamos fazer
aqui é a luta dela. Basta escrever ponto. Volte aqui e
diz título de ponto. A cor nos dá uma
cobertura do solo. Este prompt de alteração. Então, claramente, a diferença
entre, como mencionei, entre a ideia e
as classes precisa usar um ponto onde a classe é chamada, como título,
e colchetes encaracolados, mesmo que antes,
destinos de largura , hashtags. Portanto, essa é uma boa maneira de
lembrar qual você gosta. Cabe a você se você
prefere TI com hashtag, preferimos a
largura da classe para ela e,
na verdade, torna mais fácil para os codificadores pular entre realmente escrever muito código no
HTML, especificando tudo. Se você puder apenas
vinculá-lo a um novo arquivo CSS, e isso torna seu código muito mais limpo em comparação com
todo o arquivo HTML. Isso realmente ajuda
a acabar com isso. Agora, se eu fosse introduzir
o conceito de fontes, você
possa ter um tamanho de fonte, digamos que o título, queremos que isso seja
grande, digamos que toque. Acontece ser
razoavelmente pequeno porque definição
pré-programada
sugere que esta é a ciência. Digamos que se você
quiser ajustá-lo,
assim, cerca de dez
pixels usarão menores. Agora você quer torná-lo maior, 100 pixels. E bom jeito. A melhor coisa é, em vez de usar
a palavra médio ou grande,
use, na verdade, a
especificidade dos pixels em si usa um número específico de pixels torna um enorme
Alex bastante grande. Alguém foi atenuado
para torná-lo um pouco menor. Este tipo de
videoclipe razoável que olha para uma árvore feminina. O que aprendemos aqui é como
usar o tamanho da fonte para a cor. Eu quero a família de fontes. Você pode ter seleções
diferentes. Vamos usar o Segundo Genebra,
****** e san-serif. Isso altera
toda a família de fontes completamente do seu parágrafo
ou, neste caso, o título. É isso para este vídeo. Então eu te disse
muitas coisas agora. Então eu disse a você como
usar uma classe, especificamente o
título de ponto, a cor, os tamanhos da fonte, como
você ajusta o tamanho, a fonte e a família de
fontes é como você simplesmente digita uma fonte
que acompanha. Mais uma vez, espero que você tenha gostado disso e nós o
veremos o próximo.
8. Como alinhar texto: Olá e bem-vindo de volta
a outro vídeo desta série CSS, onde
verei como você pode alinhar seu texto de acordo com os requisitos do
seu site e realmente melhorar
a legibilidade do seu site também. Então aqui você pode ver todos os textos
foram alinhados
ao lado esquerdo do site. Agora vamos dizer que se você
quiser se alinhar
ao centro e realmente fazer com
que pareça mais interessante, realmente chame a atenção do
público para certas partes do seu site que podemos usar
é algo chamado de função seletor de alinhamento de texto. Então, digamos que eu tenha
um e você queira alinhar especificamente
aqui, texto. Agora você pode ver aqui que há
muitas funções diferentes. Veremos o
esboço dos textos para hoje, Centro. Dr. Hit Save. E o que acontece é que ele o
alinha ao centro
do site. É assim que você se alinha em direção
ao centro e realmente
consegue o que deseja. O que acontece se você quisesse
colocar de volta para a esquerda novamente, você poderia fazer isso. E nós iremos imediatamente de volta. Mas vamos apresentar. Usando algumas habilidades profissionais, colocará isso à esquerda. Então isso vai para a
esquerda, imediatamente, adivinhe por dois e para a
direita ele vai mudar para correr. Agora, vamos dar uma olhada
especificamente se você quiser alinhá-lo de acordo com
os elementos pais, direita e esquerda. Então você pessoalmente liga para
justificado apenas para comprar basicamente significa que você quer
raciocinar quantidades. Este site pertence à esquerda porque cidade para posição. E quer ir lá porque sua
posição natural onde você quer que seu texto seja
super olhando para isso, podemos realmente ajustar de
acordo com o que desejamos. Agora, se você fosse procurar
algumas outras partes diferentes,
agora, você tem que classificar a cor. Ok,
cor de fundo, digamos alinhar o texto. Vamos ver o que temos
é que o centro
acontecerá é se alinhar o
texto no centro. Então, isso realmente ajuda
você a manter como você deseja agendar a cor de
fundo. Neste caso,
melhorou um site. E então vamos chamar isso
aqui em termos de lista. Voltando ao nosso HTML, que olha para o que colocamos aqui, então colocamos isso como uma lista. Portanto, é
por isso que ele aparece e você pode mudar seu
trimestre como quiser. E basicamente se você
quiser lançar o direito, será o,
não parece tão bom. Então, vou desfazer
o centro novamente. Isso parece bom. Talvez porque como o lado de
notícias de para a esquerda mais,
seja igual a algumas formas diferentes
de textos indo em todos os lugares. Então, se voltarmos aqui, apenas
salvamos isso. Este é o título,
texto para linha. Isso é o que
aconteceria, então ele deve se mover para trás então. Então é assim que
funciona de acordo com como você gostaria de fazer é
que acabamos de nos livrar disso. Apenas se concentre nisso especificamente. Agora, se formos aqui, alinhar texto, direita, o motor de texto direita
e esquerda vai para a esquerda. E, basicamente,
entender isso é um conceito-chave para
melhorar o código. Puramente porque se
você souber onde
colocar seus textos e
torná-lo muito mais fácil ao realmente projetar seu site para que você não
precise pensar nisso. Quais textos vão onde,
se você desenhar em um pedaço de papel que você
queria escrever, use textos alinhados. Cada um pode
ser uma ferramenta poderosa. De qualquer forma, isso é suficiente de
mim por enquanto, para este vídeo. Os primeiros vídeos que
veremos como podemos melhorar ainda mais o
site. Obrigado por ouvir. Vejo você no próximo.
9. Imagens de fundo em CSS: Olá e seja bem-vindo de volta ao segundo ao último vídeo da série de
habilidades Skillshare. Enquanto estamos analisando como
adicionar uma imagem de fundo no arquivo CSS
para vincular isso ao seu site analisado
no curso anterior para HTML e será
visto nisso, CSS pode basicamente
adicionar o imagens. Enquanto em HTML, podemos
realmente adicionar imagens diretamente no site
usando o turno IMG. Agora vou ensinar-lhe
como usar um seletor de CSS usando especificamente
se você tiver a classe,
ok, então, se
voltarmos aqui, o que temos é imagem de classe div. Então, queremos legendar a
troca
divertida de Star Wars e C é colocado uma imagem. E vou vincular isso para ser imagem
de fundo à coisa chave. Ele só presta atenção a
esta imagem de fundo, URL, logotipos
médicos aqui,
que você coloca a imprensa salvar automaticamente. O que acontece é que você nos
atualiza depois. E é assim que você
basicamente como a imagem dentro de seus arquivos
olhando para isso até agora, nós realmente
começamos nosso site muito mais do que antes. Return é adicionar algumas imagens
para realmente aumentar a interatividade para o site são muito
simples, mas o site básico. Usando esta ferramenta poderosa, imagem
superior, imagem de fundo, você pode realmente
ter
as imagens em primeiro lugar e você pode realmente apenas
quantidades disso também. Então você quer conter tudo
isso para ser assim. Será uma imagem pequena, mas ainda assim a replicará. Digamos que você tenha outro. inicial acontece é que apenas uma imagem inicial também mudou a posição
das imagens. Vá para a direita ou para a esquerda. Podemos fazer todos os tipos de coisas
diferentes,
especialmente com isso. E obrigado por
ouvir isso e espero que tenha gostado desta aula e eu vou fazer um vídeo divertido. Podemos procurar abaixo. Muito obrigado e te
vejo no próximo.
10. CONCLUSÃO: Olá e bem-vindo ao
vídeo final na introdução ao CSS começando ao web design e uma hora da série Skillshare. Neste vídeo, vou analisar os diferentes tipos de CSS, regras e estrutura por trás dele. Aplicando conhecimento
e construído sobre HTML no curso anterior. Claro, projetos,
que vou
colocar , mas nos projetos abaixo. Sim, muito obrigado
por realmente tentar esta sessão de habilidades da Escócia
e trabalhar seu caminho através das diferentes
classes e lições que são
colocadas e use o Visual Studio
Code baixando isso, basicamente o que você
fez foi criar seu próprio site
usando HTML, CSS. Eu te ensinei em toda
a variedade de vídeos. E este curso agora é oficialmente uma
introdução completa ao CSS, começando a um web designer. Obrigado por participar
e pelo futuro, estarei fazendo um curso
mais avançado no carregamento de CSS para
ensinar como desenvolver seus conceitos básicos e como ele está
melhorando a analogia de uma toupeira. Espero que você tenha gostado disso
e eu o vejo
na próxima aula do Skillshare
que será lançada. Obrigado. Tchau.
Medic 10, Medical Student + YouTuber
