programador

css basico


























CSS II






Sergio Rivera Romero
Texto




Describiremos las siguientes propiedades:



text-indent text-align
text-decoration letter-spacing text-transform
Sangría del texto




La propiedad text-indent permite añadir un toque de elegancia a los párrafos de texto al aplicar sangría a la primera líneade dicho párrafo. En el ejemplo siguiente se ha aplicado una sangría de 30px a todos los párrafos de texto
marcados con la etiqueta :
Alineación del texto




La propiedad CSS text-align es el equivalente al atributo align usado en versiones anteriores de HTML. Los valores posibles de esta propiedad son: left, right o center. Además, el valor justify(alineación justificada) alargará cadalínea de forma que los márgenes izquierdo y derecho estén justificados.
Decoración del texto




La propiedad text-decoration permite añadir diferentes "decoraciones" o "efectos" al texto. Por ejemplo, se puede subrayar el texto, tacharlo o ponerle un subrayado superior.
Espaciado entre caracteres




El espaciado entre los caracteres de texto se puede especificar usando la propiedadletter-spacing. El valor de esta propiedad corresponde, sencillamente, al ancho deseado. Por ejemplo, si queremos un espaciado de 3px entre los
caracteres de un párrafo de texto y 6px entre los caracteres de los encabezados .
Transformación del texto




La propiedad text-transform controla la escritura en mayúsculas de un texto. Puedes elegir entre los valores capitalize, uppercase olowercase, sin importar cómo aparece el texto original en el código HTML.
Transformación del texto
Enlaces




los enlaces en CSS permiten definir estas propiedades de forma diferente dependiendo del estado del mismo, es decir, si el enlace se ha visitado, no se ha visitado, si es el enlace activo o si el cursor está sobre dicho enlace. Esto permite añadir efectos divertidos y útiles a tu sitio web.Para controlar estos efectos se usan lo que se ha denominado como pseudo-clases.
¿Qué es una pseudo-clase?




Una pseudo-clase te permite tener en cuenta diferentes condiciones o eventos al definir una propiedad para una etiqueta HTML.










Todo enlace tiene diferentes estados. Por ejemplo, visitado o no visitado.
Pseudo-clase




:link se usa para enlaces que dirigena páginas que el usuario no ha visitado.











:visited se usa para enlaces que dirigen a páginas que el usuario ya ha visitado. Por ejemplo, el código siguiente hará que todos los enlaces visitados sean de color púrpura oscuro.
Pseudo-clase




:active se usa para enlaces que están activos.













:hover se usa cuando el puntero del ratón pasa porencima de un enlace.
Pseudo-clase




Example 1a: Espaciado entre letras














Ejemplo 1b: MAYÚSCULAS
Pseudo-clase




De forma alternativa, se puede establecer la propiedad text- decoration junto con otras propiedades para las cuatro pseudo clases.
Identificación y agrupación de elementos
(class e id)


Aplicar un estilo especial a un elemento concreto o a ungrupo concreto de elementos. los atributos class e id especificaran propiedades para los elementos seleccionados.

Agrupación de elementos con class

Agrupación de elementos con class




Queremos que los enlaces relativos al vino blanco sean amarillos, los enlaces relacionados con el vino tinto sean rojos, y el resto de enlaces de la página web sigan siendo azules.
Para lograr esto,dividiremos los enlaces en dos categorías.

Agrupación de elementos con class




podemos definir propiedades especiales para los enlaces que hacen referencia al vino tinto y al vino blanco, respectivamente.

Identificación de un elemento usando id




Lo que hace especial al atributo id es que no pueden existir dos elementos dentro del mismo documento con el mismo id. Cada id tiene...