Estilo para los parrafos.

martes, 11 de noviembre de 2014 - Publicado por ThZ KronZ en 9:46
Todo va dentro de la etiqueta <style> y </style>.

<style type="text/css">


 p{ 
color: red;
    text-decoration: underline;  (subrayar)          
                               line-through;  (tachar)          
                               overline; (linea por encima del texto)
                               none;  (su decoración no sea subrayada, esto se suele usar
                                           en las etiquetas de link <a>)



     text-transform: capitalize; (Primera letra de cada palabra en mayúscula)
                                uppercase;  (todo a mayúsculas)
                                lowercase; (todo minúscula)
                                none; (deja las palabras tal y como están)
  
    text-indent: 23%; (Se puede dar en %)

                      23px;  (Se puede dar en pixeles)




/// ------ InterLineado ------ \\\

letter-spacing: normal;    (la separación que llevan las letras, por defecto ,                                             se pueden poner positivos y negativos)

word-spacing: normal ;   (la separación que llevan las palabras, por defecto ,                                             se pueden poner positivos y negativos)

line-height: normal;   (Es el interlineado(separación entre renglones),por                                             defecto , se pueden poner positivos y negativos)



/// ------ Espacios en Blanco ------ \\\


white-space: normal; (espacios en blanco normal)
                   pre; (Nos respetara todos los espacios en blanco tal cual vengan)
nowrap; (Se usa para evitar que el navegador meta saltos de linea automático)



/// ------ Alineaciones ------ \\\

(Estas nos valen para poder centrar el texto)


text-aling: right; (Alineado a la derecha)
                left: (Alineado a la izquierda)
                auto;(Alineación automática)
                center;(Centrada)
                 justify;(Justificada)





/// ------ Alineación Vertical ------ \\\

vertical-align:  sub; (Para escribir un sub-índice (es referente a la linea))
 sup (Para escribir un super-índice (es referente a la linea))
                         top: (Eleva el texto  (es referente al párrafo))
 botton; (Baja el texto  (es referente al párrafo))
                      5px;Un numero positivo alinea el texto por encima ,un negativo                                    lo hace por debajo.)
                       5%;(Un porcentaje positivo alinea el texto por encima ,un
                                  negativo lo hace por debajo.)




/// ------ Texto ------ \\\   


direction: rtl; (de derecha a izquierda)
                 ltr; (escritura normal)


(Si lo aplicamos al parrafo marcamos los bordes)
width: 24px; (Ancho)          
height: 24px; (Alto)

      }

</style>

Tipografía

lunes, 10 de noviembre de 2014 - Publicado por ThZ KronZ en 17:30


Todo va dentro de la etiqueta <style> y </style>.
 .parrafo1 {text-align: left; background-color: red;}

 

Importar tu propia fuente por si el usuario no la tiene instalada:

@font-face  {font: "miFuente"; src: ('./font/miFuente.ttf') ;}






Trabajaremos todo lo relacionado con las tipografías sobre la etiqueta h1 

h1{
 font-family: "Arial","Helvetica","serif";      --> Usamos este atributo para cargar varias fuentes.
 font-style: italic ;   --> Usamos este atributo para poner todos los h1 en cursiva.
 font-variant: small-caps (o normal) ; --> Usamos este atributo para cambiar el tamaño de las mayúsculas.
 font-weight: 500 ;   --> Usamos este atributo para poner el texto en negrita, siguiendo una escala que
                                       va desde el (100-900) va de 100 en 100.
                                        El valor 500 se corresponde con el tipo de letra "normal"
                                        El valor 700 se corresponde con el tipo de letra "negrita"
                                        El valor 900 se corresponde con el tipo de letra "más llamativo"

 font-size: xx-small, x-small, small, smaller medium, large, xx-large, x-large, large, larger  ;   --> Usamos este atributo para los distintos tamaños de letra.


Otra forma de indicar el tamaño es:

 font: 12pt


}





p{ font: 12pt/1.5 bold italic Arial; } --> Con esta etiqueta indicamos que la fuente va a 12 pixeles, el 1.5 se refiere al interlineado, y los distintos tipos de tipografía.


Importar hojas de css.

Publicado por ThZ KronZ en 16:56
Hay dos formas:

Con la ruta del archivo.css:


Se agregará en el encabezado, entre las etiquetas <head> y </head>.

<link rel="stylesheet" type="text/css" href="ruta/ejemplo.css">


La anterior línea de código nos indica:

rel="stylesheet" --> Es un enlace relativo a una hoja de estilo.

href="ruta/ejemplo.css"  --> Es la ruta donde se encuentra nuestro css externo.





Importando el archivo.css:

Para usar este tenemos que tener en cuenta la palabra clave "@import"

Su estructura es:  @import url(fichero.css);


Esto va entre las etiquetas <style> y </style>.


Ejemplo:

<style type="text/css">

        @import ./carpeta/ejemplo (ficheroDePrueba.css);

</style> 







Notación de los colores

Publicado por ThZ KronZ en 16:40
Hay varios métodos:

Notación hexadecimal RGB:

Se especifican los tres valores de color (rojo, verde y azul) con valores en hexadecimal entre 00 y FF.

color: #ff8800






Notación hexadecimal abreviada:

Esta notación es muy parecida a la anterior, se indica sólo un número para cada valor rojo, verde y azul.

Ejemplo:

(#ff8800) --> abreviada.

color: #f80;





Nombre del color:

También podemos definir un color por su nombre. Los nombres de colores son en inglés, los mismos que sirven para especificar colores con HTML. color: red;


color: red;


 

Notación de color con porcentajes de RGB:

Se puede definir un color por los distintos porcentajes de valores RGB. Si todos los valores están al 100% el color es blanco. Si todos están al 0% obtendríamos el negro.

color: rgb(33%, 0%, 0%);



 

Notación por valores decimales de RGB, de 0 a 255:

De una manera similar a la notación por porcentajes de RGB se puede definir un color directamente con valores decimales en un rango desde 0 a 255.

color: rgb(200, 159, 0);




Color transparente:

Para finalizar, podemos comentar que también existe el color transparente, que no es ningún color, sino que específica que el elemento debe tener el mismo color que el fondo donde está. Este valor, transparent, sustituye al color.  (Se suele usar en fondos).

background-color: transparent;


 

Comentarios y Unidades de medida

Publicado por ThZ KronZ en 16:25

Estructura del comentario:

Va entre < >, Ejemplo:

<!--  Comentario  -->



Unidades de medida:

Hay dos tipos, si son constantes son valores absolutos, pero si varían según el ordenador que lo este utilizando se llaman valores relativos.

Valores absolutos:

 
Unidad                    Nombre                          Ejemplo
    pt                            punto                               12pt
    pc                           pica                                  4.5pc
    mm                        milímetro                          24mm
    cm                         centímetro                         2cm
    in                           pulgada (inch)                   0.12in

 

Valores relativos:

 
Unidad                    Ejemplo
    em                           2.3em   
    ex                            3.4ex    
    px                            110px   
    %                             54%    
 

 

 

Selectores

Publicado por ThZ KronZ en 16:09
selector {propiedad: valor;}

Selectores de clase:

Estos se usan para agregar el estilo a unas etiquetas de un tipo determinado, para ello se usa la palabra clave "class".


Como se crean:

.parrafo1 {text-align: left; background-color: red;}

Como se llaman:

<p class="parrafo1"> Párrafo de prueba para comprobar el estilo creado </p>






Selectores de identificador:

Son similares a los selectores de clase, pero estos solo se pueden usar para un único elemento, no para un tipo de etiquetas determinadas el caracter clave es la "#".


Como se crean:

#parrafo2 {text-align: center; background-color: green;}

Como se llaman:

<p id="parrafo2"> Párrafo de prueba para comprobar el estilo creado </p>