Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <!--#Titulo-->
- <title> </title>
- <meta name="author" content=""/>
- <!--#Etiqueta para que se muestren los carácteres UTF-8 correctamente-->
- <meta charset="UTF-8" />
- <!--#Etiqueta para poner CSS en el archivo HTML-->
- <style>
- p {color:teal;}
- </style>
- <head/>
- <!--# -->
- <body>
- <!--#Sintaxis CSS
- Se divide en selector: y declaración:
- h1 { color:azul }
- Propiedad^ ^Valor
- Los selectores aparte de elementos pueden ser de "id"s
- #menu {
- text-align: center;
- color: red;
- }
- Los selectores pueden ser clases (todo elemento que lleve la clase .center tendrá
- Estas propiedades, ejemplo <p class=center>
- .center {
- text-align: center;
- color: red;
- }
- Los selectores pueden ser clases que solo se apliquen a ciertos elementos
- Ejemplo:
- p.center {
- text-align: center;
- color: red;
- }
- Solo los <p> que contengan la clase center seran afectados.
- Se pueden agrupar los Selectores si suspropiedades son las mismas
- Ejemplo:
- h1, h2, p {
- text-align: center;
- color: red;
- }
- ################################################################################-->
- <!--#Colores en CSS para el valor color:
- aqua | black | blue | fuchsia | gray | green |
- lime | maroon | navy | olive | orange | purple |
- red | silver | teal | white | yellow
- Ejemplo:
- p {color:teal}
- Colores usando RGB
- Números
- p { color: rgb(71, 98, 176); }
- Decimales
- p { color: rgb(27%, 38%, 69%); }
- Hexadecimal
- p { color: #C00; }
- ################################################################################-->
- <!-- Que es el box model
- ┌--------------------------------margin------------------------------┐
- │ │ margin: Margen entre el borde
- │ ╔════════════════════════border═════════════════════╗ │ border: borde
- │ ║ ║ │ padding: espaciado entre
- │ ║ padding ║ │ borde y el contenido
- │ ║ ║ │ content: el contenido
- │ ║ ┌-----------------------------------------┐ ║ │
- │ ║ │ │ ║ │ background-image: poner una
- │ ║ │ content │ ║ │ img de fondo
- │ ║ │ <p>Hola</p> │ ║ │ background-color: poner un color
- │ │ de fondo
- │ │
- ################################################################################-->
- <!-- Que es DIV y SPAN
- #El tag *div* es un contenedor en bloque (block)
- * Existen dos tipos de cajas: block e inline.
- Los elementos block rompen el flujo de maquetación.
- Es decir, aparecen solos, insertando “saltos de línea”.
- #El tag *span* es un contenedor en linea (inline) Los elementos inline siguen el flujo y están contenidos
- dentro de elementos de bloque.
- Ejemplo SPAN: -->
- <!--# En el head: -->
- <style>
- .destacado-en-rojo {
- color:red;
- }
- .destacado-en-verde {
- color:red;
- }
- </style>
- <!--# En el body: -->
- <p>Ejemplo SPAN: El que pronto se acuesta y pronto se levanta, es hombre
- <span class="destacado-en-rojo">saludable</span>,
- <span class="destacado-en-verde">rico</span> y
- <span class="destacado-en-rojo">sabio</span>.</p>
- <!-- Ejemplo DIV:
- En el head: -->
- <style>
- #caja {
- height: 180px;
- width: 180px;
- background-color: black;
- margin: 20px;
- padding: 50px;
- }
- </style>
- <!--# En el body: -->
- <div id="caja">
- <p>Ejemplo DIV</p>
- </div>
- <!--###############################################################################-->
- <!--# Tipos de Margin / Padding / Border
- Margin: margin-top Padding: padding-top Border: dotted dashed
- margin-rigth padding-right solid double
- margin-bottom padding-bottom groove ridge
- margin-left padding-left inset outset
- Ejemplo:
- -->
- <p> hola <p>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement