Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Estilos en Línea en HTML - Codecademy

    Cargado por

    A Liz Marjorie T. Tineo
    10 vistas4 páginas
    Estilos en Línea en HTML _ Codecademy

    Título original

    Estilos en Línea en HTML _ Codecademy

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    Estilos en Línea en HTML _ Codecademy

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    10 vistas4 páginas

    Estilos en Línea en HTML - Codecademy

    Cargado por

    A Liz Marjorie T. Tineo
    Estilos en Línea en HTML _ Codecademy

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 4

    Estilos en línea en HTML

    Una breve guía sobre cuándo y cuándo no usar estilos CSS en línea en
    HTML.

    Estilos en línea para HTML

    requisitos:

    Completado aprender HTML y CSS Unidad 3 Lección 2

    INTRODUCCIÓN
    Por lo general, el CSS se escribe en un archivo CSS independiente ﴾con la
    extensión  .css ﴿ o en una  <style> etiqueta en el interior de
    la <head> etiqueta, pero hay un tercer puesto que también es válida.  El
    tercer lugar se puede escribir CSS está dentro de una etiqueta HTML,
    usando el  style atributo.  Cuando CSS está escrito utilizando
    el style atributo, se llama un "estilo en línea".  En general, esto no se
    considera una buena práctica. Sin embargo, hay veces en que los estilos
    en línea son la derecha ﴾o única﴿ elección.

    INLINE ESTILO DE SINTAXIS


    estilos en línea se ven y funcionan como CSS, con algunas
    diferencias.estilos en línea afectan directamente a la etiqueta que están
    escritos en, sin el uso de selectores.  Aquí hay una página HTML básica
    usando estilos en línea:

    <!DOCTYPE html>
    <html>
      <head>
        <title>Playing with Inline Styles</title>
      </head>
      <body>
        <p style="color:blue;font‐size:46px;">
          I'm a big, blue, <strong>strong</strong> paragraph
        </p>
      </body>
    </html>
    La  p etiqueta con el atributo de estilo en línea es el enfoque aquí:

    <p style="color: blue; font‐size: 46px;">
    El  style atributo es igual que cualquier otro atributo HTML. Se va dentro
    de etiqueta de inicio del elemento, justo después del nombre de la
    etiqueta.  El atributo comienza con  style , seguido de un signo
    igual,  = y luego, finalmente, usa comillas dobles,  "" que contienen el
    valor del atributo.

    En nuestro caso, el valor de la  style atributo será pares propiedad‐valor


    CSS:  "property: value;" .  Puede tener tantos pares de valores de
    propiedades como desee. A diferencia de la sintaxis CSS normales, estilo
    en línea no no utilizar selectores o llaves. No se olvide de incluir el punto y
    coma  ; después de cada par!

    Estilos en línea no son tan diferentes de las otras maneras que usted
    puede escribir CSS.  Por ejemplo, el estilo en línea de arriba es  casiigual
    que la siguiente regla CSS:

    p {
      color: blue;
      font‐size: 46px;
    }
    La regla anterior funciona de la misma manera como nuestro estilo en
    línea hace, excepto por una cosa.  Esta regla afectará a  todas  p   en la
    página, mientras que el estilo en línea afectará sólo al  <p> que está
    escrito en.

    En cascada funciona de la misma manera, sin embargo, por lo que


    el <strong> elemento dentro de la  <p> será azul con texto grande,
    independientemente de si usted decide utilizar reglas de estilo o CSS en
    línea.

    CUÁNDO UTILIZAR LOS ESTILOS EN LÍNEA


    los desarrolladores web profesionales no utilizan los estilos en línea a
    menudo, pero hay momentos en los que son importantes para entender
    o necesario utilizar.  Aquí hay algunos lugares que se pueden ver los
    estilos en línea:

    Correo electrónico HTML


    sitios web de más edad
    contenido CMS ﴾por ejemplo, WordPress, Drupal﴿
    El contenido dinámico ﴾es decir, HTML creado o modificado por
    JavaScript﴿

    Los correos electrónicos a menudo incluyen contenido HTML.  Cuando


    recibe un aspecto elegante e‐mail, o bien es un archivo de imagen
    grande o se trata de un correo electrónico en formato HTML.  Puedes
    crear mensajes en formato HTML a sí mismo, pero puede ser
    complicado. Los espectadores en clientes de correo electrónico HTML no
    están estandarizados, y la mayoría de ellos no permiten que <style> las
    etiquetas.  Por esta razón, el correo electrónico HTML contienen a
    menudo una gran cantidad de estilos en línea.  Algunos de los estilos
    incluidos pueden ser arcaico, para apoyar a los clientes de correo
    electrónico de visualización de mayor edad.

    Otra vez, verá los estilos en línea es en los sitios web dinámicos que
    utilizan JavaScript. A menudo, los scripts de JavaScript añadirán los estilos
    en línea a HTML. Por ejemplo, una forma común para ocultar un cuadro
    de diálogo sirve para añadir el estilo en línea display: none; .

    CUANDO NO UTILIZAR LOS ESTILOS EN LÍNEA


    Como se ha mencionado antes, los desarrolladores web a menudo no
    utilizan los estilos en línea al crear páginas web, por muchas razones.Las
    razones incluyen "marcado semántico", mantenibilidad, reusabilidad y
    escalabilidad.

    El marcado semántico
    HTML es para transmitir información estructurada.  CSS está construido
    con el estilo de información que estructurado.  Cuando se utilizan los
    estilos en línea, esta separación clara entre la información estructurada y
    el estilo es borrosa.  Al separar el CSS del HTML, el marcado puede ser
    semántica, lo que significa que puede transmitir tanto significado como
    sea posible sin ser confundido por los efectos visuales.

    Por ejemplo, el artículo que está leyendo actualmente está escrito en


    HTML, separa en títulos  <h1> y párrafos  <p> ﴾y el texto dentro de las
    etiquetas﴿. En este artículo también tiene tamaños específicos del tipo de
    letra, espaciado entre líneas y colores, pero esos aspectos afectan sólo a
    la presentación visual.  Al mantener el margen de beneficio como
    semántica de lo posible, el contenido del artículo se puede editar de
    forma rápida y sin ser distraído por la estética.

    Además, es posible hacer mal uso de los elementos HTML anulando su


    CSS. Hay muchos programas que interpretan HTML sin "mirar" a través de
    un ojo humano, como los lectores de pantalla y motores de
    búsqueda.  Por ejemplo, la  <blockquote> etiqueta está destinado a
    contener una cita de bloque, sino a través de CSS, es posible hacer
    que  <blockquote> las etiquetas aparecen visualmente como las
    partidas. Una persona que mira a su sitio web a través de un navegador
    sólo vería las partidas.  Un lector de pantalla para personas con
    discapacidad visual, por el contrario, puede leer los encabezados como si
    fueran citas, que podrían ser muy confuso para las personas con
    discapacidad visual!  Este problema se puede crear con cualquier CSS,
    estilos no sólo en línea, pero vale la pena mencionar aquí.Siempre busque
    la etiqueta correcta para el trabajo antes de usar CSS.

    Mantenibilidad, reusabilidad y escalabilidad


    Debido a los estilos en línea sólo afectan a la etiqueta que están escritos
    en, puede ser difícil hacer cambios. Si usted ha escrito el mismo estilo 20
    veces en 20 diferentes  <div> etiquetas, debe editar cada uno de esos
    lugares cada vez que desee hacer un cambio trivial.Esto puede ser
    agotador!  Mediante el uso de una única regla CSS en
    una  <style> etiqueta o en un archivo CSS independiente, sólo se
    tendría que cambiar en un solo lugar.

    Se gana la mayor flexibilidad y el poder poniendo el CSS en un archivo


    CSS independiente. Si  <link> a ese archivo CSS en más de una página
    HTML, se puede reutilizar la misma hoja de estilo para múltiples
    páginas. Si quieres un estilo consistente a través de todo su sitio web, este
    es el camino a seguir. Cuando se quiere hacer un cambio, sólo tendrá que
    hacer el cambio en un archivo, y se verá en cada página enlazada.

    CONCLUSIÓN
    A veces, los estilos en línea son necesarios.  Si usted está construyendo
    una página web con la mano, sin embargo, se debe evitar siempre que
    sea posible.  El uso de un archivo CSS independiente es el método más
    potente y flexible.

    OTROS RECURSOS
    W3.org definición estilos en línea

    También podría gustarte