Para ms informacin: [email protected] TUTORIAL
BSICO DEL PROGRAMADOR WEB: CSS DESDE CERO. Objetivos CSS es un
lenguaje de estilo que define la presentacin de los documentos
HTML. Por ejemplo, con CSS podemos cambiar fuentes, colores,
mrgenes, tamaos, imgenes de
fondo,maquetacin,crearanimacionesyotrosefectosyms.Estecursopermite
aprender los fundamentos de CSS, imprescindible para trabajar con
pginas web hoy da. Destinatarios Cualquier persona con inters en
aprender fundamentos que le permitan crear pginas web
usandoCSS.Pararealizarestecurso,debestenerconocimientospreviosdeHTML.Se
recomienda haber realizado el curso Tutorial bsico del programador
web: HTML desde cero de aprenderaprogramar.com antes de seguir este
curso. Contenidos INTRODUCCIN A CSS. QU ES Y PARA QU SIRVE CSS.
VERSIONES CSS. EL W3C. MODELO DE CAJAS CSS. ESTILOS EN LNEA,
INTERNO Y EXTERNO. TIPOS DE ELEMENTOS.SELECTORES POR ID (#) Y POR
CLASE(.). CONCEPTO DE HERENCIA Y DE CASCADA. SELECTORES AVANZADOS.
PSEUDOCLASES. PSEUDOELEMENTOS. COLORES Y FONDOS. FUENTES Y TEXTOS.
UNIDADES DE MEDIDA. PROPIEDADES CSS. BORDES CSS. MARGIN Y PADDING.
PROPIEDADES BSICAS. EFECTOS AVANZADOS. ENLACES CON CSS. LISTAS CON
CSS. TABLAS CON CSS. MENS CON CSS.POSICIONAMIENTO. FLOAT Y CLEAR.
MAQUETACIN EN COLUMNAS. DISEO FLUIDO. PREFIJOS CSS DE NAVEGADOR:
CHROME, FIREFOX, INTERNET EXPLORER, OPERA, SAFARI. EFECTOS CSS DE
LTIMA GENERACIN. USO DE SPRITES. ANIMACIONES. Duracin 150 horas de
dedicacin efectiva, incluyendo lecturas, estudio y ejercicios.
Direccin, modalidades y certificados El curso est dirigido por Csar
Krall, Responsable del Departamento de Produccin de
aprenderaprogramar.comdelportalwebaprenderaprogramar.com.Seofertabajola
modalidad web (gratuito).Indice del c Ms inform
1.IN1.1.Q1.2.E1.3.D1.4.CS1.5.Em1.6.Ve1.7.D1.8.Q 2.M2.1.D2.2.Es2.3.A
3.SE3.1.Se3.2.Co3.3.Co 4.SE4.1.Se4.2.fir4.3.Se 5.CO5.1.Co5.2.W urso
Tutorial acin: contactoINDNTRODUCCIQu es CSS? Es CSS un
leniferencias enSS en aplicacmpezar a usaersiones CSSocumentaciQu
necesitoMODELO DE Ce la estructustilos por defrchivos CSS.
ELECTORES Pelectores pooncepto de honceptos: caELECTORES Aelectores
avarst-child, nthelector univeOLORES CSSolores HTMLWeb safe
colobsico programo@aprenderapDICN A CSS. QUHTML, cononguaje de
prontre CSS y HTciones web Jar CSS a partS. Algo de hisn
especificao para escribCAJAS CSS. Eura HTML y sfecto, en
lneComentarioPOR ID (#) Y r id. Selectorherencia en ascada y
hereAVANZADOSanzados, pseh-child, last, ersal. nth-of-. L y CSS.
RGB ors. Colores Rmador web: CSSrogramar.comCE DU ES Y PARocimiento
preogramacin?TML. Fronteroomla, Wordtir de un docstoria y perspacin
oficial Cbir cdigo CSSESTILOS EN Lu semnticaea, interno ys CSS. POR
CLASE(res por classhojas de estencia CSS. EsS. PSEUDOCLeudoclases y
not, -letter --type y nth-ladecimal o poRGBA, HSL, HSdesde cero.
DELRA QU SIRVEevio necesar? Para qu sra entre CSS,dPress,
Drupumento HTMpectiva. QuCSS. W3schoS y crear pgLNEA, INTER al
modelo dy externo. So(.). CONCEPT. Ejemplos. ilo CSS. Qustilos de
usuaLASES. PSEUpseudoelemline, after, bast-child. orcentual. CHSLA.
TranspL CU E CSS. VERSIrio. sirve? Difere, HTML y propal, phpBB...
ML con estru es el W3C?ools y W3fooginas web?RNO Y EXTERde cajas
CSS. obreescrituraTO DE HEREN es? Forzar ario.
!importDOELEMENTmentos CSS. efore. digos de coparencia CSS.URSIONES
CSS. Eencias de HTMogramacin. Plantillas, Teuctura bsica?
Recomendols. Validaci RNO. TIPOS DElementos ba de estilos. lNCIA Y
DE CAherencia contant. EjemploTOS. EJEMPLolores hexade. Lista de
colSO EL W3C. ML, CSS, PHPemplates o T. aciones oficin CSS W3C vDE
ELEMENTblock e inlineink rel. ASCADA. n inherit. os prcticos.LOS
PRCTICecimales. ores HTML -P, ASP... Themes. iales. validator.TOS.
e CSS. COS. CSS. Indice del curso Tutorial bsico programador web:
CSSdesde cero. Ms informacin: [email protected]
6.FONDOS. 6.1.Color de fondo. Propiedad background-color CSS.
6.2.Definicin de fondo CSS. background-image. Efecto fondo pgina
web. background-repeat. 6.3.CSS background-position,
background-attachment, clip, origin y size. Shortand fondo.
Ejemplos. 6.4.Definicin de fondo CSS. background-image. Efecto
fondo pgina web. background-repeat. 7.UNIDADES DE MEDIDA.
PROPIEDADES WIDTH Y HEIGHT. 7.1.Unidades de medida CSS relativas o
absolutas. in, cm, mm, pt, pc, pixel px, porcentaje, em,
ex.7.2.Propiedades CSS width y height. auto (automtico). Ejemplos
prcticos y ejercicios resueltos. 8.BORDES CSS. PROPIEDADES
RELACIONADAS. 8.1.Tipos de borde CSS. border-style hidden, solid...
Efectos 3D. border-top right bottom left. 8.2.Shortand: notacin CSS
abreviada. border-width (thin, thick) border-color (transparent).
8.3.Propiedad outline. 9.MARGEN (MARGIN) Y RELLENO (PADDING).
PROPIEDADES RELACIONADAS. 9.1.Concepto de margen y relleno CSS.
Diferencias entre margin y padding CSS (box model).9.2.Padding y
margin CSS. Top, right, bottom, left. Margin negativo y centrar con
margin auto. 10.POSICIONAMIENTO, MAQUETACIN Y DISEO CON CSS.
POSITION, FLOAT, CLEARY MS. 10.1.Propiedad position CSS: static,
relative, absolute, fixed. Top, right, bottom, left.
Ejemplos.10.2.Propiedad display CSS. inline, block, none,
list-item. Ejercicios de ejemplo resueltos. 10.3.Concepto float
CSS. none, left, right y centrar?. Colocar texto alrededor de una
imagen. 10.4.clear CSS bothEl texto no envuelve una imagen html?
Explicacin a problemas. 10.5.Diseo web CSS dos, tres, cuatro
columnas con float width en porcentajes no funciona? 10.6.overflow
CSS. scroll. overflow-x, overflow-y. Propiedad visibility (visible,
hidden, collapse). 10.7.z-index CSS no funciona? Superposicin de
elementos tipo capas, objetos, div o imgenes. 10.8.CSS
vertical-align middle Centrar verticalmente una imagen, texto, div,
etc. Ejemplos. 10.9.Diseo lquido CSS (fluido) frente a
responsive-design.10.10.Propiedades CSS max-width, min-width,
max-height, min-height. 11.FUENTES Y TEXTO. 11.1.CSS text-align,
color, text-decoration, text-indent, white-space nowrap, pre,
pre-wrap, pre-line.11.2.CSS efecto sombra con text-shadow y blur,
text-overflow clip, ellipsis.11.3.Interlineado: propiedad CSS
line-height. Indice del curso Tutorial bsico programador web:
CSSdesde cero. Ms informacin: [email protected]
11.4.CSS text-transform y first-letter, letter-spacing y
word-spacing.11.5.Cortar palabras largas con word-wrap. 11.6.CSS
font-size (uso de larger, smaller).11.7.font-weight o negrita
(bolder, lighter). 11.8.font-style o cursiva italic. 11.9.CSS
font-family. tipografa (tipos de letra). Lista de
tipos.11.10.font-variant (small-caps). Shortand font.
11.11.@font-face CSS. Fuentes web gratuitas.
Problemas.11.12.Convertir woff, eot, ttf, otf, svg. Font
converters. 12.ENLACES CSS. 12.1.Pseudoclases CSS link, visited,
focus, hover y active. Estilos y efectos en links. 13.LISTAS CSS.
13.1.Listas CSS. list-style-type, list-style-position (outside,
inside), list-style-image.13.2.Shortand list-style. 13.3.Men
horizontal CSS o vertical. Crear mens con efectos a partir de
listas CSS. Ejemplos. 13.4.Men desplegable CSS horizontal. Efecto
dropdown. Ejemplo de cdigo (float, display). 14.TABLAS CSS.
14.1.Estilos y herencia CSS en tablas. Width, height, font-size y
overflow en tablas. border-collapse.14.2.Diseo de tablas CSS.
border-spacing, caption-side, empty-cells.14.3.Diseo de tablas CSS.
Colores de filas intercalados alternos. 15.COMPATIBILIDAD Y
PREFIJOS DE NAVEGADOR: CHROME, FIREFOX, INTERNET EXPLORER, OPERA,
SAFARI. 15.1.Comentarios condicionales CSS. Problemas:
compatibilidad entre navegadores.15.2.Strict mode.
Filtros.15.3.Prefijos CSS de navegador Chrome, Firefox, Internet
Explorer, Opera, Safari.15.4.Prefijos -webkit -moz -ms -o Ejemplos.
16.EFECTOS CSS DE LTIMA GENERACIN. USO DE SPRITES. ANIMACIONES.
16.1.Sprite CSS: concepto. Qu es, cmo crear y usar un sprite?
Ejemplos y cdigo resuelto.16.2.Columnas CSS: column-count,
column-width, columns, colum-gap y colum-rule. Ejemplos.16.3.Efecto
CSS esquinas redondeadas: border-radius. border-left-top-radius.
Crculo o elipse.16.4.Efecto sombra CSS: box-shadow. Sombra interior
inset. Difuminado blur, spread. Ejercicios.16.5.Degradados CSS.
Efecto lineal y radial. linear-gradient.Indice del curso Tutorial
bsico programador web: CSSdesde cero. Ms informacin:
[email protected] 16.6.Angulos CSS: unidades deg,
grad, turn, rad. 16.7.Efectos CSS. radial-gradient tipo circle o
ellipse.16.8.Efectos CSS. transform: rotate, scale, skew y
translate. Rotar, escalar, sesgar, trasladar. 16.9.Animaciones CSS.
transition-property, transition-duration, timing-function y efecto
delay. 16.10.Animacin CSS. Diferenciar transicin y animacin.
@keyframes: fotogramas o estados clave. 16.11.Animation CSS. name,
duration, delay, fill-mode, iteration-count. 16.12.Animation CSS.
direction, timing-function, play-state. 16.13.cursor CSS. Tipos.
Efectos hover: move, no-drop, resize, not-allowed, crosshair,
progress, wait. 17.MS SOBRE CSS. 17.1.Otros aspectos de CSS.17.2.Qu
hemos aprendido y qu no hemos aprendido con este curso de CSS?
Acceso al curso completo en aprenderaprogramar.com -- >Cursos, o
en la direccin siguiente:
http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203Orientacin
curso Tutorial bsico programador web: CSSdesde cero
aprenderaprogramar.com, 2006-2029 ORIENTACIN SOBRE EL CURSO PASO A
PASO TUTORIAL BSICO DEL PROGRAMADOR WEB: CSS DESDE CERO CSS es un
lenguaje diseado para separar el contenido de las pginas web de su
presentacin. As, un
mismocontenidopodraversededistintasmanerasocondistintosaspectosaplicndoledistintos
estilos CSS. CSS no es un lenguaje de programacin propiamente
dicho, aunque a veces se lo denomina lenguaje de programacin
coloquialmente. Esto es posiblemente debido a que muchas veces el
lenguaje CSS se mezcla de alguna manera con el HTML o con lenguajes
de programacin como PHP. Esta mezcolanza implica que a veces el
cdigo CSS est junto al HTML o PHP, o que a la hora de desarrollar
una web o solucionar un problema en una web sean necesarios
conocimientos tanto de HTML como de CSS como de un lenguaje de
programacin propiamente dicho.
CSSesunlenguajedescriptivo,formadoporunaseriedeatributos,valoresyetiquetasqueel
navegador interpretar de una u otra forma mostrando distintos
aspectos para las diferentes etiquetas que forman la estructura de
una pgina HTML. Es decir, podemos obtener muchos aspectos y diseos
para una misma pgina HTML simplemente cambiando su hoja de estilos.
Estecursoqueestamoscomenzandovadirigidoaaquellaspersonasquequieranadquirirunos
fundamentos bsicos para crear hojas de estilo con vistas a poder
desarrollar en el futuro pginas web atractivas y de cierta
complejidad. No vamos a desarrollar un manual de referencia de CSS,
sino un curso bsico paso a paso. No vamos a contemplar todos los
aspectos de las hojas de estilo CSS, sino aquellos que consideramos
bsicos desde el punto de vista didctico, con vistas a que
posteriormente la persona que lo desee ample sus conocimientos.
Nuestro objetivo es ser claros, sencillos y breves, y para eso
tenemos que centrarnos en determinadas cuestiones de CSS y dejar de
lado otras.
Comoconocimientospreviosparainiciarestecursorecomendamos(seguirlarecomendacinono
queda a criterio del alumno y/o profesor que vayan a seguir el
curso) estos: Ofimtica bsica (saber copiar, pegar, mover y abrir
archivos, etc.) y haber realizado el Curso bsico de HTML que se
ofrece en aprenderaprogramar.com
(http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192).
Conocer algn lenguaje de programacin sera un aspecto positivo. Los
conocimientos previos son, como hemos dicho, deseables pero no
imprescindibles.Aprender CSSrequiere tiempo y esfuerzo. Para hacer
ese recorrido ms llevadero, te recomendamos que utilices los foros
de aprenderaprogramar.com, herramienta a disposicin de todos los
usuarios de la web (http://www.aprenderaprogramar.com/foros/), y
que te servir para consultar dudas y recabar
orientacinsobrecmoenfrentartealoscontenidos.Entrelosmiembrosdelportalwebyotros
usuarios, trataremos de ayudarte para que el estudio te sea ms
llevadero y seas capaz de adquirir los conocimientos necesarios y
avanzar como programador o diseador web. El tiempo necesario
(orientativamente) para completar el curso incluyendo prcticas con
ordenador,
suponiendoquesecuentaconlosconocimientospreviosnecesarios,seestimaen90horasde
Orientacin curso Tutorial bsico programador web: CSSdesde cero
aprenderaprogramar.com, 2006-2029 dedicacin efectiva o
aproximadamente un mes y medio con una dedicacin de 3 horas diarias
de lunes a viernes. Aprender a crear pginas web requiere dedicacin
y esfuerzo. El curso ha sido generado paso a paso usando Windows
como sistema operativo y por ello contiene algunas indicaciones
especficas para usuarios de Windows, pero tambin puede ser
utilizado en otros entornos (Linux, Macintosh, etc.). Estamos
seguros de que con tu esfuerzo y la ayuda que te podamos brindar
este curso te resultar de gran utilidad. Prxima entrega: CU01003D
Acceso al curso completo en aprenderaprogramar.com -- >Cursos, o
en la direccin siguiente:
http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203
Concepto de CSS. Hojas de estilo en cascada.
aprenderaprogramar.com, 2006-2029 DEFINICIN O CONCEPTO DE LENGUAJE
CSS CSS es un lenguaje utilizado en la presentacin de documentos
HTML. Undocumento HTML viene siendo coloquialmente una pgina web.
As, podemos decir que el lenguaje CSS sirve para dotar de
presentacin y aspecto, de estilo, a una pgina web. Este lenguaje es
principalmente utilizado por parte de diseadores y programadores
web para elegir multitud de opciones de presentacin como colores,
tipos y tamaos de letra, imgenes de fondo, bordes,etc.
La filosofa de CSS se basa en intentar separar lo que es la
estructura o contenido y configuracin bsica del documento HTML de
su presentacin. Por decirlo de alguna manera: la pgina web sera lo
que hay debajo (el contenido) y CSS sera un cristal de color que
hace que el contenido se vea de una forma u otra. Usando esta
filosofa, resulta muy fcil cambiarle el aspecto a una pgina web:
basta con cambiar el cristal que tiene delante. Piensa por ejemplo
qu ocurre si tienes un libro de papel y lo miras a travs de un
cristal de color azul: que ves el libro azul. En cambio, si lo
miras a travs de un cristal amarillo, vers el libro amarillo. El
libro (el contenido) es el mismo, pero lo puedes ver de distintas
maneras. CSS permite cambiar el estilo a los contenidos de las
pginas web. Algunas opciones bsicas del lenguaje CSS por ejemplo
pueden ser el poder cambiar el color de algunas tpicas etiquetas
HTML como (h1 es una etiqueta en el lenguaje HTML destinada a
mostrar un texto como encabezado, en tamao grande). Pero tambin hay
funciones algo ms complejas, como introducirespaciadoentreelementos
(divesunaetiquetaHTMLparaidentificaruna
determinadareginodivisindecontenidodentrodeunapginaweb)oestablecerimgenesde
fondo, bordes redondeados, etc.. CSS es muy intuitivo y sencillo
una vez se llega a aprender, ya que para su definicin siempre se
hace uso de un identificador de etiqueta HTML (como por ejemplo ),
y luego indicamos con qu aspecto queremos que se muestren todas las
etiquetas que aparezcan en un documento. Podemos definir cmo
queremos que se muestren las distintas partes del documento HTML,
pudiendo en cada caso definir sus propiedades (color, tipo de
fuente, tamao, espacio de mrgenes, bordes, imagen de fondo, etc.)
con algn determinado valor deseado. Vamos a ver primero lo que sera
un ejemplo muy sencillo de aplicacin de CSS, que tratar de una
pgina web o archivo HTML donde tan solo tendremos un prrafo de
texto. El texto estar dentro de una etiqueta . Distinguiremos con
este ejemplo entre contenidos y presentacin o aspecto. Para seguir
este tutorial es necesario que tengas conocimientos bsicos de HTML.
Si no los tienes, te recomendamos que realices primero el curso
bsico de HTML disponible en la seccin de cursos de
aprenderaprogramar.com (o si prefieres acceder directamente, puedes
hacerlo a travs de este enlace:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192).
Concepto de CSS. Hojas de estilo en cascada.
aprenderaprogramar.com, 2006-2029
Nuestrodocumentohtmlcontendrelsiguientetextodepartida(enestecasosehallamado
ejemplo.html):
Ejemplo aplicacin CSS - aprenderaprogramar.com
Texto de ejemplo para visualizar resultados
Una vez creado el documento ejemplo.html en nuestro ordenador,
lo abriremos con un navegador web, obteniendo un resultado que ser
similar a ste: Tenemos una pgina web que tan solo tiene un prrafo
(Texto de ejemplo para visualizar resultados). Este aparece en
color negro por defecto y nosotros, para ver la utilidad de CSS
deseamos mostrar el
textoenrojo.EnrealidadconCSSpodemoshacercosasmuchomscomplejas,peroahoraslo
queremos poner un ejemplo para mostrar la utilidad de CSS.
Unavezhayamoscreadounarchivoconelestiloparaaplicaralosprrafos(duranteelcurso
aprenderemos cmo hacer esto y muchas ms cosas) podremos hacer que
todos los prrafos de una
pginawebsemuestrendeunamismamanerasintenerquemodificarprrafoaprrafo,sino
nicamente modificando el estilo CSS que se debe aplicar a los
prrafos. Como decamos, introduciendo el cdigo CSS adecuado podremos
lograr que cambie el aspecto de nuestra pgina web: Hace falta CSS
para realizar esto? Antiguamente no. Podamos hacerlo simplemente
usando HTML: Concepto de CSS. Hojas de estilo en cascada.
aprenderaprogramar.com, 2006-2029 Texto de ejemplo para visualizar
resultados Sin embargo, con esta escritura slo estbamos modificando
el aspecto de un prrafo, mientras que con CSS podemos modificar el
aspecto de todos los prrafos de una pgina web, repartidos en
cientos de lneas y de archivos, automticamente. Con la evolucin de
HTML, algunas formas sintcticas que servan para dotar de aspecto a
las pginas web han pasado a considerarse obsoletas o
descatalogadas, dejando que la presentacin quede controlada de
forma independiente a travs de CSS. CSS hace que resulte fcil
cambiar la presentacin ya que si ahora quisiramos cambiar el color,
fuente,
tamao,etc,detodoslosprrafosdenuestrapginaweb,tansolodeberamosdecambiarlas
propiedades en el archivo donde hayamos definido el estilo para los
prrafos, sin alterar nada en la pgina web. Esto es mucho ms fcil,
rpido y legible que tener que estar modificando todas y cada una de
las etiquetas que aparecieran en nuestra pgina web. Ahora bien,
imaginemos que tenemos una pgina web con 3 etiquetas pero no
deseamos que todas tengan la misma presentacin. CSS tiene previsto
cmo poder aplicar distintos estilos a ciertos prrafos o etiquetas.
Durante el curso veremos cmo. Esta imagen sera un ejemplo de uso de
distintos estilos para la etiqueta de prrafos. La forma de
definicin de estilos CSS separa la presentacin de la informacin en
una pgina web. Es muy til porque tenemos los estilos por un lado y
los contenidos por otro. Si en un momento dado queremos cambiar la
forma en que se ve la pgina pero no sus contenidos, nicamente
tendramos que modificar los archivos css. Pero tambin existen estas
otras formas de aplicar estilos, lo veremos a lo largo del curso.
Quizs los ejemplos que hemos visto hasta el momento te resulten muy
sencillos y poco atractivos. A continuacin mostramos imgenes de lo
que puede hacerse utilizando CSS a nivel avanzado, que como vers
puede ser realmente espectacular. Fjate en las dos imgenes que
mostramos a continuacin y trata de identificar qu tienen en comn y
qu tienen distinto: Concepto de CSS. Hojas de estilo en cascada.
aprenderaprogramar.com, 2006-2029 Podemos decir que tienen en comn
un mismo texto, un mismo men y posicin de men. En cambio
podemosdecirquecambianloscolores,tiposytamaosdeletraylasimgenesdefondo,tanto
detalles decorativos como las flores o personas, como fondos que
crean marcos para el texto o los mens. Con un conocimiento avanzado
de CSS podremos lograr efectos similares a estos que estamos viendo
y cambiar el aspecto de una pgina web con slo un click de botn.
Prxima entrega: CU01004D Acceso al curso completo en
aprenderaprogramar.com -- >Cursos, o en la direccin siguiente:
http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203Para
qu s aprenderPARA QU CSSesu(documensuele apalenguaje d
A veces ovista formcoloquialmUn lenguaordenadointernet,
caractersfuncin dcapaz de que perma lenguajeCSS es undesarrollo
sirve CSS? Es uraprogramar.co SIRVE CSS nlenguaje ntos HTML).
arecer relaciode programairs hablar dmal, incorrecmente se usaaje
de prograor o dispositivpasandoposticas bsicase las circunsrepetir
procmita cumplir ees de progran lenguaje qo web comprun lenguaje de
om, 2006-2029 quesirvepCSS no es uonado o pracin, pero nde
Lenguajecta, ya que na el trmino amacin es uvo electrnicorcualquier
s el tener lastancias (por cesos repetidestas funcionmacin. ue
apareci rende mltipIntegraTestProgramprogramacin?paradotardn
lenguaje dximo a un no es un lenges de programni HTML ni
Cprogramacun lenguaje qco, desde uncosaquesa capacidad ejemplo
depdas veces hanes, por tantpara hacer ples reas deacin,
tingmacin?depresentade programalenguaje de guaje de progmacin
HTMCSS son lengcin CSS. que se usa pn clculo parseteocurrapara
tomarpendiendo dasta que se to no es un lms fciles e
conocimienDesarrollowebAnlisis y diseo funcionalSistemas
(servidores, bases de datos)acinyaspeacin. Podraprogramacigramacin
p ML y CSS. Estguajes de propara realizar a un estudiaa.Unlenguar
decisionesdel botn qucumpla una enguaje de py con mejonto:
AndisarquiDigrMaquecto,deesmos decir qin o que suropiamente ta
expresinogramacin.procesos dente o ingeniajedeprog o ejecutar e
pulse el uscondicin. Cprogramacir aspecto lolisis y seo tecturalseo
fico, uetacinstilo,apgue es un lenuele colabordicho. n es, desde e
No obstant inters a traero, a una coramacintieun proceso suario),
as coCSS no es unn aunque seos desarrolloginasweb nguaje que rar
con un l punto de te, a veces avs de un ompra por enecomo u otro en
omo el ser n lenguaje e use junto s web. Un Para qu sirve CSS? Es
un lenguaje de programacin? aprenderaprogramar.com, 2006-2029
Enlaclasificacinquehemoshecho,CSSestaraenglobadodentrodelreadediseogrficoy
maquetacin. Los desarrollos web tienen dimensiones muy variables.
Podemos hablar desde una pequea pgina web para una empresa local
hasta un gran portal para una empresa de mbito internacional. En
ambos casos podramos decir que interviene la programacin web y el
diseo web. Sin embargo, un pequeo
desarrollopuedeserllevadoacaboporunasolapersonaqueabarquetantoprogramacincomo
diseo, mientras que un gran desarrollo requiere de un equipo de
trabajo ms o menos amplio y con distintos especialistas, ya que en
torno a los desarrollos web hay diferentes reas de conocimiento
implicadas (anlisis, diseo, programacin, sistemas, integracin,
testing, etc.).
Enungrandesarrolloexistenpersonasespecializadasenlasdistintasreas,demodoqueel
programadornosueletrabajareneldiseo(exceptoparahaceralgnretoqueocambio,opara
solucionarproblemas).Noobstante,sresultaconvenientequeunprogramadorwebtengalos
conocimientos bsicos de CSS ya que le resultarn tiles y necesarios,
por un lado para la solucin de problemas y por otro para integrar
cuestiones donde el diseo y la programacin se entremezclan. Si
miramos a los lenguajes o tecnologas que hay en torno a los
desarrollos web podramos hacer una clasificacin que comprende:
HTML, CSS, Bases de datos, Servidores, Lenguajes de programacin del
lado del cliente (p.ej. Javascript) y Lenguajes de programacin del
lado del servidor (p.ej. PHP).
HTMLyCSSsontecnologas(ometalenguajes,yaquenopuedeconsiderrseloslenguajesde
programacin) que intervienen en prcticamente todo desarrollo,
grande o pequeo. Se encargan de dotar de una estructura y
presentacin agradables a aquello que ve el usuario de pginas web.
Tecnologas webHTMLCSSBases de datosServidoresLenguajes del lado del
clienteLenguajes del lado del servidorPara qu sirve CSS? Es un
lenguaje de programacin? aprenderaprogramar.com, 2006-2029
Loslenguajesdeprogramacindelladodelservidorrealizanprocesosenelservidor(computador
remoto que se encarga de enviar las pginas web a travs de
internet): podemos citar entre estos lenguajes Java (JSP), ASP.NET,
PHP, o Perl, entre los principales. Los lenguajes de programacin
del lado del cliente realizan procesos en el ordenador personal del
usuario (efectos visuales, clculos, etc.): podemos citar entre
estos lenguajes Javascript, Java (applets), o VBScript, entre los
principales.En cuanto a bases de datos podemos nombrar MySQL,
SQLServer y Oracle, entre las principales.
Lastecnologassecombinanentreellasdemuydiversasmaneras.Podemoscitaralgunas
combinaciones bastante habituales entre lenguajes de programacin y
bases de datos: Java +Oracle,
ASP.NET+SQLServer,PHP+MySQL.Seacualsealacombinacinutilizada,enundesarrolloweb
moderno siempre intervendr HTML y CSS. En resumen, CSS es un
lenguaje para dotar de presentacin y estilo a pginas web cuyos
aspectos bsicos deben ser conocidos tanto por programadores web
como por diseadores web o maquetadores web. En la prctica, muchas
veces se entremezcla el cdigo de programacin con el cdigo HTML y
cdigo CSS, de ah que coloquialmente se hable de programacin web
para referirse a todo este conjunto, aunque formalmente ni HTML ni
CSS son lenguajes de programacin. Fjate que estamos tratando de
dejar claro qu es y para qu sirve CSS antes de empezar a estudiar
este
lenguajeporquesitenemoslosconceptosclarosnossermuchomssencilloelaprendizaje,
ahorraremos tiempo y cometeremos menos errores. Prxima entrega:
CU01005D Acceso al curso completo en aprenderaprogramar.com --
>Cursos, o en la direccin siguiente:
http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203Efectos
CSS aprenderEFECTOS En el anteen cierto efecto usahacer una
Esta pregsencillo coa texto poEllenguagurdalo
Con Javasnombre e
. La frontera enraprogramar.coCSS. UBICARerior epgrafsentido se
eando HTML,a misma cosaunta no es domo aplicar odra
aplicarsjeHTMLpeen un archivYPE HTML PUB
r txt ="Quiero
acument.write("cument.write("cument.write("cument.write("cript>L
y programaciERA hemos indicacon stos. AS usando ust la fronteuesta.
Vamoctos a un texonceptos comaralgunosee ejemplo1.hDTD HTML 4.01TML
aprenderapo_contenido"cng>Quiero apreiero aprender
arike>Quiero apr"); /p>"); ""); olor("green") +nguaje de pmos
que se pcin. Por qlo que pueden cuenta quenimaciones,
eo.Escribeoww.w3.org/TR/huiv="content-ty/p>/p>ogramardigo y
gurww.w3.org/TR/huiv="content-ty+""); rogramacinuede lograr u
tantas foe ocurrir pare este ejempetc.
ocopiaestehtml4/loose.dtdype" charset="u>rdalo en un
ahtml4/loose.dtdype" charset="un pero que un mismo ormas para ra
algo tan plo relativo ecdigoy d">utf-8">archivo de
d">utf-8">Efectos CSS. La frontera entre CSS, HTML y
programacin aprenderaprogramar.com, 2006-2029 Y por ltimo en vez de
aplicar Javascript o simple HTML, podemos usar CSS. Escribe o copia
este cdigo y gurdalo en un archivo de nombre ejemplo3.html:
Ejemplo CSS aprenderaprogramar.com
#negrita{font-weight:bold;}#italica{font-style:italic;}#tachado{text-decoration:
line-through;}#verde{color:green;}
Negrita: Quiero aprender a programarItalica: Quiero aprender a
programarTachado: Quiero aprender a programarColor fuente:Quiero
aprender a programar
Haz doble click sobre cada uno de los archivos para visualizar
el resultado en un navegador. El resultado que obtenemos es algo
similar a esto: El nico cdigo que debemos entender por el momento
es el correspondiente al ejemplo 1, ya que es cdigo HTML que ya
debemos conocer. El cdigo del ejemplo 2 y ejemplo 3 no te preocupes
si no lo entiendes ya que el objetivo ahora no es comprender ese
cdigo, sino simplemente ver cmo podemos alcanzar un mismo objetivo
usando distintos lenguajes como HTML, Javascript CSS.Adems si nos
fijamos, el cdigo Javascript y el cdigo CSS est dentro de un
documento HTML (aunque podran estar en archivos separados). Todo
esto nos puede llevar a preguntarnos: Por qu se entremezclan unos
lenguajes con otros? La respuesta sera histrica y tcnica: HTML se
convirti en la forma de crear pginas web, pero tena Efectos CSS. La
frontera entre CSS, HTML y programacin aprenderaprogramar.com,
2006-2029 muchas limitaciones. En un momento dado, se consider que
entremezclar (embeber) lenguajes entre s poda ser una buena opcin
tcnica para resolver problemas o hacer cosas que no era posible o
conveniente hacer con HTML. As, podemos embeber Javascript en HTML
embeber CSS en HTML, o embeber HTML en PHP, etc. Por ello a veces
ocurre que no hay una frontera clara entre lenguajes de
programacin, HTML y CSS. Esto, que puede resultar un tanto confuso
inicialmente, se va convirtiendo en comprensible a medida que se
trabaja y se aprende ms sobre estos lenguajes.
Porotrolado,porqutantasvasdistintasparahaceralgocuandoquizsquesolohubierauna
manera de poner el texto en negrita, o una sola manera de poner un
color de fuente, sera ms simple? Para esto podemos citar varios
motivos: a)Motivos histricos: a veces las cosas se empezaron a
hacer de una manera y luego se pens
queeramejorhacerlasdeotra.Sinembargo,paraevitarquelaspginaswebexistentes
dejaran de funcionar, se siguieron permitiendo formas de hacer las
cosas anticuadas. Por ejemplo la etiqueta en HTML se considera
deprecated (obsoleta, de uso no recomendado) en HTML 4.01 y no est
admitida en HTML 5. Sin embargo, se sigue usando. Muchas formas de
hacer las cosas se admiten aunque no estn recomendadas. b)Motivos
de independencia de tecnologas: HTML es una cosa y Javascript es
otra, aunque en la prctica nos encontremos con que Javascript se
puede entremezclar (embeber) en HTML. Podramos hacer cosas en
Javascript y no querer usar otro lenguaje, es decir, podramos
tratar
dehacercosasindependientessinentremezclartecnologas.Porellolenguajescomo
Javascript PHP incorporan posibilidades para hacer cosas que ya se
pueden hacer de otra manera. De esta forma tienen la potencialidad
de ser ms independientes. c)Motivos de polticas de desarrollo y
estndares: quizs no te lo hayas preguntado nunca, pero conviene
tener al menos una orientacin al respecto: Quin define qu es un
lenguaje como
HTML,CSS,PHP,cmosedebeescribir,quresultadodebegenerarcadaetiquetao
instruccin,etc.?Engeneraldetrsdeloslenguajes,aunquealgunosfueroncreadospor
personasindividuales,hayempresas,comunidadesdedesarrollo,asociaciones,consorcios
internacionales, comits, etc. En ocasiones un grupo de personas no
est de acuerdo con la
formaenqueseestcreandounaespecificacindellenguajeyformangruposdetrabajo
alternativosquedefinenestndaresalternativos.Avecestriunfaunestndaryelotrose
desecha,perootrasvecesconvivendistintosestndaresquepermitenhacerlascosasde
distintas maneras. Para los creadores de pginas web esto resulta
negativo, pero as es la vida! d)Otros motivos: podramos abundar en
el por qu de que las cosas sean como son, pero con tener una idea
general nos basta. Acostmbrate a pensar que los desarrollos web no
son matemticas. Las cosas se pueden hacer de muchas maneras, y de
hecho muchas veces se hacen de mala manera por desconocimiento, por
prisas, o por ser ms fcil.
Acostmbrateapensarquelosdesarrolloswebusandistintoslenguajesquemuchasvecesse
entremezclan entre s hasta el punto de ser difcil distinguir en qu
corresponde a un lenguaje y qu Efectos CSS. La frontera entre CSS,
HTML y programacin aprenderaprogramar.com, 2006-2029 corresponde a
otro. Hay lenguajes comunes en los desarrollos web como HTML, pero
por ejemplo en cuanto a lenguajes de programacin no todos los
programadores usan el mismo.
Acostmbrateaencontrarteconqueaveceslascosasnofuncionancomounaesperaraquelo
hicieran, no debido a que se haya escrito mal el cdigo o usado mal
una instruccin, sino debido a que
enelmundodeinternetexistendistintosestndaresydistintasversiones.Avecesaunquenos
esforcemos porque todo se vea como nosotros esperamos en todos los
navegadores o dispositivos, es difcil conseguirlo. Es un poco
catico, pero es as. En este curso ms que aprendernos todas las
instrucciones, estndares, etc. vamos a tratar de ser capaces de
razonar el por qu de las cosas, y a tratar de esforzarnos por saber
cmo generar cdigo limpio, bien estructurado y de calidad. Prxima
entrega: CU01006D Acceso al curso completo en
aprenderaprogramar.com -- >Cursos, o en la direccin siguiente:
http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203CSSen
gest aprenderCSS EN AP Ya hemosaspecto. atractivo
Managemcontenido
Elconcepaccedemoamplio cowebsehcomenzarde softwaMuchas
dgestionendigitales, Las aplicadebido a hacerunahabitualm
CLASIFICAGestores dContenidoForos y libvisitas ores de
contenraprogramar.coPLICACIONESs dicho que Unadelas a las
aplicacimentSystemos en una pptodeaplicos a travs domo los
proghanpopulariron a distribare en torno de estas aplin pginas
weetc.ciones web sque los camaclasificacimente usadosACIN de os
Joomb2evCMSImpTYPOMahNukros dephpXMBnido como Joomom, 2006-2029 S
WEB CSS nos peraplicacionesiones web, dms).UnCMSgina web fcacinweb
de internet)gramas de orizadoenlosuir y utilizar a ellas. icaciones
sireb como tiense podran cpos en que sncomn,qs: mla,Drupal,
volution, GeeSMadeSressPages,lO3,Chamilo,hara,Mamboke, Tiki Wiki,
XBB,SMF,fluB Forums, GBomla, WordPressrmite separasmsamplidentro de
lasSessoftwacilmente.(programaq es muy amrdenador o lsltimosade
forma grven para qudas de comelasificar de vse utilizan
laqueesbasEJEMPLOSOpenCMS,Peklog,
SerendiSimple,concliveSite,Nuc,Moodle,pho,ocPortal,PXoops, Zikula
uxBB,MyBB, ook, Lazarus Gs, Drupal ar el conteniamenteexts que
destacaarequese quesealojamplio, de heclas actividadosgracias
ratuita, con ue personas ercio electrvarias maners distintas
andonosen lone,WordPrpity,
Textpattcrete5,Concleus,PyroChpMyFAQ,ePHP-Fusion,PVanillaForuGuestBook,ido
de una tendidadeCan los Gestoinstalaene aenunservcho con el pes que
realizaquebuenuna comunique no tiennico, foros, ras. De
hechoplicaciones meltipodepress, tern, ntao, CMS, 107,
PHP-Orientdiferendigital pginaums, Pensadforos intercavisitaspgina
web CSSesten res de Conteelservidor vidorremotpaso de los za el ser
humnapartede dad de usuanen conocimportales de co es difcil
remuchas vecepginaweb DESCtadosacrearntestemticahasta una tia
personal, etcdosparalacdondelosambindose mde su presedotardeuenidos
o CMSysirveparatoohostingaos se ha mano. Las apestasaplicaarios y
desarmientos de incontenidos, ealizar una cles se
solapanparaelqueCRIPCIN rportalesweas,desdeunenda on-line c.
creacindessusuarios mensajes o paentacin o unaspecto S (Content
apublicar gyalque hecho tan plicaciones acionesse rrolladores
nformtica peridicos asificacin n. Vamos a esonms ebdemuy nperidico
o un blog, sistemasde participan ra libros de CSSen gestores de
contenido como Joomla, WordPress, Drupal aprenderaprogramar.com,
2006-2029 CLASIFICACINEJEMPLOSDESCRIPCIN Wikis
MediaWiki,DocuWiki,PmWiki,WikkaWiki, TikiWiki, PikiWiki
Pensadosparamantenerunsistemade informacinentreunacomunidadde
usuarios. Este sistema puede ser generalista como wikipedia o estar
especializado en un rea o campo de conocimiento concreto. Tiendas y
comercio electrnico Magento,PrestaShop,CubeCart,OpenCart,
osCommerce, TomatoCart, Zen Cart,Pensadas para crear tiendas
electrnicas y galerasdeproductosdestinadasal comercio electrnico.
Utilidades varias ExtCalendar,phpScheduleit,WebCalendar,
phpFreeChat,phpMyChat,DadaMail,PHPList,
SiteRecommender,OpenX,OSClass,QuickSell Classifieds, Help Center
Live, Hesk, osTicket Permitencrearcalendarios,galerasde
imgenes,Chats,Sistemasdeenvode correoelectrnico,sistemasdeanuncios,
sistemas de soporte a usuarios MILLONES DE DESCARGAS, MILLONES DE
WEBS DISTINTAS Vamos a centrarnos ahora en lo que permite mostrar
una aplicacin web a los usuarios. Por ejemplo, para un diario
digital diremos que existe una parte denominada BackEnd donde
escriben los articulistas y otra parte denominada FrontEnd que es
la pgina web en s del diario. Aplicaciones web que pueden
servirparaestepropsitosonJoomla,DrupaloWordPress.Sicientosdediariosdigitalesutilizan
Drupal, por ejemplo, Cmo consiguen tener un aspecto diferente unos
de otros si el punto de partida es siempre el mismo? La respuesta
est en que estas herramientas incorporan cdigo CSS avanzado
mediante el que se crean aspectos distintos. La aplicacin web suele
contar con una parte para la gestin de contenidos mientras que otra
parte denominada plantilla, template, theme, skin, etc. se encarga
de controlar el aspecto. El template o theme acta como una piel
sobre los contenidos. Fjate cmo aplicando un filtro una fotografa
puede cambiar: CSSen gestores de contenido como Joomla, WordPress,
Drupal aprenderaprogramar.com, 2006-2029
ConCSSavanzadolaideaessimilar:aplicamosdistintostiposdefuentes,tamaosdefuentes,
imgenesdefondo,colores,etc.paraconseguirdistintosaspectos.Fjateenestasimgenes,que
corresponden a themes o plantillas del gestor de contenidos Drupal.
Aqu vemos cmo usando CSS se pueden conseguir muy distintos
aspectos. Esto ha permitido el xito de gestores de contenidos como
Joomla, Drupal o WordPress, con los que se puede crear desde una
pginadedicadaalcomercioelectrnicohastaunawebdeunrestauranteounperidicodigital.
Gracias a los templates o themes tambin se puede cambiar el aspecto
de pginas web cada cierto tiempo. Si te fijas en las imgenes
anteriores se puede argumentar que realmente no tienen el mismo
contenido debajo. Efectivamente, en este caso no tienen el mismo
contenido. Pero ten en cuenta que quizs el aspecto de una peluquera
deba ser un poco diferente al aspecto de un restaurante. En las
siguientes imgenes te mostramos un mismo contenido con un cambio de
theme: CSSen gestores de contenido como Joomla, WordPress, Drupal
aprenderaprogramar.com, 2006-2029 CSSen gestores de contenido como
Joomla, WordPress, Drupal aprenderaprogramar.com, 2006-2029 En este
caso el contenido s es el mismo (excluyendo el espacio
publicitario). Fjate en los cambios: cambia la imagen de fondo que
aparece en la cabecera de la web. Cambia el color de los elementos
(letras, fondos), cambia la forma en que aparece el men, cambia el
espaciado entre lneas, etc. Pero la informacin que hay debajo es la
misma. Todo esto es posible gracias a CSS, la tcnica y lenguaje que
permite separar contenidos y presentacin.Realmente las pginas web
tienen una gran variedad de aspectos no solo gracias a distintos
colores e imgenes, sino tambin gracias a que las tcnicas CSS
permiten crear muy distintos aspectos. Existen muchos estudios de
diseo y programacin donde se trabaja en la creacin de templates o
themes prediseados. Hay muchos de distribucin gratuita, pero la
mayora de los templates o themes de calidad son de pago (cosa
lgica, ya que tienen un gran trabajo detrs). Hemos querido con esta
aproximacin al uso de CSS en aplicaciones web remarcar la
importancia que
haadquiridoestatcnicaenlosdesarrollosweb.Novamosaentrardemomentoencuestiones
relacionadas con templates o themes, sino a centrarnos en
cuestiones bsicas de CSS. La realidad en torno a los templates o
themes de aplicaciones web es bastante compleja, ya que actualmente
se tiende no slo a permitir cambiar el aspecto de un mismo
contenido, sino a permitir completamente la personalizacin de la
presentacin de pginas web (por ejemplo permitir usar dos mdulos
laterales y una columna central, o por el contrario dos columnas
centrales sin mdulos laterales, etc.). Esto ya supone el uso de
programacin al mismo tiempo que CSS, y tambin suele suponer la
participacin de
distintosespecialistas(diseadores,maquetadores,expertosenCSS,programadores,etc.)parala
creacin de los templates o themes profesionales de las aplicaciones
web. Lo primero es lo primero, as que empecemos con los fundamentos
de CSS. Prxima entrega: CU01007D Acceso al curso completo en
aprenderaprogramar.com -- >Cursos, o en la direccin siguiente:
http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203Empezar
a u aprenderUN DOCU Para ver cHTML quedividida econtacto y
Crea un d
Port
f="#">Iniciotir de un documom, 2006-2029 ML BSICO os sirve
paraa la estructu con el ttulopgina con inHTML con unC
"-//W3C//DTDcurso -->nderaprograman" content="Po"
content="aprena web -->a web -->raprogramar.coin de la
prograe la pgina webparte central -->a>">Libros de
prol">Cursos de prl">Humor informento HTML b dotar de asra
bsica deo y mensajenformacin s editor de teD HTML 4.01 Trr.comortal
web aprenender, programomamacin
-->>gramacinrogramacinli>documento Hweb. En estn, texto
contores o el cop otepad++co" "http://wwwar.com">ros">HTML
vamosta estructuran algunas impyryght.on el siguient.w3.org/TR/htms
a partir de a la pgina wgenes, formte contenidoml4/loose.dtd">un
cdigo web queda mulario de o: >Empezar a usar CSSa partir de un
documento HTML bsico aprenderaprogramar.com, 2006-2029
Aprender a programar es un objetivo que se plantea mucha gente y
que no todos alcanzan.Hay que tener claro que aprender
programacinno es tarea de un da ni de una semana: aprender
programacin requiere al menos varios meses y, si hablamos de
programacin a nivel profesional, varios aos. No queremos con esto
desanimar a nadie: en un plazo de unos pocos das podemos estar
haciendo nuestros primeros programas.Puedesseguirunodenuestros
cursosentre los varios disponibles. Cuando haya que utilizar un
editor de textos recomendamos el uso de uno potente y sencillo como
Notepad++, aunque son vlidas otras alternativas como Crimson
Editor.
Si quieres contactar con nosotros envanos este formulario
relleno:
Nombre:
Apellidos:
Direccin:
Correo electrnico:
Mensaje:
Copyright 2006-2038 aprenderaprogramar.com
Empezar a usar CSSa partir de un documento HTML bsico
aprenderaprogramar.com, 2006-2029 El cdigo anterior es HTML y lo
usaremos a lo largo del curso para poner diferentes ejemplos, por
lo que lo denominaremos "cdigo base del curso". Para seguir este
curso debes ser capaz de comprender todo el cdigo HTML que hemos
usado, su significado y sintaxis. Si no comprendes el cdigo
anterior no continues avanzando, dirgete a la web
aprenderaprogramar.com y en la seccin cursos busca el Curso bsico
del programador web: HTML desde cero y realzalo. Si no lo haces as
no entenders o no le sacars todo el partido posible a este curso.
Visualiza el documento HTML en un navegador. Debes obtener un
resultado similar a este (si te falla alguna imagen puedes cambiar
las rutas y poner otra imagen que t desees): Empezar a usar CSSa
partir de un documento HTML bsico aprenderaprogramar.com, 2006-2029
Enestedocumentotenemosvarioselementoscomoetiquetasdettuloh1yh2,links,listascon
elementos dentro de las listas, imgenes, formularios, botones,
texto, etc. Todo ello nos va a servir para usar CSS y ver las
posibilidades que nos ofrece CSS para dar formato a nuestras pginas
web. En este curso nos vamos a centrar en tratar de aprender los
aspectos ms importantes de CSS y la lgica de CSS. El objetivo ser
saber hacer un buen diseo de CSS, un buen uso de CSS y comprender
lo que hacemos.
Porelcontrario,novamosatratardeaprenderoconocertodaslaspropiedades,posibilidadeso
instrucciones de CSS ya que si logramos comprender cmo funciona y
su lgica, nos bastar con realizar
bsquedaseninternetparaencontraraquellapropiedadosintaxisquepodamosnecesitarenun
momento dado. Aprende a pescar, no te conformes con que te den
peces. Prxima entrega: CU01008D Acceso al curso completo en
aprenderaprogramar.com -- >Cursos, o en la direccin siguiente:
http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203De
la estruc aprenderORGANIZ En la anteconstaba contacto
ydefineuninstancia,
Laorganirefleja en Dentro dePor ejempdentro deejemplo etexto
dendentro deno apareces tenemos Por otra pdentro dedicho
textOtracueselementomismo elapertura, MODELO Ya
hemosdentrodeelemento Apartirdpantallaupresentarizquierda
navegadotodos) seinvisible. ctura HTML al mraprogramar.coZACIN
CONerior entregade cabeceray un pie de pnaorganizac dentro de
lazacinconc el esquemae la organizaplo, en distie las que se el
texto dentntro de etique elementos ce dentro desimplementms
informaparte en algel formularioto forma parstinquenoo de
aperturaemento, comcomo es el cDE CAJAS s visto cmo eunelemeos
dentro de delHTML,lunapgina rlainformaaderecha,ores?Losnagn la cual
De ah que smodelo de cajaom, 2006-2029 CEPTUAL HTa del curso va con
el ttulpgina con incinconcepa pgina webceptualque 1. acin que
dentas partes encuentra etro de etiquuetas e etiquetas cte el texto
dacin acerca unas partes o aparece terte del formuospuedellaa y
cierre (pomo
, mcaso de . Todas emente HTML(elelementsivamente. orestienen
abien,apantalla.Poreearribaabaactansegnto HTML semodelo de
cinline.digo HTML coe breve, mensobre los autelementoento
HTML.MLparanuepodemos sento HTML erman en algsabemos que corre
corresponificado explccontenedortido.xto suelto sinar incluido
dnada ms. ncinesqu), algunas encluyen aparularidades
deorganizacinasuvezcaarlainterprdocumento
dranmostrdederechlaspredefinque est dea web. nte a una pn algunas
impyryght. HTMdeotroeleopodramoss cosas que texto. No odel
significadorresponde aun elementorafo. Hay ocaemplo un texdistinto
de otmitado por etiquetas espmayoradeetiquetas se rentemente e HTML
deben donde todoadaelementretacindel
HTMLhabrrarselossucaaizquieridasaceptadlimitado porgina web
semgenes, formML podemosementoo, sverlatalyresultan signobstante,
lasdo de dicho a un ttulo po de una listasiones en quxto dentro
dtros espacioetiquetas, poecficas. Sabelasetiquetabren y ciercomo
si soloemos conoceos los
elemetopuedetecdigoymadistintasfcesivoselemdaQu dasportodr un
rectngencilla que mulario de s decir que enltima ycomose
nificativas. s etiquetas texto. Por rinicpal. El a. El texto ue el
texto de os, pero no or ejemplo bemos que tastienen rran en un o
tuvieran erlas. ntos estn enerotros mostraren formasde mentosde
hacenlos os(ocasi gulo o caja De la estructura HTML al modelo de
cajas CSS. Block e inline. aprenderaprogramar.com, 2006-2029
Esquema 1. Organizacin conceptual basada en HTML De la estructura
HTML al modelo de cajas CSS. Block e inline.
aprenderaprogramar.com, 2006-2029 Cada caja puede ser o bien tipo
que podramos considerar como bloque a lo ancho o bien tipo que
podramos considerar como elemento dentro de una lnea. Cada caja se
coloca dentro de la pantalla de la siguiente manera: -Una caja
debajo de otra, si son elementos block del documento HTML del mismo
rango o nivel en la jerarqua. Muchas de las etiquetas HTML se
tratan por defecto como elementos block. Por ejemplo los elementos
son elementos block. Igualmente son elementos block los formularios
o las listas
. En el siguiente esquema reflejamos algunos elementos block
dentro de nuestro ejemplo. De la estructura HTML al modelo de cajas
CSS. Block e inline. aprenderaprogramar.com, 2006-2029 Si te fijas,
las cajas que hemos representado son las divisiones principales
dentro de la caja que lo engloba todo que es la definida por . -Una
caja al lado de otra, de izquierda a derecha de acuerdo con el
orden con que aparezcan en el documento HTML, si son elementos
inline del documento HTML del mismo rango o nivel en la jerarqua.
Los elementos se mantienen uno al lado de otro (excepto en el caso
de que ya no haya espacio para ubicarlos, en cuyo caso pasan a la
siguiente lnea). Algunas de las etiquetas
HTMLsetratanpordefectocomoelementosinline.Porejemploloselementosson
elementosinline.Grficamenteennuestroejemploestosevisualizaporquedistintos
elementossecolocanunoalladodeotroynounodebajodeotrocomoharan
elementos block, como vemos a continuacin. -Una caja dentro de
otra, siendo la caja interior la de menor rango o jerarqua. Puede
haber varias cajas dentro de cada caja, segn se defina en el
documento HTML. Por ejemplo dentro de
lacajadivquedefinelacabeceradenuestrawebdeejemplohaydoscajas,una
correspondiente al ttulo principal y otra correspondiente al ttulo
segundo . El siguiente esquema reflejara el modelo de cajas del
documento HTML de forma similar a como lo
construyeunnavegadorwebcomopuedaserInternetExplorer,GoogleChromeoMozillaFirefox,
Safari, etc. De la estructura HTML al modelo de cajas CSS. Block e
inline. aprenderaprogramar.com, 2006-2029 Esquema 2. Modelo de
cajas CSS De la estructura HTML al modelo de cajas CSS. Block e
inline. aprenderaprogramar.com, 2006-2029 En este esquema
comprobamos que una pgina web puede tener gran complejidad en su
organizacin estructural y en su representacin con modelo de cajas.
Hemos representado las cajas en general delimitadas con una lnea
contnua (que en el navegador se
vuelveinvisible)exceptoaquelloselementosdetextoquenoestndelimitadosporetiquetas
especficas, que constituyen casos especiales que representamos con
lnea discontnua. Como veremos a lo largo del curso, CSS nos servir
para aplicar estilos (bordes, fondos, tipos de letra, interlineado,
etc.) a todas las cajas de un mismo tipo si lo deseamos, o tambin a
cajas concretas para las que deseemos tener un tratamiento
especial. EJERCICIO Analiza el siguiente cdigo HTML y crea dos
esquemas. Un esquema de organizacin utilizando llaves
comohemosvistoanteriormente,yotroesquemaquereflejelascajasqueintervienenenel
documento HTML, siguiendo el ejemplo visto anteriormente.
Portal web - aprenderaprogramar.com
Ir a la pagina principalNovedadesAqu presentamos las novedades
del sitio.Lanzamos el producto X-FASHIONEste producto permite
estirar la piel hasta dejarla como la de un beb.
Mejoramos el producto T-MOTIONHemos lanzado una nueva versin del
producto T-MOTION
Paracomprobarsitusrespuestassoncorrectaspuedesconsultarenlosforos
aprenderaprogramar.com. Prxima entrega: CU01009D Acceso al curso
completo en aprenderaprogramar.com -- >Cursos, o en la direccin
siguiente:
http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203Formas
de a aprenderESTILOS P Podemos las propia(aplicaci(aplicaci
Antesde documentestilo porpara el tepuedevapodemos
diferentesdiferente Consideracurso). Fjdistintos s Podemos
a)Enpb)Enec)On aplicar estilos Craprogramar.coPOR DEFECTOdar
formatoas lneas de ndeestilosn de estilos eescribirnuto HTML estr
defecto sueexto. El estiloariarsegneencontrar s (por ejemestilo por
dea el formularjate en la ssin haber apsealar algun el navegadequeo
que n el navegadl lateral dereOtras: por ejeavegador 1. CSS: por
defectom, 2006-2029 O o a nuestros HTML (aplisinterna)o
externa).uestroprimee ya posee uele compreno por
defectoelnavegadoqueciertosplo Internetefecto. rio en el
ejemiguiente imalicado estilosunas diferencdor 2 el boten el
navegador 2 la visuaecho, que noemplo la altuto, en lnea,
sobdocumentoscacin de eenunarchercdigoCSun estilo. Cuder un tipo do
para los enorqueutilicelementos t Explorer y mplo que venagen cmo
s: cias:n Enviar ador 1. alizacin delo existe en elura de la
cajabreescritura. s HTML de vastilos en lnhivodeexteSSremarquul? El
estilo de letra, colonlaces (links) cemos.EsimsevisualiceMozilla
Firenimos usandse visualiza aparece reml textarea co navegador 1a
del textareaarias maneraea), en la pensin.css emosunacpor defectoor
negro parsuele ser comportanteteendedistinefox) debidodo para el
deel mismo cmarcado conorrespondien1. a es ms peqas: incluyendparte
inicial independiencuestinimpo que aplicanra el texto y olor azul y
suenerestoentamanera o a que un nesarrollo del cdigo HTMLn un borde
ante al mensaquea en el do propiedaddel
documentedelarchportante:aln los navegadcolor blancoubrayado,
auencuentapoendosnanavegador acurso (cdigL en dos naazul y es un
aje incluye unavegador 2des CSS en nto HTML hivoHTML crearun dores.
Este o de fondo unque esto orquenos vegadores aplique un go base
del vegadores poco ms n scroll en 2 que en el Formas de aplicar
estilos CSS: por defecto, en lnea, sobreescritura.
aprenderaprogramar.com, 2006-2029
Aqunosencontramosconalgoaloquedebemosacostumbrarnoscomodesarrolladoresweb.En
general,noesposible(oquizssseaposible,perollevarademasiadotiempoyserademasiado
costoso) conseguir exactamente la misma visualizacin en distintos
navegadores web. Muchas personas pasan horas tratando de cuadrar
con exactitud los elementos de una pgina web y muchas veces este
trabajo, o parte de este trabajo, carece de sentido, ya que al
cambiar de navegador
(odesistemaoperativoconelmismonavegador)todoloquesehabacuadradopuedeaparecer
descuadrado, o al menos no exactamente como se pensaba, dando lugar
a grandes decepciones. Nuestra recomendacin es no obsesionarse con
pequeos detalles y, cuando se trate de desarrollos importantes,
probar las webs en distintos navegadores y ordenadores. Para este
curso empezaremos trabajando con un solo navegador ya que para el
aprendizaje nos resulta suficiente. Nosotros usaremos
MozillaFirefox,peropuedesusarotrosilodeseas.Cuandohayamosavanzadoiremosexplicando
algunos detalles o caractersticas especficas de los distintos
navegadores. Cuando trates de visualizar las pginas web que
construiremos durante el curso ten en cuenta que puedes obtener
visualizaciones distintas de aquellas que mostramos nosotros debido
a que tu navegador no interprete exactamente de la misma manera el
cdigo. No te preocupes ahora por los pequeos detalles, trata de
aprender los conceptos e ideas que hay en torno a CSS, ms adelante
ya habr tiempo de definir cmo se debe manejar la problemtica del
distinto comportamiento entre navegadores. ESTILOS EN LNEA Una de
las formas ms simples e intuitivas de dotar de estilos al cdigo
HTML es usando el atributo style que admiten la mayora de las
etiquetas HTML. Supn que sobre el cdigo de ejemplo que estamos
utilizando en el curso deseamos que el texto de los elementos del
men se muestre de color verde y el texto de los prrafos de color
azul. Para aplicar un estilo en lnea utilizaremos esta sintaxis: En
nuestro caso para un prrafo usaramos Para aplicar el color verde a
los elementos del men, que estn en una lista, podemos probar a
aplicarle el atributo style y la propiedad color a la etiqueta
. El cdigo quedara como sigue:
Libros de programacinCursos de programacinHumor informtico
Formas de aplicar estilos CSS: por defecto, en lnea,
sobreescritura. aprenderaprogramar.com, 2006-2029 El resultado
obtenido lo vemos a continuacin: Podremos comprobar que no hemos
obtenido el efecto deseado. Queramos poner el texto de los
elementos del men en color verde y sin embargo contina en color
azul. S podemos observar, sin embargo, que las vietas o iconos
circulares que aparecen en el lateral izquierdo han cambiado de
color negro a color verde. Cmo explicamos este comportamiento?
Tenemos que pensar en el modelo de cajas para comprender qu es lo
que ocurre. El modelo de cajas para los elementos del men sera el
siguiente: Caja de la lista
Caja del elemento de lista Inicio Caja del elemento link Caja
del elemento de lista Libros Caja del elemento link Caja del
elemento de lista Cursos Caja del elemento link Caja del elemento
de lista Humor Caja del elemento link En este esquema tenemos cajas
en tres niveles: la caja ms exterior correspondiente a la lista,
las cajas dentro de la lista correspondientes a cada uno de los
elementos dentro de la lista, y las cajas ms interiores
correpondientes a las etiquetas que definen los link. El navegador
acta aplicando estilos desde los niveles ms exteriores hacia los
niveles ms interiores, de forma que el estilo que se ve cuando
existen varios es el ms interior entre todos los posibles estilos
que afectan a un elemento. En este caso, toda la lista se establece
con color verde, lo cual afecta a las vietas y al texto. En las
etiquetas no existe estilo propio que contradiga el color verde.
Sin embargo, los elementos link tienen un estilo propio, un estilo
que en este caso es incorporado por defecto por el navegador, segn
elcualestoselementosaparecenencolorazulysubrayados.Esteeselltimoestiloqueleeel
Formas de aplicar estilos CSS: por defecto, en lnea,
sobreescritura. aprenderaprogramar.com, 2006-2029 navegador y el
que aplica a la caja de los elementos y esta caja al ser la ms
interna es la que se visualiza, mostrndose el texto en color azul
al estar dentro de las etiquetas . Para resolver este conflicto
aadiremos estilos que modifican el color para los links:
Humor informtico Ahora s hemos conseguido el efecto deseado.
Fjate en que hemos mantenido el estilo aplicado a la etiqueta
par que el color de las vietas se mantenga en verde. Si no
aplicramos ese estilo, el estilo aplicado sera el estilo por
defecto segn el cual las vietas se mostraran en negro. Nos
planteamos ahora dejar las vietas en color rojo y el texto del
menen color verde pero sin subrayado. Para ello tendremos que aadir
una propiedad al link que elimine el estilo subrayado que por
defecto incorpora el navegador. Esta propiedad ser text-decoration
cuyos posibles valores son none (ninguno), underline (subrayado),
overline (lnea superior), line-through (tachado).El cdigo ser el
siguiente:
Libros programacinCursos programacinHumor informtico Formas de
aplicar estilos CSS: por defecto, en lnea, sobreescritura.
aprenderaprogramar.com, 2006-2029 Y el resultado: Decimos que hemos
sobreescrito una propiedad CSS, en este caso la propiedad de
subrayado de los links, reemplazndola por una nueva propiedad. Hay
una cosa que llama la atencin: vemos que el cdigo CSS est
entremezclado o embebido
dentrodelcdigoHTML.PorejemploenvemosqueHTMLyCSSestn ntimamente
relacionados, tanto que resulta difcil distinguir qu es HTML y qu
es CSS. Esta es una caracterstica a la que debes acostumbrarte, en
los desarrollos web se entremezclan distintos lenguajes o
metalengajes. Podramos decir que HTML y CSS son sublenguajes de un
supralenguaje: el lenguaje de los desarrollos web. EJERCICIO A
partir del siguiente cdigo:
Portal web - aprenderaprogramar.com
Ir a la pagina principalNovedadesAqu presentamos las novedades
del sitio.Lanzamos el producto X-FASHIONEste producto permite
estirar la piel hasta dejarla como la de un beb.
Mejoramos el producto T-MOTIONHemos lanzado una nueva versin del
producto T-MOTION
Modifica el cdigo HTML anterior para cumplir con estos
requisitos mediante la aplicacin de estilos en lnea: Formas de
aplicar estilos CSS: por defecto, en lnea, sobreescritura.
aprenderaprogramar.com, 2006-2029 a) La etiqueta h1 debe mostrar su
texto en color rojo. b) La etiqueta h3 con el texto relativo a
X-FASHION debe mostrar su texto en color verde. c) La etiqueta h3
con el texto relativo a X-MOTION debe mostrar su texto en color
azul. d) Todos los prrafos deben mostrar su texto en color brown
(marrn).
Paracomprobarsitusrespuestassoncorrectaspuedesconsultarenlosforos
aprenderaprogramar.com. Prxima entrega: CU01010D Acceso al curso
completo en aprenderaprogramar.com -- >Cursos, o en la direccin
siguiente:
http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203Formas
de a aprenderFORMAS Ya hemoscuandonetiquetas parteinicextensin
Volvemosdonde noEn el epg
- Curson: none;">Hun la cabeceruna misma mticamente
bebercdigonales de apCSSinternoexterna o CSSdesarrollo deon este
ejem>os programacisos programaumor informta del documlnea o en
dilos navegadgoCSSenlaplicar estilos o)oenunaS externo).el curso,
cdmplo: in
cinticomento HTML stintas lneadores web aspropias CSS: en la
archivode digo HTML > usando la s segn se Formas de aplicar
estilos CSS: interno y en archivos css. aprenderaprogramar.com,
2006-2029 Dentro de las etiquetas incluiremos una etiqueta de
apertura de declaracin de
estilos,acontinuacincolocaremosladefinicindetantosestiloscomo
deseemosycerraremosladeclaracincon.EnHTML5noesnecesarioespecificartype
=text/css pero de momento seguimos recomendando que se use esta
sintaxis. En nuestro cdigo de ejemplo el cambio de los elementos
del men para que tengan el texto color verde y el icono o smbolo de
vieta de color rojo se hara de esta forma:
Portal web - aprenderaprogramar.com
ul {color:red;}a {color:green; text-decoration: none;}
Portal web aprenderaprogramar.comDidctica y divulgacin de la
programacin
Men
Libros de programacinCursos de programacinHumor informtico
Formas de aplicar estilos CSS: interno y en archivos css.
aprenderaprogramar.com, 2006-2029 Puedes comprobar que hemos usado
las mismas propiedades CSS y los mismos valores que usbamos en
lnea. Visualiza la pgina en tu navegador. El resultado para el men
ser el mismo que cuando aplicamos CSS en lnea:
Noobstantepodrscomprobarquehayotroselementosdelapginawebquetambinseven
afectados, por ejemplo los links presentes en el texto. Esto se
debe a que hay una diferencia importante entre aplicar estilos CSS
en lnea y aplicarlos como CSS interno en la cabecera del documento
HTML. Al aplicar estilos en lnea, tenemos que repetir la aplicacin
de estilos en cada una de las lneas que queramos modificar y en
cada ocasin afectamos a nicamente una lnea. Con la aplicacin de
estilos interna nos basta con declarar una vez el estilo y el tipo
de elemento al que se aplica, y automticamente se aplicar a todos
los elementos de ese tipo existentes dentro de la pgina
web.Estopermitequeenunapginawebdegranextensinnosahorremostenerqueescribir
mltiples veces la definicin de estilos (una en cada lnea), ya que
una sola declaracin inicial nos bastar, lo cual es una ventaja
bastante evidente. Sin embargo ahora surge una cuestin adicional:
es posible que tengamos dos o ms listas de tipo
-
y en algunos casos, por ejemplo mens, queramos aplicar un
estilo, y en otros casos, por ejemplo listas de elementos dentro de
un artculo periodstico, queramos aplicar otro estilo. Tambin es
posible que deseemos que los elementos del men sean links con texto
verde y sin subrayado, pero queramos mantener el resto de links
como texto azul con subrayado. Tal y como hemos hecho la definicin
de
estilosnoconseguimoshaceresto,yaqueestamosmodificandotodaslaslistasytodosloslinks
presentes en el documento. CSS permite resolver satisfactoriamente
esta problemtica para aplicar estilos especficamente all donde
queremos. Veremos cmo prximamente. CSS EXTERNO Aunque el CSS
interno nos permite unificar en una declaracin todos los estilos
para un archivo html, seguimos teniendo el problema de tener que
repetir la definicin de estilos en la cabecera de cada uno de los
archivos html de nuestro desarrollo web. Si el desarrollo tiene
pocos archivos quizs sea menos
problemtico,perocuandoeldesarrollotienecientosomilesdearchivossseconvierteenun
Formas de aplicar estilos CSS: interno y en archivos css.
aprenderaprogramar.com, 2006-2029 verdadero problema, ya que cada
vez que introdujramos cambios habra que hacerlo en los cientos o
miles de archivos de que constara el desarrollo. Para solventar
esta solucin se ide la declaracin externa de CSS, basada en
declarar los estilos CSS en un archivo independiente que puede
servir como referente para dotar de estilos a decenas, cientos o
miles de archivos html, que nicamente debern invocar el nombre de
archivo utilizando una sintaxis especfica. De este modo un cambio
en los estilos habr que hacerlo nicamente en el archivo de estilos
correspondiente, lo cual supone una gran ventaja. Incluso un cambio
completo de los estilos de una pgina web se puede conseguir
simplemente sustituyendo el archivo correspondiente. Vamos a
generar un archivo de estilos independiente. Para ello abre
Notepad++(o el editor de texto que ests usando) y crea un archivo
con el siguiente contenido: /* Comentario en CSS estilos
aprenderaprogramar.com*/ ul {color:red;}a {color:green;
text-decoration: none;} Seguimos usando las mismas propiedades CSS
y los mismos valores que hemos usado en la forma CSS en lnea y en
la forma CSS interna. Los contenidos que se encuentren entre los
smbolos /* . */ sern considerados comentarios y se
puedenusarparaintroducirinformacindelautordelarchivo,versin,etc.ascomoparaescribir
aquellas aclaraciones sobre los estilos que se consideren
necesarias. Un comentario puede comprender una o varias lneas segn
se desee.
EligeGuardarComoyguardaelarchivoconunnombreyextensincss,porejemploestilos.css.
Asegrate que la extensin del archivo sea css. No es vlido si no
tiene esta extensin. En nuestro archivo HTML eliminaremos la
definicin de estilos interna y dejaremos slo la invocacin al
archivo escrita con la siguiente sintaxis:
link es una etiqueta que se usa en HTML para establecer vnculos
entre un documento HTML y otros recursos como una imagen de icono o
una hoja de estilos CSS. En este caso se indica con la propiedad
rel (relacin o relationship) que el documento HTML debe usar los
estilos definidos como texto/css en un archivo con el nombre
indicado. Ten en cuenta que si como ruta de archivo indicas
simplemente el Formas de aplicar estilos CSS: interno y en archivos
css. aprenderaprogramar.com, 2006-2029 nombre del archivo, ste debe
encontrarse en la misma carpeta en que se encuentre el documento
HTML. Si el archivo CSS se encuentra en otra carpeta debers
indicarlo escribiendo una URL completa u bien una URL relativa que
determine la ruta. Nosotros ubicaremos de momento el archivo CSS en
la misma carpeta que el archivo HTML. En el archivo HTML tendremos
lo siguiente:
Portal web - aprenderaprogramar.com
... Ahora procedemos a visualizar el archivo HTML en nuestro
navegador. Si se est cargando la hoja de estilos correctamente
deberemos obtener el mismo resultado que habamos obtenido con la
aplicacin de estilos interna. Prueba a hacer distintos cambios en
el archivo css y visualiza los resultados. QU TIPO DE CSS USAR? En
la siguiente tabla hacemos un resumen de las caractersticas de los
distintos tipos de CSS que hemos visto hasta el momento: DECLARACIN
CSS ARCHIVOS AFECTADOSCSS SE APLICA A En lneaUno, aquel donde se
realiza la declaracinUna lnea de cdigo Interna
Uno,aquelencuyacabeceraserealizala declaracin Todos los elementos
del archivo en los que resulte de aplicacin el estilo ExternaTodos
los archivos que invoquen el archivo css
Todosloselementosdelosarchivos afectadosenqueresultedeaplicacinel
estilo Formas de aplicar estilos CSS: interno y en archivos css.
aprenderaprogramar.com, 2006-2029 Cul de estas formas de aplicar
CSS es mejor? Cul usar? En primer lugar cabe hacer una reflexin
sobre qu forma de aplicar CSS har nuestros desarrollos web ms
fcilmente mantenibles y aptos para ser modificados con poco
esfuerzo. Parece claro que es la declaracin externa la que mejor
independiza los estilos del contenido y la que menor nmero de
modificaciones implicar en general. Por ello es la forma de
trabajar con CSS a la que debemos acostumbrarnos. No obstante,
cuando trabajes con desarrollos web comprobars que tambin son de
uso frecuente la
aplicacindeestilosenlneaointerna.Enalgunoscasosestoesdebidoadesconocimientodela
persona que realiza el desarrollo o a la forma de funcionamiento
del programa con el que se ha creado la pgina web, pero en otros
casos obedece a que se ha querido hacer as. En ocasiones se opta
por hacer modificaciones en lnea porque se buscan efectos puntuales
que slo se quieren aplicar en un punto concreto y en ningn otro. En
ocasiones se opta por hacer definiciones CSS internas porque se
quiere afectar muy puntualmente a un archivo y a ningn otro. Y en
otros casos, se usan los estilos en lnea o internos simplemente por
las prisas o por ser lo ms rpido. A efectos del navegador, una
declaracin en lnea tiene precedencia sobre una declaracin interna,
y a su vez una declaracin interna tiene precedencia sobre una
declaracin externa. Por tanto podramos tener CSS sobreescrito
varias veces: la declaracin externa puede ser sobreescrita por la
interna, y sta a su vez por la en lnea. El navegador aplicar el
orden: Declaracin en lnea >Declaracin interna >Declaracin
externa Podra ocurrir que los estilos que visualicemos en el
navegador estn definidos a trozos de modo que parte de lo que se
visualiza se debe a las declaraciones CSS externas, parte a las
declaraciones CSS
internasyparteadeclaracionesenlnea.Estoengeneralserindeseable,yaquehardifcilde
mantener el desarrollo web, no se sabr con certeza cmo se generan
los estilos y el desarrollo puede terminarconvirtindose en uncaos
difcil demantener. Tambin puede dar lugar a visualizaciones
incorrectas o errneas.
Amododeresumenycomorecomendacin:mantnlosestilosdeformaexterna,loms
ordenadamente posible y sin utilizar redefiniciones internas ni en
lnea. Usa este tipo de definiciones (interna o en lnea)
exclusivamente cuando resulte necesario y comenta adecuadamente el
cdigo. Trabajar ordenadamente ser algo que a la larga te resultar
ventajoso, tanto a ti mismo como a otras personas que tengan que
trabajar en desarrollos donde t hayas participado. EJERCICIO 1
ModificaelcdigoHTMLmostradoacontinuacinparacumplirconestosrequisitosmediantela
aplicacin de estilos internos: a) Todas las etiquetas h1 deben
mostrar su texto en color rojo. b) Todas las etiquetas h3 deben
mostrar su texto en color verde. c) Todos los prrafos deben mostrar
su texto en color brown (marrn). Formas de aplicar estilos CSS:
interno y en archivos css. aprenderaprogramar.com, 2006-2029
Portal web - aprenderaprogramar.com
Ir a la pagina principalNovedadesAqu presentamos las novedades
del sitio.Lanzamos el producto X-FASHIONEste producto permite
estirar la piel hasta dejarla como la de un beb.
Mejoramos el producto T-MOTIONHemos lanzado una nueva versin del
producto T-MOTION
Paracomprobarsitusrespuestassoncorrectaspuedesconsultarenlosforos
aprenderaprogramar.com. EJERCICIO 2 Modifica el cdigo HTML del
ejercicio anterior para cumplir con estos requisitos mediante la
aplicacin de CSS externo definido en un archivo independiente,
donde debes incluir al menos un comentario: a) Todas las etiquetas
h1 deben mostrar su texto en color azul. b) Todas las etiquetas h3
deben mostrar su texto en color orange (naranja). c) Todos los
prrafos deben mostrar su texto en color brown (marrn).
Paracomprobarsitusrespuestassoncorrectaspuedesconsultarenlosforos
aprenderaprogramar.com. Prxima entrega: CU01011D Acceso al curso
completo en aprenderaprogramar.com -- >Cursos, o en la direccin
siguiente:
http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203Selectores
C aprenderSELECTOR Hemos eslos prraflas etiqueparte de uexisten
ot
Recordemul {color:rdecir, a toa {color:gdocumentDe la mismpero
supo SELECTOR Trataremoimplica doa)Enesqlas b)Enc Las propiecon
puntoCSS. Id. Aplicarraprogramar.coRES CSS studiado cmfos, todas
lasetas de un tuna pgina wtros selectormos primero red;}suponaodas
las etiqureen; text-dto HTML, es ma forma seoniendo que R POR ID os
ahora deos cosas: n el documesos estilos inueremos apa sintaxis
serlo a un prrn la declaracdigo realizaedades se po y coma.r CSSa
una partom, 2006-2029 mo aplicar ess listas, todoipo tengan uweb.
Para eles, entre loslos selectorea aplicar coluetas
-
ecoration: ndecir, a todae pueden usase apliquen e aplicar
estnto HTML, hncluyendo unlicar estilos. ra osaaplicars, el nico
ro, por ejempo queremos una etiquetave que ya cselectores
depiedad:valor documentodo a todos lov {}, span {}ocumento H que
queremmento de cdde un conteiramos apli
raesefragrequisito es plo a todos que todas ta o a una onocemos
e clase.r;}: o HTML, es os links del , p {}, etc. TML. Esto mos
aplicar digo donde enedor div car estilos gmentode separarlas
Selectores CSS. Id. Aplicar CSSa una parte de una pgina web.
aprenderaprogramar.com, 2006-2029 Con un ejemplo lo veremos ms
claro. Partimos del cdigo base HTML que estamos usando para el
curso, en el cual tenemos un men. Vamos a elegir un nombre para
identificar ese men. Podramos elegir como nombre (usaremos nombres
sin tildes). Ahora mismo solo tenemos un men,
peroenelfuturoesposiblequeexistanotros,poresovamosapreferirelegircomonombre
.EneldocumentoHTMLvamosaidentificarelmenconelatributoidaplicadoal
contenedor div dentro del cual est el men. El cdigo es este:
Portal web - aprenderaprogramar.com
Portal web aprenderaprogramar.comDidctica y divulgacin de la
programacin
Men
- Libros de programacin
- Cursos de programacin
Humor informtico
Hemos incluido en el contenedor div que delimita nuestro men.
Selectores CSS. Id. Aplicar CSSa una parte de una pgina web.
aprenderaprogramar.com, 2006-2029 En el archivo css externo, en
nuestro caso denominado estilos.css, vamos a definir que ese
fragmento de pgina web (el men) tenga el texto verde y fondo gris.
Para ello escribiremos lo siguiente: /* Curso CSS estilos
aprenderaprogramar.com*/ #menu1 {color:green; background-color:
DarkGray; } Si lo preferimos podemos escribir la declaracin en una
sola lnea, obteniendo el mismo resultado. Es
decir,podemosescribir#menu1{color:green;background-color:DarkGray;}.Estoresultams
compactoyahorraespacio,perotambinpuedesermenosclaroalahoradeleer.Algunos
programadores o diseadores prefieren el estilo compacto y otros
diferenciando lneas. El resultado obtenido ser similar a este:
Analicemos ahora el resultado obtenido: se ha aplicado el fondo
gris a la caja que define el contenedor div. Se ha aplicado color
verde al texto y a las vietas de la lista existente en el men. Sin
embargo, los links del men mantienen su color azul y subrayado, a
pesar de que hemos indicado que el color verde debera de aplicarse
a todo el contenedor. Por qu ocurre esto? CSS no aplica la misma
importancia a todas las reglas o estilos que se especifican. En
este caso la regla o estilo que hemos definido no supera
enlaescaladeimportanciaCSSalareglapordefectosegnlacualloslinkssondecolorazuly
subrayado. Para resolver este conflicto hemos de especificar que
queremos que los elementos (links) dentro del bloque de cdigo con
identificador menu1 se muestren aplicando la regla de estilo
definida para el men. Modifica el archivo css escribiendo el
siguiente cdigo y visualiza la pgina web: /* Curso CSS estilos
aprenderaprogramar.com*/ #menu1, #menu1 a{color:green;
background-color: DarkGray; } Selectores CSS. Id. Aplicar CSSa una
parte de una pgina web. aprenderaprogramar.com, 2006-2029
Mediantelasintaxis#nombreIdentificativoElegidoelementoAfectadoPorElEstilo{}
estamos
especificandoexplcitamentequedeseamosaplicaresaregladeestiloalelementoindicado(en
nuestro caso los links, ) dentro de un bloque de cdigo definido por
un identificador. De esta forma el navegador le concede preferencia
o mayor importancia al estilo definido que al estilo por defecto de
los links. El resultado en este caso es que se muestra el texto de
los links en color verde (pero se sigue manteniendo el subrayado
porque no hemos sobreescrito esta propiedad de los links): Vamos a
especificar ahora que los links del men no aparezcan subrayados.
Para ello modificaremos nuestro archivo css dejndolo con esta lnea:
#menu1, #menu1 a {color:green; background-color:DarkGray;
text-decoration:none;}Ahora s tenemos el men en color verde y sin
subrayado, ya que hemos sobreescrito la propiedad text-decoration
que estaba dando lugar a la aparicin del subrayado: Es interesante
de lo visto hasta ahora razonar cmo CSS trabaja con unos rdenes de
precedencia o jerarqua de reglas CSS. No te preocupes de conocerlos
con exactitud, ya que a lo largo del curso y a medida que vayas
cogiendo experiencia irs aprendiendo ms al respecto. Tambin ten en
cuenta que los rdenes de precedencia pueden cambiar segn los
navegadores o segn las versiones CSS. Por tanto ms que saber con
exactitud los rdenes de precedencia nos interesa el ser capaces de
interpretar por qu ocurren las cosas y la forma de trabajar de CSS
y su filosofa. Selectores CSS. Id. Aplicar CSSa una parte de una
pgina web. aprenderaprogramar.com, 2006-2029 APLICAR ESTILOS
DIFERENCIADOS DENTRO DE UN SELECTOR ID El cdigo que hemos visto
anteriormente se puede escribir tambin de esta manera: /* Curso CSS
estilos aprenderaprogramar.com*/ #menu1 {color:green;
background-color: DarkGray; text-decoration:none; } #menu1 a
{color:green; background-color: DarkGray; text-decoration:none; }
El efecto con este cdigo sera el mismo que con el anterior.
Realmente en este caso no tendra inters
escribirlaespecificacinparamenu1{}yparamenu1a{}porseparadoyaqueresultams
compacto escribirlo en una lnea. Sin embargo s tiene inters en el
caso de que deseemos aplicar un estilo general al men y
sobreescribir o especificar estilos diferenciados para los
elementos dentro del men. En nuestro caso vamos a hacer lo
siguiente: estableceremos como color general para el men rojo y
comofondogris.Comofondoparaloslinks(elementosa)dentrodelmennoespecificaremos
ninguno,elcolorloestableceremosenverdeyeliminaremoselsubrayado.Escribeestecdigoy
visualiza el resultado: /* Curso CSS estilos
aprenderaprogramar.com*/ #menu1 {color:red; background-color:
DarkGray; text-decoration:underline; } #menu1 a {color:green;
text-decoration:none; } En este caso tenemos como color de los
elementos del men rojo, pero los links se muestran en verde porque
para los elementos a el color ha sido sobreescrito y el navegador
elige el estilo ms interno. Selectores CSS. Id. Aplicar CSSa una
parte de una pgina web. aprenderaprogramar.com, 2006-2029 Prueba a
establecer distintas propiedades para #menu1 y para #menu1 a.
Posiblemente te encuentres que en algunos casos los resultados no
son tal y como esperas. Ten en cuenta que el navegador tiene que
resolver sobre el orden de importancia de las reglas, las
sobreescrituras, estilos por defecto, etc. lo
cualhacequeelprocesoadquieraciertacomplejidad.Enocasionesseproducenconflictosenla
definicin de estilos que el navegador tratar de resolver, aunque en
algunos casos quizs no pueda resolver el problema y simplemente
ignore los estilos que entran en conflicto. Iremos hablando sobre
estas situaciones a medida que vayamos viendo ejemplos. CUNDO
UTILIZAR SELECTORES POR ID? El atributo id nos permite darle un
nombre especfico a una parte de un documento HTML definida por
unaetiquetaHTML,diferencindoladelasdems.Engeneralesteatributoseutilizaparaponer
nombres a distintas partes de un documento HTML, por ejemplo menu,
articulo, formulario, footer, etc. de modo que cada parte de la web
est identificada con un nombre nico. No es recomendable aplicar el
mismo nombre id a distintas partes de una web, ni siquiera aunque
sean del mismo tipo. Un id debe ser nico, por lo tanto ese nombre
debe aparecer solo una vez en el documento HTML. Si queremos
aplicar un mismo estilo en distintas partes de la web utilizaremos
el atributo class, que explicaremos ms adelante. No es obligatorio
identificar todas las partes de una web con ids. Puede haber partes
del documento HTML con identificador y otras partes que carezcan de
l. Incluso la totalidad de la web puede carecer de identificadores
id. El uso del smbolo #combinado con el atributo id permite aplicar
CSS a partes muy concretas de una pgina web y se usa sobre todo
cuando se quieren diferenciar partes estructurales del documento
HTML como el men o el footer, y en general aplicado a elementos que
actan como contenedores. Aunque se podra aplicar a etiquetas ms
especficas como esto no es habitual ya que supondra estarle
poniendo un nombre nico a un prrafo y un prrafo en general no tiene
tanta importancia dentro de una web como para ponerle un nombre
especfico. No obstante, ten en cuenta que existe la posibilidad de
usar este atributo sobre cualquier etiqueta HTML. EJERCICIO Analiza
el siguiente cdigo HTML. En l encontrars tres etiquetas div. Haz lo
siguiente:
a)Estableceatributosidparacadaunadeellasconvaloresparalaprimera,
para la segunda y para la tercera. b) Usando CSS establece como
color de texto el rojo (red) para los elementos h1 que se
encuentren dentro del elemento con id . Selectores CSS. Id. Aplicar
CSSa una parte de una pgina web. aprenderaprogramar.com, 2006-2029
c) Usando CSS establece como color de texto el verde para los
elementos h3 que se encuentren dentro de los elementos con id y .
d) Usando CSS establece como color de fondo para el elemento con id
el amarillo (yellow).
Portal web - aprenderaprogramar.com
NovedadesAqu presentamos las novedades del sitio.
Lanzamos el producto X-FASHIONEste producto permite estirar la
piel hasta dejarla como la de un beb.
Mejoramos el producto T-MOTIONHemos lanzado una nueva versin del
producto T-MOTION
Paracomprobarsitusrespuestassoncorrectaspuedesconsultarenlosforos
aprenderaprogramar.com. Prxima entrega: CU01012D Acceso al curso
completo en aprenderaprogramar.com -- >Cursos, o en la direccin
siguiente:
http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203Selectores
C aprenderSELECTOR Ya sabemdocumentdefinicinpalabra cdeseemos
SELECTOR Trataremoproyecto a)EnesqlaesPous b)Enc Mientras CSS
que eLas propierequisito CSS: class. Aplicraprogramar.coRES CSS mos
cmo aptoHTMLcon de estilos elave que ya s mediante eR POR
CLASSosahoradeweb, all don el documesos estilos inueremos
apasintaxissestilossloaodemos comsando el trmn la declaracdigo
realizaque para el empleamos eedades se pues separarlacar CSSa una
pom, 2006-2029 plicar estilosonunnomen distintos lconocemos el
atributo clS edefiniresnde nosotronto HTML, hncluyendo unlicar
estilos. eratributo id, praesefragara los class ros queramo parte
del namisma etiqueta o rlos donde pginao mos aplicar digo donde
enedor div mosaplicar >. pero ahora gmentode el smbolo os, el
nico Selectores CSS: class. Aplicar CSSa una parte de una pgina
web. aprenderaprogramar.com, 2006-2029 Con un ejemplo lo veremos ms
claro. Partimos del cdigo base HTML que estamos usando para el
curso, en el cual tenemos un men, tres prrafos, dos imgenes y un
formulario. Vamos a definir un estilo CSS consistente en poner
fondo naranja, texto en negrita y el texto un 100 %del tamao normal
con el fin de aplicarlo en dos puntos de nuestra pgina web: al
primer prrafo y al texto Si quieres
contactardelformulario.Aesteestilovamosallamarlodestacadoylodefinimosennuestro
archivo css de esta forma: /* Curso CSS estilos
aprenderaprogramar.com*/.destacado {background-color: orange;
font-weight:bold; font-size:100%; } Ahora tenemos que aplicar
estilos CSS en las partes del documento HTML que nos interesan, el
primer prrrafo: Aprender a programar es un objetivo que se plantea
mucha gente y que no todos alcanzan. Hemos indicado de esta forma
que la caja contenedora definida por las etiquetas del primer
prrafo ver su estilo afectado por las reglas CSS que hemos
definido. Pero en el caso del formulario tenemos un problema. El
cdigo inicial es este:
Si quieres contactar con nosotros envanos este formulario
relleno:
Nombre:
Apellidos:
Direccin:
Correo electrnico:
Mensaje:
Y el texto al que queremos aplicar el estilo destacado es Si
quieres contactar con nosotros. Cul es el problema? Que dicho texto
no tiene una caja especfica, sino que es un texto suelto dentro de
otra caja, en este caso la caja inmediata que lo enmarca es la caja
del formulario. Podemos verlo en este esquema: Selectores CSS:
class. Aplicar CSSa una parte de una pgina web.
aprenderaprogramar.com, 2006-2029
Siqueremosaplicarestilostenemosquehacerlosobreetiquetasdelimitadoras(unacaja)yahora
mismo solo disponemos de . Si escribimos el resultado sera este:
Obviamente el estilo se aplica a toda la caja del formulario, y no
slo al texto que nosotros deseamos. Qu solucin podemos darle? Hemos
de crear una caja especfica para el texto ya que es slo al texto a
quien queremos aplicarle el estilo destacado. Esto podemos hacerlo
de varias maneras: con un prrafo,conuncontenedoroconundivisor.Las
diferencias entre las opciones son que el prrafo es un elemento de
tipo block que lleva asociados un estilo predeterminado por el
navegador. div es un elemento que crea una divisin o caja y es de
tipo block, tambin ocupar la pgina web a todo lo ancho. div en
principio no lleva estilos predeterminados asociados. Por ltimo
span es un elemento que crea una divisin inline, por tanto no
abarca todo el ancho de la pgina sino el espacio ocupado por
aquello que contiene (en este caso el espacio ocupado por el texto)
y tampoco tiene estilos predeterminados asociados. Fjate en la
diferencia entre aplicar un estilo a un elemento block o a un
elemento inline. Selectores CSS: class. Aplicar CSSa una parte de
una pgina web. aprenderaprogramar.com, 2006-2029 Elegiremos aquel
elemento divisor que nos parezca ms adecuado en funcin de los
criterios de diseo. En nuestro caso vamos a optar por un divisor El
cdigo del formulario en el documento HTML nos queda as:
Siquierescontactarconnosotrosenvanosesteformulariorelleno:
Nombre:
Apellidos:
Direccin:
Correo electrnico:
Mensaje:
Ejecuta el cdigo. La visualizacin obtenida debe ser la tipo
block que hemos indicado anteriormente. EJERCICIO Analiza el
siguiente cdigo HTML. En l encontrars tres etiquetas div. Haz lo
siguiente:
a)Estableceatributosclassparacadaunadeellasconvaloresparalaprimera,y
para la segunda y la tercera. b) Usando CSS establece como color de
texto el rojo (red) y tamao de fuente el 150%respecto de lo normal
para los elementos cuyo valor class sea . c) Usando CSS establece
como color de texto el verde para los elementos y tamao de fuente
el 110% respecto de lo normal para los elementos cuyo valor class
sea . d) Usando CSS establece como color de fondo para los prrafos
dentro de elementos cuyo atributo class sea el amarillo (yellow).
Selectores CSS: class. Aplicar CSSa una parte de una pgina web.
aprenderaprogramar.com, 2006-2029
Portal web - aprenderaprogramar.com
NovedadesAqu presentamos las novedades del sitio.
Lanzamos el producto X-FASHIONEste producto permite estirar la
piel hasta dejarla como la de un beb.
Mejoramos el producto T-MOTIONHemos lanzado una nueva versin del
producto T-MOTION
Paracomprobarsitusrespuestassoncorrectaspuedesconsultarenlosforos
aprenderaprogramar.com. Prxima entrega: CU01013D Acceso al curso
completo en aprenderaprogramar.com -- >Cursos, o en la direccin
siguiente:
http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203Herencia
CS aprenderHERENCIA Hemos vidocumentweb usansuperiore
DEFINIR C Partimos una clase Podemos el cdigo Ahora el ecomo
div,Esto nos aplicram Ahora si dundivisocomproba DEFINIR S Podemos
ejemplo, SS: concepto. Praprogramar.coA EN CSS sto cmo apto HTML
condo class. Unes o clases paCLASES QUE del cdigo qCSS cuyo no/*
Curso .destacaddefinir que que define l/* Cup.desestilo destac,
span, a, etcpermitira usmos la clase. P/* Curp.destdiv.dedefinimos
unrdivconeando estas dSUBESTILOS definirquepodemos quPalabra clave
inom, 2006-2029 plicar estilosn un nombrna caractersadre que se
vSOLO SEAN ue hemos utombre era dCSS estilos apdo {backgrouuna
clase soa clase destaurso CSS estilostacado{backgcado slo suc. no
tendra sar el mismoPor ejemplo:rso CSS estilostacado {backgestacado
{backn prrafo conelatributociferencias. DENTRO DEedeterminaduerer
que lonherit.s CSS a todare nico (id),stica interesavan
transmitAPLICABLEStiliado en la destacado yprenderaprognd-color:
oranolo sea aplicaacado y escrios aprenderapground-color:rte efecto
cuefecto. o nombre de: s aprenderaprground-color: kground-colorn el
atributo class=des UNA CLASEdascajasdeos prrafos as las etique, o
bien en dante de CSS iendo hacia S A ETIQUETAanterior enty cuyo
cdigoramar.com*/nge; font-weigable a una etibimos:programar.com:
orange; fontuando va ene clase y obtrogramar.comorange; font-r:
blue; font-wclass =desttacadosu entrodeotrde clase deetas HTML
ddistintas pares cmo nolas subclases AS ESPECFICrega del curso era:
ght:bold; fonttiqueta espem*/-weight:bold; una etiquettener
distintm*/-weight:bold;weight:bold; fotacado su fofondoser
raprincipal estacado tee un tipo, ortes de un dos permite ds o
clases hijCAS so. En concret-size:100%; } ecfica. Por ej
font-size:100ta p, en camtos efectos
sfont-size:100ont-size:100%ondo ser naazul.Pruebtenganestiengan
fondoo bien a unadocumento oefinir estilosas.eto habamojemplo si
mo0%; } bio en otrassegn en qu0%; }%; } aranja. En
cabaaejecutalosdiferenco naranja, pe parte del o proyecto s en
clases os definido odificamos s etiquetas etiqueta ambio si es
arcdigo iados.Por ero que si Herencia CSS: concepto. Palabra clave
inherit. aprenderaprogramar.com, 2006-2029 dentro del prrafo hay un
link (etiquetas ) dicho link tenga un estilo especfico, por ejemplo
que tenga fondo amarillo y un tamao un 20%superior a lo normal.
Para ello escribiramos: /* Curso CSS estilos
aprenderaprogramar.com*/p.destacado{ background-color:
orange;font-weight:bold;font-size:100%; }p.destacado a
{background-color: yellow; font-size:120%;} Con la declaracin
p.destacado a {}estamos indicando que los links dentro de prrafos
con estilo destacado estarn en