DEFINICIÓN O CONCEPTO DE LENGUAJE CSS
CSS es un lenguaje utilizado en la presentación de documentos HTML. Un documento HTML viene siendo coloquialmente “una página web”. Entonces podemos decir que el lenguaje CSS sirve para organizar la presentación y aspecto de una página web. Este lenguaje es principalmente utilizado por parte de los navegadores web de internet y por los programadores web informáticos para elegir multitud de opciones de presentación como colores, tipos y tamaños de letra, etc.
La filosofía de CSS se basa en intentar separar lo que es la estructura del documento HTML de su presentación. Por decirlo de alguna manera: la página web sería lo que hay debajo (el contenido) y CSS sería un cristal de color que hace que el contenido se vea de una forma u otra. Usando esta filosofía, resulta muy fácil cambiarle el aspecto a una página web: basta con cambiar “el cristal” que tiene delante. Piensa por ejemplo qué ocurre si tienes un libro de papel y lo miras a través de un cristal de color azul: que ves el libro azul. En cambio, si lo miras a través de un cristal amarillo, verás el libro amarillo. El libro (el contenido) es el mismo, pero lo puedes ver de distintas maneras.
Algunas opciones básicas del lenguaje CSS por ejemplo pueden ser el poder cambiar el color de algunas típicas etiquetas HTML como <H1> (h1 es una etiqueta en el lenguaje HTML destinada a mostrar un texto como encabezado, en tamaño grande). Pero también hay funciones algo más complejas, como introducir espaciado entre elementos <DIV> (div es una etiqueta HTML para identificar una determinada región o división de contenido dentro de una página web) o establecer imágenes de fondo.
CSS es muy intuitivo y sencillo una vez se llega a aprender, ya que para su definición siempre se hace uso de un identificador de etiqueta HTML (como por ejemplo <H1>), y luego indicamos con qué aspecto queremos que se muestren todas las etiquetas <H1> que aparezcan en un documento. Al igual que con <H1> podemos definir cómo queremos que se muestren las distintas partes del documento HTML, pudiendo en cada caso definir sus propiedades (color, tipo de fuente, tamaño, espacio, imagen) con algún determinado valor deseado.
Vamos a partir de un ejemplo muy sencillo, que tratará de una página web o archivo HTML donde tan solo tendremos una párrafo de texto y sobre cuya etiqueta <p> iremos realizando cambios e iremos aplicando los conocimientos que vamos a ir adquiriendo y posteriormente veremos los resultados que obtenemos.
Resumen:
CSS es un acrónimo de Cascading Style Sheets, hojas de estilo en cascada. Por eso, cuando hablamos del estilo de una página web, o de los estilos de eXe, en realidad nos estamos refiriendo a un archivo CSS. Es en este tipo de archivos donde reside todo el "aspecto" que tendrá nuestro proyecto.
En este apartado vamos a ver todas (o casi todas) las propiedades que se pueden alterar por medio de las hojas de estilo. No se trata, por supuesto, de aprenderlos, tan sólo de tener una referencia. Así, si queremos cambiar el tamaño de la letra, tan sólo tendremos que buscar cuál es la sintaxis que debemos utilizar (obviamente, estará en el apartado fuentes).
Hay que indicar que algunos de ellos no los soporta Internet Explorer y en cambio otros no los entiende el Firefox. Así que es recomendable probarlos en ambos exploradores antes de incorporarlos a nuestras páginas.
Sintaxis
selector{propiedad:valor}
Veamos un ejemplo donde el selector p indica que todos los elementos p del documento HTML serán afectados por la declaración cuya propiedad es color y su valor es blue.
p{color:blue}
Si el valor está compuesto por varias palabras, debemos definirlo entre comillas.
p{font-family:"Times New Roman"}
Si deseas especificar más de una propiedad, deberás separarlas con un punto y coma(;).
h1{color:red; text-align:center}
Para definir los estilos de forma más clara y fácil de leer, puedes describir cada propiedad en diferentes líneas.
p
{
color:red;
text-align:center;
}
Si deseas definir una misma propiedad para varios selectores, solo debe agruparlos separándolos con una coma(,)
p, h1, h2, h3
{
color:blue;
font-family:Arial;
}
El selector class
Con el selector class se pueden definir diferentes estilos para un mismo elemento HTML.
Por ejemplo el elemento p puede ser de color azul o de color rojo. El valor del selector class debe ir antepuesto por un punto (.)
Sintaxis
p.azul {color:blue}
p.rojo {color:red}
El selector ID
El selector id se utiliza para definir un atributo el cual tiene un valor único en todo el documento. Hacemos referencia a él anteponiendo el símbolo "#".
Sintaxis
#centrado {text-align:center} /* afecta a cualquier elemento que lo use */
h3#subrayado {text-decoration:underline} /* afecta solo al elemento h3 */
Comentarios en CSS
Para agregar un comentario que ayude a ser más legible el documento utilizamos"/* comentario */".
p
{
text-align:right; /* texto alineado a la derecha */
color:blue; /* color de texto: azul */
font-family:Verdana; /* tipo de fuente:Verdana */
}
{
text-align:right; /* texto alineado a la derecha */
color:blue; /* color de texto: azul */
font-family:Verdana; /* tipo de fuente:Verdana */
}
Propiedades Css
| Tipos | ||
| Propiedad | Descripción | Valores |
| contador | Contador | counter(nombre, estilo) |
| familia-genérica | Familia genérica de fuente | cursive | fantasy | monospace | serif | sans-serif |
| forma | Forma | rect(top, right, bottom, left) |
| tamaño-absoluto | Tamaño absoluto de fuente | xx-small | x-small | medium | large | x-large | xx-large |
| tamaño-relativo | Tamaño relativo de fuente | larger | smaller |
| uri (para imagen de fondo o fuentes web) | Dirección absoluta o relativa | url("ruta_y_nombre_de_archivo") |
 Tipo de letra (fuente) |
||
| Propiedad | Descripción | Valores |
| font | propiedad compuesta | [ [ font-style || font-variant || font-weight ]? font-size [ / line-height ]? font-family ] | caption | icon | menu | message-box | small-caption | status-bar |
| font-family | tipo de letra (fuente) | [ nombre-fuente | familia-genérica ] [, nombre-fuente | familia-genérica ]* |
| font-size | tamaño | tamaño-absoluto | tamaño-relativo | distancia | porcentaje |
| font-style | inclinación (cursiva) | normal | italic | oblique |
| font-variant | versalitas | normal | small-caps |
| font-weight | grosor del trazo (negrita) | normal | bold | bolder |
lighter | 100 | 200 |
300 | 400
| 500 | 600 | 700 |
800 | 900 |
| Texto |
||
| Propiedad | Descripción | Valores |
| color | color del texto | color |
| direction | dirección del texto | ltr | rtl |
| letter-spacing | espacio entre carácteres | normal | distancia |
| line-height | espaciado entre líneas | normal | número | distancia | porcentaje |
| text-align | alineación del texto | center | justify | left | right |
| text-decoration | decoración del texto | none | blink | line-through | overline | underline |
| text-indent | sangría de la primera línea | distancia | porcentaje |
| text-transform | mayúsculas / minúsculas | none | capitalize | lowercase | uppercase |
| unicode-bidi | dirección del texto | normal | embed | bidi-override |
| vertical-align | alineación vertical | baseline | bottom | middle | sub | super | text-bottom | text-top | top | distancia | porcentaje |
| white-space | espacios en blanco, saltos de línea y wrap | normal | nowrap | pre | pre-line(+) | pre-wrap(+) |
| word-spacing | espacio entre palabras | normal | distancia |
| Bordes |
||
| Propiedad | Descripción | Valores |
| border | cuatro bordes simultáneamente | border-color || border-width || border-style |
| border-top | borde superior | border-color || border-width || border-style |
| border-right | borde derecho | border-color || border-width || border-style |
| border-bottom | borde inferior | border-color || border-width || border-style |
| border-left | borde izquierdo | border-color || border-width || border-style |
| border-color | color de los bordes | [ color | transparent ] {1, 4} |
| border-width | grosor de los bordes | [ medium | thick | thin | distancia ] {1, 4} |
| border-style | estilos de los bordes | [ none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid ] {1, 4} |
| border-top-color | color del borde superior | [ color | transparent ] {1, 4} |
| border-top-width | grosor del borde superior | [ medium | thick | thin | distancia ] {1, 4} |
| border-top-style | estilo del borde superior | [ none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid ] {1, 4} |
| border-right-color | color del borde derecho | [ color | transparent ] {1, 4} |
| border-right-width | grosor del borde derecho | [ medium | thick | thin | distancia ] {1, 4} |
| border-right-style | estilo del borde derecho | [ none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid ] {1, 4} |
| border-bottom-color | color del borde inferior | [ color | transparent ] {1, 4} |
| border-bottom-width | grosor del borde inferior | [ medium | thick | thin | distancia ] {1, 4} |
| border-bottom-style | estilo del borde inferior | [ none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid ] {1, 4} |
| border-left-color | color del borde izquierdo | [ color | transparent ] {1, 4} |
| border-left-width | grosor del borde izquierdo | [ medium | thick | thin | distancia ] {1, 4} |
| border-left-style | estilo del borde izquierdo | [ none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid ] {1, 4} |
| Margen exterior |
||
| Propiedad | Descripción | Valores |
| margin | cuatro márgenes exterior simultáneamente | [ auto | distancia | porcentaje ] {1, 4} |
| margin-top | margen exterior superior | auto | distancia | porcentaje |
| margin-right | margen exterior derecho | auto | distancia | porcentaje |
| margin-bottom | margen exterior inferior | auto | distancia | porcentaje |
| margin-left | margen exterior izquierdo | auto | distancia | porcentaje |
| Margen interior |
||
| Propiedad | Descripción | Valores |
| padding | cuatro márgenes interiores simultáneamente | [ distancia | porcentaje ] {1, 4} |
| padding-top | margen interior superior | distancia | porcentaje |
| padding-right | margen interior derecho | distancia | porcentaje |
| padding-bottom | margen interior inferior | distancia | porcentaje |
| padding-left | margen interior izquierdo | distancia | porcentaje |
| Fondos |
||
| Propiedad | Descripción | Valores |
| background | propiedad compuesta | background-attachment || background-color || background-image || background-position || background-repeat |
| background-attachment | atadura de la imagen | fixed | scroll |
| background-color | color de fondo | transparent | color |
| background-image | imagen de fondo | none | uri |
| background-position | posición de la imagen de fondo | [ [ left | center | right | distancia | porcentaje] [ top | center | bottom | distancia | porcentaje] ]? | [ [ left | center | right ] || [ top | center | bottom ] ] |
| background-repeat | repetición de la imagen de fondo | no-repeat | repeat | repeat-x | repeat-y |
| Listas |
||
| Propiedad | Descripción | Valores |
| list-style | propiedad compuesta | list-style-image || list-style-position || list-style-type |
| list-style-image | imagen del marcador | none | uri |
| list-style-position | posición del marcador | inside | outside |
| list-style-type | tipo de marcador | none | circle | disc | square | decimal | decimal-leading-zero | lower-alpha | upper-alpha | lower-greek | lower-latin | upper-latin | lower-roman | upper-roman | armenian | georgian | hebrew(-) | cjk-ideographic(-) | hiragana (-) | katakana (-) | hiragana-iroha(-) | katakana-iroha(-) |
| Tablas |
||
| Propiedad | Descripción | Valores |
| border-collapse | modo de bordes | collapse | separate |
| border-spacing | separación entre celdas | distancia distancia? |
| caption-side | posición de la leyenda | top | bottom | left(-) | right(-) |
| empty-cells | borde de casillas vacías | hide | show |
| table-layout | algoritmo ancho de tabla | auto | fixed |
| Tamaño |
||
| Propiedad | Descripción | Valores |
| width | anchura | auto | distancia | porcentaje |
| min-width | anchura mínima | distancia | porcentaje |
| max-width | anchura máxima | distancia | porcentaje |
| height | altura | auto | distancia | porcentaje |
| min-height | altura mínima | distancia | porcentaje |
| max-height | anchura máxima | distancia | porcentaje |
| overflow | si el contenido desborda al elemento | auto | hidden | scroll | visible |
| Posicionamiento |
||
| Propiedad | Descripción | Valores |
| float | modo de posicionamiento flotante | none | left | right |
| clear | lado en el que no puede haber elementos flotantes | none | both | left | right |
| position | modo de posicionamiento | absolute | fixed | relative | static |
| top | posición del borde superior del elemento | auto | distancia | porcentaje |
| right | posición del borde derecho del elemento | auto | distancia | porcentaje |
| bottom | posición del borde inferior del elemento | auto | distancia | porcentaje |
| left | posición del borde izquierdo del elemento | auto | distancia | porcentaje |
| clip | recorta el elemento | auto | forma |
| display | tipo de caja | none | block | compact(-) | inline | inline-block(+) | inline-table | list-item | marker(-) | run-in | table | table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group |
| visibility | visibilidad | hidden | collapse | visible |
| z-index | apilamiento | auto | número-entero |
| Impresora |
||
| Propiedad | Descripción | Valores |
| page-break-after | salto de página después de | auto | always | avoid | left | right |
| page-break-before | salto de página antes de | auto | always | avoid | left | right |
| page-break-inside | salto de página dentro de | auto | avoid |
| orphans | número de líneas al final de página | número-entero |
| widows | número de líneas al principio de la página | número-entero |
| Interface de usuario |
||
| Propiedad | Descripción | Valores |
| cursor | tipo de cursor | [uri,]* | auto | crosshair | default | help | move | pointer | progress | n-resize | ne-resize | e-resize | se-resize | s-resize | sw-resize | w-resize | nw-resize | text | wait |
| outline | cuatro bordes simultáneamente | outline-color || outline-width || outline-style |
| outline-color | color de los bordes | color |
| outline-width | grosor de los bordes | border-width |
| outline-style | estilos de los bordes | border-style |
| Pseudo-elementos |
||
| Nombre | Descripción | Valores |
| :after | inserta contenido después del elemento | content: contenido |
| :before | inserta contenido antes del elemento | content: contenido |
| :first-letter | primera letra | |
| :first:line | primera línea de texto | |
| content | contenido generado | normal(+) | none(+) | [ texto | uri | contador | attr(atributo) | open-quote | close-quote | no-open-quote | no-close-quote ]+ |
| counter-increment | incremento de contador | none | [ identificador número-entero? ]+ |
| counter-reset | puesto a cero de contador | none | [ identificador número-entero? ]+ |
| quotes | comillas | none | [ texto-apertura texto-cierre ]+ |
| Pseudo-clases |
||
| Nombre | Descripción | Valores |
| :active | cuando se hace clic sobre el elemento | |
| :first-child | primer elemento hijo | |
| :focus | cuando el elemento tiene el foco | |
| :hover | cuando el ratón pasa sobre el elemento | |
| :lang | idioma | :lang(en) | :lang(es) | :lang(fr) etc. |
| :link | enlaces no visitados | |
| :visited | enlaces ya visitados | |
| Propiedades no incluidas en CSS 2.1 |
||
| Propiedad | Descripción | Valores |
| font-size-adjust | ajuste de tamaño | número-decimal |
| font-stretch | anchura | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded normal | wider | narrower |
| marker-offset | distancia entre marcador y elemento | distancia |
| marks | marcas de corte de papel | crop | cross |
| text-shadow | sombreado | desplazamiento horizontal, desplazamiento vertical, tamaño desenfoque, color |
Bibliografia:
No hay comentarios:
Publicar un comentario