Descarga la aplicación para disfrutar aún más
Lea materiales sin conexión, sin usar Internet. Además de muchas otras características!
Introducción al CSS
Ana Mayer
Compartir
Vista previa del material en texto
CSS
(Cascading style sheets)
Hojas de estilo
Lenguaje de estilo
Define colores, márgenes, líneas, posición, etc.
Estilos para aplicar al html
Mejora la presentación de las páginas
Facilita el mantenimiento
Mayor flexibilidad
Estilos iguales para varios elementos diferentes
Pueden modificarse sin cambiar el html
Ejemplo de diferentes estilos para un mismo html
https://www.w3schools.com/css/css_intro.asp
sintaxis
h1 {
color: green;
}
Título 1
Algunas propiedades básicas
background-color
color
font-family
font-size
text-align
Selectores de html
body
h1, h2, h3, h4
p
li, ul, ol
a
table, td, tr
Para asignar un estilo cada vez que se use cierto elemento
h1 {color: green; }
Cada vez que se use h1 aparecerá en verde
Selectores de clases
Para crear un estilo que puede ser usado varias veces cuando se requiera
Se definen con un punto . antes del nombre
css html
.clase1
{ color: green; }
<h1 class=“clase1”> Aplicar la clase1 a este título</h1>
Selectores de indentificadores
Para elementos únicos, se definen con un hash # antes del nombre
Solo se van a usar una vez en el html
css html
#texto-verde { color: green; }
<h1 id=“texto-verde”> Aplicar identificador texto verde solo a este título</h1>
NO espacios, NO caracteres especiales, NO mayúsculas, NO ñ
Se pueden usar guiones (–)
Tener orden
Usar nombres coherentes
Tips para nombrar selectores
Formas de integrar estilos
De forma interna
B. De forma externa
En el head
Dentro de las etiquetas
A. Forma interna en etiquetas
<etiqueta style="propiedad: valor;">
<p style=“color: red;”> Párrafo rojo </p>
<p style=“color: black;”> Párrafo negro </p>
<p style=“color: red; font-size: 13px; text-align: center;”> Párrafo rojo </p>
Con varias propiedades:
A. Forma interna en head
<head>
<style>
p {
color: red;
font-size: 13px;
text-align: center;
}
</style>
</head>
Se enlistan los estilos dentro de las etiquetas <style></style>
B. Forma Externa
<head>
<link href="nombre_archivo.css" rel="stylesheet">
</head>
Se mete todo a un archivo y se manda a llamar en el header del html
Ojo: Esta es la forma actual y la que vamos a usar
Cómo aplicar un estilo
@charset “utf-8”;
/* CSS Document */
Paso 1. Crear tu archivo css
Archivo nuevo – documento css
Guardar como: estilos1.css
Paso 2: crear estilos en tu hoja de estilos y guardar
.clase1 {
color: green;
font-size: 13px;
text-align: center;
}
Paso 3: vincular tu hoja de estilos en tu html y guardar
<head>
<link href=”estilos1.css" rel="stylesheet">
</head>
<p class=“clase1”>
Aplicar la clase 1 a todo este párrafo </p>
Paso 4: añadir el estilo a tu texto y guardar
recursos
https://www.w3schools.com
Continuar navegando
Contenido elegido para ti
Compartir