Scripts+CGI+e+Folhas+de+Estilo



Formadora Patricia

Nesta pagina vou colocar todos os exercícios realizados nas sessões

28 de Setembro 2009

 Este é o primeiro exemplo: Scritpts "css"

Meu documento  A minha primeira folha de estilo

Estamos a trabalhar os estilos que nos ajudam a formatar vários tipos de coisas sem ter de andar de pagina a pagina. É assim que se trabalham os estilos: body { background-color: #FFCC66; } h1 {color: #8B4513;}

alinhamento de texto  este é o texto a direita este é o texto ao centro

h1{text-align:right;} h2{text-align:center};

estilo de letra  Página com imagem de fundo cabeçalho 2 com fonte times new roman-italico

h1 {font-family: arial, verdana, sans-serif;}

h2 {font-family: "Times New Roman", serif; font-style: italic;} body{background-color: #FC9804};

Propriedade color  cabeçalho com cor verde cabeçalho com cor azul

Propriedade color  cabeçalho com cor verde cabeçalho com cor azul

html> Propriedade background-image  Página com imagem de fundo

body{background-image:url("bike.gif")}; h1{color:#990000;background-color: #FC9804};

tamanho da fonte  cabeçalho 1 vou fazer uma experiencia cabeçalho 2 cabeçalho 3

h1 {font-size: 50px;} h2 {font-size: 12pt;} h3 {font-size: 120%;} p{font-family: arial, verdana, sans-serif;} p{font-size: 50px};

Aqui neste link a seguir pode ir para a pagina da UfCD onde estão os diapositivos de introdução da matéria.

FT Scripts CGI Folhas Estilo 30 de Setembro 2009 Mais uma sesssão de CSS

 cabeçalho 1 vou fazer uma experiencia cabeçalho 2 cabeçalho 3 h1 {font-family: arial, verdana, sans-serif;}

h2 {font-family: "Times New Roman", serif; font-style: italic;} body{background-color: #FC9804};

html>  este é o texto a direita este é o texto ao centro

h1{text-align:right;} h2{text-align:center};

decoração de texto  linha acima do texto linha a baixo do texto rasurado

h1 { text-decoration: underline; } h2 { text-decoration: overline; } h3 { text-decoration: line-through; }

tml> Questões <link rel="stylesheet"type="text/css"href="questoes.css"/> Ficha de Questões a)Qual o significado de css? é um ficheiro  b)Qual a tag HTML que é utilizada para definir um CSS interno? stylesheet"type c)Qual é a propriedade que utilizamos para a cor do background?  background-color  d)Qual é a propriedade em CSS que que controla o tamanho do texto?  font-size  e)Como proceder para aplicar um sublinahdo á tag ?  Overline  f)como preceder para colocar todas as letra das tag em maiusculas?  uppercase

h2{text-indent:30px; font-family:arial; background-color:#CD853F; text-align:center; } h4{font-family:verdana; color:#CD853F;} p{font-family:times New Roman; font-size:12px;} body{background-color:#FAEBD7;}

4 de Novembro 2009 Depois de uma grande pausa nesta materia, hoje demos inicio uma mais sessão com mais uns exeicicios onde aprendemos mais umas propriendades de CSS.


 * __CLASS__**

<link rel="stylesheet"href="class.css"type="text/css"/> Pizza <ul> Pizza 4 estações</li> Pizza Frutos do Mar</li> Pizza Vegetariana</li> </ul>

Bebidas <ul> coca-cola</li> Fanta</li> Sumo Natural</li>

</ul>

CSS:

li.pizza{ font-weight:bold; font-style:italic; color:orange; } li.bebida{ font-family:comic sans ms; color:yellow; }


 * __ÍD__**

<link rel="stylesheet"href="id.css"type="text/css"/> Capitulo Capitulo 1.1 Capitulo 2 Capitulo 2.1

CSS:


 * 1) c1{font-weigth:bolder;background-color:#F5DEB3}
 * 2) c2{font-weight:border;background-color:#D2D48C}

__**span**__

<link rel="stylesheet"href="span.css"type="text/css"/> O elemento span é um elemento neutro o que não adiciona qualquer tipo de semântica ao documento.Pode ser usado para adicionar efeitos visuiais a partes do texto

CSS:

span.destaca{color:green;font-weight:bold;text-decoration:underline;}

__**DIV**__

<link rel="stylesheet"href="div.css"type="text/css"/> Pizza <ul> <li>Pizza 4 estações</li> <li>Pizza Frutos do Mar</li> <li>Pizza Vegetariana</li> </ul> Bebidas <ul> coca-cola</li> <li>Fanta</li> <li>Sumo Natural</li>

</ul>

CSS:
 * 1) pizza{font-weight:bold;font-style:italic;color:blue;}
 * 2) bebida{font-family:comic sans ms;color:dodgerBlue;}

18 de Novembro 2009

BOX MODEL

Enchimento:

html> <link rel="stylesheet"href="enchimento.css"type="text/css"/> limite exemplo 1 Limite exemplo 2 Limite exemplo 3

CSS:

h1{ border-width:thich; border-style:dotted; border-color:gold; padding-top:14px; }

h2{ border-width:thin; border-style:solid; border-color:orange; padding-bottom:150px; } h3{ border-width:2px; border-style:dashed; border-color:blue; }

Border:

<link rel="stylesheet"href="borderExemplo.css"type="text/css"/> limite exemplo 1 Limite exemplo 2 Limite exemplo 3

CSS:

h1{ border-width:thich; border-style:dotted; border-color:gold; } h2{ border-width:thin; border-style:solid; border-color:orange; } h3{ border-width:2px; border-style:dashed; border-color:blue; } body{margin-top:50px; margin-right:50px; margin-bottom:10px; margin-left:70px; }

Altura: Atribuir alturave largurta <link rel="stylesheet"href="altur.css"type="text/css"/> 200px de largura 500px de altura e texto

CSS div.box{ height:500px; width:200px; border:1px solid black; background:orange; }

24 de Novembro 2009 Formularios

Nome: <input type="text" name="nome"value="Fátima"> Apelido: <input type="text"name="apelido"> Login:<input type="text"name="login">Pass:<input type="password"name="pass">

Botoes

<input type="radio"Name="Opcao"value="OP1">Opção1 <input type="Radio"Name="Opcao"Value="0p2" Checked>Opcão2 <input type="Radio"Name="Opcao"Value="op3">Opção3

html> <link rel="stylesheet"href="fichaInscricao.css"type="text/css"/> Ficha de Inscrição Nome: <input type="text" name="nome"value="Fátima"> Apelido: <input type="text"name="apelido"> Login: <input type="text"name="login"> Pass: <input type="password"name="pass"> Sexo <input type="radio"Name="Opcao"value="OP1">Masculino <input type="Radio"Name="Opcao"Value="op3">Femenino Posui PC? <input type="radio"Name="Opcao"value="OP1">Sim <input type="Radio"Name="Opcao"Value="op3">Não UFCD em que se inscreve <input type="checkbox"name="UFCD" value="margarita">Introdução <input type="checkbox"name="Modulos" value="margarita">WORD <input type="checkbox"name="Moldulos"value="Frutosmar"checked>Exel