Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /furanet/sites/piloto.foc.es/web/htdocs/wp-content/plugins/gravityforms/common.php on line 1121

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /furanet/sites/piloto.foc.es/web/htdocs/wp-content/plugins/gravityforms/common.php on line 1158

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /furanet/sites/piloto.foc.es/web/htdocs/wp-content/plugins/gravityforms/common.php on line 1162

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /furanet/sites/piloto.foc.es/web/htdocs/wp-content/plugins/gravityforms/common.php on line 1184

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /furanet/sites/piloto.foc.es/web/htdocs/wp-content/plugins/gravityforms/common.php on line 2853

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /furanet/sites/piloto.foc.es/web/htdocs/wp-content/plugins/gravityforms/common.php on line 2860

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /furanet/sites/piloto.foc.es/web/htdocs/wp-content/plugins/gravityforms/common.php on line 2873
{"id":3822,"date":"2017-08-29T08:52:53","date_gmt":"2017-08-29T06:52:53","guid":{"rendered":"http:\/\/www.foc.es\/?p=3822"},"modified":"2019-11-15T09:10:13","modified_gmt":"2019-11-15T08:10:13","slug":"tipos-de-hojas-de-estilos-que-podemos-aplicar-en-nuestra-pagina-web","status":"publish","type":"post","link":"http:\/\/piloto.foc.es\/2017\/08\/29\/3822-tipos-de-hojas-de-estilos-que-podemos-aplicar-en-nuestra-pagina-web.html","title":{"rendered":"Tipos de hojas de estilos que podemos aplicar en nuestra p\u00e1gina web."},"content":{"rendered":"

Las hojas de estilos CSS<\/strong> en ingl\u00e9s Cascading Style Sheets (en espa\u00f1ol Hojas de Estilo en Cascada<\/em>), permiten el control total sobre la presentaci\u00f3n de las p\u00e1ginas web.<\/p>\n

$\"css\"$ <\/p>\n

Con las \u00a0hojas de estilos CSS, puede colocar y definir con precisi\u00f3n la apariencia de los elementos de una p\u00e1gina web.<\/p>\n

Una hoja de estilos CSS puede ser:<\/p>\n

\n
Externa<\/strong><\/li>\n
Interna<\/strong><\/li>\n
En l\u00ednea<\/strong><\/li>\n<\/ul>\n
El orden de prioridad de las hojas de estilos es la siguiente:<\/p>\n
\n
La hoja de estilos en l\u00ednea frente a la externa e interna<\/strong><\/li>\n
La hojas de estilos interna frente a la externa<\/strong><\/li>\n<\/ol>\n
Adem\u00e1s debemos tener presente que una p\u00e1gina web puede usar uno o varios de estos tipos de CSS a la vez.<\/p>\n
Para que sirven los distintos tipos de hojas de estilos.<\/p>\n
\n
Las CSS externas<\/strong> sirven para aplicar de forma coherente los mismos estilos a un proyecto web. De esta forma una modificaci\u00f3n en un estilo se aplica a todas las web de un proyecto, de forma autom\u00e1tica.<\/li>\n
Las CSS internas<\/strong> o tambi\u00e9n conocidas como incrustadas, sirven para aplicar estilos a una sola web y tambi\u00e9n para modificar los estilos de heredados de una CSS externa. Las CSS internas se incluyen entre las etiquetas <head> de las p\u00e1ginas web.<\/li>\n
Las CSS en l\u00ednea<\/strong> sirven para aplicar las propiedades de las hojas de estilos en cascada a elementos individuales de una p\u00e1gina sin tener que reutilizar el estilo. Los estilos en l\u00ednea se definen dentro de las etiquetas iniciales de los elementos HTML de p\u00e1ginas web.<\/li>\n<\/ul>\n
Por ejemplo:<\/p>\n
<div id=\u00bbreloj\u00bb style=\u00bbfont-family: \u2018DS-Digital\u2019; width: 450px; background-color: black;font-size:100px;color: green ; text-align: center \u00ab><\/div><\/em><\/strong><\/p>\n
En el art\u00edculo de la semana pasada, usamos Javascript para aplicar estilos al reloj digital propuesto, mediante estilos en l\u00ednea. Estos mismos estilos los podemos aplicar mediante:<\/p>\n
\n
CSS interna, de la siguiente manera:<\/strong><\/li>\n<\/ul>\n
\n
<script type=\u00bbtext\/javascript\u00bb><\/li>\n
function startTime(){<\/li>\n
today=new Date();<\/li>\n
h=today.getHours();<\/li>\n
m=today.getMinutes();<\/li>\n
s=today.getSeconds();<\/li>\n
m=checkTime(m);<\/li>\n
s=checkTime(s);<\/li>\n
document.getElementById(‘reloj’).innerHTML=h+\u00bb:\u00bb+m+\u00bb:\u00bb+s;<\/li>\n
t=setTimeout(‘startTime()’,500);}<\/li>\n
function checkTime(i)<\/li>\n
{if (i<10) {i=\u00bb0″ + i;}return i;}<\/li>\n
window.onload=function(){startTime();}<\/li>\n
<\/script><\/li>\n
<div id=\u00bbreloj\u00bb ><\/div><\/li>\n
<head><\/strong><\/li>\n
<style type=\u00bbtext\/css\u00bb><\/strong><\/li>\n
#reloj { font-family: ‘DS-Digital’;<\/strong><\/li>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 width: 450px; <\/strong><\/li>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 background-color: black;<\/strong><\/li>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 font-size:100px;<\/strong><\/li>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 color: green ; <\/strong><\/li>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/strong>text-align: center;<\/strong><\/li>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }<\/strong><\/li>\n
\u00a0\u00a0\u00a0\u00a0 <\/style><\/strong><\/li>\n
<\/head><\/strong><\/li>\n<\/ol>\n
\n
CSS externa, de la siguiente manera:<\/strong><\/li>\n<\/ul>\n
Contenido fichero externo con los estilos CSS. Lo llamaremos estilos_reloj.css.<\/p>\n
\n
#reloj {<\/li>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 font-family: ‘DS-Digital’;<\/li>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 width: 450px;<\/li>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 background-color: black;<\/li>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 font-size:100px;<\/li>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 color: green ;<\/li>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 text-align: center;<\/li>\n
}<\/li>\n<\/ol>\n
Contenido fichero con el c\u00f3digo principal:<\/p>\n
\n
<script type=\u00bbtext\/javascript\u00bb><\/li>\n
function startTime(){<\/li>\n
today=new Date();<\/li>\n
h=today.getHours();<\/li>\n
m=today.getMinutes();<\/li>\n
s=today.getSeconds();<\/li>\n
m=checkTime(m);<\/li>\n
s=checkTime(s);<\/li>\n
document.getElementById(‘reloj’).innerHTML=h+\u00bb:\u00bb+m+\u00bb:\u00bb+s;<\/li>\n
t=setTimeout(‘startTime()’,500);}<\/li>\n
function checkTime(i)<\/li>\n
{if (i<10) {i=\u00bb0″ + i;}return i;}<\/li>\n
window.onload=function(){startTime();}<\/li>\n
<\/script><\/li>\n
<div id=\u00bbreloj\u00bb ><\/div><\/li>\n
<head><\/strong><\/li>\n
<meta http-equiv=\u00bbContent-Type\u00bb content=\u00bbtext\/html; charset=iso-8859-1″ \/><\/strong><\/li>\n
<title>Ejemplo de estilos CSS en un archivo externo<\/title><\/strong><\/li>\n
<link rel=\u00bbstylesheet\u00bb type=\u00bbtext\/css\u00bb href=\u00bbestilos_reloj.css\u00bb media=\u00bbscreen\u00bb \/><\/strong><\/li>\n
<\/head><\/strong><\/li>\n<\/ol>\n
Animo a lector a desarrollar sus estilos para este reloj digital y publicar el c\u00f3digo. Es un ejercicio muy gratificante.<\/p>\n
Todos nuestros alumnos\u00a0 que han cursado el certificado de profesionalidad IFCD0210-Desarrollo de Aplicaciones con Tecnolog\u00edas Web<\/a>, y el IFCD0110 Confecci\u00f3n y publicaci\u00f3n de p\u00e1ginas web, conocen bien todos estos aspectos de las CSS y saben como aplicarlas seg\u00fan los requerimientos de la web que est\u00e9n programando.<\/p>\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Las hojas de estilos CSS en ingl\u00e9s Cascading Style Sheets (en espa\u00f1ol Hojas de Estilo en Cascada), permiten el control total sobre la presentaci\u00f3n de las p\u00e1ginas web. Con las \u00a0hojas de estilos CSS, puede colocar y definir con precisi\u00f3n la apariencia de los elementos de una p\u00e1gina web. Una hoja de estilos CSS puede ser: Externa Interna En l\u00ednea El orden de prioridad de las hojas de estilos es la siguiente: La hoja de estilos en l\u00ednea frente a la externa e interna La hojas de estilos interna frente a la externa Adem\u00e1s debemos tener presente que una p\u00e1gina web puede usar uno o varios de estos tipos de CSS a la vez. Para que sirven los distintos tipos de hojas de estilos. Las CSS externas sirven para aplicar de forma coherente los mismos estilos a un proyecto web. De esta forma una modificaci\u00f3n en un estilo se aplica a todas las web de un proyecto, de forma autom\u00e1tica. Las CSS internas o tambi\u00e9n conocidas como incrustadas, sirven para aplicar estilos a una sola web y tambi\u00e9n para modificar los estilos de heredados de una CSS externa. Las CSS internas se incluyen entre las etiquetas <head> de las p\u00e1ginas […]<\/p>\n","protected":false},"author":3,"featured_media":3821,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":""},"categories":[18,594,1],"tags":[725,535,703,552,528,706,753,489,550,530,566,133,236,157,62,724,546,65,722,726,78],"jetpack_featured_media_url":"http:\/\/piloto.foc.es\/wp-content\/uploads\/2017\/08\/CSS-01.png","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"jetpack_shortlink":"https:\/\/wp.me\/p6jO3Y-ZE","amp_validity":null,"amp_enabled":true,"_links":{"self":[{"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/posts\/3822"}],"collection":[{"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/comments?post=3822"}],"version-history":[{"count":4,"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/posts\/3822\/revisions"}],"predecessor-version":[{"id":3828,"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/posts\/3822\/revisions\/3828"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/media\/3821"}],"wp:attachment":[{"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/media?parent=3822"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/categories?post=3822"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/tags?post=3822"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}