css

Lisää tämän kaltaisia

Cimento de Iônomero de Vidro

luonut Rafael Nicolella Fetter

Tipos de gráficos

luonut Lorena Lara

Propriedades Coligativas

luonut Júlia Delaías

Esporte

luonut MIKAEL JACKSON DAVI DE MACEDO

AULA - CSS - INTRODUÇÃO (ANA LUCIA NAKAMURA) ana.nakamura@gmail.com BIBLIOGRAFIA FREEMAN, Eric; ROBSON, Elisabeth. Use a Cabeça! HTML e CSS. Alta Books, 2015. MCFEDRIES, Paul. Web Coding & Development All-in-One For Dummies. John Wiley & Sons, 2018. W3Schools. Disponível em: . Acesso em: 20 nov. 2021.

5

4

3

2

1 Folhas de Estilo (css)

Cascading Style sheets

SASS

uma "extensão" do CSS

+ recursos + facilidades

Syntactically Awesome Style Sheets

"Folhas de Estilo com uma sintaxe incrível"

responsáveis pela apresentação da página html

Folhas de Estilo em Cascata

Na Prática

Primeiros Passos

LAB - W3SCHOOLS

https://www.w3schools.com/css/tryit.asp?filename=trycss_syntax1

Arquivo HTML

Arquivo CSS

EXERCÍCIOS

Checagem de Entendimento com ferramenta de manutenção (DEBUG)

aprendendo css e resolvendo problemas com Inspect

básico / compreensão / introdução à manipulação de códigos / adição + propriedades

1 - formatando parágrafos

Troque as cores dos parágrafos, de vermelho para azul. Troque o alinhamento do texto (text-align) para esquerda (left). Adicione um título H1 com o texto: "Laboratório de estilos" Adicione uma regra para que o elemento H1 tenha tamanho 30px (font-size), e cor laranja (orange).

no Mercado

É possível que na prática, dentro de uma empresa, não seja necessário criar essas páginas do zero - ou porque as empresas já tem modelos prontos, ou porque os sistemas que gerenciam os conteúdos web também geram as páginas dinamicamente.

Mas mesmo para fazer a manutenção adequada, o conhecimento da lógica, das tags, elementos essenciais, e suas propriedades e valores mais comuns são imprescindíveis, e vão economizar muito do seu tempo de tarefas.

Aprender a interpretar os problemas propostos nos exercícios nos faz treinar as pesquisas e a resolver "bugs". Mais do que habituar-se aos códigos, e dar respostas, saber fazer as perguntas certas pode te fazer um programador diferenciado e melhor.

Onde Mora o CSS ?

dentro da "casa" - arquivo.html

"o quarto" pronto para receber o código em css - MAS é um modo pouco recomendado.

o código css, agora no padrão, e no mesmo arquivo .html

é possível fazer desse modo, em caso de páginas muito simples. Em geral, prefira fazer o arquivo.css separado, garantindo a fácil manutenção e escalabilidade.

arquivo.css

arquivo básico de css

importante informar no arquivo.html: nome e caminho do arquivo css

Nomeando e Organizando "coisas"

{ATENÇÃO}

note que para cada elemento HTML (SELETOR), as {propriedades e valores ficam "cercados" entre chaves}

note que após cada valor há um sinal de ponto e vírgula ;

blocos de código css são iniciados por ELEMENTOS HTML, e definem REGRAS

exemplo de arquivo.css

"dar nome aos bois" : Aqui temos as declarações de Regra de CSS E neste caso, o seletor é o elemento html - h1

: (o sinal de dois pontos separa a propriedade e o valor)

font-size: 18px;

font-size é a propriedade 18px é o valor

color : darkblue;

color é a propriedade darkblue é o valor

Conhecendo um .css e suas funções

ANALOGIA OPERA HOUSE

só o HTML - ESTRUTURAS

adição do CSS = FORMATAÇÃO

https://constructapp.io/pt/13-fotos-de-obras-antes-e-depois/

html + css =

página estruturada e formatada

EXEMPLOS

site UOL com e sem a folha de estilo carregada

notícia com css

ainda com .css

mesma notícia sem css

menus uol sem formatação css