Overview
CSS Basics
Lightthouse HTML “Hooks” for CSS
Overview
Custom CSS (Cascading Style Sheets) pode ser usado em todo o Lighthouse Studio para modificar a aparência da pesquisa.
Por padrão, as configurações de estilo em todo o Lighthouse Studio estão vazias. Por exemplo, se criar uma nova questão e clicar no ícone Pincel para Cabeçalho 1, não há tamanho de fonte especificado. Se nenhum tamanho de fonte for especificado no nível de questão, o tamanho de fonte especificado em um nível superior é usado. O CSS apresenta níveis de prioridade em cascata. Um tamanho de fonte pode ser especificado para todo o texto em um questionário ou para uma questão específica. Um tamanho de fonte definido para uma questão específica substitui o tamanho de fonte definido no nível de estudo.
Lighthouse Studio criou um CSS que controla os estilos de questionário. O diagrama abaixo ajuda a ilustrar como o CSS é usado no Lighthouse Studio, demonstrando os diferentes níveis de prioridade de Estilo. Estilos definidos no nível de questão sobrepõem-se aos estilos definidos no estilo do questionário. Estilos definidos nos estilos de substituição de estilo de questionário definidos na folha de estilo base ssi_style.css.
CSS Basics
CSS significa folhas de estilo em cascata. CSS permite modificar o estilo (cor de fundo, estilo de fonte, espaçamento, etc.) do HTML para páginas web. CSS permite separar o estilo da estrutura de uma página web.
CSS pode ser definido dentro dos elementos HTML. Por exemplo:
<p style=”color: green;”>
Por favor responda as questões abaixo.
</p>
O CSS “color: green;” muda a cor do texto dentro da tag <p> para verde. Este estilo pode ser separado da tag <p>. As seguintes instruções:
<style type=”text/css”>
p
{
color: verde;
}
</estilo>
<p>
Por favor responda as perguntas abaixo.
></p>
Mude todo o texto dentro de <p>Tags na página para verde.
Suponha que você tem várias páginas web e quer que o texto dentro de todas <p>Tags para que todas as páginas fiquem verdes. Você pode criar um arquivo de texto separado chamado “mystyle”.css” que inclui o seguinte CSS:
p
{
color: green;
}
No topo de cada página web dentro da <head> tag você incluiria então:
<link rel=”stylesheet” type=”text/css” href=”mystyle”.css”>>
Esta opção controla o estilo para todas as páginas web a partir de um arquivo. Para mudar a cor de verde para azul você simplesmente edita o mystyle.css. Usando o CSS desta forma torna a mudança de estilo em todas as suas páginas web muito mais fácil do que definir o estilo em cada página individual. Estilos definidos em um arquivo externo têm prioridade menor do que estilos definidos dentro de uma tag <style> na página web. Estilos definidos dentro do HTML dentro de um atributo “estilo” têm prioridade mais alta do que estilos definidos dentro de um atributo <style> tag.
CSS consiste em várias “regras” de estilo que definem como modificar a aparência do HTML. Na regra CSS abaixo o “p” é o selector e a “cor: verde” é a declaração.
p
{
color: verde;
}
O selector identifica qual parte do HTML será afectada pela declaração. A declaração consiste em uma propriedade e um valor separado por dois pontos. Declarações múltiplas são separadas por ponto-e-vírgula. Por exemplo:
p
{
cor: verde;
tamanho de fonte: 18px;
padding: 10px;
}
O selector pode ser o nome de qualquer elemento HTML. Por exemplo: p, div, span, table, tr, td, etc. Múltiplos elementos podem ser adicionados à regra separados por vírgulas. Por exemplo:
div, p, td
{
color: verde;
}
O CSS acima muda o texto dentro de <div>, <p>, e <td> tags para verde. Você também pode especificar que apenas <p> tags dentro de <div> tags devem ser selecionadas:
div p
{
color: verde; /*Volte o texto verde*/
}
Note que há um espaço separando “div” de “p”. Isto indica que apenas <p> tags dentro de <div> tags são afectadas. Note também o comentário “Tornar o texto verde”. Os comentários CSS estão contidos entre /* e */. Qualquer texto entre /* e */ não afetará o CSS.
A Class Selector é uma forma de que você possa identificar elementos HTML específicos. Suponha que você tenha o seguinte HTML:
<div class=”header1″>
Quantos anos você tem?
</div>
O <div> acima tem um atributo chamado “class” com um valor de “header1”. Você identifica uma classe no CSS colocando um “.” na frente do seu nome. Por exemplo
.header1
{
color: verde;
}
O CSS acima faz o texto dentro das tags com a classe “header1” ser verde. O Lighthouse Studio usa muito os seletores de classe. As classes são desenhadas para identificar um ou mais elementos na página web. Se existe um elemento único identificado com um “id” então um sinal “#” é usado em vez de um “.”. Por exemplo:
<div>
Quantos anos você tem?
</div>
O seguinte CSS poderia ser usado para seleccionar isto <div>:
#Q1_div
{
color: verde;
}
Lighthouse Studio inclui muitas classes e IDs dentro do HTML que ele cria para ajudá-lo a identificar áreas específicas da página. Você pode então usar esses nomes de “classe” e “id” dentro do seu CSS.
Mais informações sobre CSS podem ser encontradas em http://www.w3schools.com/css.
Lighthouse HTML “Hooks” para CSS
Lighthouse Studio gera o HTML do questionário com base nos diferentes tipos de questões e configurações que configura no software. O HTML contém atributos de “classe” e “id” em muitas de suas tags. Por exemplo, o HTML para Header 1 se parece com isto:
<div class=”header1″> Texto do Header 1 </div>
O atributo “class” na tag <div> identifica o Header 1. O seguinte CSS pode então ser usado para alterar a cor do texto do Cabeçalho 1 durante toda a pesquisa:
.header1
{
color: verde;
}
O diagrama abaixo mostra algumas das principais classes presentes no HTML do Farol.
As classes e ids adicionais podem ser examinadas visualizando o HTML do Farol. Isto pode ser feito usando “View Source” no seu navegador web.
Alguns elementos HTML no Lighthouse Studio contêm múltiplas classes e um id. Várias maneiras foram fornecidas para permitir que o CSS manipule a apresentação ou o estilo da pesquisa. O HTML para uma questão selecionada chamada “Q1” se parece com isto:
<div class=”question select”>
…
</div>
Note que duas classes “questionar” e “selecionar” foram atribuídas a esta <div> tag.
O seguinte CSS muda o estilo do cabeçalho 1 para Q1. Nenhuma outra questão é afetada.
#Q1_div .header1
{
color: blue;
}
O sinal # acima identifica a tag HTML com o id “Q1_div”. Depois de “#Q1_div” há um espaço e depois “.header1”. Esta regra CSS muda o texto do cabeçalho 1 para azul dentro da pergunta Q1. O seguinte desenha uma borda preta ao redor de todas as questões: