advertisement

Css For Beginners

50 %
50 %
advertisement
Information about Css For Beginners
Design
css

Published on March 9, 2009

Author: pedrocs

Source: slideshare.net

Description

Uma introdução rápida aos fundamentos das CSS. Slides para uma apresentação de 15 minutos, em português.
advertisement

CSS for Beginners Introdução, sintaxe, boas práticas e receitas de bacalhau Pedro Couto e Santos psantos@co.sapo.pt

Cascading Style Sheets • Linguagem de estilização e formatação • Funciona em conjunto com uma linguagem de markup (eg, XHTML) • Separa conteúdo de layout e estilo • Ajuda a melhorar acessibilidade • Ajuda a melhorar manutenção

Integração de CSS num documento HTML Embedded <head> <style type=quot;text/cssquot;> body { font-family:Arial; font-size:12px; } </style> </head> Linked <head> <link type=quot;text/cssquot; rel=quot;stylesheetquot; href=quot;style.cssquot;> </head> Inline <p style=”color:blue;”>Texto azul.</p>

Anatomia de uma regra Selector Declaração body {color: #000000;} Propriedade Valor

Agregação de declarações body { color: #000000; Declaração font-size:12px; Declaração }

Tipos de selectores tag entidade pré-definida pela linguagem de markup utilizada .class selector definido pelo utilizador, especialmente adequado para definição de estilo (repetível) #id selector definido pelo utilizador, especialmente adequado para definição de layout (único).

Herança e especificidade Uma regra herda propriedades da anterior com o mesmo nome pela ordem em que surge na 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;}

Herança e especificidade Em caso de conflito, ganha a regra mais abaixo na CSS h1 {color: green;} h1 {color:red;} = h1 {color:red;}

Herança e especificidade Cada tipo de selector tem um nível de especificidade diferente. tag especificidade 1 class especificidade 10 id especificidade 100

Herança e especificidade .texto {color:yellow;} p {color:red;} <p class=”texto”>Olá</p> Apesar da regra que define que os parágrafos são vermelhos vir mais tarde na CSS, a classe “.texto” tem uma especificidade maior, sobrepondo-se.

Herança e especificidade .texto {color:yellow;} Especificidade: 10 p {color:red;} Especificidade: 1 p.texto {color:black;} Especificidade: 11 Existe ainda o !important em {text-decoration: underline !important;} THIS SUCKS! Se algo falha, verifiquem a CSS, o recurso ao !important é como matar formigas com uma caçadeira: último recurso

Imagem de Andy Clarke - www.stuffandnonsense.co.uk (kudos, André Luís)

O box model Espaço ocupado pelo elemento width SAPO Sessions Margin Padding Border

Versões CSS nível 1 Recomendação W3C, 1996. 53 Propriedades. CSS nível 2 Recomendação W3C, 1998. 122 Propriedades. Revisão 2.1 corrige bugs e remove propriedades para 115. CSS nível 3 Em desenvolvimento. Possivelmente passando a recomendação durante 2009. 224 Propriedades.

Links Todas as propriedades de CSS e respectiva especificação http://meiert.com/en/indices/css-properties/ Desenvolvimento de CSS na W3C http://www.w3.org/Style/CSS/ Tudo sobre listas http://css.maxdesign.com.au/listamatic/ A List Apart: CSS http://www.alistapart.com/topics/code/css/ Tudo sobre especificidade http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html “O URL do costume” http://www.csszengarden.com/

Add a comment

Related presentations

My Music Magazine Pitch

My Music Magazine Pitch

October 30, 2014

music mag pitch

Questionaire charts

Questionaire charts

November 4, 2014

bk

Final research

Final research

November 5, 2014

final research

Cersaie 2014

Cersaie 2014

October 30, 2014

allestimento in cartone per il Cersaie 2014 alberi in cartone scultura in cartone

Quarta turma do workshop de Infografia, ministrado por Beatriz Blanco e Marcos Sin...

Related pages

CSS Beginner Tutorial | HTML Dog

CSS Beginner Tutorial. Like the HTML Beginner Tutorial, the CSS Beginner Tutorial assumes that you know as much about CSS as you do about the cumulative ...
Read more

CSS :: CSS for Beginners: Learn to Tweak Your Website ...

Amazon.de: eBook - CSS : CSS for Beginners: Learn to Tweak Your Website Design (Webmaster Series Book 6) Dr. Andy. Sofort auf Ihrem Kindle, PC, Tablet oder ...
Read more

CSS For Beginners - CodeProject - For those who code

Add CSS to your HTML files.; Author: Nongjian Zhou; Updated: 28 Nov 2000; Section: HTML / CSS; Chapter: Web Development; Updated: 28 Nov 2000
Read more

CSS Tutorial

Beginners CSS Tutorial For Web Designers. ... Latest Blog Posts. Teach Code without Knowing how to Code. February 11, 2016
Read more

CSS for Beginners: Learn to Tweak Your Website Design ...

CSS for Beginners: Learn to Tweak Your Website Design: Amazon.de: Dr. Andy Williams: Fremdsprachige Bücher
Read more

HTML & CSS for Beginners | Codecademy

HTML & CSS for Beginners In this track, you will learn the building blocks of HTML and CSS in order to create and style your first web page from scratch.
Read more

CSS Tutorial for Beginners - part 1 of 4 - Applying Styles ...

How to make a website: CSS Tutorial - Basics. This is the first in a series of videos designed to teach the basics of CSS. This video will show ...
Read more

CSS Tutorial - W3Schools Online Web Tutorials

CSS tutorial with examples, quizzes, references, and an editor.
Read more

Learn HTML and CSS: An Absolute Beginner's Guide

This article was written in 2009 and remains one of our most popular posts. If you’re keen to learn more about HTML and CSS, you may find this recent ...
Read more

Beginner Archives - CSS-Tricks

From the desk of important beginner concepts: You have a website with 100 pages on it. All 100 pages use the same style.css file. You'd like to change the ...
Read more