Scribd
Cargar
67 vistas71 páginas

Tema4 - CSS - 1

El documento proporciona una introducción a CSS, destacando la separación entre contenido y formato, así como la importancia de los selectores y propiedades. Se explican diferentes métodos para declarar estilos, incluyendo el uso de hojas de estilo externas y la sintaxis básica de CSS. Además, se abordan conceptos como el modelo de caja, unidades de medida, y el orden de aplicación de estilos.

Cargado por

fernandonavarrosoler
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
67 vistas71 páginas

Tema4 - CSS - 1

El documento proporciona una introducción a CSS, destacando la separación entre contenido y formato, así como la importancia de los selectores y propiedades. Se explican diferentes métodos para declarar estilos, incluyendo el uso de hojas de estilo externas y la sintaxis básica de CSS. Además, se abordan conceptos como el modelo de caja, unidades de medida, y el orden de aplicación de estilos.

Cargado por

fernandonavarrosoler
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 71

CSS

Parte I. Selectores, propiedades, medidas, modelo de caja y principios básicos


CSS
CSS
CSS
• Independencia entre el contenido y el formato.
• Con los estilos CSS conseguimos dar formato a las páginas web de
una forma que no existía hasta que aparecieron: separando el formato
del contenido.
• Por un lado tenemos la definición de estilos y por otro lado el propio
texto de la página. Este concepto es muy importante porque hace que
el trabajo de creación y mantenimiento de una página Web sea más
sencillo.
• Hasta que aparecieron los estilos CSS el formato y el texto estaban
mezclados.
Dónde declarar un estilo

 incrustado en el elemento o en línea, utilizando el atributo style


NO!!!!

 Si sólo tenemos una página, podemos definir los estilos dentro del
<head>.
Para ello, tenemos que incluir en la etiqueta
<style> .............. </style>
En esta etiqueta, definiremos los estilos con el selector y su bloque de
declaración.
 En el caso de tener varias páginas resulta muy útil tener los estilos
definidos en una hoja independiente, una hoja de estilos.
CSS
¿Dónde escribimos el estilo? definiendo un bloque dentro de la
etiqueta Head que contenga la definición de estilos.
Para ello, tenemos que incluir la etiqueta
<style> ................ </style>

Y definir dentro los estilos correspondientes a cada elemento de


nuestra página. El siguiente estilo afecta a todos los encabezados
h1

<style>
h1{ margin-left: 80px;
margin-top: 20px;
font-size: 180%;
color: #d38451;}
</style>
CSS
<html>
<head>
<title>Este es el título de mi página web</title>

<style>
h1 { margin-left: 80px;
margin-top: 20px;
font-size: 180%;
color: #d38451; }
</style>

</head>
<body>
<img src="Fer………..
<h1> Bienvenido …………….
Dónde declarar un estilo

• Una hoja de estilos no es más que un archivo de texto,


pero con la extensión .css, donde aparecen definidos
los estilos que utilizarán las páginas.

• Para enlazar con la hoja de estilo, utilizaremos la


siguiente etiqueta en el <head> de nuestras páginas:
<link href="hoja_de_estilo.css" rel="stylesheet" />
CSS Sintaxis

Selector { propiedad1:valor; popiedad2:valor;}


CSS: selectores
A “Quién"

Selector universal

/ * Este es el selector universal Para


eliminar todos los márgenes y rellenos
predeterminados * /

* {padding: 0; margin: 0;}


CSS: selectores
Selector Genérico

h1 { margin-left: 80px; margin-top: 20px; }


El selector indica qué elementos van a ser afectados por el estilo, en
el ejemplo serán los elementos de encabezado h1

/* Seleciona todos los parrafos */


p {
font-size: 16px;
}

Las propiedades establecen el estilo: color, márgenes, tamaño…


CSS: selectores

*{
background-color: lightblue;
}

h1 {
color: white;
text-align: center;
}

p{
font-family: verdana;
font-size: 20px;
}
CSS: selectores

h1, h2, h3 {
color: #8A8E27; h1 { font-size: 2em; }
font-weight: normal; h2 { font-size: 1.5em; }
font-family: Arial, Helvetica, sans-serif; h3 { font-size: 1.2em; }
}

¿A quién se aplica cada propiedad?


CSS: selectores
El selector Class
 Si queremos formatear todas las apariciones de una etiqueta, utilizamos la
etiqueta como selector.

 Para formatear determinados elementos, podemos definir clases, las clases


se pueden aplicar a varias etiquetas del documento. Se seleccionan los
elementos que pertenecen a una clase

<p class= "derecha">

<h1 class= "derecha">

El estilo derecha se aplicará a todos los elementos que pertenecen a la


clase derecha
CSS: selectores
A “Quién" Las clases se pueden aplicar a varias etiquetas del documento
<p class="derecha"> , <h1 class="derecha">

El estilo derecha se aplicará a todos los elementos que pertenecen a


la clase “derecha”
Pero ¿qué estilo?

El estilo para la clase derecha se declara en la zona de los estilos:

.derecha {
text-align: right; }
CSS: selectores
<html> <head>
<title>Estilos</title>
<style>
.derecha {text-align: right;}
</style>
</head>
<body>
<h1 class ="derecha"> Estilos</h1>
<p>Los estilos simplifican el dise&ntilde;o de una p&aacute;gina.</p>
<p class="derecha">Podemos definirlos en el propio elemento.</p>
<p>Definirlos en la cabecera.</p>
<p class="derecha"> O utilizar una hoja de estilo.</p>
</body> </html>
CSS: selectores

El estilo derecha se ha aplicado a los elementos que


pertenecen a la clase derecha
CSS: selectores
También podemos especificar cómo se comporta la clase para cada elemento, con
el formato etiqueta.clase. Por ejemplo p.derecha o h1.derecha

h1.derecha {margin-left: 200px;}

p.derecha {text-align: right; border:#FF9933 10px solid;

border-width: 0 2px 2px 0;}


CSS: selectores
 ¿Cómo podemos cambiar el color de una palabra concreta dentro de un
párrafo? se define un estilo de clase

 Ejemplo:

.azul { font-weight: bold;


color: #6C6CCA;}

 Así hemos definido un estilo para la clase azul con la fuente en negrita y
color #6C6CCA.
CSS: selectores
¿ Cómo se establece qué palabras pertenece a la clase azul?
Se utiliza la etiqueta <strong> o <em> con el atributo class
Ejemplo:
<p> En esta Web encontrarás información sobre <strong
class="azul"> escritoras </strong> españolas. </p>
CSS: selectores
ID selector
 Para darle estilo a un elemento en concreto, podemos utilizar su
atributo id

 id asigna un identificador único a una etiqueta <p id="Pepe">

 Ese párrafo en concreto se llama “Pepe”

 No puede haber otro “Pepe” en el documento

 Podemos definir un estilo en exclusiva para el párrafo pepe. En el


selector, precedemos el identificador por el signo #. Por ejemplo,
#pepe.
#Pepe {color: red; border-width: 0}
Ejercicio
Ejercicio

Cambia de color los elementos que pertenecen a la case colortext


CSS Propiedades
El QUÉ

El “qué”. (pincha aquí para ver más)

- Fuentes: font-size, color, line-height


- Modelo de cajas: background, borders, margin, padding
- Position: position type, coordinates
- Visualización: display, clear, overflow
- ...
Color
• El color se expresa con la propiedad color. El valor de esta
propiedad se puede expresar de varias formas:

• Un número hexadecimal: Por ejemplo color: #0000FF;


• Tres números entre 0 y 255: Por ejemplo color: rgb(0, 0, 255);.
• Tres números entre 0 y 100: Por ejemplo color: rgb(10%, 20%,
75%);.
• Un nombre: Muchos colores se pueden expresar con su nombre en
inglés. Por ejemplo color: green; o color: DarkGreen;.
Propiedades de texto
Fuente
 Podemos elegir la fuente (o tipo de letra) a través del atributo font-
family.
 Por ejemplo font-family: arial; o font-family: "Times New
Roman";
 El valor de font-family pueden ser varias fuentes, separadas por comas. El
navegador elegirá, comenzando por la derecha, la primera disponible, por
lo que es conveniente terminar por una genérica.
Por ejemplo:
font-family: Georgia,"Times New Roman", Times, serif;
Existen cinco fuentes genéricas que sí se mostrarán en cualquier equipo: serif,
sans-serif,cursive,fantasy, monospace
Fuentes y color
En el siguiente párrafo se define un estilo para el cuerpo, <body>:

<html>
<head>
<title>Este es el título de mi página web</title>
<style type="text/css">
body { font-family: Verdana,Arial,sans-serif;
font-size: 15px;
color: #735846;
text-align: justify;
background-color: #3d2e2a; }
…………
………….
Medidas
Unidades de medida
Los elementos pueden especificar sus dimensiones: ancho, alto,
tamaño de fuente, ...
Hay dos grandes categorías de unidades: absoluta y relativa.

Relativas:
Relativo a otros elementos en el diseño.
Al elemento padre
A las dimensiones del dispositivo
Al tamaño de fuente base
Medidas
• %: un porcentaje que hará que varíen sus tamaños basados en el valor
original. Por ejemplo, body {font-size: 80%; } hace que el texto se vea un
20% más pequeño de lo normal, mientras que un 150% lo incrementaría
en un 50%.

• px, cm, o in: para indicar medidas en píxeles, centímetros o pulgadas.


No suele ser muy apropiado, porque cada navegador puede mostrar
diferencias en este sentido, aunque para definir estilos de impresión sí
body {font- que nos dará unos valores más precisos.
size:100%;}
h1 {font-size:3em;} • em: es el valor recomendado por el W3C, 1em es su valor base el
h2 {font-size:2em;} tamaño de la fuente actual, 2em sería el doble de tamaño .5em la mitad
p {font-size:0.8em;} (es lo mismo que 0.5em), etc.
.
• Los diferentes valores se pueden mezclar, pero finalmente lo más
recomendable sería emplear una escala basada en porcentajes o en
em.
Medidas
Fondo

La propiedad background

 Background- color nos permite establecer el color de fondo del elemento:


background-color: green;
 El fondo puede ser una imagen,
background: url(graficos/fondo.png);

 Siutilizamos una imagen podemos configurar otras propiedades:


 background-repeat,
 background-position
Fondo y Color
<html> .a { background-color: red; }
.b { background-color: #FF0000; }
<head>
.c { background-color: RGB(255,0,0); }
<meta charset="utf-8"> .d { background-color: HSL(0,100%,50%) }
<title>Colores en CSS</title> body { background-image: url("https://bit.ly/2slA7jo");
<link rel="stylesheet" href="style.css"> }
</head>
<body>
<p class="a">Rojo con su nombre</p>
<p class="b">Rojo con Hexadecimal<p/>
<p class="c">Rojo con RGB</p>
<p class="d">Rojo con HSL</p>
</body>
</html>
Modelo de Caja
• Todos los elementos HTML se
pueden considerar como
cuadros, o cajas. Las cajas se
crean automáticamente. Cada
vez que se inserta una etiqueta
HTML, se crea una nueva caja
rectangular que encierra los
contenidos de ese elemento.

• Cada “caja” está compuesta por:


márgenes, bordes, relleno y el
contenido real. También puede
tener un color de fondo o una
imagen de fondo

https://uniwebsidad.com/libros/css/capitulo-4
Modelo de Caja

• Contenido : el contenido del elemento, donde aparecen el texto y las imágenes.

• Relleno, padding : espacio libre opcional existente entre el contenido y el borde.

• Borde, border : un borde que rodea el relleno y el contenido.

• Margen, margin : separación opcional existente entre la caja y el resto de cajas


adyacentes.. El margen es transparente.
Modelo de Caja
Modelo de Caja
Modelo de Caja
Modelo de Caja

• Al trabajar con un modelo de caja, dos propiedades para importantes son


height y width, que definirán el ancho y alto de nuestra caja.

• Las propiedades de alto y ancho no incluyen relleno, bordes o márgenes.


Establece el alto / ancho del área dentro del relleno

• Algunos valores:

• Auto - por defecto. El navegador calcula la altura y el ancho.

• Longitud definid altura / anchura en px, cm, etc.

• % - Define la altura / anchura en porcentaje del bloque contenedor

• Inherit - La altura / anchura se heredará de su “padre”


Modelo de Caja
A todos los elementos de una caja le podemos aplicar estilos. Por ejemplo al
borde alrededor de un elemento html, con la propiedad border..

 Color: border-color. Por ejemplo, border-color: blue; o border-


color: #F37760;.

 Grosor, border-width. Por ejemplo, border-width: 2px;.


 Estilo, border-style: Por ejemplo border-style:double;

style="border-color:#009933; border-width: 3px; border-style:double;


Modelo de Caja
Modelo de Caja

A todos los elementos de una caja le podemos aplicar estilos

padding-left: 50px;

padding-right: 50px;

margin-left: 30px;

margin-right: 30px;

border: 10px solid black;

margin: .5em .5em .5m 1em;

padding: 1em 2em 3em 4em}


Modelo de Caja

border-top-color: #CC0000;

border-right-color: blue;

border-bottom-color: #00FF00;

border-left-color: #CCC;

border-top-style: dashed;
border-right-style: double;
border-bottom-style: dotted;
border-left-style: solid;
Modelo de Caja

Fluidez y Orden.
Un elemento de bloque llenará todo el ancho especificado,(el
ancho de la pantalla por defecto) mientras que su altura
variará automáticamente de acuerdo con el tamaño de su
contenido.
Este elemento será empujado hacia abajo dependiendo de la
altura de sus predecesores..

Primer elemento
Segundo elemento
Tercer elemento
Cuarto elemento
Orden de aplicación de los estilos CSS

Si definimos en varios sitios el estilo para un elemento ¿cuál se aplica?

realmente los estilos se van sumando. Por lo que si no repetimos ninguna


propiedad, el estilo final de un elemento será la suma de todos los estilos que
afecten al elemento.

¿Qué ocurre si repetimos una propiedad?

Como norma general, prevalecerá el estilo más concreto sobre el más genérico

Por ejemplo, si en la hoja de estilo establecemos el texto de los párrafos en rojo,


y en la cabecera de la página definimos el color de los párrafos en azul,
prevalecerá éste último, ya que es más concreto, se refiere sólo a los párrafos de
esa página. Y si en un párrafo de la página, en el atributo style indicamos el color
de texto verde, prevalecerá éste por ser el más concreto de todos.
Orden de aplicación de los estilos CSS

Lo mismo ocurre con los selectores

• Por ejemplo, p.inicio es más concreto que p, ya que se refiere sólo a


los párrafos con esa clase.
• Lo mismo ocurre al anidar los selectores, p.inicio span es más
concreto que poner sólo span.
• En caso de empate, por ejemplo si definimos varias veces la misma
propiedad en una hoja de estilo, se tomará en cuenta la última, que
machacará las anteriores
Orden de aplicación de los estilos CSS

Cascada
- Combina los estilos de diferentes hojas de estilo: valores
predeterminados del navegador, hoja de estilos de medios, valores
predeterminados del usuario, ...Los estilos se “heredan”
CSS
Parte II Selectores relacionales, estilos para listas y enlaces, propiedad display
CSS: selectores
A “Quién". Selectores de jerarquía
Permite seleccionar elementos en relación con otros

Selector de adyacentes
Las reglas se leen de izquierda a derecha

Selecciona encabezados que estén justo después de un párrafo

p + h1 {color: rojo; }

Selector de descendientes
Todos los enlaces dentro del párrafo

p a {Text-decoration: underline; }
CSS: selectores
<html>
<head> p { background-color: grey; } /* Selector etiqueta */
<meta charset="utf-8"> .clase { color: red; } /* Selector clase */
#ident { color: green; } /* Selector identificador */
<title>Selectores</title>
* { font-style: italic; } /* Selector universal */
<link rel="stylesheet" href="style.css">
pa{ /* Selector descendente */
</head> background-color: orange; }
<body>
<h1 class="clase">Texto de color rojo</h1>
<p id="ident">Texto de color verde</p>
<h2>Selector descendiente</h2>
<p>
<a href="#">Enlace</a><br>
<a href="#">Enlace</a>
</p>
</body>
</html>
CSS: selectores
A “Quién". Selectores de
jerarquía
Permite seleccionar elementos en relación con otros

Selector de hijo
El selector descendiente directo, selecciona elementos
secundarios directos

Elementos de la lista li de la lista ul

ul > li {color: red; }


CSS: selectores
CSS: selectores
Seudoclases
Como con los atributos id o class no es posible aplicar diferentes estilos a un
mismo elemento en función de su estado, CSS introduce un nuevo concepto
llamado pseudo-clases.
rollover effects:: cambiar un fondo cuando el puntero del mouse entra o sale de
un elemento.

p:hover { background-color: #000; }


Enlaces y Seudoclases
CSS define las siguientes cuatro pseudo-clases que se pueden aplicar a los
enlaces

• :link, aplica estilos a los enlaces que apuntan a páginas o recursos que aún
no han sido visitados por el usuario.

• :visited, aplica estilos a los enlaces que apuntan a recursos que han sido
visitados anteriormente por el usuario.

• :hover, aplica estilos al enlace sobre el que el usuario ha posicionado el


puntero del ratón.

• :active, aplica estilos al enlace que está pinchando el usuario. Los estilos
sólo se aplican desde que el usuario pincha el botón del ratón hasta que lo
suelta

Ocultar el subrayado cuando el usuario pasa el ratón por encima de cualquier enlace:

a:hover { text-decoration: none; }


Más selectores

• Existen más seudoclases:


p::first-line {background-color: #000;}
p::first-letter {background-color: #000;}

• Otros tipos de relaciones:


p:last-child { background-color: #000; }
li:nth-child(odd) {background-color: #f00;}

• Selector de atributos: seleccionar elementos HTML en función de sus


atributos y/o valores de esos atributos.
Enlaces y Seudoclases

Ocultar el subrayado cuando el usuario pasa el ratón por encima de cualquier enlace:

a:hover { text-decoration: none; }


Estilos para Listas

Ej. ul { list-style-type: square>


Estilos para Listas

ul.ok { list-style-image: url("imagenes/ok.png"); }


ul.flecha { list-style-image: url("imagenes/flecha.png"); }
ul.circulo { list-style-image: url("imagenes/circulo_rojo.png"); }

https://uniwebsidad.com/libros/css/capitulo-9
Estilos para Listas
Los menús de navegación suelen ser listas, a las que se les a suprimido su estilo.

<ul>
ul { list-style: none;
<li><a href="#">Elemento 1</a></li>
margin: 0;
<li><a href="#">Elemento 2</a></li>
padding: 0;
<li><a href="#">Elemento 3</a></li>
width: 180px; }
<li><a href="#">Elemento 4</a></li>
<li><a href="#">Elemento 5</a></li> ul li { background: #F4F4F4;
border-bottom: 1px solid #7C7C7C;
<li><a href="#">Elemento 6</a></li>
border-top: 1px solid #FFF; }
</ul>
Otras propiedades de texto
El QUÉ
Otras propiedades de texto

<html>
<head> .a { text-decoration: underline; }
<title> Propiedad text-decoration </title> .b { text-decoration: overline; }
<link rel="stylesheet" href="style.css">
.c { text-decoration: line-through; }
.d { text-decoration: underline line-through; }
</head>
<body>
<h3> Propiedad text-decoration </h3>
<p class="a">text-decoration: underline</p> Propiedad text-decoration
<p class="b">text-decoration: overline</p> text-decoration: underline
<p class="c">text-decoration: line-through</p> text-decoration: overline
<p class="d">text-decoration: underline line-
through</p>
text-decoration: line-through
</body> text-decoration: underline line-through
</html>
Otras propiedades de texto
CSS proporciona una propiedad tipo "shorthand" denominada font y que permite indicar
de forma directa algunas o todas las propiedades de la tipografía de un texto.

Propiedad font

( ( font-style || font-variant || font-weight )? font-size ( / line-height )? font-


Valores
family )

Permite indicar de forma directa todas las propiedades de la tipografía de


Descripción
un texto

font: 76%/140% Verdana, Arial, Helvetica, sans-serif;

font: bold 1em "Trebuchet MS",Arial,Sans-Serif;

https://uniwebsidad.com/libros/css/capitulo-6
Display: inline, block, and none

<html>
<head>
<title>Selectores</title>
<style>
div {
display: block;
width: 2.5em;
height: 2.5em;
margin: 0.5em;
padding: 0.5em;
border: 5px dashed black; }
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>

</body>
Display: inline, block, and none

<html>
<head>
<title>Selectores</title>
<style>
div {
display: inline;
width: 2.5em;
height: 2.5em;
margin: 0.5em;
padding: 0.5em;
border: 5px dashed black; }
</style> Los elementos en línea, pierden las
</head> propiedades ancho, y alto
<body>
¿Porqué se pierde las línea de
<div>1</div> arriba?
<div>2</div>
<div>3</div>

</body>
Display: inline, block, inline-block and, none

inline-block es un compromiso entre elementos <block> elementos y <inline>.


Un elemento de bloque, puede tener un ancho, un alto, un relleno y un margen
definidos y provoca una interrupción en el texto. Un elemento en línea se
encuentra en la línea de texto, pero no puede tener un ancho, alto, relleno o
margen. Un elemento de “bloque en línea” combina características de ambos:
se encuentra en la línea de texto, pero se le puede dar un ancho, alto, relleno y
margen específicos.
Display: inline, block, inline-blockand, none

header, section, aside, footer {


margin: 2%; <header>
padding: 2%; <h1>Cabecera</h1>
outline: 4px dashed black;
</header>
vertical-align: top; }
<section>
section, aside { <p>parrafooo...</p>
width: 54.5%; }
</section>
aside {
<aside> barra lateral </aside>
margin-right: 0;
<footer> pie </footer>
width: 28.5%; }
Display: inline, block, inline-blockand, none
Display: inline, block, inline-blockand, none
Ejercicio

También podría gustarte