Descripción general
Básicos de CSS
Lighthouse HTML «Hooks» para CSS
Descripción general
El CSS personalizado (hojas de estilo en cascada) puede utilizarse en todo Lighthouse Studio para modificar el aspecto de la encuesta.
Por defecto, la configuración de estilo en todo Lighthouse Studio está vacía. Por ejemplo, si crea una nueva pregunta y hace clic en el icono del pincel para el encabezado 1, no se especifica el tamaño de la fuente. Si no se especifica ningún tamaño de fuente en el nivel de la pregunta, se utilizará el tamaño de fuente especificado en un nivel superior. CSS presenta niveles de prioridad en cascada. Se puede especificar un tamaño de fuente para todo el texto de una encuesta o para una pregunta en particular. Un tamaño de fuente definido para una pregunta concreta anula el tamaño de fuente definido en el nivel de estudio.
Lighthouse Studio ha incorporado CSS que controla los estilos de la encuesta. El siguiente diagrama ayuda a ilustrar cómo se utiliza el CSS en Lighthouse Studio, demostrando los diferentes niveles de prioridad de estilo. Los estilos definidos en el nivel de la pregunta anulan los estilos definidos en el estilo de la encuesta. Los estilos definidos en el estilo de la encuesta anulan los estilos definidos en la hoja de estilo base ssi_style.css.
Básicos de CSS
CSS significa hojas de estilo en cascada. CSS permite modificar el estilo (color de fondo, estilo de fuente, espaciado, etc.) del HTML de las páginas web. CSS permite separar el estilo de la estructura de una página web.
CSS puede definirse dentro de los elementos HTML. Por ejemplo:
<p estilo=»color: verde;»>
Por favor, responda a las siguientes preguntas.
</p>
El CSS «color: verde;» cambia el color del texto dentro de la etiqueta <p> a verde. Este estilo puede separarse de la etiqueta <p>. Las siguientes instrucciones:
<style type=»text/css»>
p
{
color: verde;
}
</style>
<p>
Por favor, responda a las siguientes preguntas.
</p>
Cambiar todo el texto dentro de las etiquetas <p> de la página a verde.
Suponga que tiene varias páginas web y quiere que el texto dentro de todas las etiquetas <p> de todas las páginas sea verde. Puede crear un archivo de texto separado llamado «mystyle.css» que incluya el siguiente CSS:
p
{
color: verde;
}
En la parte superior de cada página web dentro de la etiqueta <head> incluirías entonces:
<link rel=»stylesheet» type=»text/css» href=»mystyle.css»>
Esto controla el estilo para todas las páginas web desde un archivo. Para cambiar el color de verde a azul simplemente hay que editar mystyle.css. El uso de CSS de esta manera hace que cambiar el estilo a través de sus páginas web sea mucho más fácil que definir el estilo en cada página individual. Los estilos definidos en un archivo externo tienen menor prioridad que los estilos definidos dentro de una etiqueta <style> en la página web. Los estilos definidos dentro del HTML dentro de un atributo «style» tienen mayor prioridad que los estilos definidos dentro de la etiqueta <style>.
El CSS consiste en varias «reglas» de estilo que definen cómo modificar la apariencia del HTML. En la regla CSS de abajo, la «p» es el selector y el «color: verde» es la declaración.
p
{
color: verde;
}
El selector identifica qué parte del HTML se verá afectada por la declaración. La declaración consiste en una propiedad y un valor separados por dos puntos. Las declaraciones múltiples se separan con punto y coma. Por ejemplo:
p
{
color: verde;
tamaño de letra: 18px;
padding: 10px;
}
El selector puede ser el nombre de cualquier elemento HTML. Por ejemplo: p, div, span, table, tr, td, etc. Se pueden añadir varios elementos a la regla separados por comas. Por ejemplo:
div, p, td
{
color: verde;
}
El CSS anterior cambia el texto dentro de las etiquetas <div>, <p> y <td> a verde. También puede especificar que sólo se seleccionen las etiquetas <p> dentro de las etiquetas <div>:
div p
{
color: verde; /*Cambiar el texto a verde*/
}
Nota que hay un espacio que separa «div» de «p». Esto indica que sólo se ven afectadas las etiquetas <p> dentro de las etiquetas <div>. Fíjate también en el comentario «Poner el texto en verde». Los comentarios CSS están contenidos entre /* y */. Cualquier texto entre /* y */ no afectará al CSS.
Un selector de clase es una forma de identificar elementos HTML específicos. Suponga que tiene el siguiente HTML:
<div class=»header1″>
¿Cuántos años tienes?
</div>
El <div> de arriba tiene un atributo llamado «class» con un valor de «header1». Se identifica una clase en CSS colocando un «.» delante de su nombre. Por ejemplo
.header1
{
color: verde;
}
El CSS anterior hace que el texto dentro de las etiquetas con la clase «header1» sea verde. Lighthouse Studio utiliza mucho los selectores de clase. Las clases están diseñadas para identificar uno o más elementos en la página web. Si hay un elemento único identificado con un «id», se utiliza un signo «#» en lugar de un «.». Por ejemplo:
<div>
¿Cuántos años tienes?
</div>
Se podría utilizar el siguiente CSS para seleccionar este <div>:
#Q1_div
{
color: verde;
}
Lighthouse Studio incluye muchas clases e identificadores dentro del HTML que crea para ayudarle a identificar áreas específicas de la página. A continuación, puede utilizar estos nombres de «clase» e «id» dentro de su CSS.
Puede encontrar más información sobre CSS en http://www.w3schools.com/css.
Lighthouse HTML «Hooks» para CSS
Lighthouse Studio genera el HTML para su encuesta basándose en los diferentes tipos de preguntas y ajustes que configure en el software. El HTML contiene atributos «class» e «id» en muchas de sus etiquetas. Por ejemplo, el HTML del encabezado 1 tiene el siguiente aspecto:
<div class=»header1″> Texto del encabezado 1 </div>
El atributo «class» de la etiqueta <div> anterior identifica el encabezado 1. A continuación, se puede utilizar el siguiente CSS para cambiar el color del texto del encabezado 1 en toda la encuesta:
.header1
{
color: verde;
}
El siguiente diagrama muestra algunas de las principales clases presentes en el HTML de Lighthouse.
Pueden examinarse clases e ids adicionales viendo el HTML de Lighthouse. Esto puede hacerse utilizando «View Source» en su navegador web.
Algunos elementos HTML en Lighthouse Studio contienen múltiples clases y un id. Se han proporcionado varias formas para permitir que el CSS manipule la presentación o el estilo de la encuesta. El HTML para una pregunta seleccionada llamada «Q1» tiene el siguiente aspecto:
<div class=»question select»>
…
</div>
Nota que se han asignado dos clases «question» y «select» a esta etiqueta <div>.
El siguiente CSS cambia el estilo de la Cabecera 1 para la Q1. No afecta a otras preguntas.
#Q1_div .header1
{
color: azul;
}
El signo # de arriba identifica la etiqueta HTML con el id «Q1_div». Después de «#Q1_div» hay un espacio y luego «.header1». Esta regla CSS cambia el texto del encabezado 1 a azul dentro de la pregunta Q1. Lo siguiente dibuja un borde negro alrededor de todas las preguntas: