daily pastebin goal
63%
SHARE
TWEET

Untitled

a guest Dec 12th, 2018 58 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.    
  5.         <!--#Titulo-->
  6.         <title> </title>
  7.         <meta name="author" content=""/>
  8.        
  9.         <!--#Etiqueta para que se muestren los carácteres UTF-8 correctamente-->
  10.         <meta charset="UTF-8" />
  11.        
  12.         <!--#Etiqueta para poner CSS en el archivo HTML-->
  13.         <style>
  14.             p {color:teal;}
  15.            
  16.         </style>
  17.        
  18.     <head/>
  19.     <!--# -->
  20.     <body>
  21.        
  22.         <!--#Sintaxis CSS
  23.        
  24.                 Se divide en selector:       y declaración:
  25.                                         h1              {    color:azul }
  26.                                                     Propiedad^       ^Valor
  27.                
  28.                 Los selectores aparte de elementos pueden ser de "id"s
  29.                 #menu {
  30.                     text-align: center;
  31.                     color: red;
  32.                         }
  33.                        
  34.                        
  35.                 Los selectores pueden ser clases (todo elemento que lleve la clase .center tendrá
  36.                 Estas propiedades, ejemplo <p class=center>
  37.                 .center {
  38.                     text-align: center;
  39.                     color: red;
  40.                         }
  41.                        
  42.                
  43.                 Los selectores pueden ser clases que solo se apliquen a ciertos elementos
  44.                 Ejemplo:
  45.                 p.center {
  46.                     text-align: center;
  47.                     color: red;
  48.                         }
  49.                 Solo los <p> que contengan la clase center seran afectados.
  50.                
  51.                
  52.                 Se pueden agrupar los Selectores si suspropiedades son las mismas
  53.                 Ejemplo:
  54.                 h1, h2, p {
  55.                     text-align: center;
  56.                     color: red;
  57.                         }
  58.            
  59.            
  60.         ################################################################################-->
  61.        
  62.         <!--#Colores en CSS para el valor color:
  63.  
  64.                 aqua | black | blue | fuchsia | gray | green |
  65.                 lime | maroon | navy | olive | orange | purple |
  66.                 red | silver | teal | white | yellow
  67.                
  68.                 Ejemplo:
  69.                 p {color:teal}
  70.            
  71.             Colores usando RGB
  72.                 Números
  73.                 p { color: rgb(71, 98, 176); }
  74.                
  75.                 Decimales
  76.                 p { color: rgb(27%, 38%, 69%); }
  77.                
  78.                 Hexadecimal
  79.                 p { color: #C00; }
  80.            
  81.            
  82.         ################################################################################-->
  83.        
  84.        
  85.         <!-- Que es el box model
  86.         ┌--------------------------------margin------------------------------┐
  87.         │                                                                  │ margin: Margen entre el borde
  88.         │     ╔════════════════════════border═════════════════════╗      │ border: borde
  89.         │       ║                                                   ║      │ padding: espaciado entre
  90.         │     ║                     padding                     ║      │          borde y el contenido
  91.         │     ║                                                 ║        │ content: el contenido
  92.         │     ║   ┌-----------------------------------------┐       ║        │
  93.         │     ║   │                                         │   ║      │ background-image: poner una
  94.         │     ║   │                   content               │   ║      │                     img de fondo
  95.         │     ║   │                 <p>Hola</p>             │   ║      │ background-color: poner un color
  96.         │                                                                  │                     de fondo
  97.         │                                                                  │
  98.        
  99.         ################################################################################-->
  100.  
  101.        
  102.         <!-- Que es DIV y SPAN
  103.        
  104.         #El tag *div* es un contenedor en bloque (block)
  105.                                                                 * Existen dos tipos de cajas: block e inline.
  106.                                                                 Los elementos block rompen el flujo de maquetación.
  107.                                                                 Es decir, aparecen solos, insertando “saltos de línea”.
  108.         #El tag *span* es un contenedor en linea (inline)       Los elementos inline siguen el flujo y están contenidos
  109.                                                                 dentro de elementos de bloque.
  110.    
  111.        
  112.             Ejemplo SPAN: -->
  113.            
  114.             <!--# En el head: -->
  115.             <style>
  116.                 .destacado-en-rojo {
  117.                     color:red;
  118.                 }
  119.                 .destacado-en-verde {
  120.                     color:red;
  121.                 }
  122.             </style>
  123.             <!--# En el body: -->
  124.             <p>Ejemplo SPAN: El que pronto se acuesta y pronto se levanta, es hombre
  125.             <span class="destacado-en-rojo">saludable</span>,
  126.             <span class="destacado-en-verde">rico</span> y
  127.             <span class="destacado-en-rojo">sabio</span>.</p>
  128.  
  129.            
  130.             <!-- Ejemplo DIV:
  131.            
  132.             En el head: -->
  133.             <style>
  134.                 #caja {
  135.                 height: 180px;
  136.                 width: 180px;
  137.                 background-color: black;
  138.                 margin: 20px;
  139.                 padding: 50px;
  140.                     }
  141.             </style>
  142.             <!--# En el body: -->
  143.             <div id="caja">
  144.                 <p>Ejemplo DIV</p>
  145.             </div>
  146.  
  147.            
  148.            
  149.         <!--###############################################################################-->
  150.        
  151.        
  152.         <!--# Tipos de Margin / Padding / Border
  153.        
  154.             Margin: margin-top      Padding: padding-top      Border: dotted    dashed
  155.                     margin-rigth             padding-right            solid     double
  156.                     margin-bottom            padding-bottom           groove    ridge
  157.                     margin-left              padding-left             inset     outset 
  158.        
  159.             Ejemplo:
  160.         -->
  161.  
  162.        
  163.        
  164.         <p> hola <p>
  165.        
  166.     </body>
  167. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top