Meu Site pessoal espero que goste.
http://sitemarcos.6te.net/#home
sexta-feira, 7 de junho de 2013
terça-feira, 4 de junho de 2013
Técnicas de Substituição de Imagens e Padrões de Repetição
O objectivo desta técnica é demonstrar como o CSS pode ser
utilizado para substituir texto HTML estruturado por imagens de texto de uma
forma que permita aos utilizadores visualizarem o conteúdo de acordo com as
suas preferências. Para utilizar esta técnica, o autor começa por criar uma
página HTML que utiliza elementos semantic para marcar a estrutura da página.
Em seguida, o autor cria duas ou mais folhas de estilo para essa página. Uma
folha de estilo apresenta o texto HTML como texto e a segunda utiliza
funcionalidades CSS para substituir algum do texto HTML por imagens de texto.Como mostrado a tecnica a abaixo.
HTML:
<h1 id="titulo"><span></span>Ao vencedor, as batatas</h1>
CSS:
#titulo{
width:238px;
height:26px;
position:relative;
overflow:hidden;
}
#titulo span{
position:absolute;
width:100%;
height:100%;
background:#fff url(/i/ao-vencedor.gif) no-repeat;
}
Imagem com fundo branco:
O resultado das técnicas mostradas a cima são:
Imagem com fundo transparente:
Imagem com fundo branco:
Padrões de Repetição para Imagens
A propriedade
background-repeat utiliza geralmente os valores repeat-x e repeat-y, que
determinam o eixo no qual uma imagem será repetida. Há também o valor
no-repeat, que evita que a imagem seja repetida.
Os valores para a
propriedade background-repeat devem ser utilizados em conjunto com a propriedade
backgroun-image, para que seja possível determinar qual imagem será repetida.
Assim como podemos
repetir imagens na horizontal com a propriedade repeat-x, também podemos
repeti-las na vertical com a propriedade repeat-y.
Essa propriedade é
muito útil para criar um fundo para o corpo do documento, evitando a
renderização de uma imagem muito grande e de tamanho fixo.
Se o desenvolvedor
colocar uma imagem muito grande para o fundo da página inteira pode ocorrer de
a página demorar para carregar.
segunda-feira, 3 de junho de 2013
Formulários HTML
Formulários HTML são geralmente usados para facilitar a comunicação entre os internautas que acessam um determinado site e os administradores do mesmo.
Com formulários, é possível criar salas de bate-papo, livros de visita, enquetes, e muito mais.
Todo Formulário HTML é composto por controles que podem ser “Botões”, “Caixas de Textos”, “Caixas de Senha”, etc. São diversos tipos de controles que podem ser utilizados.
FORM e atributos relativos
A Tag <form> serve para informar o início e o término de um formulário, ou seja, é necessário que todos os controles do formulário fiquem posicionados entre a abertura e o fechamento da Tag <form> para que os dados sejam enviados corretamente.
Abaixo falaremos sobre esses controles:
ID: Define um nome para o formulário.
ACTION: Define para onde será enviado o conteúdo do formulário.
METHOD: Especifica o método de envio HTTP dos dados do formulário, são eles GET e POST.
ENCTYPE: Especifica como os dados do formulários serão encriptografados quando enviados para o servidor, este atributo somente será usado quando o método de envio for POST.
Ex.: <form id="nome_do_formulário" action="url_de_destino" method="metodo_de_envio" enctype="modo_de_encriptografia">
</form>
LABEL
A tag <label> define um rótulo para um elemento <input>.
ACCESSKEY: Define uma tecla de atalho para ativar um elemento.
FOR: Representa uma ligação da tag label com um campo.
Ex.: <form>
<label for="homem" accesskey="h">Homem</label>
<input type="radio" name="sexo" id="homem" value="homem">
<label for="mulher" accesskey="m">Mulher</label>
<input type="radio" name="sexo" id="mulher" value="mulher">
</form>
INPUT
A tag <input> especifica um campo de entrada onde o usuário pode inserir dados. Elementos <input> são usados dentro de uma tag <form>. Um campo de entrada pode variar de muitas formas, dependendo do tipo de atributo:
TYPE: define como será o campo de interação (um texto, por exemplo), abaixo algumas interações que podem ser atribuídas:
TEXT: Especifica o tipo que o elemento terá.
DATE: Renderiza uma pequena janela que torna possível que o usuário escolha uma data.
EMAIL: Esse atributo faz com que o campo de e-mail seja automaticamente validado verificando se há ou não o simbolo @ assim validando como um e-mail valido.
NUMBER: O campo que contem esse iten como type permite que o usuário digite apenas números no campo.
RANGE: Este renderiza uma pequena barra que com números de "escala" podendo assim facilitar na escolha de um valor apenas arrastando o mouse.
PASSWORD: Definindo esse atributo os caracteres digitados no campo são automaticamente mascarado.
HIDDEN: Pode ser utilizado quando é necessário gravar um dado que não seja preciso o usuário digitar.
FILE: Renderiza um botão para que o usuário navegue nas pastas do seu computador para que ele escolha um arquivo a ser enviado ao servidor.
CHECKBOX: Define uma caixa de seleção sendo possível fazer múltiplas escolhas.
RADIO: Define itens para seleção de maneira que não pode se escolher mais de um dado.
BUTTON: Renderiza um botão que o usuário pode definir alguma ação quando ele é clicado.
IMAGE: Define uma imagem como botão.
SUBMIT: Cria um botão de envio dos dados do formulário.
RESET: Redefine tudo o que foi escrito no formulário.
ID: Esse atributo é usado para identificar o conteúdo da tag.
NAME: Usado como o ID para identificar o conteúdo da tag, muito usado no HTML4
ACCESSKEY: Define uma tecla de atalho para a input na qual é utilizado.
ALT: Esse atributo define um nome alternativo para a imagem caso o usuário por algum motivo não conseguir visualiza-la.
CHECKED*: Pré-define um item em uma lista.
DISABLE: Desativa um elemento input.
MAXLENGTH**: Define o numero máximo para um campo.
READONLY: Define um campo somente de leitura.
SIZE**: Define o tamanho do campo.
SRC***: Especifica um endereço de uma imagem para ser utilizado em um botão de envio.
TABINDEX: Define uma ordem quando o sistema de navegação é feito por abas.
VALUE: Especifica o valor em uma tag input.
MAX****: Define um valor máximo para a tag.
MIN****: Define um valor minimo para a tag.
STEP****: Define uma regra de dados numéricos a serem inclusos no formulário.
* Para input type radio ou checkbox.
** Para input type text ou password.
*** Para input type image.
**** Para input type number ou range.
SELECT
A tag <select> é usada para que o usuário selecione um dado a ser adicionado ao banco de dados do servidor por uma caixa suspensa, veja alguns do principais atributos desta tag.
ID: Esse atributo é usado para identificar o conteúdo da tag.
MULTIPLE: Quando presente ele define que vários itens pode serem selecionados.
DISABLE: Desativa um elemento select.
SIZE: Especifica o numero de itens visíveis em uma caixa de seleção.
TABINDEX: Define uma ordem quando o sistema de navegação é feito pela tecla TAB.
Ex.: <select id="identificação_do_campo" size="determina_a_espessura">
<option>Seleção 1</option>
<option>Seleção 2</option>
<option>Seleção 3</option>
</select>
OPTION
O tag <option> define uma opção em uma lista de seleção. Elas podem ir dentro das tags SELECT ou DATALIST. Essa tag pode ser usada sem atributos, más geralmente precisa conter o atributo VALUE para indicar o que será enviado para o servidor, veja alguns do principais atributos desta tag.
VALUE: Especifica o valor que sera enviado para o servidor.
SELECT: Especifica um item da lista pré-selecionado.
LABEL: Especifica um resumo do item da lista.
DISABLE: Desativa um elemento option.
Ex.: <select id="identificação_do_campo" size="determina_a_espessura">
<option value="opcao1">Seleção 1</option>
<option value="opcao2" selected>Seleção 2</option>
<option value="opcao3">Seleção 3</option>
</select>
OPTGROUP
A tag <optgroup> é usado para agrupar itens relacionados de uma lista de seleção, se você fará uma longa lista de opções, o agrupamento torna sua caixa de seleção mais atrativa, veja alguns do principais atributos desta tag.
DISABLE: Desativa uma categoria da lista.
LABEL: Especifica itens da mesma categoria.
Ex.: <select>
<optgroup label="Carnes">
<option value="picanha">Picanha</option>
<option value="coxao">Coxão Duro</option>
</optgroup>
<optgroup label="Molhos" disabled>
<option value="rose">Roseé</option>
<option value="madeira">Madeira</option>
</optgroup>
</select>
TEXTAREA
A tag <textarea> define um controle de campo de digitação de texto multi-linhas. Essa tag pode ser composta por um numero ilimitado de caracteres, e renderiza o texto para o usuário em um campo com o tamanho inicial definido pelo desenvolvedor, sendo especificados por números de colunas e linhas ou por altura e largura, mais isso é geralmente feito por CSS, mais isso veremos outra hora, vejamos agora alguns atributos da tag <textarea>.
ID: Esse atributo é usado para identificar o conteúdo da tag.
TABINDEX: Define uma ordem quando o sistema de navegação é feito por abas.
ACCESSKEY: Define uma tecla de atalho para o campo.
COLS: Define um numero de colunas padrão para a área.
ROWS: Define um numero de linhas padrão para a área.
READONLY: Define que a área é apenas para leitura do conteúdo.
Ex.: <textarea id="nome_do_campo" accesskey="tecla_de_atalho" cols="tamanho_em_colunas" rows="tamanho_em_linhas" >
</textarea>
BUTTON
A tag <button> define um botão clicável, dentro dessa tag você só pode colocar textos ou imagens, diferente do que você pode fazer com a tag <input>, sempre especificando o tipo e atributo para essa tag.
ID: Esse atributo é usado para identificar o conteúdo da tag.
ACCESSKEY: Define uma tecla de atalho para o campo.
DISABLE: Desativa um elemento button.
TABINDEX: Define uma ordem quando o sistema de navegação é feito por abas.
TYPE: Especifica o tipo do botão, SUBMIT, RESET ou BUTTON.
VALUE: Define o conteúdo do botão.
Ex.: <button type="tipo_do_botao" accesskey="tecla_de_atalho" value="valor_do_botão">CLIQUE AQUI!</button>
FIELDSET
A tag <fieldset> é usada para agrupar uma relação de elementos em um determinado formulário, essa tag renderiza um quadro ao redor dos itens colocados entre as tags <fieldset> </fieldset>.
Com formulários, é possível criar salas de bate-papo, livros de visita, enquetes, e muito mais.
Todo Formulário HTML é composto por controles que podem ser “Botões”, “Caixas de Textos”, “Caixas de Senha”, etc. São diversos tipos de controles que podem ser utilizados.
FORM e atributos relativos
A Tag <form> serve para informar o início e o término de um formulário, ou seja, é necessário que todos os controles do formulário fiquem posicionados entre a abertura e o fechamento da Tag <form> para que os dados sejam enviados corretamente.
Abaixo falaremos sobre esses controles:
ID: Define um nome para o formulário.
ACTION: Define para onde será enviado o conteúdo do formulário.
METHOD: Especifica o método de envio HTTP dos dados do formulário, são eles GET e POST.
ENCTYPE: Especifica como os dados do formulários serão encriptografados quando enviados para o servidor, este atributo somente será usado quando o método de envio for POST.
Ex.: <form id="nome_do_formulário" action="url_de_destino" method="metodo_de_envio" enctype="modo_de_encriptografia">
</form>
LABEL
A tag <label> define um rótulo para um elemento <input>.
ACCESSKEY: Define uma tecla de atalho para ativar um elemento.
FOR: Representa uma ligação da tag label com um campo.
Ex.: <form>
<label for="homem" accesskey="h">Homem</label>
<input type="radio" name="sexo" id="homem" value="homem">
<label for="mulher" accesskey="m">Mulher</label>
<input type="radio" name="sexo" id="mulher" value="mulher">
</form>
INPUT
A tag <input> especifica um campo de entrada onde o usuário pode inserir dados. Elementos <input> são usados dentro de uma tag <form>. Um campo de entrada pode variar de muitas formas, dependendo do tipo de atributo:
TYPE: define como será o campo de interação (um texto, por exemplo), abaixo algumas interações que podem ser atribuídas:
TEXT: Especifica o tipo que o elemento terá.
DATE: Renderiza uma pequena janela que torna possível que o usuário escolha uma data.
EMAIL: Esse atributo faz com que o campo de e-mail seja automaticamente validado verificando se há ou não o simbolo @ assim validando como um e-mail valido.
NUMBER: O campo que contem esse iten como type permite que o usuário digite apenas números no campo.
RANGE: Este renderiza uma pequena barra que com números de "escala" podendo assim facilitar na escolha de um valor apenas arrastando o mouse.
PASSWORD: Definindo esse atributo os caracteres digitados no campo são automaticamente mascarado.
HIDDEN: Pode ser utilizado quando é necessário gravar um dado que não seja preciso o usuário digitar.
FILE: Renderiza um botão para que o usuário navegue nas pastas do seu computador para que ele escolha um arquivo a ser enviado ao servidor.
CHECKBOX: Define uma caixa de seleção sendo possível fazer múltiplas escolhas.
RADIO: Define itens para seleção de maneira que não pode se escolher mais de um dado.
BUTTON: Renderiza um botão que o usuário pode definir alguma ação quando ele é clicado.
IMAGE: Define uma imagem como botão.
SUBMIT: Cria um botão de envio dos dados do formulário.
RESET: Redefine tudo o que foi escrito no formulário.
ID: Esse atributo é usado para identificar o conteúdo da tag.
NAME: Usado como o ID para identificar o conteúdo da tag, muito usado no HTML4
ACCESSKEY: Define uma tecla de atalho para a input na qual é utilizado.
ALT: Esse atributo define um nome alternativo para a imagem caso o usuário por algum motivo não conseguir visualiza-la.
CHECKED*: Pré-define um item em uma lista.
DISABLE: Desativa um elemento input.
MAXLENGTH**: Define o numero máximo para um campo.
READONLY: Define um campo somente de leitura.
SIZE**: Define o tamanho do campo.
SRC***: Especifica um endereço de uma imagem para ser utilizado em um botão de envio.
TABINDEX: Define uma ordem quando o sistema de navegação é feito por abas.
VALUE: Especifica o valor em uma tag input.
MAX****: Define um valor máximo para a tag.
MIN****: Define um valor minimo para a tag.
STEP****: Define uma regra de dados numéricos a serem inclusos no formulário.
* Para input type radio ou checkbox.
** Para input type text ou password.
*** Para input type image.
**** Para input type number ou range.
SELECT
A tag <select> é usada para que o usuário selecione um dado a ser adicionado ao banco de dados do servidor por uma caixa suspensa, veja alguns do principais atributos desta tag.
ID: Esse atributo é usado para identificar o conteúdo da tag.
MULTIPLE: Quando presente ele define que vários itens pode serem selecionados.
DISABLE: Desativa um elemento select.
SIZE: Especifica o numero de itens visíveis em uma caixa de seleção.
TABINDEX: Define uma ordem quando o sistema de navegação é feito pela tecla TAB.
Ex.: <select id="identificação_do_campo" size="determina_a_espessura">
<option>Seleção 1</option>
<option>Seleção 2</option>
<option>Seleção 3</option>
</select>
OPTION
O tag <option> define uma opção em uma lista de seleção. Elas podem ir dentro das tags SELECT ou DATALIST. Essa tag pode ser usada sem atributos, más geralmente precisa conter o atributo VALUE para indicar o que será enviado para o servidor, veja alguns do principais atributos desta tag.
VALUE: Especifica o valor que sera enviado para o servidor.
SELECT: Especifica um item da lista pré-selecionado.
LABEL: Especifica um resumo do item da lista.
DISABLE: Desativa um elemento option.
Ex.: <select id="identificação_do_campo" size="determina_a_espessura">
<option value="opcao1">Seleção 1</option>
<option value="opcao2" selected>Seleção 2</option>
<option value="opcao3">Seleção 3</option>
</select>
OPTGROUP
A tag <optgroup> é usado para agrupar itens relacionados de uma lista de seleção, se você fará uma longa lista de opções, o agrupamento torna sua caixa de seleção mais atrativa, veja alguns do principais atributos desta tag.
DISABLE: Desativa uma categoria da lista.
LABEL: Especifica itens da mesma categoria.
Ex.: <select>
<optgroup label="Carnes">
<option value="picanha">Picanha</option>
<option value="coxao">Coxão Duro</option>
</optgroup>
<optgroup label="Molhos" disabled>
<option value="rose">Roseé</option>
<option value="madeira">Madeira</option>
</optgroup>
</select>
TEXTAREA
A tag <textarea> define um controle de campo de digitação de texto multi-linhas. Essa tag pode ser composta por um numero ilimitado de caracteres, e renderiza o texto para o usuário em um campo com o tamanho inicial definido pelo desenvolvedor, sendo especificados por números de colunas e linhas ou por altura e largura, mais isso é geralmente feito por CSS, mais isso veremos outra hora, vejamos agora alguns atributos da tag <textarea>.
ID: Esse atributo é usado para identificar o conteúdo da tag.
TABINDEX: Define uma ordem quando o sistema de navegação é feito por abas.
ACCESSKEY: Define uma tecla de atalho para o campo.
COLS: Define um numero de colunas padrão para a área.
ROWS: Define um numero de linhas padrão para a área.
READONLY: Define que a área é apenas para leitura do conteúdo.
Ex.: <textarea id="nome_do_campo" accesskey="tecla_de_atalho" cols="tamanho_em_colunas" rows="tamanho_em_linhas" >
</textarea>
BUTTON
A tag <button> define um botão clicável, dentro dessa tag você só pode colocar textos ou imagens, diferente do que você pode fazer com a tag <input>, sempre especificando o tipo e atributo para essa tag.
ID: Esse atributo é usado para identificar o conteúdo da tag.
ACCESSKEY: Define uma tecla de atalho para o campo.
DISABLE: Desativa um elemento button.
TABINDEX: Define uma ordem quando o sistema de navegação é feito por abas.
TYPE: Especifica o tipo do botão, SUBMIT, RESET ou BUTTON.
VALUE: Define o conteúdo do botão.
Ex.: <button type="tipo_do_botao" accesskey="tecla_de_atalho" value="valor_do_botão">CLIQUE AQUI!</button>
FIELDSET
A tag <fieldset> é usada para agrupar uma relação de elementos em um determinado formulário, essa tag renderiza um quadro ao redor dos itens colocados entre as tags <fieldset> </fieldset>.
Template Layout
A construção de layouts com CSS tem se constituido na grande
"dor de cabeça" dos desenvolvedores comprometidos com os padrões web.
Você encontra na Internet uma infinidade de layouts CSS prontos ou mesmo
ferramentas online geradoras de layouts personalizados. Contudo até mesmo estas
ferramentas têm suas limitações, pois é impossível contemplar todas as
variantes de personalização.
Assim, quando se trata de layouts intrincados e fora de determinados padrões, até mesmo os mais experientes desenvolvedores acabam por dispender tempo extra para resolver as inconsistências de renderização.
Assim, quando se trata de layouts intrincados e fora de determinados padrões, até mesmo os mais experientes desenvolvedores acabam por dispender tempo extra para resolver as inconsistências de renderização.
Document Flow
Um documento de fluxo é projetado para "conteúdo
de refluxo", dependendo do tamanho da janela, resolução do dispositivo, e
outras variáveis de ambiente. Além disso, documentos de fluxo tem um
número de construído em características, incluindo pesquisa, modos de
visualização que a legibilidade otimizar e a capacidade de alterar o tamanho ea
aparência das fontes.Documentos de fluxo são melhor utilizados quando a
facilidade de leitura é o cenário de consumo primário documento. Em
contraste, os Documentos fixos são concebidos para ter uma apresentação
estática. Documentos fixos são úteis quando a fidelidade do conteúdo da
fonte é essencial.
Propriedade Position
O Position é uma propriedade perigosa para iniciantes.
Normalmente o desenvolvedor que acaba de conhecer essa propriedade, acha que
ela é a resposta para todos os problemas de posicionamento e diagramação de
layout. Pelo contrário. O Position não serve para diagramar a estrutura de
layouts. Para isso, você utiliza apropriedade float do css. O Position vai
servir para fazer coisas mais simples.
Existem 3 tipos de valores que usamos na propriedade position: fixed, relative e absolute.
Position Fixed
O position: fixed; irá fixar a posição do elemento na coordenada que você definir. A medida que a página é rolada, o elemento continua fixo na posição que você definiu e o conteúdo da página rola normalmente.
Position Relative Todos os positions precisam de um ponto para iniciar o cálculo da coordenada para assim posicionar o elemento na tela. Ao contrário do que muitos acham, esse ponto não é o ponto central do elemento, o ponto base é o canto superior esquerdo do elemento. A partir deste canto, o browser irá calcular a coordenada que você definiu e irá posicionar o elemento no viewport.
O position relative posiciona o elemento em relação a si mesmo. Ou seja, o ponto zero será o canto superior esquerdo, e ele começará a contar a partir dali.
Existem 3 tipos de valores que usamos na propriedade position: fixed, relative e absolute.
Position Fixed
O position: fixed; irá fixar a posição do elemento na coordenada que você definir. A medida que a página é rolada, o elemento continua fixo na posição que você definiu e o conteúdo da página rola normalmente.
Position Relative Todos os positions precisam de um ponto para iniciar o cálculo da coordenada para assim posicionar o elemento na tela. Ao contrário do que muitos acham, esse ponto não é o ponto central do elemento, o ponto base é o canto superior esquerdo do elemento. A partir deste canto, o browser irá calcular a coordenada que você definiu e irá posicionar o elemento no viewport.
O position relative posiciona o elemento em relação a si mesmo. Ou seja, o ponto zero será o canto superior esquerdo, e ele começará a contar a partir dali.
Position Absolute
O Position Absolute é um tanto diferente do Relative. Enquanto o elemento com Position Relative utiliza seu próprio canto para referenciar sua posição, o elemento com Position Absolute se utiliza do ponto superior esquerdo de outros elementos. Estes elementos são os parentes dele do elemento com position absolute. Mais especificamente o pai.
Propriedade Float
O Float é uma propriedade que faz o objeto flutuar à
esquerda ou à direita do restante do conteúdo. Se quisermos o menu à esquerda e
o conteúdo à direita, vou descrever como isso é feito.Para começar, vou usar
uma estrutura Html simples com 3 tags Div:
<div class="tudo">
<div class="menu">Menu</div>
<div class="conteudo">Conteúdo</div>
</div>
Agora para fazer com que o menu fique a esquerda e o conteúdo a direita, fazemos o seguinte:
<div class="tudo">
<div class="menu">Menu</div>
<div class="conteudo">Conteúdo</div>
</div>
Agora para fazer com que o menu fique a esquerda e o conteúdo a direita, fazemos o seguinte:
.menu { float: left; width: 30%; }
.conteudo { float: right; width: 60%; }
Mas isso pode gerar uma série de dores de cabeça mais
a frente no desenvolvimento. Vamos estudar o que pode dar errado e entender o
porquê.
Esta técnica gera 2 erros de renderização:
Erro1. Float sobrepõe o resto do site:
Note que a borda do div pai que chamamos de “tudo” não
está acompanhando os divs internos (.menu e .conteudo).
Para forçar o div “tudo” a circular também os objetos
com float, mude o seu modo de exibição para table desta forma:
UPDATE: um hack que pode funcionar melhor que o
display:table; é adicionar uma div com clear: both; depois de todos os divs
flutuantes.
.clear { clear: both; } <div class="clear">
</div>
Muito bom, agora que o seu float está integrado com o
restante do conteúdo da maneira que você queria, falta o cheque-mate.
Erro 2. Float:right não alinha com o Float:left:
Quem já encontrou este problema sabe o quanto é
irritante. Em alguns casos, as colunas não ficam uma do lado da outra NUNCA,
por mais que você tente.
Para corrigir isso devemos usar o Float da maneira correta.
Ao invés de colocar float:left; no da esquerda e float:right; no da direita,
colocamos apenas no da esquerda e deixamos o da direita alinhar naturalmente
com um espaço de margem.
Veja como é simples:
.menu { float: left; width: 30%; }
.conteudo { margin-left: 30%; }
Veja o código combinado de html e css:
<!-- CSS -->
<style rel="stylesheet"
type="text/css">
.tudo { display: table; }
.menu { float: left; width: 30%; }
.conteudo { margin-left: 35%; }
</style>
<!-- HTML -->
<div class="tudo">
<div class="menu">Menu</div>
<div class="conteudo">Conteúdo</div>
</div>
Finalmente, um float dentro dos padrões e funcionando em
qualquer browser.
Taquigrafia CSS
O método abreviado ou simbólico de escrita, com o objetivo de melhorar a velocidade da escrita. A diferença entre taquigrafia e estenotipia é que a taquigrafia é feita à mão, enquanto que a estenotipia usa máquinas próprias para a escrita dos taquigramas.
O uso da notação taquigráfica pelo CSS ajuda na escrita de um CSS (Cascading Style Sheets) mais limpo, o que facilita a manutenção, e para o uso na Web melhora o carregamento da página.
Em um resumo o CSS Taquigráfico transforma varias chamadas da mesma
propriedade em uma única, nada melhor para explicar que exemplos de uso, então
vamos a eles.RGB (cores)
Aplicando técnicas de regras css abreviadas.
• Cor
O uso da propriedade de cor RGB, se da por #rrggbb
A chamada:
color: #AABBCC;
color: #ABC;
Nesse exemplo usamos os índices repetidos por apenas 1 o AA virou A o BB
-> B o CC -> C
• Fundo
Background - background: background-color
background-image background-repeat background-attachment background-position
ex: background: #ABC url(imagem.png) no-repeat fixed center center;
• Margem e Padding
Margin - margin: Top Right Bottom Left;
ex: margin: 1px 2px 3px 4px;
obs: A propriedade Margin é similar a Padding
List - list-style: list-style-type
list-style-position list-style-image
ex: list-style: katakana outside url(imagem.png);
• Fonte
Font - font: font-style font-variant font-weight
font-size font-family
ex: font: italic small-caps bold 50px serif;
Outline - outline: outline-width outline-style
outline-color
ex: outline: 3px dotted #ABC;
obs: A propriedade Border funciona da mesma maneira
Pode-se omitir alguma(s) propriedade(s) como por exemplo:
background: url(imagem.gif) no-repeat;
Assinar:
Comentários (Atom)