Notación de los colores

lunes, 10 de noviembre de 2014 - 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>


Estructura Html

viernes, 31 de octubre de 2014 - Publicado por ThZ KronZ en 9:55

 Estructura


<!DOCTYPE html>
<html>
<head>
<title>Ejemplo</title>
<meta charset="UTF-8">


 <!-- <meta charset="iso-8859-1">    Con este juego de caráteres nos asegura la compatibilidad a nivel mundial, pero tiene menos carácteres que UTF-8 -->




<!-- <meta charset="iso-8859-15">    Es una mejora del iso-8859-1  -->



</head>
<body>



</body>
</html>


Imagen de fondo

Se debe de poner antes del <body>.

<style type="text/css">
body {background-image: url('ruta de imagen.');}
</style>



Color de fondo

Se debe de poner antes del <body>.

<style type="text/css">
body {background-color: rgb('255,124,23');}
</style>



Etiquetas más usadas

Publicado por ThZ KronZ en 9:53


<br>                          ---> Para dar un salto de línea.
<hr>                          ---> Línea de separación.
<b></b>                    ---> Para poner algo en negrita.
<strong></strong>   ---> Para poner algo en negrita en navegadores para ciegos.
<i></i>                      ---> Para poner algo en cursiva.
<em></em>              ---> Para poner algo en cursiva en navegadores para ciegos.
<sub></sub>            ---> Poner algo como subíndice.
<sup></sup>            ---> Poner algo como superíndice.
<del></del>              ---> Tachado.
<pre></pre>             ---> Texto con formato.
<p></p>                    ---> Texto con formato.


(Cita con tabulación):

<blockquote>
A quien madruga, se le pegan las sábanas.
</blockquote>


(Cita con comillas dobles):

<q>No por mucho madrugar, amacene más temprano</q>




<bdo dir="rtl">texto de derecha a izquierda</bdo><br>
<bdo dir="ltr">texto de izquierda a derecha</bdo>



Títulos de Cabecera (h1 el más grande y h6 el más pequeño).


<h1>Primer Título</h1>
<h2>Segundo Título</h2>
<h3>Tercero Título</h3>
<h4>Cuarto Título</h4>
<h5>Quinto Título</h5>
<h6>Sexto Título</h6>


Listas

Publicado por ThZ KronZ en 9:53


Ordenada:


<ol start="99"> --> Donde pone 99 lo sustituimos por el valor que queramos queempiece.
<li>Paco</li>
<li>Maria</li>
<li>Juan</li>
<li>Antonio</li>
</ol>




Desordenada:
<ul>
<li>Paco</li>
<li>Maria</li>
<li>Juan</li>
<li>Antonio</li>
</ul>

      


Lista de Definiciones

<dl>
         <dt>HTML</dt>
                           <dd>Lenguaje de hipertexto</dd>
         <dt>CSS</dt>
                           <dd>Hoja de estilos</dd>

</dl>