Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Introduccion Al Estilo CSS

    Cargado por

    Genesis Nicolle Salgado Ramos
    18 vistas11 páginas
    CSS es un lenguaje de hojas de estilos que ayuda a controlar la presentación de documentos HTML. Permite separar el contenido de la presentación y aplicar estilos como color, tamaño y fuente. Existen tres métodos para aplicar CSS: interno, externo e inline. La sintaxis CSS incluye selectores, declaraciones con propiedades y valores para definir reglas de estilo.

    Descripción original:

    introduccion al css

    Título original

    Introduccion al estilo CSS

    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
    CSS es un lenguaje de hojas de estilos que ayuda a controlar la presentación de documentos HTML. Permite separar el contenido de la presentación y aplicar estilos como color, tamaño y fuente. Existen tres métodos para aplicar CSS: interno, externo e inline. La sintaxis CSS incluye selectores, declaraciones con propiedades y valores para definir reglas de estilo.

    Copyright:

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

    Introduccion Al Estilo CSS

    Cargado por

    Genesis Nicolle Salgado Ramos
    CSS es un lenguaje de hojas de estilos que ayuda a controlar la presentación de documentos HTML. Permite separar el contenido de la presentación y aplicar estilos como color, tamaño y fuente. Existen tres métodos para aplicar CSS: interno, externo e inline. La sintaxis CSS incluye selectores, declaraciones con propiedades y valores para definir reglas de estilo.

    Copyright:

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

    INTRODUCCIÓN A

    CSS
    QUÉ ES CSS

    Es un lenguaje de hojas de estilos que ayuda a controlar el aspecto o presentación de los documentos electrónicos
    creados con HTML y XHTML Al utilizar CSS se separan los contenidos de la presentación del documento. CSS
    (Cascading Style Sheets) trabaja junto con HTML para proveer estilos visuales a los elementos del documento
    como: tamaño, color, fondo, bordes, etc...

    CSS es un complemento desarrollado para superar las limitaciones y reducir la complejidad de HTML CSS tiene un
    set predeterminado de propiedades que permiten sobrescribir las estilos provistos par navegadores y obtener la
    organización deseada. Estas propiedades no son especificas, tienen que ser combinadas para formar reglas que
    después serán usadas para agrupar cajas y obtener la correcta disposición en pantalla.

    La combinación de estas reglas es normalmente llamada Modelo o Sistema de Disposición. Todas estas
    reglas aplicadas juntas constituyen lo que se llama un Modelo de Caja.

    Al crear una página web, se utiliza en primer lugar el lenguaje HTML/XHTML para marcar los contenidos,
    es decir, para designar la función de cada elemento dentro de la página: párrafo, titular, texto destacado,
    tabla, lista de elementos, etc.
    APLICAR ESTILO CSS A UN DOCUMENTO HTML

     Para aplicar estilos a un documento HTML hay tres formas de hacerlo:

     1. Estilo mediante un CSS interno (internal)


     2. Estilo mediante un CSS externo (external)
     3. Estilo en línea (inline)
     CSS Interno
    El CSS interno es un código CSS incrustado en un documento HTLM. Está escrito dentro del elemento <style>, que se acomoda en la sección
    de <head>:

     CSS externo
    El CSS externo existe en su propio archivo. Este archivo está enlazado a un documento HTML con una etiqueta <link>. Este es el método más usado
    para añadir CSS a HTML, ya que una hoja de estilo externa puede dictar el estilo de diferentes documentos HTML. Esto permite que los
    desarrolladores hagan cambios a lo ancho del sitio con un solo archivo CSS.
    Para crear un archivo CSS, escribe tu código en cualquier editor de texto o editor de código y guarda el archivo con la extensión .css; para vincularlo
    con un archivo de HTML, guarda tus HTML y CSS en la misma carpeta y luego pega el siguiente código dentro de la sección <head> del archivo
    HTML:
    <link rel="stylesheet" target="_blank" rel="noopener" href="style.css">
    Agrega en "style.css" el nombre de tu archivo CSS. Las reglas de este archivo se aplicarán en cualquier archivo HTML que haga referencia a él con el
    elemento <link> de arriba
     CSS en línea
    CSS en línea se ubica dentro de una etiqueta HTML para cambiar el estilo de un elemento en específico. La sintaxis
    inline es un poco diferente de lo que hemos visto: la declaración está escrita como el valor del atributo de estilo.

    Aunque es posible, usar este método viola la práctica de separar el estilo del contenido, por eso no se recomienda su
    empleo. El CSS en línea es ineficiente para programar y resulta más difícil de comprender que los otros dos. Aun así,
    es bueno que lo conozcas para que lo puedas identificar, si se presenta el caso.
    SINTAXIS PARA LA CREACION DE REGLA CSS

     En la sintaxis del estilo CSS existen cuatro componentes principales:


     selector,
     declaraciones,
     propiedades y
     valores
    SELECTOR CSS

    Todas las reglas CSS comienzan con un selector. Este indica la parte del documento donde se aplica la regla. Y al
    selector le siguen una o más declaraciones dentro de corchetes. Existen varias formas de escribir un selector;

     1. Si queremos elegir una etiqueta, simplemente escribimos su nombre. Por ejemplo, si queremos establecer las
    propiedades para los enlaces:
    SELECTOR CSS
     II. También podemos elegir un elemento único utilizando su atributo id. Para ello, empleamos la almohadilla:#

     III. Otra cosa que podemos hacer es definir una clase y hacer que muchos elementos la utilicen, escribiendo un
    punto antes del nombre. Por ejemplo, si queremos destacar algo:

    Luego podríamos emplear esa clase en los párrafos que queramos (o cualquier otro elemento), usando el
    atributo class de este modo:
    DECLARACIONES CSS

    Después del selector sigue el bloque de declaración: un par de corchetes que contienen una o más declaraciones
    CSS. Una de estas declaraciones le dice al navegador qué estilo brindar al elemento seleccionado gracias a sus dos
    aspectos: una propiedad y un valor. Cada declaración termina con un punto y coma (;). Los elementos de una
    declaración son:
     Propiedades
     Valores
    PROPIEDAD CSS

    Como la primera parte de una declaración, una propiedad CSS le indica al navegador cuál característica de estilo del
    elemento debe cambiarse. Existen muchas propiedades CSS que afectan diferentes cosas: color, tamaño, fuente, forma
    o locación en una página. Una propiedad se acompaña de al menos un valor y estos elementos siempre aparecen
    separados por dos puntos (:).
    No todas las propiedades son compatibles con todos los navegadores; no obstante, algunas son bastante amigables,
    como color y ancho. Ten en mente la compatibilidad entre navegadores si las propiedades que usas son menos
    habituales. Probar tus diseños en navegadores comunes (así como en dispositivos móviles y de escritorio) es una
    buena práctica para garantizar una buena experiencia de usuario.
    VALOR CSS

    Cada propiedad tiene un paquete de valores, los cuales especifican el estilo de la propiedad. Estas son algunas
    propiedades usuales y sus valores:
    Las propiedades de color pueden tener valores tan simples como una palabra (red o blue para rojo y azul, por
    ejemplo), códigos hexadecimales como #33E0FF o valores RGB como rgb (51, 224, 255).
    La propiedad de ancho (width) puede tener un valor de longitud, como píxeles, o un porcentaje, que le da tamaño al
    elemento, según la dimensión del contenedor padre.
    La propiedad para la familia de fuente (family font) acepta los nombres por escrito de tipografías amigables con web
    como Arial, Times New Roman o Courier.

    También podría gustarte