Taller XHTML y CSS3 - CSS3

CSSBIBLIOGRAFIA

Taller de XHTML y CSS3Nivel Basico - Parte II

Julian Fernandez Ortiz

Vicepresidente de IEEE Student Branch of GranadaGrado en Ingenierıa Electronica Industrial

julian.fernandez.es@ieee.org

Ruben Martın Moreno

Vocal en IEEE Student Branch of GranadaGrado en Estadıstica

ruben.martinmoreno.es@ieee.org

Julian Fernandez, Ruben Martın XHTML y CSS

CSSBIBLIOGRAFIA

Licencia

Este documento esta realizadobajo licencia Creative Commons“Reconocimiento-CompartirIgual 3.0Espana” .

Fuente: Curso desarrollado por IEEE Student Branch of Granada

CSSBIBLIOGRAFIA

Indice

1 CSSSelectoresDisenoColores y FondoTextoEnlacesListas, Cajas y TablasEfectos Dinamicos

2 BIBLIOGRAFIA

CSSBIBLIOGRAFIA

SelectoresDisenoColores y FondoTextoEnlacesListas, Cajas y TablasEfectos Dinamicos

Indice

2 BIBLIOGRAFIA

CSSBIBLIOGRAFIA

Aplicar estilos localmente

<body>

<p style="color: red">TEXTO</p>

</body>

CSSBIBLIOGRAFIA

Aplicar estilos localmente

<body>

<p style="color: red">TEXTO</p>

</body>

CSSBIBLIOGRAFIA

Establecer una hoja de estilosdentro del propio documento

<head>

font-family: Algerian;

color: #4113db;

font-style: italic ;

text-align: center;

</style >

</head>

CSSBIBLIOGRAFIA

Establecer una hoja de estilosdentro del propio documento

<head>

font-family: Algerian;

color: #4113db;

font-style: italic ;

text-align: center;

</style >

</head>

CSSBIBLIOGRAFIA

Vincular una hoja de estilos externa

(RECOMENDADO)

<head>

</head>

CSSBIBLIOGRAFIA

Vincular una hoja de estilos externa

(RECOMENDADO)

<head>

</head>

CSSBIBLIOGRAFIA

Indice

2 BIBLIOGRAFIA

CSSBIBLIOGRAFIA

Una hoja de estilos es un archivo de texto que contiene reglas quedeterminan como se veran los elementos en la web.

Selector

Declaracion

CSSBIBLIOGRAFIA

Una hoja de estilos es un archivo de texto que contiene reglas quedeterminan como se veran los elementos en la web.

Selector

Declaracion

CSSBIBLIOGRAFIA

selector{

propiedad1: valor1;

propiedad2: valor2;

color: gray;

font-family: "Corsiva Hebrew";

CSSBIBLIOGRAFIA

selector{

propiedad1: valor1;

propiedad2: valor2;

color: gray;

font-family: "Corsiva Hebrew";

CSSBIBLIOGRAFIA

Es posible nombrar elementos para referirlos posteriormente:

Elementos Unicos

id="nombre"

Grupo de Elementos

class="nombre"

Cada identificador deber ser unico

Mas de un elemento puede pertenecer a la misma clase

CSSBIBLIOGRAFIA

Es posible nombrar elementos para referirlos posteriormente:

Elementos Unicos

id="nombre"

Grupo de Elementos

class="nombre"

Cada identificador deber ser unico

Mas de un elemento puede pertenecer a la misma clase

CSSBIBLIOGRAFIA

Hay varias formas de definir selectores

h1 {color: red;}

em.class {color: red;}

em#id {color: red;}

h1 em {color: red;}

a:link {color: red;}

Normal

Con clase

Con identificador

Jerarquicos

Basado en estado

CSSBIBLIOGRAFIA

h1 {color: red;}

em#id {color: red;}

h1 em {color: red;}

Normal

Con clase

Con identificador

Jerarquicos

Basado en estado

CSSBIBLIOGRAFIA

h1 {color: red;}

em#id {color: red;}

h1 em {color: red;}

Normal

Con clase

Con identificador

Jerarquicos

Basado en estado

CSSBIBLIOGRAFIA

h1 {color: red;}

em#id {color: red;}

h1 em {color: red;}

Normal

Con clase

Con identificador

Jerarquicos

Basado en estado

CSSBIBLIOGRAFIA

h1 {color: red;}

em#id {color: red;}

h1 em {color: red;}

Normal

Con clase

Con identificador

Jerarquicos

Basado en estado

CSSBIBLIOGRAFIA

h1 {color: red;}

em#id {color: red;}

h1 em {color: red;}

Normal

Con clase

Con identificador

Jerarquicos

Basado en estado

CSSBIBLIOGRAFIA

Para cambiar el estilo de varios selectores a la vez usamos comas:

h1,h2,h3{

color: red;

Para cambiar el estilo de todos los selectores usamos *:

color: red;

CSSBIBLIOGRAFIA

Para cambiar el estilo de varios selectores a la vez usamos comas:

h1,h2,h3{

color: red;

Para cambiar el estilo de todos los selectores usamos *:

color: red;

CSSBIBLIOGRAFIA

Indice

2 BIBLIOGRAFIA

CSSBIBLIOGRAFIA

Para estructurar la pagina debemos dividirla en secciones logicas

Elementos div

Elementos span

CSSBIBLIOGRAFIA

Estructura

La estructura comunmente utilizada es:

conteiner o contenedor

header o cabecera

content o contenido

footer o pie

CONSEJO

Esta estructura es la mas comun, pero puedes usar la que teresulte mas sencilla

CSSBIBLIOGRAFIA

Estructura

La estructura comunmente utilizada es:

conteiner o contenedor

header o cabecera

content o contenido

footer o pie

CONSEJO

Esta estructura es la mas comun, pero puedes usar la que teresulte mas sencilla

CSSBIBLIOGRAFIA

Modelo de Cajas

CSSBIBLIOGRAFIA

Modelo de Cajas

Posicionamiento de una caja:

Estatico

Absoluto

Relativo

CSSBIBLIOGRAFIA

Elementos Flotantes

Un elemento puede “flotar” a la derecha o a la izquierda usando lapropiedad float.

CSSBIBLIOGRAFIA

Estas estructuras sedividen con<div>...</div>

CSSBIBLIOGRAFIA

Estas estructuras sedividen con<div>...</div>

CSSBIBLIOGRAFIA

Indice

2 BIBLIOGRAFIA

CSSBIBLIOGRAFIA

Sistemas mas comunes

RGB(a)

Hexadecimal

RECUERDA

Tambien puedes definir el colorusando su nombre

CSSBIBLIOGRAFIA

Colores RGB y HEX

RGB HEX

0,0,0 #000000

255,0,0 #FF0000

0,255,0 #00FF00

0,0,255 #0000FF

255,255,0 #FFFF00

0,255,255 #00FFFF

255,0,255 #FF00FF

192,192,192 #C0C0C0

CSSBIBLIOGRAFIA

Propiedades comunes que se utilizan para personalizar el fondo dela pagina:

background-attachement

background-color

background-image

background-position

background-repeat

CSSBIBLIOGRAFIA

Indice

2 BIBLIOGRAFIA

CSSBIBLIOGRAFIA

Atributos comunes que se utilizan para personalizar el texto:

font-family

font-style

font-variant

font-weight

font-size

text-align

text-decoration

text-indent

text-justify

text-overflow

text-transformation

CSSBIBLIOGRAFIA

Indice

2 BIBLIOGRAFIA

CSSBIBLIOGRAFIA

Tipos de Enlaces

Existen 4 atributos que se utilizan para editar los enlaces:

:visited

:hover

:active

:focus

Ademas se pueden completar con mas atributos, como por ejemplotarget

CSSBIBLIOGRAFIA

Tipos de Enlaces

:visited

:hover

:active

:focus

CSSBIBLIOGRAFIA

Tipos de Enlaces

:visited

:hover

:active

:focus

CSSBIBLIOGRAFIA

Tipos de Enlaces

:visited

:hover

:active

:focus

CSSBIBLIOGRAFIA

Tipos de Enlaces

:visited

:hover

:active

:focus

CSSBIBLIOGRAFIA

Tipos de Enlaces

:visited

:hover

:active

:focus

CSSBIBLIOGRAFIA

Indice

2 BIBLIOGRAFIA

CSSBIBLIOGRAFIA

Listas

A la hora de editar una lista tendremos en cuenta de si esta esordenada o desordenada

list-style-type

list-style-position

list-style-image

CSSBIBLIOGRAFIA

Listas

list-style-type

list-style-position

list-style-image

CSSBIBLIOGRAFIA

Listas

list-style-type

list-style-position

list-style-image

CSSBIBLIOGRAFIA

Listas

list-style-type

list-style-position

list-style-image

CSSBIBLIOGRAFIA

Cajas - Bordes

Algunos atributos utilizados

border-color

border-style

border-width

border-radius

RECUERDA

Puedes editar solo un lado del bordehaciendo referencia con el codigoborder-top, border-right,border-bottom o border-left

CSSBIBLIOGRAFIA

Cajas - Bordes

border-color

border-style

border-width

border-radius

RECUERDA

CSSBIBLIOGRAFIA

Cajas - Bordes

border-color

border-style

border-width

border-radius

RECUERDA

CSSBIBLIOGRAFIA

Cajas - Bordes

border-color

border-style

border-width

border-radius

RECUERDA

CSSBIBLIOGRAFIA

Cajas - Bordes

border-color

border-style

border-width

border-radius

RECUERDA

CSSBIBLIOGRAFIA

Tablas

Para editar los bordes de las celdas ya sean pertenecientes a todala tabla, los encabezados o al cuerpo de la tabla

border-collapse

border-spacing

caption-side

empty-cells

CSSBIBLIOGRAFIA

Tablas

border-collapse

border-spacing

caption-side

empty-cells

CSSBIBLIOGRAFIA

Tablas

border-collapse

border-spacing

caption-side

empty-cells

CSSBIBLIOGRAFIA

Tablas

border-collapse

border-spacing

caption-side

empty-cells

CSSBIBLIOGRAFIA

Tablas

border-collapse

border-spacing

caption-side

empty-cells

CSSBIBLIOGRAFIA

Indice

2 BIBLIOGRAFIA

CSSBIBLIOGRAFIA

Los estilos CSS nos ayudan a crear efectos dinamicos sin lautilizacion de scripts

Algunos ejemplos son:

Botones

Menus desplegables

Pop-ups

CSSBIBLIOGRAFIA

Botones

Menus desplegables

Pop-ups

CSSBIBLIOGRAFIA

Botones

Menus desplegables

Pop-ups

CSSBIBLIOGRAFIA

Botones

Menus desplegables

Pop-ups

CSSBIBLIOGRAFIA

Indice

2 BIBLIOGRAFIA

CSSBIBLIOGRAFIA

http://www.w3c.es/estandares/http://www.w3schools.com/http://www.javascripter.net/faq/rgbtohex.htmhttp://librosweb.es/

Taller XHTML y CSS3 - CSS3

Technology

Transcript of Taller XHTML y CSS3 - CSS3

Quero ser um ninja em xHTML, HTML5 e CSS3

HTML 5 & CSS 3 · coherente y fácil de entender por otras personas. ... En esta versión el Doctype es mucho más simplificado y compatible con HTML y XHTML. ... (CSS3), nuestro

xhtml: xhtml: A Crash Course

2 Inhalt 1. Was ist XHTML? 2. Bedingungen für XHTML-konforme Dokumente 3. Unterschiede zu HTML 4.0 4. Warum XHTML? 5. XHTML Basic 6. XHTML 1.1 7. Browserverhalten.

Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna

1 Introduction to CSS3 - denisejacobs.comdenisejacobs.com/training/css3/2011-01/notes_CSS3intro_day1_01132011.pdf · 15 What’s New in CSS3 16 What’s New in CSS3? CSS3 is the third

W3C-Tag 2009 Felix Sasaki FH-Potsdam / W3C deutsch-österr ... · XHTML 1.0 (2000) XHTML 2.0 XHTML 2.0 CURIE XFrames HLink XHTML+MathML+SVG Profile XHTML Modularization 1.0 Second

XHTML basics

Netzbasierte Informationssysteme Angereicherte ... · • XHTML + SVG + MathML • XHTML + SMIL • XHTML + XForms • XHTML + VoiceML • Problem: Jeweilige Spezifikationen decken

Straight-to-the-Point 2018©finitive.pdf · Web applications developement & integration : XHTML, HTML5, CSS3, Javascript, Ajax, jQuery, Dojo Mobile Development : Android, iOS, jQuery

Senior Front End @ Arezzo&Co - fit.faccat.brfpereira/pagina/autoria/css3.pdf · “O Cascading Style Sheets (CSS) ... XML, HTML e XHTML e etc..).” ... formatação a vários elementos

XHTML: enlaces

Netzbasierte Informationssysteme Rich Web Clients Metadaten … · 2018-03-04 · • XHTML + SVG + MathML • XHTML + SMIL • XHTML + XForms • XHTML + VoiceML • Problem: Jeweilige

제 12 장 XHTML 1. XHTML 이란 ? 2. XHTML 과 HTML 의 차이점 3. XHTML 문서의 구성요소와 문법 4. XHTML 로의 업그레이드

HTML & MARKUP LANGUAGES...•CSS3 + xhtml / html5 •PHP •Controllare la validazione •Dimensioni della home page (qualche kb al massimo) •Testi 12px di altezza •Colori fra

Introducing XHTML: Module B: HTML to XHTML

XHTML Basics. What is XHTML? XHTML is newer than, but built upon, the original HTML (HyperText Markup Language) platform. XHTML has stricter rules and.

TALLER DE APLICACIÓN · TALLER DE APLICACIÓN En el presente taller práctico de HTML5, CSS3, y Javascript debes aplicar todos los conceptos y tecnologías aprendidas durante la

Taller 2: Mi primera app educativa · Presentación En este taller desarrollarás una aplicación móvil a partir de código HTML5, CSS3 ... Figura 2: índex.html Cómo editar o personalizar

CSS3: CSS3 (aula 2)