CSS - Hojas de estilo - Sintaxis de las hojas de estilo
Tutorial creado por t0m|ta. Extraido de: http://www.tomatoma.ws/subsecciones.php?forum_id=28&catid=22&todos=1
08 de Marzo de 2006
Programación web
4 - Sintaxis de las hojas de estilo
Selectores y propiedades
Cuando definimos un estilo utilizando CSS nos encontramos con dos elementos:
El selector, que define la etiqueta a la que se aplicará el estilo. Con los selectores escogemos aquella o aquellas etiquetas cuya apariencia queremos modificar.
Las propiedades, que especifican la apariencia de la etiqueta: color, fuente etc.
En el ejemplo que vimos antes el selector era H1 todo lo demás eran las propiedades. Las propiedades van siempre entre llaves y separados entre sí por puntos y comas.
propiedad: característica;
En pseudo_código sería
|| Código: ||
||
SELECTOR { propiedad1: caraterísticas; propiedad2: características;} ||
Titulo { color: verde; fuente: arial; tamaño: 12 puntos;}
O cómo vimos en el ejemplo, en código CSS:
|| Código: ||
|| H1 {
font-family: tahoma, arial, sans-serif;
color: #B22222;
font-size: 18px; } ||
las instrucciones de estilo, puedes escribirlas todas en una línea si quieres pero resulta más difícil de leer:
|| Código: ||
|| H1 { font-family: tahoma, arial, sans-serif; color: #B22222; font-size: 18px; } ||
La última propiedad de una instrucción de estilo puede no llevar el punto y coma,
|| Código: ||
|| H1 {
font-family: tahoma, arial, sans-serif;
color: #B22222;
font-size: 18px } ||
Pero esta es una práctica muy perniciosa porque si un día decides añadir otra instrucción más (por ejemplo, negrita), es muy fácil olvidarse de que no habías puesto el punto y coma (es una cosita muy pequeña) y te pasarás horas intentando averiguar porqué tus títulos no se ven en negrita . Acostúmbrate desde ya a ponerlo siempre.
Comentarios
En CSS puedes incluir comentarios para explicar cada estilo y que así luego te sea más fácil de leer. Los comentarios no influyen en la visualización, los navegadores los ignoran. Los comentarios en css empiezan por /* y terminan con */
|| Código: ||
|| /* Párrafo alineado al centro*/
p
{
text-align: center;
/* de color negro */
color: black;
font-family: arial
} ||
Cuando definimos un estilo utilizando CSS nos encontramos con dos elementos:
El selector, que define la etiqueta a la que se aplicará el estilo. Con los selectores escogemos aquella o aquellas etiquetas cuya apariencia queremos modificar.
Las propiedades, que especifican la apariencia de la etiqueta: color, fuente etc.
En el ejemplo que vimos antes el selector era H1 todo lo demás eran las propiedades. Las propiedades van siempre entre llaves y separados entre sí por puntos y comas.
propiedad: característica;
En pseudo_código sería
|| Código: ||
||
SELECTOR { propiedad1: caraterísticas; propiedad2: características;} ||
Titulo { color: verde; fuente: arial; tamaño: 12 puntos;}
O cómo vimos en el ejemplo, en código CSS:
|| Código: ||
|| H1 {
font-family: tahoma, arial, sans-serif;
color: #B22222;
font-size: 18px; } ||
las instrucciones de estilo, puedes escribirlas todas en una línea si quieres pero resulta más difícil de leer:
|| Código: ||
|| H1 { font-family: tahoma, arial, sans-serif; color: #B22222; font-size: 18px; } ||
La última propiedad de una instrucción de estilo puede no llevar el punto y coma,
|| Código: ||
|| H1 {
font-family: tahoma, arial, sans-serif;
color: #B22222;
font-size: 18px } ||
Pero esta es una práctica muy perniciosa porque si un día decides añadir otra instrucción más (por ejemplo, negrita), es muy fácil olvidarse de que no habías puesto el punto y coma (es una cosita muy pequeña) y te pasarás horas intentando averiguar porqué tus títulos no se ven en negrita . Acostúmbrate desde ya a ponerlo siempre.
Comentarios
En CSS puedes incluir comentarios para explicar cada estilo y que así luego te sea más fácil de leer. Los comentarios no influyen en la visualización, los navegadores los ignoran. Los comentarios en css empiezan por /* y terminan con */
|| Código: ||
|| /* Párrafo alineado al centro*/
p
{
text-align: center;
/* de color negro */
color: black;
font-family: arial
} ||
Valora este capítulo:
Autor y licencia de 'CSS - Hojas de estilo - Sintaxis de las hojas de estilo'
|
Opiniona sobre 'CSS - Hojas de estilo - Sintaxis de las hojas de estilo' (2)
Tu nombre debe tener tres caracteres como mínimo.
Es necesario que te des de alta con una cuenta de correo válida.
Es necesario que te des de alta con una cuenta de correo válida.
El contenido del título de tu opinión debe tener tres caracteres como mínimo.
Es obligatorio que selecciones una valoración del recurso.
El contenido del comentario de tu opinión debe tener tres caracteres como mínimo.
Opina sobre este tutorial |
Wikis relacionados con 'CSS - Hojas de estilo - Sintaxis de las hojas de estilo'
Este documento describe el lenguaje CSS1 (Cascade Style Sheets, level 1 - hojas de estilo...
Más »
Con CSS puedes formatear tus páginas web separando completamente el contenido de la presentación. Es...
Más »
Usar CSS para diseñar la presentación del contenido. Planificar es parte de la estrategia de...
Más »
El estilo rococó suele verse como una continuación del movimiento barroco. Fue iniciado en Francia...
Más »
El trabajo en equipo es un estilo de trabajo que no todas las personas están...
Más »
