0

Propriedades CSS – TEXT

cssPropriedades Text

As propriedades para textos, definem as características (os valores na regra CSS) dos textos inseridos dentro dos elementos HTML.

As propriedades para textos são as listadas abaixo:

Propriedade
Efeito
color:
Cor da fonte;
letter-spacing:
Espaçamento entre letras;
word-spacing:
Espaçamento entre palavras;
text-align:
Alinhamento do texto;
text-decoration:
Decoração do texto;
text-indent:
Recuo do texto;
text-transform:
Forma das letras;
direction:
Direção do texto;
white-space:
Como o browser trata os espaços em branco;

Valores válidos para as propriedades de Text.

  • color:
    • código hexadecimal: #FFFFFF
    •  código rgb: rgb(255,235,0) 
    •  nome da cor: red, blue, green…etc
  • letter-spacing: 
    •  normal: é o espaçamento default 
    • lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, …) São válidos valores negativos
  • word-spacing: 
    •  normal: é o espaçamento default 
    •  lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, …) São válidos valores negativos
  • text-align: 
    •  left: alinha o texto a esquerda 
    •  right: alinha o texto a direita 
    •  center: alinha o texto no centro 
    •  justify: força o texto a ocupar toda a extensão da linha da esquerda a direita
  • text-decoration: 
    •  none: nenhuma decoração 
    •  underline: coloca sublinhado no texto 
    •  overline: coloca um sobrelinhado no texto 
    •  line-through: coloca uma linha em cima do texto 
    •  blink: faz o texto piscar
  • text-indent: 
    •  lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, …) 
    •  % : porcentagem da largura do elemento pai
  • text-transform: 
    •  none: texto normal 
    • capitalize: todas as primeiras letras do texto em maiúsculas 
    • uppercase: todas as letras do texto em maiúsculas 
    • lowercase: todas as letras do texto em minúsculas
  • direction: 
    •  ltr: texto escrito da esquerda para a direita 
    •  rtl: texto escrito da direita para a esquerda
  • white-space: 
    •  normal: os espaços em branco serão ignorados pelo browser 
    •  pre: os espaços em branco serão preservados pelo browser 
    •  nowrap: o texto será apresentado todo ele numa linha única na tela. Não há quebra de linha até ser encontrada uma tag 

Exemplos:

1- Espaçamento nas Letras letter-spacing

 
2- Espaçamento nas Palavras word-spacing
3- Alinhamento do Texto text-align
4- Decoração do Texto text-decoration
5- Recuo do Texto text-indent
6- Forma das Letras text-transform
0

Propriedades CSS – FONT

css

PROPRIEDADES CSS

As propriedades no Css são utilizadas para especificar formatações ao seus seletores, sejam eles seletores class, id ou tags. No Css existem propriedades que definem o estilo de fonte, textos, plano de fundo, margens internas, margens externas, imagens, formulários, links, etc.

Veremos cada uma delas começando pela Propriedade Font.

PROPRIEDADES FONT

As propriedades para as fontes, definem as características (os valores na regra CSS) das letras que constituem os textos dentro dos elementos HTML.
As propriedades básicas para fontes e que abordaremos nesta postagem são as listadas abaixo:

  • color:  Define a cor da fonte.
  • font-family: Define a família de fontes que você pode utilizar em sua página.
  • font-size: Define o tamanho da fonte.
  • font-style: Define o estilo da fonte.
  • font- variant: Fontes maiúsculas de menor altura.
  • font-weight: Define quanto mais escura a fonte é (negrito).
  • font: Usada para definir todas propriedades em uma única declaração.
Valores usados para cada propriedade:
  • color:
      • código hexadecimal: #FFFFFF
      • código rgb: rgb(255,235,0)
      • nome da cor: red, blue, green…etc
  • font-family:
      • nome da família de fontes : define-se pelo nome da fonte,  p. ex:”verdana”, “helvetica”, “arial”, etc.
      • nome da família genérica: define-se pelo nome genérico,  p. ex:”serif”, “sans-serif”, “cursive”, etc.
  • font-size:
      •  xx-small, x-small, small, médium, large, x-large, xx-large, smaller, larger,
      • length: uma medida reconhecida pelas CSS (px, pt, em, cm, …)
      •  %
  • font-style:
      • normal: fonte normal na vertical
      • italic: fonte inclinada
      • oblique:fonte obliqua
  • font-variant:
      • normal: fonte normal
      • small-caps: transforma em maiúsculas de menor altura
  • font-weight:
      • normal, bold, bolder, lighter
      • 100, 200, 300, 400, 500, 600, 700, 800, 900

Exemplo:

0

Seletores CSS

cssSELETORES CSS

Seletores HTML – Atributos

Os seletores HTML são utilizados para definir estilos nas tags da linguagem de marcação HTML.
Sintaxe:
Exemplo:

Seletores CLASS

Você não está restrito somente aos elementos HTML (tags) para aplicar regras de estilo. Você pode “inventar” um nome e com ele criar uma classe a qual definirá as regras CSS.
Exemplo:

E o mais interessante das classes, é que elas podem ser aplicadas a qualquer elemento HTML. E mais ainda, você pode aplicar estilos diferentes para o mesmo tipo de elemento da HTML, usando classes diferentes para cada um deles.
Exemplo:
Utilização:

Seletores ID

O seletor ID difere do seletor classe, por ser ÚNICO. Um seletor ID de determinado nome só pode ser aplicado a UM e somente UM elemento HTML dentro do documento.
Você pode “inventar” um nome e com ele criar um ID ao qual definirá as regras CSS. Um determinado ID só pode ser aplicado a UM elemento HTML. A sintaxe para o seletor ID é mostrada a seguir:
Exemplo:

0

Tipos de Css

cssTipos de Css

As folhas de estilo podem ser vinculadas a um documento HTML de três maneiras distintas:
  • Externas (Importadas ou linkadas);
  • Internas (Incorporadas);
  • Inline.

Folhas de Estilos Externas (Importadas ou Linkadas)

Uma folha de estilo é dita externa, quando as regras CSS estão declaradas em um documento a parte do documento HTML. A folha de estilo é um arquivo separado do arquivo html. O arquivo de folha de estilo deve ser gravado com a extensão .css.
Uma folha de estilo externa é ideal para ser aplicada a várias páginas. Com uma folha de estilo externa, você pode mudar a aparência de um site inteiro mudando regras de estilos contidas em um arquivo apenas (o arquivo da folha de estilo).
O arquivo css da folha de estilo externa deverá ser linkado ou importado ao documento HTML, dentro da seção head do documento. A sintaxe geral para linkar uma folha de estilo chamada estilo.css é mostrada a seguir:
A sintaxe geral para importar uma folha de estilo chamada estilo.css é mostrada a seguir.

Folhas de Estilos Incorporadas ou Internas

Uma folha de estilo é dita incorporada ou interna, quando as regras CSS estão declaradas no próprio documento HTML.
Uma folha de estilo incorporada ou interna, é ideal para ser aplicada a uma única página. Com uma folha de estilo incorporada ou interna, você pode mudar a aparência de somente um documento, aquele onde a folha de estilo está incorporada.
As regras de estilo incorporadas e válidas para o documento são declaradas na seção <head> do documento com a tag de esti

Folhas de Estilos InLine

Uma folha de estilo é dita inline, quando as regras CSS estão declaradas dentro da tag do elemento HTML com uso do atributo style.
Um estilo inline só se aplica a um elemento HTML. Ele perde muitas das vantagens de folhas de estilo pois mistura a apresentação com a marcação. Use este método excepcionalmente, por exemplo: quando quiser aplicar um estilo a uma única ocorrência de um elemento. 
A sintaxe para aplicar estilo inline é mostrada a seguir: 
0

Sintaxe Css

css

Sintaxe Css 

Uma regra CSS é uma declaração que segue uma sintaxe própria e que define como será aplicado estilo a um ou mais elementos HTML. Um conjunto de regras CSS forma uma Folha de Estilos. Uma regra CSS, na sua forma mais elementar, compõe-se de três partes: um seletor, uma propriedade e um valor e tem a sintaxe conforme mostrado abaixo:

Seletor: genericamente, é o elemento HTML identificado por sua tag, ou por uma classe, ou por uma ID, ou etc., e para o qual a regra será válida (por exemplo:  <p/>, < h1/>, <form/>, .minhaclasse, etc…) ;

Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo: font, color, background, etc…).

Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, etc…).

Na sintaxe de uma regra CSS, escreve-se o seletor e a seguir a propriedade e valor separados por dois pontos e entre chaves { }. Quando mais de uma propriedade for definida na regra, deve-se usar ponto-e-vírgula para separá-las. O ponto-e-vírgula é facultativo no caso de propriedade única e também após a declaração da última propriedade quando houver mais de uma.

Exemplo:

Comentários no Código Css

Agrupamento de Seletores

Os seletores pode ser agrupados e receberem o mesmo estilo.
Exemplo:

0

INTRODUÇÃO A FOLHAS DE ESTILOS CSS

css

Cascading Style Sheets

O CSS é uma linguagem de definição de estilos, que pode ser utilizada para descrever a apresentação de páginas HTML ou documentos XML. Com o uso do CSS podemos criar folhas de estilo que definem como aparecem diferentes elementos, tais como: cabeçalhos, tags, links, caixas etc. As formatações do CSS, geralmente são inseridas em elementos (tags) do HTML. No CSS esses elementos são chamados seletores.

Folhas de Estilo Css

Folha de estilo em cascata é um mecanismo simples para adicionar estilos (p.ex., fontes, cores, espaçamentos) aos documentos Web.

Web Standards

A Web Standards é um conjunto de normas, diretrizes, recomendações, notas, artigos, tutoriais e afins de caráter técnico, produzidos pelo W3C e destinados a orientar fabricantes, desenvolvedores e projetistas para o uso de práticas que possibilitem a criação de uma Web acessível a todos, independentemente dos dispositivos usados ou de suas necessidades especiais

A Vantagem em utilizar o Css

A grande vantagem do uso de CSS é a de separar a marcação HTML, da apresentação do site. Em outras palavras, vale dizer que o HTML destina-se unicamente a estruturar e marcar o conteúdo, ficando por conta das CSS toda a responsabilidade pelo visual do documento.

O HTML marca e estrutura textos, cabeçalhos, parágrafos, links, botões, formulários, imagens e demais elementos da página e CSS define cores, posicionamento na tela, estilos de linhas, bordas e tudo o mais relacionado à apresentação.
A adoção desta técnica resulta em múltiplas vantagens e benefícios que não são conseguidos quando se utiliza o conceito largamente empregado para construção de web sites, baseado no uso de tabelas e de atributos de estilização dentro das tags HTML.