Potafolio 2C-2
Programación II
Aprendamos a Programar
Concepto de CSS
CSS son las siglas de Cascading Style Sheets - Hojas de Estilo en Cascada - que es un lenguaje que describe la presentación de los documentos estructurados en hojas de estilo para diferentes métodos de interpretación, es decir, describe como se va a mostrar un documento en pantalla, por impresora, por voz (cuando la información es pronunciada a través de un dispositivo de lectura) o en dispositivos táctiles basados en Braille.
Reglas
Selectores
Cualquier elemento HTML es un posible selector CSS1. El selector es simplemente el elemento que está conectado a un estilo particular. Por ejemplo, el selector en:
P { text-indent: 3em }
es P.
Selectores de clase
Un selector sencillo puede tener diferentes clases, permitiendo así al mismo elemento tener diferentes estilos. Por ejemplo, un autor puede querer mostrar el código en un color diferente dependiendo del idioma:
code.html { color: #191970 } code.css { color: #4b0082 }
El ejemplo de arriba ha creado dos clases, css y html para usar con el elemento CODE de HTML. El atributo CLASS se usa en HTML para indicar la clase de un elemento, por ejemplo,
<P CLASS=advertencia>Solo se permite una clase por selector. Por ejemplo, code.html.proprietario no es válida.</p>
Las clases también pueden ser declaradas sin elementos asociados:
.nota { font-size: small }
En este caso, la clase nota puede usarse con cualquier elemento.
Una buena práctica es llamar a las clases de acuerdo a su función y no por su apariencia. La clase nota del ejemplo de arriba pudo haber sido llamada pequeña (small), pero este nombre perdería todo significado si el autor decidiera cambiar el estilo de la clase de tal modo que ya no tuviera una fuente pequeña.
Selectores ID
Los selectores ID son asignados individualmente con el propósito de una definición en términos 'por elemento'. Este tipo de selector debería ser usado con moderación debido a sus inherentes limitaciones. Un selector ID se asigna mediante el uso del indicador "#" para preceder un nombre. Por ejemplo, un selector ID podría asignarse así:
#svp94O { text-indent: 3em }
Esto sería referenciado en HTML por el atributo ID:
<P ID=svp94O>Texto con sangría 3em</P>
Que es un estilo en css
Y puede que te preguntes qué es un bloque. Como bloque puede entenderse todo lo comprendido dentro de elementos con cierre, como <body> </body>, <p> </p>, <form> </form>, <table> </table>, <td> </td>, <div> </div>, etc., y al aplicar estilos con CSS no es buena idea escribir nada fuera de estos elementos. En lugar de ser un nombre de elemento HTML, un bloque también puede tener un nombre definido por el programador, por ejemplo "menu", y generalmente son éstos los que contienen en su interior a los anteriores o a otros bloques definidos por el usuario. El número de bloques en una página puede ser muy elevado (más de mil), y dependerá de la capacidad del navegador utilizado.
Veamos cómo funciona cada cosa:
Los Márgenes de bloque son el espacio comprendido entre el bloque y el borde de la ventana activa del navegador. Se controla con el atributo margin.
Los Bordes de bloque, sin aplicar estilos, no son visibles, y es como un cuadro imaginario que envuelve todo el contenido del bloque. Su atributo de control es border.
Espaciado interno del bloque es la distancia entre el borde del bloque y su contenido. Es el atributo padding (en inglés significa algo así como "acolchado")
El Estilo y color de los bordes, son evidentes: son las líneas que delimitan el bloque, que pueden dibujarse de varias formas en cuanto a tipo de trazo, grosor y color. Estos dos atributos también pueden actuar sobre los bordes de otros elementos contenidos dentro de un bloque, como formularios, tablas, gráficos, etc.
El Color del fondo se controla con las mismas instrucciones que las de la página HTML: background. Los parámetros de color, al igual que en HTML, se pueden escribir con su nombre (en inglés) o con la notación RGB en hexadecimal.
El Tamaño son las dimensiones del bloque. Si no se indican dimensiones, por defecto, el bloque ocupará todo el ancho de la ventana, y de alto lo que su contenido precise. Se utilizan dos atributos para controlarlo: width para el ancho y height para el alto.
Propiedades de CSS
Tipos
PropiedadDescripciónValores
contadorContadorcounter(nombre, estilo)
familia-genéricaFamilia genérica de fuentecursive | fantasy | monospace | serif | sans-serif
formaFormarect(top, right, bottom, left)
tamaño-absolutoTamaño absoluto de fuentexx-small | x-small | medium | large | x-large | xx-large
tamaño-relativoTamaño relativo de fuentelarger | smaller
uri (para imagen de fondo o fuentes web)Dirección absoluta o relativaurl("ruta_y_nombre_de_archivo")
Tipo de letra (fuente)
PropiedadDescripciónValores
fontpropiedad compuesta[ [ font-style || font-variant || font-weight ]? font-size [ / line-height ]? font-family ] | caption | icon | menu | message-box | small-caption | status-bar
font-familytipo de letra (fuente)[ nombre-fuente | familia-genérica ] [, nombre-fuente | familia-genérica ]*
font-sizetamañotamaño-absoluto | tamaño-relativo | distancia | porcentaje
font-styleinclinación (cursiva)normal | italic | oblique
font-variantversalitasnormal | small-caps
font-weightgrosor del trazo (negrita)normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Texto
PropiedadDescripciónValores
colorcolor del textocolor
directiondirección del textoltr | rtl
letter-spacingespacio entre carácteresnormal | distancia
line-heightespaciado entre líneasnormal | número | distancia | porcentaje
text-alignalineación del textocenter | justify | left | right
text-decorationdecoración del textonone | blink | line-through | overline | underline
text-indentsangría de la primera líneadistancia | porcentaje
text-transformmayúsculas / minúsculasnone | capitalize | lowercase | uppercase
unicode-bididirección del textonormal | embed | bidi-override
vertical-alignalineación verticalbaseline | bottom | middle | sub | super | text-bottom | text-top | top | distancia | porcentaje
white-spaceespacios en blanco, saltos de línea y wrapnormal | nowrap | pre | pre-line(+) | pre-wrap(+)
word-spacingespacio entre palabrasnormal | distancia