CSS é a abreviatura de Cascade Styling Sheet, que significa Folha de Estilo em Cascata, e é a linguagem utilizada para controlar a apresentação de elementos em documentos HTML. A apresentação destes é especificada por uma série de regras que podem ser atribuídas em linha através dos atributos do elemento style ou através de regras incluídas dentro das tags na secção head dos documentos HTML, ou através de folhas de estilo externas (Leia: Tutorial: Aprender o básico sobre CSS ). Cada regra de estilização selecciona os elementos e depois aplica as regras aos mesmos.

O CSS foi criado pelo W3C para recuperar o controlo da markup de documentos à medida que o HTML ia evoluíndo a partir das tags primárias que definiam os elementos estruturais de um documento, como os cabeçalhos, parágrafos, hiperligações e listagens. Neste artigo Programação CSS para iniciantes (Parte VI) vamos continuar a trabalhar as caixas e aprender como as alterar e estilizar para que possa tirar o melhor partido delas!

Programação CSS para iniciantes (Parte VI)

Não perca os artigos anteriores desta série:

3. ALTERAR O TAMANHO DA ÁREA DE CONTEÚDO

Quando estiver a atribuir um valor diferente de zero a uma propriedade, a declaração deve incluir um nome de unidade de duas letras para definir qual é a unidade de medida a aplicar. Em CSS existem 8 unidades de medida, das quais 5 são retiradas do mundo real, e 3 unidades de medida que representam valores relativos de acordo com o dispositivo que está a ser utilizado para visualizar o conteúdo:

5 unidades do mundo real:

Unidades de Medida em CSS

3 Unidades CSS:

Unidades de Medida em CSS

Para testar aquilo que mencionámos acima, vamos passar à prática e criar algumas áreas de conteúdo utilizando as várias unidades de medida:

  1. Crie um documento HTML e insira o seguinte código dentro da tag <body>:
    <div id="absolute">3in x 1/2in</div>
    <div id="container">400px x 200px
    	<div id="percent">50% x 50%</div>
        <div id="relative">20em x 20em</div>
    </div>
  2. Guarde o documento HTML e crie um documento CSS, linke-o ao documento HTML e insira o seguinte código para definir o tamanho de um elemento por unidades absolutas:
    div#absolute {width: 3in; height: 0.5in; background: red; color: green }
  3. Adicione mais uma regra de estilo que irá definir o tamanho de um elemento pela resolução do monitor do dispositivo:
    div#container {width: 400px; height: 200px; background: blue; color: red }
  4. Adicione outra regra de estilo que irá definir o tamanho de um elemento pela sua percentagem:
    div#percent {width: 50%; height: 50%; background: green; color: white }
  5. Adicione uma última regra de estilo que irá definir o tamanho de um elemento relativamente ao tamanho do tipo de letra:
    div#relative {width: 20em; height: 2em; background: yellow; color: purple}
  6. Por último, guarde ambos os documentos e observe o resultado no seu navegador:
    Programação CSS para iniciantes (Parte VI)

4. CONTROLAR OS LIMITES

Cada caixa de conteúdo pode conter um limite o qual tem propriedades que podem ser alteradas – a largura, a cor e o estilo. Um valor pode ser especificado para cada uma destas propriedades para aplicar uma estilização uniforme a todos os 4 lados do limite, ou então podem ser especificados valores separadamente para aplicar estilos diferentes nos diferentes lados do limite. Quando dois valores estão listados, o primeiro é aplicado à parte superior e inferior do limite.

Quando três valores forem atribuídos, o primeiro é aplicado ao limite superior, o segundo é aplicado ao limite esquerdo e direito, e o terceiro é aplicado ao limite inferior. Quando quatro valores forem definidos, eles são aplicados no sentido dos ponteiros do relógio, começando pelo topo – topo, direita, baixo, esquerda.

O valor standard para o border-width é medium, e o valor standard para o border-color é herdado a partir da cor do elemento definida nas propriedades, enquando que o valor standard para border-style é none. Isto significa que os limites não irão ser visiveis até que seja definido um border-style – que poderá escolher entre: solid, double, dotted, dashed, groove, ridge, inset, outset, hidden e none.

Mais do que criar regras separadas para estilizar as propriedades dos limites, é mais simples utilizar uma técnica CSS que especifica um valor para cada uma das propriedades para uma propriedade border como uma lista. Esta técnica aplica uniformemente a estilização a cada um dos lados do limite. A título de exemplo, uma regra de estilização “border: 0.5in red dotted” iria aplicar um limite vermelho com pontos e 0.5in de largura a todos os quatro lados do limite.

Se pretender ter diferentes estilos nos diferentes lados do limite, pode utilizar regras de estilo para os elementos de forma separada utilizando as propriedades border-top, border-right, border-bottom e border-left. Ainda assim pode utilizar a técnica citada acima, se pretender aplicar o mesmo estilo a um dos lados de todos os limites existentes, utilizando por exemplo “border-right: 0.5in green dashed” que irá aplicar a estilização apenas ao limite direito.

Passamos a praticar:

  1. Crie um documento HTML e insira o seguinte código dentro da tag <body>, criando 4 parágrafos:
    <p id="p1">Solid / Inherit / Medium</p>
    <p id="p2">Topo: Dotted, verde 0.2em
    			<br />Baixo: Dashed, vermelho 0.2em</p>
    <p id="p3">Ridge Double - azul 1em</p>
    <p id="p4">Outset, amarelo 1em</p>
  2. Guarde o documento HTML e crie um documento CSS, linke-o ao documento HTML e insira o seguinte código para adicionar um limite que herde a cor:
    #p1 {color: red; border: solid}
  3. De seguida adicione uma nova regra de estilização para criar um limite por cima e por baixo da área de conteúdo:
    #p2 {border-top: 0.5em green dotted; border-bottom: 0.5em red dashed}
  4. Continuando as regras de estilo, adicione a seguinte para criar um limite com propriedades separadas:
    #p3 {border-style: ridge double; border-width: 1em; border-color: blue}
  5. Adicione a seguinte regra de estilização que irá estilizar todos os 4 lados do limite utilizando uma técnica de encurtamento CSS:
    #p4 {border: 1em yellow outset}
  6. Por último, guarde ambos os documentos e observe o resultado no seu navegador:
    Programação CSS para iniciantes (Parte VI)

Não perca o próximo capítulo onde iremos abordar os padding e margin em CSS!

Abraço e até já!

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. Juan
    19 de março de 2012

    Existe “programação css” ?



    • Jose Correia
      19 de março de 2012

      Não nao existe? Isto é uma linguagem. Considere ler desde o inicio.



      • Juan
        19 de março de 2012

        Até onde sei css é para aplicar um “estilo” a algum elemento html, onde seria possível encontrar elementos a partir de outros elementos… você não “programa” nada…



      • Juan
        19 de março de 2012

        de repente da uma lida aqui http://pt.wikipedia.org/wiki/Linguagem_de_programa%C3%A7%C3%A3o para entender um pouco o conceito de linguagem de programação



  2. Joffas
    19 de março de 2012

    Massa… quero aprender a programar em CSS, não sabia que dava… dah para aplicar orientação a objetos tambem….
    Se for tão pratico quanto aplicar os estilos.. toh nesse curso…!



    • Diogo Espinha
      4 de abril de 2012

      Olá Joffas, obrigado pelo seu comentário!
      Abraço



  3. Felipe Souza
    22 de março de 2012

    Diogo Espinha, muito obrigado pelo tutorial, está ajudando e muito a desenvolver o conhecimento sobre a web, valeu mesmo.



    • Diogo Espinha
      4 de abril de 2012

      Olá Felipe Souza, obrigado pelas suas palavras, fico contente por este conteúdo lhe ser útil!

      Abraço



  4. Iv@n
    28 de março de 2012

    Mais uma vez um ótimo tutorial!



    • Diogo Espinha
      4 de abril de 2012

      Olá Iv@n, obrigado pelas suas palavras!

      Abraço



  5. Gilmar Coimbra
    29 de maio de 2012

    Parabéns, uma vez mais, pelas excelentes postagens!
    (Tinha fechado todas as guias dos tutorais, mas fiz questão de abri-las novamente para agradecer-te).

    Não vi referência de um possível livro teu, sobre o DreamWeaver, existe? Se existir, quero comprar um!

    Obrigado.


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz