HTML Es el contenido/estructura funcional de una pagina Web. CSS Hojas de Estilo en Cascada (del inglés Cascading Style Sheets), es un lenguaje que sirve de complemento para controlar la apariencia y el estilo de HTML. CSS describe como los elementos dispuestos en la página son presentados al usuario.En CSS se puede aplicar el formato cuando corresponde más de un estilo.Se puede aplicarle el mismo formato a diversos elementos de HTML sin reescribir el código una y otra vez.Se puede aplicar una apariencia y un formato similares a varias páginas de HTML desde un sólo archivo CSS.Se puede hacer que un selector tenga muchas propiedades.
Para asociar las reglas de estilo de CSS con HTML hay tres maneras:1. Directamente colocamos en la etiqueta de cada elemento con atributo style, entre (" ") comillas, cada propieded separada de su valor por (:) dos puntos y de otra propiedad por (;) punto y coma, quedara definido solo ese elemento. Ejemplo:
| <p style="color:#0B0B61; background-color:#9FF781; font-family:Verdana; font-size:25px; text-align:center" > Asi es uno por uno</p> |
Asi es uno por uno |
| <head> <style type"text/css"> p { color:#0B0B61; background-color:#9FF781; font-family:verdana; font-size:25px; text-align:center; } </style> </head> <body> <p>Asi es en head</p> </body> |
Asi es en head |
En este caso todos los párrafos de la página tendran el mismo formato.
3. Agrupar las reglas de estilo en un archivo independiente con extensión CSS, Conectando el archivo HTML con el archivo CSS y para eso debemos crear una etiqueta link entre las etiquetas de <heead></head> en el archivo HTML. La etiqueta link necesita 3 atributos:. Un atributo type que indica al navegador cual es el formato de archivo "text/css".. Un atributo rel que se usa para definir la relación entre el archivo enlazado y el documento HTML "stylesheet".. Un atributo href que hace referencia al archivo CSS externo que afectará la presentación de esta página. <link type="text/css" rel="stylesheet" href="stylesheet.css" / >En HTML un elemento esta formado por: Una etiqueta de apertura, cero o más atributos y un texto encerrado por las etiquetas. Una etiqueta de cierre.
<p>Texto</p>
En CSS cada Elemento de HTML es un Selector En CSS cada atributo de HTML es una propiedad. En CSS cada valor de HTML es un Valor.
El punto y coma (; ) le indica a CSS que es el fin de un par propiedad-valor
La sintaxis de CSS es diferente a la de HTML. El formato general se ve así:
| selector { propiedad: valor; } | p { color: red; } |
Este selector se puede usar para aplicar el estilo de CSS a cada elemento en la página. Por ejemplo:
| * { propiedad: valor; } | * { border: 2px solid black; } |
Se creara un borde sólido de dos píxeles de ancho alrededor de cada elemento en la página de HTML
Podemos agrupar varios selectores HTML con una misma regla de estilo. Esta característica nos permite ahorrar la escritura de reglas duplicadas para diferentes selectores HTML. Ejemplo, queremos la misma fuente para los selectores h1, h2 y h3 : En HTML: <h1>Título de nivel 1</h1> <h2>Título de nivel 2</h2> <h3>Título de nivel 3</h3> En CSS y separados por coma (,) se da el mismo estilo a todos al mismo tiempo.
| selector 1, selector 2, selector 3 { propiedad: valor; } | h1, h2, h3 { font-family:verdana; } |
También podemos además de los estilos iguales colocar a cada selector estilos únicos para cada uno. así:
| h1 { color:#2EFEC8; } h2 { color:#FF00FF; } h3 { color:#00FF00; } |
Título 1Título 2Título 3 |
En HTML es posible anidar elementos dentro de otros, así: <div> <div> <p> ¡Me gusta disfrutar la naturaleza!</p> </div> </div>
En CSS se pueden referir especificamente a estos anidados Para enfocarse en las <p> que están dentro de los dos <div>, y no en todas las <p> se pueden seleccionar en la pestaña CSS de esta forma:
| selector1 selector2 selector3 { propiedad: valor; } | div div p { color: #DF01D7; } |
Si quieres enfocarte en los hijos directos (es decir, los elementos que están directamente anidados dentro de otro elemento, sin elementos intermedios) puedes usar el símbolo >, así:
| selector1 > selector2 { valor: propiedad; } | div > p { color: #C93F3F; } |
Esto se refiere únicamente en las <p> que estén anidadas directamente dentro de las <div>; no se enfocará en los párrafos que estén, digamos, anidados dentro de listas que, a su vez, estén anidadas dentro de las <div>.
Ciertos selectores tendrán "prevalencia" sobre otros si tienen un valor de especificidad mayor.
ul li p { es CSS más específico que simplemente p {, así que, cuando CSS ve etiquetas que son <p> y están dentro de listas no ordenadas, aplicará el estilo más específico (ul li p {) al texto dentro de las listas.
El código de CSS li p { prevalece sobre el código p { , y class prevalece sobre el código li p {.
Sirven para aplicar el mismo estilo a varios selectores, simplemente puedes aplicar la misma clase a todos esos elementos de HTML y luego definir el estilo para esa clase en la pestaña de CSS. Los selectores Class son asignadas a los elementos de HTML asi:
<div class="cuadrado"></div> En CSS, class se identifican con un punto (.) así:
| punto(.) y nombre que dimos a class en HTML { propiedad: valor; propiedad: valor; } | .cuadrado { height: 100px; width: 100px; } |
Esto te permite tomar elementos de diferentes tipos y darles el mismo estilo.
Los identificadores son asignados a los elementos de HTML usando la letras
<div id="primero"></div>
Los identificadores se reconocen en CSS con un signo de numeral (#):
| # nombre asignado al id en HTML { propiedad: valor; } | #primero { height: 50px; } |
La diferencia fundamental en la definición de un estilo por medio de Id con respecto a las clases, es que sólo podremos aplicar dicho estilo a una sola marca dentro de la página HTML, ya que todos los Id que se definen en una página HTML deben ser distintos.
Un Pseudo-selector es el que hace referencia a un elemento especifico de HTML
La sintaxis de CSS para los pseudo-selectores es:
| elemento: pseudo-selector { propiedad: valor; } | elemento: pseudo-selector { propiedad: valor; } |
Algunos pseudo-selectores son:
Existe una cantidad de pseudo-selectores útiles para los enlaces incluidos: puedes controlar la apariencia de enlaces que han sido y que no han sido visitados; e incluso de aquellos sobre los que el usuario pasa el puntero pero que aún no ha hecho click
a:link: Un enlace sin visitar.
a:visited: Un enlace que ha sido visitado.
a:hover: Un enlace sobre el que pasas el puntero.
Asi en HTML
<a href="dirección de url"></a>
Asi en CSS
| a: link { propiedad: valor } | a: link { color: red } |
Otro pseudo-selector útil es first-child. Se usa para aplicar el estilo únicamente a los elementos que son los primeros hijos de un elemento. Por ejemplo:
En HTMl:
<div> <p> Este es el unico que tiene en cuenta</p> <p> Este queda igual </p> </div>
Asi es en CSS
| selector: first-child { valor: propiedad; valor: propiedad; valor: propiedad; } | p: first-child { color: red; font-family: cursive; text-decoration: none; } |
Margin(margen) Se refiere al espacio que hay entre nuestro elemento y los elementos que lo rodean Algunos de los valores son: Auto: Esto le indica al documento que automáticamente coloque un margen igual a la izquierda y a la derecha de nuestro elemento, centrándolo en la página. También puedes establecer a la vez todos los márgenes de un elemento: simplemente comienzas con el margen superior y avanzas en el sentido de las manecillas del reloj (del superior al derecho, al inferior, y al izquierdo). Se define en px, em, %, pt(pulgadas), auto. Ejemplo: margin: 1px 2px 3px 4px; También podemos determinar un lado específico margin-top: 2px; Si colocamos dos valores, el primero es superior e inferior y el segundo derecha e izquierda
padding Indica el espacio entre el borde y el contenido de la tabla Los valores de padding pueden darse en: px pixeles em pt pulgadas % porcentajes inherit que es heredado del elemento padre
| selector { propedad: valor; } | div { padding: 5px; } |
El posicionamiento controla la posición de los elementos de HTML, los elementos están ubicados dentro de la página en lo que se conoce como modelo de caja de CSS. Cada elemento de HTML es como una pequeña caja que lo encierra. Cada elemento de HTML tiene su propia caja para habitar. La caja más externa de cada elemento ocupa el ancho de toda la página. La propiedad position determina el punto de referencia donde se debe localizar cada elemento HTML.
| státic | Si no se especifica será static. |
| absolute | se posiciona en relación con el primer elemento padre que tiene y que no esté establecido con position static. Si no existe tal elemento, el elemento se posiciona en relación a html. |
| relative | le indica al elemento que se desplace respecto al lugar donde se encontraría si tuviera el posicionamiento predeterminado static |
| fixed | ancla un elemento a la ventana del navegador. |
| selector { propiedad: valor; | div { position: relative; |
Definición Algunos valores posibles:
| block | Esto vuelve al elemento una caja de bloque. No permitirá que nada sea ubicado junto a él en la página. Ocupa el ancho completo. | inline-block | Esto vuelve a un elemento una caja de bloque, pero permitirá que otros elementos sean ubicados junto a él en la misma línea. | inline | Esto hace que un elemento sea ubicado en la misma línea que otro elemento, pero sin darle formato como bloque. Solamente ocupa el ancho más pequeño posible que requiera (pero no la línea completa). | none | Elimina completamente el elemento seleccionado de la página, incluyendo cualquier hijo o contenido que tenga. Pero no se pierde la información. |
| selector { propedad: valor; } | div { display: block; } |
Float
Sus valores son: right, left, bothEn Css:
| selector { float: valor } | div { float: right; } |
La propiedad clear se usa para que un elememto flotante se separe de los otros elememtos que esten a su alrededor y se puede desplazar hacia la izquierdo, hacia la derecha o también puede apartese de los elementos que están en la izquierda y en la derecha y desplazarse en la parte inferior. Algunos valores son: right, left, o bothLa sintaxis es :
| selector {
clear: valor } |
div {
clear: left } |
Contamos con una serie de propiedades relacionadas a fuentes:
| font-family | Fuente de un elemento, algunas de las fuentes más comunes que puede acceder el navegador son: Arial, Arial Black, Arial Narrow, Courier New, Georgia, Impact, Tahoma, Times New Roman, Verdana, etc. |
| font-size | Tamaño de la fuente se puede dar en px(pieles), %(porcentajes) y em(). |
| font-style | Estilo de fuente para un texto y algunos valores son: oblicue, italic, normal. |
| font-weight | Establece el grosor o lo fino de los caracteres de un texto y algunos de sus vaores son: normal, bold(delgada), bolder(gruesa), lighter(), #(entre más grande el número, más gruesa es). |
| font-variant | Puede cambiar el texto en mayúsculas , y puede asumir estos valores:small-caps(mayúsculas pero más pequeñas que las mayúsculas originales) o normal. |
| letter-spacing | permiten indicar el espacio que debe haber entre los caracteres |
| word-spacing | permiten indicar el espacio que debe haber entre las palabras |
| text-indent | indenta la primera linea de un texto. A partir de la segunda línea, el texto aparece sin indentación. Podemos indicar un valor negativo con lo que la indentación es hacia la izquierda. |
| text-transform | puede inicializarse con alguno de los siguientes valores: none (No provoca cambios en el texto), capitalize(Dispone en mayúsculas el primer caracter de cada palabra), lowercase (Convierte a minúsculas todas las letras del texto), uppercase(Dispone en mayúsculas el primer caracter de cada palabra.) |
Se puede agrupar tres propiedades en el archivo de estilos: p { font:bold italic 25px verdana; } Es importante recordar que fon-weight va de primeras, font-size y font-family deben ser los últimos valores inicializados y en ese orden. No debemos separar por coma.
Los enlaces tienen muchas de las mismas propiedades del texto normal. También tienen una propiedad, text-decoration, que puede modificar para darle un toque un poco más personalizado. Algunos de los valores de text-decoration son:
| Under line : | Se muestra subrayado todas las líneas del texto |
| over line : | Subrayado en la parte superior del texto |
| line-through : | El texto se ve tachado con una línea continua |
| blink : | El texto parpadea apareciendo y desapareciendo de forma alternativa |
| none : | Es un texto normal, sin nada. |
Permite variar el comportamiento de los espacios en blanco. El estándar CSS 2.1 define cinco modelos diferentes de tratamiento de espacios en blanco:
normal | Los espacios en blanco sobrantes y los saltos de línea se eliminan. No obstante, el texto se muestra en tantas líneas como sea necesario para que sus contenidos no se salgan del elemento contenedor. |
| nowrap | Se comporta igual que normal en los espacios en blanco, pero no añade saltos de línea en el texto original, por lo que los contenidos se pueden salir de su elemento contenedor. |
| pre-wrap | Se comporta igual que pre, pero se introducen los saltos de línea que sean necesarios para que los contenidos de texto nunca se salgan de su elemento contenedor. |
| pre-line | Se eliminan los espacios en blanco sobrantes, pero se respetan los saltos de línea originales y se crean tantos saltos de línea como sean necesarios para que el contenido de texto no se salga de su elemento contenedor. |
<div></div> nos permite dividir en bloques (es decir en piezas diferentes) a las cuales podemos definir el alto y el ancho y además podemos dar atributos especiales como el color, etc.
Estos atributos tambien se utilizan para las tablas
| height | Para definir el alto |
| width | Para definir el ancho |
| background-color | Para definir el color del fondo |
| border | Para definir los bordes |
| border-radius | Para redondear un poco o mucho las esquinas del div |
| margin | Establece la margen horizontal y vertical de un elemento respecto a los elementos circundantes |
| position | Indica como debe ubicarse en el bloque y sus valores pueden ser: static, relative, absolute, fixed, inherit |
| float | Es y sus valores pueden ser: left, right, none, inherit |
| padding | Establece el espacio entre el elemento y su borde |
También podemos unir varios atributos unidos con un guion (-), ejemplo: border-top-width
Asi se define: <div style="width:100px; height:100px; background-color: #81F7D8; clear:right;"></div> y se vera asi:
Estos segmentos también se pueden enlazar rodeandolos con las etiquetas <a></a>
<span></span> Esta etiqueta nos sirve para controlar el estilo de un elemento en línea, tales como un texto, una palabra, una imagen,etc. Y podemos cambiar todos los atributos color, fondo, tamaño, etc.
Esta etiqueta se puede utilizar tambien en tablas
De el parrafo "La vida es hermosa" solo cambiaremos la palabra "hermosa" asi: <p>La vida es <span style="color:red">hermosa</span></p> y se vera asi:
La vida es hermosa
| height | Para definir el alto |
| width | Para definir el ancho |
| background-color | Para definir el color del fondo |
| border | Para definir los bordes |
| border-radius | Para redondear un poco o mucho las esquinas del div |
| margin | Es el espacio entre un elemento y otro elemento circundante, la margen es horizontal y vertical |
| position | Es y sus valores pueden ser: static, relative, absolute, fixed, inherit |
| float | Es y sus valores pueden ser: left, right, none, inherit |
| padding | Establece el espacio entre un elemento y su contenidoo |
Se puede indicarle a CSS que pruebe varias fuentes, yendo de una a la siguiente si la que estás buscando no está disponible.
Por ejemplo, si se escribe:
| p { font-family: valor 1, Valor 2, valor 3; } | p { font-family: Tahoma, Verdana, sans-serif; } |
CSS intentará primero aplicar Tahoma a los párrafos. Si el computador del usuario no tiene esa fuente, a continuación probará con Verdana, y si esa no funciona, mostrará una fuente sans-serif predeterminada.
Cuando le das un valor positivo de padding o de margin, CSS coloca ese espacio en medio del elemento y de su referente: por ejemplo, si tienes un <div> y quieres darle un margen izquierdo, margin-left, con valor 20px, CSS coloca veinte píxeles en medio del margen izquierdo del <div> y el borde de la pantalla. Esto efectivamente desplaza al <div> veinte píxeles a la derecha.
Si quieres desplazar un elemento en la otra dirección, puedes darle a CSS un valor negativo: margin-left: -20px desplazará el elemento veinte píxeles a la izquierda.
Los Comentarios son recordatarios para nosotros mismos pues el computador no lo reconoce. Los comentarios de HTML lucen así: <!--¡Soy un comentario!--> Los comentarios de CSS lucen así:/*¡Soy un comentario!*/
CSS puede entender millones de colores en forma de valores hexadecimales. El conteo hexadecimal es en base 16. Cada dígito puede ser números de (0...9) y letras de (a...f) Los valores hex siempre comienzan con un signo de numeral (#), tienen hasta seis "dígitos" de largo y no distinguen entre mayúsculas y minúsculas. #FFC125 y #ffc125 representan el mismo color.
Cuando ajustamos el tamaño de la fuente, especificamos que la unidad que debemos usar es px (de "píxeles"), así:
| selector { propiedad: valor } | p { font-size: 10px; } |
Un píxel es un punto en la pantalla del computador. Cuando se habla de pixeles , se habla de tamaños especificos.Para una pantalla Smartphone que el tamaño es completamente diferente se utilizan los em. Son diferente de las etiquetas <em> </em> que usamos para dar énfasis.La unidad de font-size em es una medida relativa. un em es igual al tamaño de fuente predeterminado en cualquier pantalla que el usuario esté usando. En Smartphones el tamaño se duplica o se divide de acuerdo al tamaño del Smartphone sencillamente se tiene en cuenta: 1em es el tamaño de fuente que se usa normalmente, así que 2em es el doble de grande, y 0.5em es la mitad de ese tamaño
| selector { font-size: valor; } | p { font-size: 1em; } |
COMOCREARUNSITIOWEB https://www.comocrearunsitioweb.com
DesarrolloWeb.com http://www.desarrolloweb.com
LIBROSWEB http://librosweb.es
HTML color codes http://html-color-codes para buscar colores css
Haz Una Web.com http://css.hazunaweb.com/210.php
HTML.net http://es.html.net/tutorials/css/lesson5.php
W3SCHOOLS:COM http://www.w3schools.com/css/