Sesion No4

Taller de lenguajes de Programación II
Introducción
Que es CSS
CSS se encarga de:
• Tamaño y tipo de fuentes
• colores
• Espacios
• Márgenes
• Adaptar diseños a distintos
dispositivos
• Animaciones
• Y mucho más
Estructurar html
Estructurar html
Estructurar html
Anatomía del CSS
CSS trabaja en
cascada por la
sencilla razón de
que un elemento
que va en la parte
superior pueden ser
reemplazado por el
mismo un atributo
diferente en la
parte inferior
Selectores de CSS
Los selectores son patrones que se

utilizan para identificar y aplicar
estilos a los elementos HTML
dentro de una página web. Los
selectores permiten definir reglas
de estilo que determinan cómo se
verán y se comportarán los
elementos en el documento HTML.
Selectores CSS
Selector de tipo: Selecciona

todos los elementos de un
tipo específico en el
documento HTML. Por
ejemplo, p selecciona todos
los párrafos.
Selectores CSS
Selector de clase: Selecciona

elementos que tienen un
atributo class específico. Se
denota con un punto seguido
del nombre de la clase, por
ejemplo, .mi-clase.
Selectores CSS
Selector de ID:
Selecciona un único
elemento que tiene un
atributo id específico. Se
denota con un numeral
seguido del nombre del
ID, por ejemplo, #mi-id.
Selectores CSS
Selector de atributo:
Selecciona elementos que
tienen un atributo específico
y opcionalmente un valor
específico. Por ejemplo,
[type="text"] selecciona
todos los elementos con el
atributo type igual a "text".
Selectores CSS
Selector descendiente:
Selecciona elementos que son
descendientes de otro elemento.
Se utiliza el espacio para separar
los elementos, por ejemplo, div p
selecciona todos los párrafos que
son descendientes de div.
Selecciona los elementos hijos
cuyo padre sea una clase (o ID) en
especifico
Selectores CSS
Selector de hijo directo:

Selecciona elementos que son
hijos directos de otro elemento.
Se utiliza el signo > para
separar los elementos, por
ejemplo, ul > li selecciona
todos los elementos li que son
hijos directos de un ul.
Selectores CSS
Selector de atributo: Selecciona

elementos que tienen un
atributo específico y [type="text"] {
opcionalmente un valor border: 1px solid gray;
específico. Por ejemplo,
[type="text"] selecciona todos
}
los elementos con el atributo
type igual a "text".
Selectores CSS
Selector Universal: Este estilo se

aplicará a todos los elementos en *{
la página y establecerá los margin: 0;
márgenes y relleno en 0, padding: 0;
eliminando los espacios }
predeterminados.
Selectores CSS
Pseudo-clases y pseudo-elementos:El primer estilo cambiará el
color del texto de los enlaces cuando el cursor se coloque sobre
ellos. El segundo estilo insertará contenido antes del contenido de
cada párrafo usando el pseudo-elemento ::before.
a:hover {
color: red;
}
p::before {
content: ">> ";
}
Nuevas etiquetas de HTML5
HTML4 y HTML5 son 100% compatibles entre sí. Todo el código
que tienes en HTML normal seguirá funcionando sin problemas
en HTML5. P
<!DOCTYPE html>
Es un DOCTYPE mucho más simplificado que XHTML5 (cuyas

reglas siguen siendo usadas) y te permite usar todas las habilidades de
HTML5 sin que nada de lo que ya tienes programado deje de
funcionar. Las principales etiquetas HTML5 nuevas no tienen una
representación especial en pantalla. Todas se comportan como un
<div> o un <span>. Pero cada una tiene un significado semántico
superior a un simple div o span.
Etiquetas html
head La etiqueta de inicio puede ser omitida
El elemento HTML <head> si lo primero dentro del elemento head
provee información general es un elemento.
(metadatos) acerca del La etiqueta de cierre puede ser omitida
documento, incluyendo su si lo primero después del elemento
título y enlaces a scripts y head no es un espacio o un comentario.
hojas de estilos.
Etiquetas html
div
Definición
div de "division" -división . Sirve para crear secciones o agrupar
contenidos.
Sus etiquetas son: <div> y </div> (ambas obligatorias).

Está definido como: Elemento en bloque.
Crea una caja: En bloque.
Puede contener: Texto, y/o cero o más elementos en bloque o en
linea.
Atributos del Div
atributo descripción valor
Genéricos
Title: Texto informativo o título del elemento. Suele mostrarse a modo de
"tool tip".
Id: Le da un nombre al elemento que lo diferencia de todos los demás del
documento, debe ser un nombre único
class : Asigna nombres de clases al elemento. Por defecto, clases CSS.
Lista de clases separadas por espacio en blanco.
Style: Permite especificar información de estilo. Por defecto, estilos CSS.
Etiquetas html
<header> <hgroup>
Hacer cosas como <div Muchos headers necesitan múltiples
id=”header”> es un poco títulos, como un blog que tiene un
complejo cuando el 99% de los titulo y un tagline explicando el
proyectos web blog. <hgroup> permite colocar un
tienen una cabecera. <header> h1, h2 y h3 dentro del header sin
está diseñada para reemplazar afectar el SEO, permitiendo usar
la necesidad de crear divs sin otro h1 en el sitio.
significado semántico.
Etiquetas html
Indica el título del documento.
Sus etiquetas son: <title> y </title> (ambas obligatorias)

Crea una caja: Está definido como: Elemento de contenido de
cabecera.
Puede contener: texto y entidades de caracteres, pero no puede
contener código.
ATRIBUTOS GENÉRICOS
Idioma: lang (información sobre el idioma), dir (dirección del texto)
ATRIBUTOS ESPECÍFICOS - NO TIENE.
ATRIBUTOS TRANSICIONALES - NO TIENE.
<head>
<title>Ejemplo de uso del elemento
title</title>
... otros elementos de cabecera...
</head>
Etiquetas html
<section>
<nav>
Define un área de contenido única
Igual que <header>, <nav> está
dentro del sitio. En un blog, sería la
diseñado para que ahí coloques
zona donde están todos los posts.
la botonera de navegación
En un video de youtube, habría un
principal.
section para el video, uno para los
Puedes colocar cualquier etiqueta
datos del video, otro para la zona
dentro, aunque lo recomendado
de comentarios.
es usar listas <ul>.
Etiquetas html
El elemento <body> de HTML representa el contenido de un documento HTML
Solo puede haber un elemento <body> en un documento.
Este elemento incluye los atributos globales tales como:

Alink: color de texto de los hipervínculos
Background: imagen o color de fondo(url) generalmente usa CSS(prop de
color junto a la psedoclase :active).
bgcolor: color de fondo del documento utiliza la propiedad CSS
background-color
Esto es nombrando algunas de la propiedades.
Etiquetas html
<article>
Define zonas únicas de contenido
independiente. En el home de un blog,
cada post sería un article. En un post
del blog, el post y cada uno de sus
comentarios sería un <article>
<aside>
Cualquier contenido que no esté
relacionado con el objetivo primario
de la página va en un aside. En un
blog, obviamente el aside es la barra
lateral de información. En el home
de un periódico, puede ser el área de
indicadores económicos.
ETIQUETAS HTML
span
Definición
span - abarcar. Es un contenedor en línea. Sirve para aplicar estilo al
texto o agrupar elementos en línea.
Sus etiquetas son: <span> y </span> (ambas obligatorias).

Está definido como: Elemento especial, y por lo tanto en línea.
Crea una caja: En línea.
Puede contener: Texto, y/o Elementos en línea.
Muchas Gracias

Sesion No4

Cargado por

Copyright:

Formatos disponibles

Sesion No4

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Sesion No4

Cargado por

Copyright:

Formatos disponibles

Taller de lenguajes de Programación II

Los selectores son patrones que se

Selector de tipo: Selecciona

Selector de clase: Selecciona

Selector de hijo directo:

Selector de atributo: Selecciona

Selector Universal: Este estilo se

Es un DOCTYPE mucho más simplificado que XHTML5 (cuyas

Sus etiquetas son: <div> y </div> (ambas obligatorias).

Sus etiquetas son: <title> y </title> (ambas obligatorias)

Este elemento incluye los atributos globales tales como:

Sus etiquetas son: <span> y </span> (ambas obligatorias).

También podría gustarte