css manual ivn

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

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:

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:

Inicio

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:

Libros de programacin

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:

Inicio

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:

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:

ul {color:red;}a {color:green; text-decoration: none;}

Portal web aprenderaprogramar.comDidctica y divulgacin de la programacin

Inicio

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:


... 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




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.comDidctica y divulgacin de la programacin

Men

Inicio

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).

NovedadesAqu presentamos las novedades del sitio.

Lanzamos el producto X-FASHIONEste producto permite estirar la piel hasta dejarla como la de un beb.

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

NovedadesAqu presentamos las novedades del sitio.

Lanzamos el producto X-FASHIONEste producto permite estirar la piel hasta dejarla como la de un beb.

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

css manual ivn

Documents