CSS Sintaxis

Equipos Programas Media Internet Telecomunicaciones Seguridad Base de Datos Programación Calidad Desarrollo Empresa

CSS

CSS Básico
- CSS Tutorial
Referencias (V2)
Metodología
- Metodología con ejemplos
Ejemplos
- CSS Ejemplo
Otros Enlaces
- Enlaces y Bibliografía

Ruta: >Programación>CSS

CSS Sintaxis

Elemento	Descripcion	Representacion	Significado	Ejemplo
1 CSS Frase
1.1 La sintaxis de una frase CSS	Partes de la Sintaxis de CSS	selector { propiedad: valor }	La sintaxis de CSS consta de tres partes, el selector, la propiedad y el valor de la propiedad.	body {color: black} En este ejemplo, 'body' es el selector, 'color' es la propiedad y 'black' es el valor de la propiedad. Significa que en la hoja html, el body tendrá el texto de color negro.
1.2 El comentario	Texto aclaratorio	/* comentario */	Se puede insertar dentro del documento css una serie de comentarios aclaratorios pero que no cumplen ninguna función ni son visibles en la presentación preliminar.	Si en una hoja CSS introducimos comentarios de la siguiente manera: /Esto es un comentario/ en el documento preliminar (html) no aparecerán estos comentarios ni tampoco ejecutarán ninguna función en la representación del estilo del documento.
2 CSS Selector
2.1 El selector	Elemento o tag HTML	selector { propiedad: valor }	El selector del CSS viene a ser la "etiqueta" del HTML, la que indica con qué parte del documento se está trabajando: cabecera, color de las letras, alineación de texto, etc.	En el siguiente ejemplo, el selector sería 'body': body {color: black} Si lo comparamos con el tag HTML, observamos que utiliza la misma palabra: <p class='center'>Este parrafo estaría alineado en el centro></p>
2.2 La agrupación	Elemento o tag HTML	selector1, selector2, selector3 { propiedad: valor }	Agrupación de selectores, separándolos por una coma	En el siguiente ejemplo, a cada título de cabecera le correspondería el mismo color verde: h1,h2,h3,h4,h5,h6 {color: green}
2.3 La clasificación	Elemento o tag HTML	selector.clase1 {propiedad: valor}selector.clase2 {propiedad: valor}	Clasifica según distintos estilos a un mismo elemento. Se diferencia del "id selector" en que sirve para varios elementos.	En el siguiente ejemplo, se definen dos tipos de párrafos en un mismo documento, uno alineado a la derecha, y otro alineado a la izquierda: p.right {text-align: right} p.center {text-align: center}
2.4 El selector ID	Elemento o tag HTML	selector #ID { propiedad: valor }	Clasifica según un estilo a un solo elemento de un documento.	En el siguiente ejemplo, se establece un estilo para un único elemento cuyo valor de id es 'para1': p#para1{text-align: center;color: red}
2.5 Los atributos	Atributo/s del Elemento	selector [atributo] { propiedad: valor }	Define un estilo para el atributo del elemento.	Lo que en html se utiliza como clasificador de un atributo para un párrafo: <p class='right'>This paragraph will be right-aligned.</p>
2.6 Las clases	Clases de un elemento	p.clase { propiedad: valor }	Los elementos como h1, h2, h3, parrafo, enlaces, etc. Pueden tener clases para diferenciarse unos de otros dentro del mismo tipo de elemento.	Por ejemplo, en el elemento de html <p> (parrafo), podemos definir clases en el css: p.right, p.left, etc.
3 CSS Propiedad
3.1 La propiedad	Propiedad/es del Elemento	selector { propiedad: valor }	La propiedad define el tipo de valor que puede ser cambiado dentro de un elementod del documento, como el tamaño de texto, color de fondo, tipo de cabecera, etc. Puede haber una sola propiedad (con su valor) o varias propiedades separadas por el signo punto y coma.	En el siguiente ejemplo, la propiedad 'color' está especificando cual es el color que se aplica al body de el documento, que en este caso es el negro: body {color: black} (en este caso solo hay una propiedad) p {text-align:center;color:red} (en este caso, hay dos propiedades: alineamiento del texto y el color, ambos aplicados al selector 'párrafo').
3.2 El valor de la propiedad	Valor de la propiedad del Elemento	selector { propiedad: valor }	Palabra que define el valor de la propiedad. La propiedad tiene un valor que puede ser cambiado dentro de un elemento del documento, como un color para el fondo, otro color para el texto, el tamaño de la cabecera o el tamaño del texto.	Por ejemplo, si quisieramos poner el valor negro al atributo color del selector párrafo del documento, escribiríamos lo siguiente: p {color: black}
3.3 El valor único	La propiedad del elemento sólo tiene un valor.	selector { propiedad: valor }	Es aquel que actúa de valor único de una propiedad, y que es definido mediante una sola palabra.	En el siguiente ejemplo se define el valor negro (compuesto de una sola palabra) para el atributo color, y se escribe de la siguiente manera: body {color: black}
3.4 El valor compuesto	El valor de la propiedad puede ser múltiple, es decir, constar de varias palabras.	selector { propiedad: valor1, valor2, valor3 }	Cuando un valor de una propiedad está compuesto de dos o más palabras, este se escribe entre comillas para acotarlo.	En el siguiente ejemplo se define el valor 'sans serif' (compuesto de dos palabras) para el atributo fuente, y se escribe de la siguiente manera: p {font-family: 'sans serif'}

Página generada automáticamente desde la Base de Datos: CSS/ el 27/3/2008 19:59:14