Sem aplicar folhas de estilo em cascata, os elementos de formulário serão exibidos de acordo com o navegador usado e sistema operacional configurações padrão. mas usando CSS. Permite criar formulários correspondentes ao design do seu site.
Decisão
Forme o estilo de elemento, como qualquer outro elemento HTML, pode ser definido usando CSS.
FIG. 6.1.. Visualização de formulário padrão no navegador Firefoxi
Imaginado por fIG. 6.1. O formulário é decorado de acordo com as configurações padrão usadas pelo navegador Firefox no Windows XP. Sua espécie mudará ao visualizar em vários navegadores em diferentes plataformas. Abaixo está uma forma típica:
"http://www.w3.org/1999/xhtml"lang \u003d "en-US"\u003e
A aparência deste formulário pode ser alterada escrevendo estilos para elementos:
forma (fronteira: 1px pontilhada #AAAAAA; preenchimento: 0 .5em;) formulário DIV (margem inferior: 1em;) entrada (cor: # 00008b; fundo-cor: # add8e6; fronteira: 1px sólido # 00008b;) Selecione ( Largura: 100px; cor: # 00008b; fundo-cor: # add8e6; fronteira: 1px sólido # 00008b;) textarea (largura: 200px; altura: 40px; cor: # 00008b; fundo-cor: # add8e6; borda: 1px sólido # 00008b;)
Agora a forma se parece na Fig. 6.2.
Discussão
Como você provavelmente adivinhou, setpoints de estilos para elementos HTML forma, entrada, textarea e selecione Eles serão aplicados a cada uma de sua instância localizada na página com a qual o arquivo de tabela de estilo está associado. Para alterar a forma de campos de campo, podemos usar muitas propriedades diferentes. Usando css você pode gerenciar quase todos os aspectos do campo
:
Conselho
Formulários e cor de fundo. Parte dos visitantes do seu site pode discernir mal as cores, e uma parte pode usar um navegador de voz. Portanto, as cores nunca devem executar funções importantes - por exemplo, as instruções como "campos amarelos são necessários para preencher" devem estar sob a proibição completa.
Considere o valor das propriedades em mais detalhes:
Número de trabalho de laboratório 4
Tabelas de estilo em cascata (CSS)
Propósito do trabalho
Conheça o conceito de tabelas em cascata estilos CSS., além de obter habilidades práticas de seu uso.
Informação teórica.
Internet Explorer. Oferece seu estilo, chamado padrão. Este estilo envolve um fundo puro branco, cor de fonte preta, todas as referências são sublinhadas e azuis, etc., e se você não gostar de tudo isso? Você já sabe como alterar vários atributos diretamente. Mesmo que os mesmos objetos forem os mesmos, você já sabe aplicar as aulas. Mas há outra possibilidade. Para especificar o estilo inteiro do documento, as chamadas tabelas de estilo hierárquico são usadas (folhas de estilo cascade - CSS), que são um conjunto de propriedades de objetos diferentes. Algo que eles se assemelham aulas, mas se a classe for criada dentro do documento e poderá ser aplicada, e talvez não, então CSS, se estiver conectado, as instalações afetarão todos os objetos no documento.
Introdução ao CSS.
O CSS é muito semelhante às aulas, apenas com a diferença de que o estilo é descrito neles para o objeto já conhecido. Para um exemplo visual, inspecione seu quarto agora (escritório, corredor ...) em que você é. Certamente, você verá muitos itens diferentes (tabela, cadeira, janela, computador). Cada um desses objetos de objeto tem características e você precisa fazer uma lista desses itens e suas características. Talvez você tenha algo da seguinte forma:
tabela:
cor marrom
Material - De madeira
um computador:
cor branca
Material - Plásticos.
Finalidade - para o trabalho
Claro, você pode ir a outra maneira, mas apenas CSS é compilado exatamente onde, em vez de objetos, objetos se projetam, e suas características são um pouco diferentes. Por exemplo, aqui está um trecho de tal documento:
corpo.
{
fundo-cor: RGB (255,255,153);
Cor: RGB (51,51,153);
}
H3.
{
Cor: RGB (255,0,0);
Fonte-família: Arial, Helvetica;
}
Aqui é perguntado qual será o estilo do corpo e do elemento H3. Essas opções que não são especificadas por padrão.
A criação de CSS não requer esforço especial e pode ser realizada em um caderno simples, embora para esses fins e existam programas especiaisFacilitando o trabalho e mostrando claramente como o documento futuro parecerá usando esse estilo. Procure por esses programas em seu disco ou de conhecidos.
2.2.Criando uma tabela de estilo no documento
Existem duas maneiras de conectar CSS. O primeiro é configurá-lo no elemento de estilo no início do documento, como classe. Isso é feito assim (exemplo 1):
Esse documento
usa mesas de estilo
Neste exemplo, na tela, você verá duas linhas consistindo de dois objetos: H3 e H3. Olha, na qual o estilo padrão do Internet Explorer se tornou. Mas não fizemos instruções no próprio objeto sobre seu estilo. Assim, não importa o quanto você tenha dotado objetos H3 e H3, seu estilo será sempre o que você especifica na mesa estilista.
2. 3. Mesa de estilo em arquivo separado
Se você gosta do estilo criado e deseja usá-lo em todos os seus documentos. Ou seu documento consiste em um conjunto Páginas HTML. E todos eles devem ter o mesmo estilo, você não precisa inserir as cordas da tabela de estilo toda vez no início do documento.
A segunda maneira de conectar CSS à página da Web é criando CSS. Em um arquivo separado, e a página em si se refere a este arquivo. Em seguida, você pode escrever na página apenas uma linha e ainda estilo, será como definido na tabela estilista em arquivo externo. Eu acho que não é necessário falar sobre os benefícios de tal maneira.
Então, no começo você cria uma tabela, seguindo as regras acima. Então, você adiciona ao elemento
Para ativar a folha de estilo de cadeia semelhante à seguinte:Link significa isso pagina atual O elemento, rel e tipo está conectado para descrever o elemento como uma tabela estilizada, mas o href contém o endereço para o qual o arquivo é com o seu CSS.
Mudança dinâmica CSS.
Você pode alterar dinamicamente o nome do plug-in com uma tabela estilista, em conformidade, alterando o estilo em si. Aqui está uma função, na linguagem JScript, que, ao chamá-lo, se qualquer estilo já estiver aplicado, remova-o e conecta um novo.
função Change_Style ()
(se (document.stylesheets.href! \u003d null)
document.stylesheets.href \u003d "newstyle.css";
}
Se a tabela de estilo estiver definida dentro da página HTML, você poderá adicionar novas definições usando a função Addrule (objeto, estilo). Onde objeto é um objeto e estilo, respectivamente, instalações estilísticas. Aqui está um exemplo em que depois de clicar no botão, uma tabela estilizada é alterada (Exemplo 2):
Este documento usa folhas de estilo
Este é o parágrafo. Clique no botão para alterar seu estilo
Depois de analisar a página com esse código, você verá como as alterações no estilo ocorre adicionando a instalação à folha de estilo.
Aulas
A classe é outra maneira de instalar como o texto deve procurar na página. Essencialmente, você define um conjunto de estilos, como cor, espessura da fonte, seu tamanho e assim por diante, mas não atribui uma tag específica. A classe é assim:
Este exemplo cria três classes: regular, superbig, direitos autorais. Abaixo é mostrado como aplicar essas classes na camada de navegação de texto.
Classe de superbig
Classe regular
Copyright de classe
Você também pode ligar especificamente a tag de classe. Por exemplo:
P.
{
Tamanho da fonte: 16pt;
Intensidade da fonte: Negrito;
}
P.small.
(Font-size: 9pt;
margem esquerda: 5em;
margem-direita: 5em;
}
Abaixo é mostrado como aplicar a classe