{"id":20,"date":"2006-12-20T07:39:30","date_gmt":"2006-12-20T06:39:30","guid":{"rendered":"http:\/\/www.loretahur.es\/AprendiendoCSS\/%c2%bfcomo-aplicamos-el-css\/"},"modified":"2007-01-02T00:40:37","modified_gmt":"2007-01-01T23:40:37","slug":"como-aplicamos-el-css","status":"publish","type":"post","link":"http:\/\/www.loretahur.net\/AprendiendoCSS\/como-aplicamos-el-css\/","title":{"rendered":"\u00bfC\u00f3mo aplicamos el CSS?"},"content":{"rendered":"

Existen tres formas de aplicar los estilos a nuestro c\u00f3digo HTML:<\/p>\n

    \n
  1. Directamente sobre un elemento:<\/strong> podemos aplicar el estilo a un bloque concreto de HTML, utilizando el atributo style. Es decir, dentro de una etiqueta definir c\u00f3mo ser\u00e1 su aspecto. Obviamente no es la mejor manera de proceder porque tendr\u00edamos que definir bloque por bloque.\n

    Ejemplo<\/em>: <p style=\"font-size: 12pt; color: #000000\"><\/code>. Aqu\u00ed estamos definiendo sobre este p\u00e1rrafo en concreto que la letra sea de tama\u00f1o 12 y de color negro. Esto no se aplicar\u00e1 sobre ning\u00fan p\u00e1rrafo m\u00e1s.<\/li>\n

  2. En el propio documento:<\/strong> se pueden declarar los estilos en la cabecera del documento para poder utilizarlo en cualquier parte del HTML. Para ello se colocan entre las etiquetas <style>..atributos..<\/style><\/code><\/li>\n

    Ejemplo<\/em>:
    \n
    \n<head>
    \n...
    \n<style type=\"text\/css\">
    \nh1
    \n{
    \n  border-width: 1;
    \n  text-align: center
    \n}
    \n<\/style>
    \n<\/head>
    \n<\/code><\/p>\n

    Aqu\u00ed hemos definido todas las cabeceras que se encuentre entre la etiqueta <h1><\/code>. Como vemos, la etiqueta <style><\/code> tiene un atributo denominado type<\/strong> donde se define el tipo de la hoja de estilo. Puede tomar los valores: \u00abtext\/css\u00bb y \u00abtext\/javascript\u00bb.<\/p>\n

  3. En un documento externo:<\/strong> creando una hoja de estilos ubicada en un fichero externo con extensi\u00f3n .css. En mi opini\u00f3n es la forma m\u00e1s elegante puesto que hace que nuestra p\u00e1gina HTML quede m\u00e1s simple al no incluir todas las l\u00edneas de estilo (s\u00f3lo ser\u00eda necesaria la declaraci\u00f3n del lugar en el que se encuentra el .css). Adem\u00e1s, con esta forma queda a\u00fan m\u00e1s clara la separaci\u00f3n entre contenido y presentaci\u00f3n.\n

    Para hacer referencia a una hoja de estilos externa desde un documento HTML se pueden utilizar tambi\u00e9n dos m\u00e9todos: <\/p>\n

      \n
    • El elemento <link><\/code><\/strong>. Una vez hecho link, se pueden utilizar los estilos de la misma manera que si estuviesen definidos en el propio documento.<\/li>\n

      Ejemplo<\/em>:
      \n<head>
      \n...
      \n<link href=\"hoja_de_estilos.css\" rel=\"stylesheet\" type=\"text\/css\">
      \n<\/head><\/code><\/p>\n

    • El elemento @import<\/strong>. Por ejemplo:\n

      @import \u00abestilos.css\u00bb;
      \n@import url(\u00ab\/estilos\/estilos.css\u00bb);<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

      Existen tres formas de aplicar los estilos a nuestro c\u00f3digo HTML: Directamente sobre un elemento: podemos aplicar el estilo a un bloque concreto de HTML, utilizando el atributo style. Es decir, dentro de una etiqueta definir c\u00f3mo ser\u00e1 su aspecto. Obviamente no es la mejor manera de proceder porque tendr\u00edamos que definir bloque por bloque. […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"_links":{"self":[{"href":"http:\/\/www.loretahur.net\/AprendiendoCSS\/wp-json\/wp\/v2\/posts\/20"}],"collection":[{"href":"http:\/\/www.loretahur.net\/AprendiendoCSS\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.loretahur.net\/AprendiendoCSS\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.loretahur.net\/AprendiendoCSS\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"http:\/\/www.loretahur.net\/AprendiendoCSS\/wp-json\/wp\/v2\/comments?post=20"}],"version-history":[{"count":0,"href":"http:\/\/www.loretahur.net\/AprendiendoCSS\/wp-json\/wp\/v2\/posts\/20\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.loretahur.net\/AprendiendoCSS\/wp-json\/wp\/v2\/media?parent=20"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.loretahur.net\/AprendiendoCSS\/wp-json\/wp\/v2\/categories?post=20"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.loretahur.net\/AprendiendoCSS\/wp-json\/wp\/v2\/tags?post=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}