y sus siglas son CSS3, la ultima versión permite hacer cosas realmente geniales respecto al aspecto!.
Hay tres formas de incluir CSS en nuestra pagina:
Primera forma : ya la vimos y es mediante el atributo style.
Ejemplo :
<table style="width:100%; border:1px solid black; border-collapse: collapse;" >
Segunda forma: Mediante la etiqueta <STYLE> </STYLE>, Generalmente dentro en la Etiqueta
<HEAD></HEAD> al principio de la pagina.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title> Ejemplo CSS 1 </title>
<style >
h1 {
color:red;
}
h2 {
color:green;
}
h3 {
color:blue;
}
</style>
</head>
<body>
<h1>Titulo No. 1</h1>
<h2>Titulo No. 2</h2>
<h3>Titulo No. 3</h3>
<footer>Curso Rápido HTML</footer>
</body>
</html>
Tercera forma (Recomendada):
La tercera forma es mediante un archivo externo que se enlaza mediante la etiqueta <LINK>. Creemos
un ejemplo:
1. Con el editor de texto cree un archivo nuevo:
2. Escriba lo siguiente:
h1 {
color:red;
}
h2 {
color:green;
}
h3 {
color:blue;
}
3. Grabe el archivo con el siguiente nombre “estilos.css” con codificación UTF-8.
4. Cree un nuevo archivo
5. Escriba lo siguiente:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo CSS 2</title>
<link rel=”stylesheet” type “text/css” href=”estilos.css”>
</head>
<body> Ejemplo de CSS con archivo externo <br>
<h1>Titulo No. 1</h1>
<h2>Titulo No. 2</h2>
<h3>Titulo No. 3</h3>
<footer>Curso Rápido HTML</footer>
</body>
</html>
La primera es que la puedes usar en todas las paginas de tu proyecto sin tener que volver a escribir
dentro de cada pagina tu código CSS.
La segunda es el orden, es mucho mas fácil y legible, permitiendo modificarlo y actualizarlo mas
fácilmente.
La tercera es que al modificar un valor los estas modificando en todas las paginas que incluyen este
archivo de estilos.
CSS es genial y muy flexible y EXTENSO, por eso solo tocaremos algunas cosas aquí.
SINTAXIS
“Selector” {
“atributo” : “valor” ;
“atributo” : “valor” ;
“atributo” : “valor” ;
}
o también:
“Selector” {
“atributo” : “valor1 valor2 valor3”;
}
“Selector”
Es el nombre de una etiqueta, o un identificador o una clase.
Ejemplos:
Etiqueta
h1 {
color:blue;
}
Identificador (ID)
#nombreIdentificador {
background-color:green;
}
Clase( CLASS)
.nombreClase {
color:blue;
}
“Atributos”
Son súper extensos, conocer cada uno amerita un curso completo.
“Valor”
Es el valor del atributo y dependiendo de este puede ser uno o varios
Consejos:
El atributo y el valor siempre van separado por dos puntos (:)
Todos los atributos al final terminan con punto y coma(;)
Cada Selector comienza con una llave izquierda ({) y termina con una llave derecha (})
El error mas común es que falte uno de estos elementos y no funcionara el CSS
No hay comentarios.:
Publicar un comentario
Deja tus comentarios y preguntas