Css e iFrames

As Folhas de Estilos são: descrições de como os documentos são apresentados no ecrã, numa impressão ou de que forma são pronunciados quando lidos pelo computador. CSS é o mecanismo para dizer ao browser como formatar os elementos de documentos HTML.

É um conjunto de regras que diz ao browser qual a fonte, estilo, margens, cor, a indentação, etc. devem ser usados para apresentar os conteudos. Diferenças entre CSS e HTML? HTML é usado para estruturar conteúdos. CSS é usado para formatar conteúdos estruturados

O HTML produz páginas Web que são: Muito complexas, Difíceis de ler e de manter, Desnecessariamente grandes. CSS é uma linguagem de folha de estilo proposta pelo W3C com o objectivo de separar o estilo do conteúdo da página.

A linguagem HTML era usada somente para estruturar textos. Marcar textos definindo "isto é um cabeçalho " ou "isto é um parágrafo" usando tags HTML tais como <h1> e <p>. Com a popularidade da Web, os designers começaram a sentir a necessidade de encontrar meios de construir layout para os documentos online.

A frase “Precisa do navegador X para visualizar esta página" tornou-se, nessa fase, comum nos sites. A CSS foi inventada para solucionar esta situação, colocando à disposição dos web designers meios sofisticados de projectar layouts suportados por todos os navegadores.

CSS é uma lista de regras onde cada regra começa com um selector ao qual as propriedades são associadas. O selector indica a que elemento as propriedades se aplicam. NomeElemento { display: block; }

Exemplo: HTML <body bgcolor="#FF0000"> Exemplo: CSS body {background-color: #FF0000;}

O bloco básico de uma folha de estilo é a regra . Uma regra define como um ou mais estilos são aplicados a um determinado elemento ou conjunto de elementos e é composta por duas partes: o Selector e as Declarações h1 { color: red } Selector Atributo Valor Declaração

O selector é o elemento/tag que definimos (na maioria das vezes trata-se de uma tag HTML). Uma declaração , por sua vez, também é composta por duas partes: uma propriedade e um valor. A propriedade é o atributo que desejamos inserir para este elemento e cada propriedade tem um valor atribuído. A propriedade e o valor são separados por “:” e delimitados por chavetas “{ } “

Cada estilo criado, é definido através da seguinte sintaxe: ·selector {atributo1: valor; atributo2: valor ...} Elemento - descreve o elemento ao qual o estilo será aplicado. Poderá ter o mesmo nome que a tag HTML. É também conhecido por selector. Atributo – a propriedade do elemento a formatar. Deve ser um nome de atributo CSS válido, Ex.: o atributo font-size. Valor – valor dado ao atributo. Deve ser um valor válido para o atributo em questão, Ex.: 20pt para font-size. Atributo:valor – Para múltiplas declarações, separam-se com (;).

Um estilo CSS que aplicamos a um parágrafo (selector) a formatação do tipo de letra Comic Sans MS (declaração) p {font-family: “Comic Sans MS”} Texto com este estilo aplicado

Externo - Externo significa que os estilos definidos no CSS, encontram-se num ficheiro externo ao HTML separado. A página HTML possui somente uma referencia a esse ficheiro. Desta forma, podemos definir os estilos e aplica-los em diferentes páginas. Incorporado - significa que os estilos definidos no CSS, encontram-se no cabeçalho do documento HTML. Os estilos só se aplicam à página na qual se encontram. Inline – Os estilos são definidos directamente dentro da tag de HTML. O estilo só se aplica á tag no qual se encontra

Para a definição dos estilos, basta criar um documento de texto com a extensão .CSS, através da utilização de um editor de text. Exemplo: Estilos.css H1 {font-family: ‘arial'; font-size: 30pt; color: blue} P {font-family: ‘Verdana'; margin-left: 10px} Para se utilizar os estilos definidos, basta efectuar uma referência ao ficheiro .css, dentro do cabeçalho da página. <LINK REL="STYLESHEET" HREF="Estilos.css“ TYPE="text/css">

Para a criação de estilos incorporado, basta colocar as tags <STYLE>...</STYLE> e os estilos dentro da própria tag página HTML. Exemplo: <HTML> <HEAD> <TITLE> Estilos Incorporados</TITLE> <STYLE TYPE="text/css"> </STYLE> </HEAD> </BODY> </HTML>

Os estilo Inline, o atributo STYLE é definidos dentro da própria tag a definir. A sintaxe para definir um estilo inline é a seguinte: <p STYLE="color: green; font-family: ‘arial‘> Texto com CSS</p >

Controlo do layout de vários documentos a partir de uma simples folha de estilos; Maior precisão no controlo do layout; Aplicação de diferentes layouts para servir diferentes meios (ecrã, impressora, etc.); Emprego de variadas, sofisticadas e avançadas técnicas de desenvolvimento O suporte das folhas de estilo nos browsers está actualmente razoavelmente solidificada. A maioria dos browsers suporta a especificação CSS1 (completamente) e CSS2

A utilização de folhas de estilos externas ao ficheiro HTML, permite-nos poupar tempo, ganhar flexibilidade e aumentar a consistência das páginas. Aplicando os estilos através de um ficheiro externo, a alteração da formatação ou remodelação gráfica, torna-se tarefa fácil. As páginas que utilizam CSS, tornam-se mais simples de se construir e são também mais leves, aparecendo mais depressa no browser.

No modo ALL – Permite supervisionar todas as REGRAS e PROPRIEDADES que afectam todo o documento No modo CURRENT – O painel de Estilos CSS permite supervisionar as REGRAS e PROPRIEDADES CSS que afectam um elemento seleccionado na página

Botões do Painel CSS A.Vista de categoria B.Vista de lista C.Vista das propiedades establecidas – só mostra as propriedades que se estabeleceram divide as propriedades CSS: fonte, fundo, bloco, borda, quadro, lista, posição e extensões A B C

D. Juntar uma Folha de estilos – permite vincular/juntar uma folha de estilos externa ao documento E. Nova regra CSS – permite seleccionar o tipo de estilo a criar F. Editar estilo CSS G. Eliminar regra CSS D E F G

E. Nova regra CSS – permite seleccionar o tipo de estilo a criar

Selector Class Um estilo que pode ser aplicado a vários Serve para criar uma class , utilizando um ( . ) ponto no inicio e um nome que quer para classe. Name: .table Define in: Nova folha de estilos Apenas no documento

Selector TAG redefine uma marca HTML existente Tag: todas as tags do HTML para poder utilizar. Pode fazer com que uma tabela fique sempre de uma determinada forma e todas as vezes que colocar uma tabela ela ficará sempre igual ao definido

Por exemplo A Tag td identifica as células com dados

Selector Advanced Criar estilos para pseudo-classes Configura as tags do link nos seus estados:

Define In: A - New Style Sheet File Define onde o CSS vai ficar guardado Cria um documento CSS externo que pode ser aplicado a outros documentos HTML sempre muda. A B

B - This Document Only Cria estilos no próprio documento Tudo o que cria como CSS irá para dentro do mesmo ecrã (documento html).

As Folhas de Estilo Externas podem ser importadas ou linkadas em outras páginas

Font - Selecciona uma fonte para o texto. Size –Ta manho da fonte Style – Estilo da fonte Line Height – aumenta o espaço na vertical Weight – peso da fonte. É possível definir um valor numérico, e quanto mais baixo esse valor, mais clara é a fonte. Varient – Letras sempre em maiúsculas 1

Case – Capitalize [primeira letra em maiúsculo], UpperCase [todo o texto em maiúsculo] e LowerCase [em minúsculo] Color Decoration

Background Color – cor de fundo Background Image – imagem de fundo Repeat no-repeat, não permite a duplicar repeat, permite a repetição repeat-x , repete na horizontal repeat-y , repete na vertical 2

Attachment fixed, fixa a imagem no fundo scroll, permite a imagem deslizar junto com o fundo Posição que a imagem de fundo assume Horizontal Position Vertical Position

Consiste na inserção de páginas web (arquivos) dentro de outras páginas web (arquivos) . São diferentes das Frames (quadros) - divisões da mesma página em secções

As iFrames são reconhecidas somente nos navegadores MSIE 4 , NN 6 e Opera 5 ou superiores O código HTML gerado para inserção de uma iFrame é: <iframe></iframe> No DW MX 2004 Insert > TAG > HTML TAGS > iFrames

Atributos básicos de uma iFrame name (nome da iframe); ID (identificação da iframe); width (largura em pixels); height (altura em pixels); src (caminho para o conteúdo da iframe. Pode ser um URL , um outro arquivo , uma imagem etc...); scrolling (determina a presença ou não de barra de rolagem - yes, no, auto);

Atributos básicos de do Editor de TAGS de uma iFrame 1 2 3 4 5 6 7 8 9

1 Souce: src="conteudo.htm" É a url do arquivo que vai ficar dentro do iframe, exemplo <iframe src="conteudo.html"> 2 = Name: O nome do iframe campo, mas que é obrigatório caso queira fazer algum link abrir dentro dele. 3 = Whidth: É dimensão horizontal definida para a iFrame

4 = Height: É dimensão vertical definida para a iFrame. 5 = Margin Whidth: É a largura da margem na horizontal. 6 = Margin Height: É a largura da margem na vertical.

7 = Alignment: É o alinhamento do iFrame. 8 = Scrolling: Qual a opção da barra de rolagem. 9 = Show Borders: Se vai possuir bordas ou não.

1 = Horizontal Space: Determina o espaço horizontal entre o iFrame e o resto do documento html, sendo que x é o valor do espaço em pixels O símbolo do lado informa a aceitação de iFrames desde o Explore 3 ou superior. 2 = Vertical Space: Determina o espaço vertical entre o iframe e o resto do documento html, sendo que x é o valor do espaço em pixels.

3 = Allow Transparency : permite um iFrame transparente. 4 = Frame Contains Application: é uma aplicação de segurança que informa que o conteúdo é um HTML e é seguro

Style Sheet/Accessibility 1 2 3 4

1 = Class: Aplicação de um estilo CSS 2 = ID: é uma referência que se dá ao código. 3 = Style: Aplica um estilo diferente para o IFrame. 4 = Title: Título normalmente é o mesmo que o ID.

Css e iFrames

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Css e iFrames

Mais de Sandra Oliveira

Css e iFrames