Hola, Bienvenido a ElementaryDownload!

Puedes seguirnos en las redes sociales o suscribirte al feed.

¡Suscríbete a nuestro blog!

Recibe en tu correo las últimas noticias del blog. Sólo ingresa tu correo para suscribirte.

Anuncia Anuncia Anuncia Anuncia

martes, febrero 1

CSS Básico: ¿Qué es CSS y para que sirve?

Para seguir este tutorial es necesario tener un conocimiento basico de HTML.
En este tutorial veremos los puntos basicos de CSS (Cascading Style Sheets) el lenguaje de estilización por excelencia., su funcion es estilizar una pagina web mediante el uso de selectores y atributos.
La sintaxis de CSS es la siguiente:
1
2
3
selector{
propiedad:valor;
}
Antes de CSS para estilizar una pagina se tenían que repetir etiquetas una y otra vez, ahora gracias a CSS y sus selectores la pesadilla termino.

¿Cómo llamar a CSS dentro de HTML?

Existen 3 métodos para incrustar un cogido CSS en un documento HTML y hacer que funcionen juntos:...

1. Estilización en linea

La estilizacion en linea se usa de la siguiente manera:
1
<h1 style="color:red;">Hola</h1>
Con ese código ya estilizados un elemento h1 para que su fuente sea de color rojo.
No es algo tan recomendado ya que no se hace uso de los selectores.

2. En el documento mismo

Podemos incluir codigo CSS mediante las etiquetas
que las podemos poner en cualquier parte de la pagina:

1
2
3
4
5
<style>
*{
font-family:Arial;
}
</style>

3. Archivo externo

Es la mas usada y recomendada ya que mediante este método se consigue una mejor organizacion de archivos, para incluir un archivo CSS externo en HTML se usa la siguiente etiqueta HTML en el :
1
<link href="/ubicacion/del/archivo.css" rel="stylesheet">

Selectores

CSS funciona en conjunto con los elementos HTML, los identifica mediante los selectores y los estiliza con las propiedades CSS, existen infinidad de selectores, ahora veremos solo unos cuantos:

Selector universal

El selector universal esta representado por un asterisco * y se usa para seleccionar a todos los elementos HTML en el documento:
1
2
3
*{
font-family:Arial;
}
En este ejemplo usamos el atributo font-family que define el tipo de fuente a usar y con el valor de Arial.

Selector de tipo

El selector de tipo es definido por el nombre del elemento a seleccionar, por ejemplo si queremos seleccionar todos los elementos h1, el selector seria asi:
1
2
3
h1{
color:red;
}

Selector de clase

Este selector es representado por un punto . se usa para seleccionar elementos que contentan el atributo class:
1
2
3
.box{
font-weight:bold;
}
El atributo font-weight se usa para definir el estilo que la letra ha de llevar, en este caso le hemos puesto el valor de bold o negrita.

Selector de id

Este selector esta representado por un # y se usa para seleccionar elementos individuales que tengan el atributo id:
1
2
3
#box{
background-color:black;
}
Esto hara que el elemento que tenga el id de box tenga un fondo negro.
Hay que notar que el atributo id es único, dos elementos no pueden tener el mismo id.

Selector de descendiente

El selector de descendiente, selecciona a cualquier elemento que descienda de el elemento padre.
1
2
3
#box ul {
color:gray;
}
Lo que hara ese selector es seleccionar a todos los ul que esten dentro de #box.

Selector de atributo

El selector de atributo, selecciona a todos los elementos que tengan el atributo y el valor especificado:
1
2
3
input[type="text"] {
background-color:blue;
}
Este selector seleccionara a todos los elementos input que tengan atributo type=”text”.

Pseudo-selector de estado

Los selectores de estado, seleccionan a los elementos dependiendo de ciertas acciones del usuario:
  • :hover (cuando el cursor pasa por encima del elemento)
  • :active (cuando el usuario clica el elemento con clic derecho o izquierdo)
  • :focus (cuando un elemento esta en foco, mayormente en cajas de texto cuando se dan los eventos del teclado)
1
2
3
4
5
6
7
8
9
10
#box:hover{
background-color:green;
}
#box a:active{
color:blue;
}
#box input:focus{
background-color:black
color:white;
}
En el ejemplo de arriba usamos tanto los selectores de estado, como el de descendencia para decir que todo que este en estado active dentro de #box tenga la propiedad color:blue.

Agrupando selectores

Podemos agrupar selectores para afectar a mas elementos usando menos lineas, para eso usamos comas:
1
2
3
#box, .box, ul li a, #box:hover, input[type="text"] {
color:red;
}

Ejemplo

Entendiendo ya los puntos anteriores procederemos a hacer un ejemplo practico:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<html>
<head>
</head>
<body>

<style>
*{
 font-family:Arial, sans-serif;
}
body{
 background-color:#111111;
}
h1{
 color:gray;
}
p{
 color:green;
}
.holamundo{
 color:orange;
}
</style>

<h1 class="holamundo">Hola mundo</h1>
<p>Esto es un texto de ejemplo que usaremos para aprender CSS!</p>

<h1>Ciao</h1>
<p class="holamundo">Soy naranja!</p>

</body>
</html>
Incrustamos el CSS dentro del mismo documento, y definimos que:
  • Linea 8: Todos elementos tengan como fuente Arial.
  • Linea 11: El elemento body tenga como color de fondo #111111.
  • Linea 14: Todos los elementos h1 sean de color gris.
  • Linea 20: Todos los elementos que tengan la clase holamundo sean de color naranja.
Obtendríamos lo siguiente:

Con este ejemplo entendemos que: el primer h1 deberia ser gris (linea 11), pero tiene como clase holamundo entonces es naranja, el segundo párrafo deberla ser verde como el primero, pero tiene la clase holamundo entonces es naranja también.
En este tutorial hemos tratado solo de unas cuantas propiedades CSS (color, font-family, background-color) que son las mas sencillas para aprender, pero existen decenas de propiedades si quieres ver una lista completa de estas, puedes revisar el siguiente PDF o esta
imagen.

0 comentarios:

Publicar un comentario

Related Posts with Thumbnails
Para descargar los pinceles!!! al hacer click se abrira la ventana en algunos casos saldra para descargarlo y todo estara normal, pero si solo aparece la ventana y no ocurre nada solo den enter a la direccion de la nueva ventana y aparecera el cuadro de descarga. Otra solucion es hacer click derecho a la palabra DESCARGAR y dar click a descargar archivo enlazado. Estamos solucionando este desperfecto..GRACIAS MaSTeR