Css Ninja

#css_ninja {color: black; visibility: hidden}
O que CSS? O que HTML?
HTML ou Hypertext Markup Language, uma linguagem de marcao em que as pginas web se baseiam. O HTML realiza uma srie de tarefas atravs das pginas, incluindo descrever a estrutura de informao baseada em texto para ser exibida dentro da pgina e fazer requisies dos outros elementos (css, linguagens de programao, imagens ...), proporcionando um meio para que o usurio interaja com o site ou aplicativo.
Quando uma pgina HTML fornecida para o navegador do usurio atravs da Internet, o navegador ir "traduzir" o cdigo HTML para o formato que ser exibido.
HTML escrito na forma de etiquetas, conhecidas como tags. Cada tag inclui uma tag "aberta" e uma tag "fechada", e o contedo contido dentro das tags. Por exemplo, um ttulo pode ser mostrado em negrito usando o par de tags: <b>Ttulo</ b>.
<b> Ttulo </b>
Estrutura bsica de uma pgina HTML

<html> <head> <title>Seja bem-vindo</title> </head> <body> ... contedo da pgina </body> </html>
CSS: Cascading Style Sheets
Linguagem de estilizao e formatao Funciona em conjunto com uma linguagem de marcao (HTML) Separa contedo de layout e estilo Ajuda a melhorar acessibilidade Ajuda a melhorar manuteno
Integrando CSS e HTML

Inline <p style=color:blue;>Texto azul.</p>
Embedded <head> <style type="text/css"> body { font-family:Arial; font-size:12px; } </style> </head> Linked *** <head> <link type="text/css" rel="stylesheet" href="style.css"> </head>
Anatomia de uma regra
Agregao de declaraes
Tipos de selectors tag

entidade pr-definida pela linguagem de markup utilizada
#id
Selector adequado para definio de estilo NICO.
.class
Selector adequado para definio de estilo REPETVEL.
Herana e especificidade
Uma regra herda propriedades da anterior com o mesmo nome pela ordem em que surge no CSS.
h1 {font-weight:bold; font-family:Arial;} h1 {font-size:36px;background-color:red;} =
h1 {font-weight:bold; font-family:Arial; font-size:36px;background-color:red;}
Em caso de conflito, ganha a regra mais abaixo no CSS h1 {color: green;} h1 {color:red;}
= h1 {color:red;}
Cada tipo de selector tem um nvel de especificidade diferente.
tag class Id
especificidade 1 especificidade 10 especificidade 100
.texto {color:yellow;} p {color:red;} <p class=texto>Ol</p>
Apesar da regra que define que os pargrafos so vermelhos vir mais tarde na CSS, a classe .texto tem uma especificidade maior, sobrepondo-se.
Algumas propriedades CSS mais usadas

Propriedades de fonte
color:...................cor da fonte font-family:..........tipo de fonte font-size:.............tamanho de fonte font-weight:.........peso da fonte font:....................maneira abreviada para todas as propriedades letter-spacing;.....espaamento entre caracteres text-decoration....decorao do texto (sublinhado, texto riscado, nenhum...) text-align;.............alinhamento do texto

Propriedades de blocos de textos
line-height;........ Define a altura da linha. vertical-align;.....Define o alinhamento vertical. text-align;...........Define o alinhamento de textos. text-indent;.........Cria capitulares. Aquelas letras grandes no incio de textos. white-space;........Define se haver quebra de do texto nos pargrafos. word-spacing;.....Espaamento entre palavras em CSS. letter-spacing;......Espaamento entre letras em CSS.

Propriedades de background
background-color: Seta uma cor de fundo para o site, ou outras tags. background-image: Coloca uma imagem de fundo do site ou outras tags. background-repeat: Define o tipo de repetio de imagens em background. background-position X e Y: Repetio vertical e horizontal.
Propriedades de bordas
border-style: Estilo da borda em CSS. border-width: Largura da borda em CSS. border-color: Cor da borda em CSS.
Propriedades de margens externas e internas

padding: Formatao da margem interna. margin: Formatao da margem externa.
MAS COMO APRENDO TUDO ISSO?

Sou designer cara!
Gosto s de desenhar!
Vem falar de selectors, id, class, css, html
No preciso saber isso, minha me diz que desenho bem!
Tem um monte de ilustradores bem-sucedidos
E alm do mais no gosto de estudar! Meu talento compensa a falta de conhecimento tcnico.
TCH!
Acorda.
O design sempre sofreu influncia dos meios de produo. J se perguntou o motivo por ter uma cadeira de Produo Grfica no curso? Conhecer formas de impresso, formatos de folha, retculas, cores Pensou? O Desenhista Industrial PRECISA conhecer a forma como os produtos sero feitos. Mesmo que no seja ele mesmo o responsvel por isso.
Itens necessrios para se tornar um #css_ninja
Ingls avanado Viso alm do alcance Perfil investigativo Perseverana e pacincia Madrugadas longas Organizao Humildade e colaborativismo Perseverana e pacincia
Como voc pode suspeitar, h uma oferta infinita de tutoriais e materiais de instruo para aprender sobre HTML na internet. Tutoriais completos, tutoriais especficos sobre algum problema que voc esteja enfrentando, estudos de caso...
http://www.w3schools.com/css/css_examples.asp http://www.htmldog.com/ http://www.cssnolanche.com.br/ http://www.google.com/webfonts http://endtwist.github.com/kerning.js/
Voc pode comear a entender a estrutura HTML + CSS olhando o cdigo-fonte das pginas. Outra forma de "aprender" HTML + CSS simplesmente criar um site.
T maseu realmente preciso aprender?
Voc no precisa se tornar um especialista em HTML/CSS para construir websites. Muitos dos softwares mais populares para a construo de websites incluem funcionalidades poderosas (Dreamweaver, Fireworks, Muse, etc). Mas ter as noes bsicas fundamental para fazer ajustes nos cdigos que estes softwares criarem.
Contando que o HTML, que serve como a espinha dorsal de um site, basicamente texto, qualquer editor de texto (incluindo o Bloco de Notas do Windows) pode ser usado para criar um website. Escrever cdigo diretamente em um editor de texto pode ajud-lo a entender melhor o que est acontecendo "nos bastidores. Comear com softwares rudimentares pode ser fundamental para o seu treinamento para se tornar um Ninja HTML/CSS. Recomendo usar o Notepad++
Abram a pasta #css_ninja/site/01/
Beleza, vou embora dessa oficina. J sei tudo de HTML e CSS.
No to rpido, pequeno gafanhoto.
hora de praticar. Hehe
Abram a pasta #css_ninja/site/02/
Obrigado pela ateno! Lucas Colusso lucascolusso.com/css_ninja/oficina.rar

Css Ninja

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Css Ninja

Caricato da

Copyright:

Formati disponibili

#css_ninja {color: black; visibility: hidden}

O que CSS? O que HTML?

<b> Ttulo </b>

Estrutura bsica de uma pgina HTML

CSS: Cascading Style Sheets

Integrando CSS e HTML

Anatomia de uma regra

Tipos de selectors tag

h1 {font-weight:bold; font-family:Arial; font-size:36px;background-color:red;}

especificidade 1 especificidade 10 especificidade 100

Algumas propriedades CSS mais usadas

Algumas propriedades CSS mais usadas

Algumas propriedades CSS mais usadas

Propriedades de margens externas e internas

MAS COMO APRENDO TUDO ISSO?

Itens necessrios para se tornar um #css_ninja

T maseu realmente preciso aprender?

Abram a pasta #css_ninja/site/01/

Beleza, vou embora dessa oficina. J sei tudo de HTML e CSS.

No to rpido, pequeno gafanhoto.

hora de praticar. Hehe

Abram a pasta #css_ninja/site/02/

Obrigado pela ateno! Lucas Colusso lucascolusso.com/css_ninja/oficina.rar

Potrebbero piacerti anche