Curso Css Junto HTML de Codeacademy

CURSO CSS JUNTO HTML DE CODEACADEMY
Comenzamos introduciendo que CSS es la parte estética de una

página web, la cual se aplica al archivo html.
Estas dos funciones se encuentras separadas por que puedes
aplicar el mismo formato a varios elementos del archivo html
con una simple línea de código en css.
Hay dos maneras de poner Css la primera es poner tu css entre
las tags de <style></style> que van en el encabezamiento <head>
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: purple;
}
</style>
<title>Result</title>
</head>
<body>
<p>Check it out! I'm purple!</p>
</body>
</html>
Para enlazar el archivo html con el css utilizamos el tag
<link></link> este tag es self-closing = <link …=… />
El tag <link> debe llevar tres atributos los cuales son
-type =”txt/css”
-rel=”stylesheet”
-href=”nombrearchivocss”
ESTRUCTURA TÍPICA DE ARCHIVO CSS

selector {
property: value;
}
p {
color: red; El punto y coma son importantes
}
-La propiedad puede ser tanto el color como la familia de letra,

tamaño…
-se pueden añadir varias propiedades en cada párrafo,
encabezamiento…
-comentarios en cs = /* */
-Para colores específicos en html se utiliza un valor de 6 dígitos y
letras = #0BA39A para colores mas específicos
-La unidad para tamaño relativo es em.
2.em equivale a dos veces el tamaño normal de la letra
<p style="font-size: 1em">One em!</p>
<p style="font-size: 0.5em">Half an em!</p>
<p style="font-size: 2em">TWO EM!</p>
-tener en cuenta que no todos los ordenadores tienen instalados
todas las fuentes , por ello lo mejor es utilizar las mas comunes.
-De todos modos puedes decirle a css que si una fuente no está
disponible que utilice otra font-family=”Verdana,serif,sans-serif”
CREAR CUADRO DE COLOR AJUSTABLE(CSS):

div{
background-color:#cc0000;
height:100px;
width:100px;
}
-Otra propiedad de CSS son los border(s) los cuales pueden ser
asignados varios valores :
selector {
border: 2px solid red;
}
-Podemos alterar el tamaño de una tabla de html en css asi:

td{
height:50px;
border:1px solid black
}
-Los links también pueden ser estilizados con la propiedad
text-decoration. Si se le añade de valor none, desubrayará el
enlace.
-Ejemplo retocar foto:
img{
height:100px;
width:300px;
border:1px solid #4682b4
}
CREAR UN BOTON INTERACTIVO CON CSS
1.Comenzamos cogiendo una sección con <div> y con ella

creamos un cuadro con height width, border-color,border style,
border-width…
2.Border-radius modifica las esquinas de objetos se le añade
como valos x px
3.Para centrar objetos utilizamos margin: auto; y
text-align:center;
ADENTRAMIENTO EN CSS
1.para seleccionar <p> que esta dentro de dos <div> hacemos:

<div>
<div>
<p>I like tacos!</p>
Especificamos la “ruta”
div div p {
/*CSS stuff!*/
}
-Con el asterisco * Podemos seleccionar todos los elementos de

la pagina en css
-con el signo > se da importancia a los archivos específicos del

tag, no a otros secundarios dentro de este.
CLASES
Otra forma de coger archivos de forma sencilla en css es

mediante las clases <h1 class=”square”>
Para después:
.square{
---.---
}
IDs
Por otro lado están las ids que hacen lo mismo pero en lugar de
class utilizamos id=”…”
PSEUDO-SELECTORES
Nos sirven para cambiar la apariencia de elementos de html que
no están en el dicho documento
selector:pseudo-class_selector {
selector:pseudo-class_selector {
property: value;
}
-Algunos pseudo selectores para enlaces son :
A:link  simplemente la vista externa del hipervínculo

A:hover  cuando pasas el ratón por encima el efecto que tiene
A:visited para enlaces visitados
P:first-child  selecciona solamente a el primero de los hijos de
un bloque
P:nth-child(nº de hijo)  selecciona el numero de hijo
SORT YOUR FRIENDS
-Border radius: 100%  para hacer círculos

-Se puede añadir id y class a una tag separándolos con espacio
POSITIONING
-utilizamos display para cambiar el posicionamiento de los

objetos y se acompaña de block ,inline, inline-block y none.
 Inline-block: permite que los elementos se pongan unos
cercas de otros(en la misma linea)
 Inline:pone los bloques al lado unos de otros pero sin
mantener su tamaño
 None: hace desparecer los objetos
-Podemos ajustar el margen para alejar o acercar objetos unos

de otros(margin)
-el padding es el espacio entre el contenido y el borde
 Con margin auto ponemos un elemento a la mitad de la

pagina, a la misma distancia de la derecha que la izq
 Si no también se puede asignar margin-top(algún valorpx)
 Para ajustar el padding: paddin-top:npx o padding: value
value value value.
 A estos parámetros se le pueden dar valores negativos y
iran al lado contrario
Por otro lado también tenemos un valor conocido como float,

que mueve elementos derech izq arriba o abajo sin interponerse
con otros, como barcos en el mar flotando.
Ifyou tell an element to clear: left, it will immediately

move below any floating elements on the left side of the
page; it can also clear elements on the right. If you tell it
to clear: both, it will get out of the way of elements
floating on the left and right!
-Si un elemento tiene un valor static este estará en su posición
default.
To show you how this works, we've set
the #outer div to have absolute positioning. This
means that when you position the #inner div, it will
be relative to #outer. (If #outer had the default
positioning of static, then #inner would get
positioned relative to the entire HTML document.)
Relative positioning is more straightforward: it tells

the element to move relative to where it would have
landed if it just had the default static positioning.
-Con position:fixed “pegamos” un elemento a la pantalla y

aunque bajemos o subamos en la pagina este va a venir con
nosotros.
-Para poner una foto de fondo en css utilizamos:
.hero {
background-image:
url("https://s3.amazonaws.com/codecademy-
content/projects/make-a-website/lesson-
2/bg.jpg"); background-size: cover; }

Curso Css Junto HTML de Codeacademy

Transféré par

Informations du document

Titre original

Copyright

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Curso Css Junto HTML de Codeacademy

Transféré par

Droits d'auteur :

CURSO CSS JUNTO HTML DE CODEACADEMY

Comenzamos introduciendo que CSS es la parte estética de una

ESTRUCTURA TÍPICA DE ARCHIVO CSS

-La propiedad puede ser tanto el color como la familia de letra,

CREAR CUADRO DE COLOR AJUSTABLE(CSS):

-Podemos alterar el tamaño de una tabla de html en css asi:

CREAR UN BOTON INTERACTIVO CON CSS

1.Comenzamos cogiendo una sección con <div> y con ella

1.para seleccionar <p> que esta dentro de dos <div> hacemos:

-Con el asterisco * Podemos seleccionar todos los elementos de

-con el signo > se da importancia a los archivos específicos del

Otra forma de coger archivos de forma sencilla en css es

-Algunos pseudo selectores para enlaces son :

A:link  simplemente la vista externa del hipervínculo

SORT YOUR FRIENDS

-Border radius: 100%  para hacer círculos

-utilizamos display para cambiar el posicionamiento de los

-Podemos ajustar el margen para alejar o acercar objetos unos

 Con margin auto ponemos un elemento a la mitad de la

Por otro lado también tenemos un valor conocido como float,

Ifyou tell an element to clear: left, it will immediately

Relative positioning is more straightforward: it tells

-Con position:fixed “pegamos” un elemento a la pantalla y

-Para poner una foto de fondo en css utilizamos:

Vous aimerez peut-être aussi