css

materiais de moldagem

door luana vitória

bootstrap

door ana nakamura

Swot

door Ivan Jacauna

AMBIENTE ORGANIZACIONAL

door Danielle Silva

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