Mais populares

Clique aqui para eleger os artigos mais populares. Em 1 de Janeiro 2020 iremos contabilizar os votos. Ainda não temos dados suficientes para eleger os mais populares.

Newsletter


Como fazer um site do zero: Tutorial II

14 de Dezembro 2019

     Agora, passemos para o complicado CSS.
     Em primeiro lugar vamos acrescentar atributos às tags html. À tag nav vamos acrescentar o atributo id e dar-lhe um nome (< nav id="nome" >). Agora não podemos pôr mais nenhuma tag com o id name. Às tags content, aside e footer acrescentamos o atributo class com um determinado nome (< content class="qualquernome" >; < aside class="outronome" >; < footer class="outroqualquernome" >. Apartir de agora todas as tags que tiverem a class qualquer nome vão ter o estilo que vamos definir a seguir.
     Depois destas simples alterações o que tem a fazer é criar uma folha de estilo/ficheiro com o nome noproximotutorial.css. O código dessa folha de estilo seria:
body{font-family: Arial}
ul{list-style-type: none;}
#nome, nav{
color: black;
background-color: red;
width: 100%;
height: 200px;
text-align: center;
}
li{
width: auto;
margin: 10px;
}
aside, .outronome{
width: 30%;
float: right;
height: auto;
} content, .qualquernome{
width: 70%;
height: auto:
float: left;
border: 2px solid black;
}

    Quando colocamos no html o atributo "class", no css o nome da class deve ser antecedido de um ponto. Quando colocamos o "id", em vez de um ponto coloca-se um cardinal (#). Se só colocarmos o nome da tag, esse nome não precisa de ser antecedido de nada.
  &nbsDepois de escrevermos o nome da class/id/tag (.nomedaclass{}; #nomedoid{} ou nomedatag{}) podemos colocar os seguintes atributos (só estão escritos os mais básicos):
    Background: Pode definir a imagem do background (background: blablabla.png) ou a cor (background: lightblue).
    Border: Pode indicar a borda da esquerda, da direita, do centro e de baixo (border: numerodepixeisdabordapx solid/dashed/... cordaborda) ou pode só dizer a borda da esquerda, da direita... (border-left, ou border-right, ou border-top, ou border-bottom: numerodepixeis solid/dashed/... cordaborda).
    Color: Este é um elemento css que define não a cor de fundo, mas a cor dos parágrafos e a cor do texto ou de links (color: lightskyblue, lightblue, red,...).
    Display: Pode definir se o elemento está visível (display: block), se deve estar invisível (display: none), se deve estar visível mas alinhado com o conteúdo acima (display: inline-block), entre outros.
    Float: Define se o conteúdo está a "flutuar" à esquerda, à direita, ao centro, em baixo, (float: left)...
    Font: Pode ser o estilo da letra (font-family: Arial, Segoe UI, ...), o tamanho da letra (font-size: tamanhodaletrapx), entre outros.
    Height: Altura (em píxeis normalmente) dos elementos.
    List-Style-Type: Converter uma lista vertical com pontos numa horizontal sem pontos.
    Margin Margem que os elementos têm, que pode (tal como a border) ser dividida em margin-left, margin-right, margin-bottom, margin-top.
    Padding A margin é em relação à tag body, mas o padding é em relação ao próprio elemento.
    Position A posição pode ser absolute (absolute), fixed (fixa) ou relative (relative).
    Visibility Neste atributo define-se se os conteúdos estão visíveis (visible) ou invisíveis (hidden)     Width Largura dos elementos
    Text-decoration Define a decoração dos elementos (principalmente links) por exemplo (underline, none).
    Text-align Define o alinhamento dos elementos (center, left, right, botttom).
     Se estiver interessado em saber mais sobre html e css e os seus atributos mande um mail para o nosso endereço elétrónico .



Programação
©Matthew Henry 2020