Scribd Logo
Upload

Welcome to Scribd!

  • CSS PDF

    Uploaded by

    jose luis
    32 views14 pages

    Original Title

    CSS.pdf

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    32 views14 pages

    CSS PDF

    Uploaded by

    jose luis

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 14

    CSS

    Aisner Marrugo Juliao


    Ingeniero de Sistemas
    Especialista en Gerencia de Proyectos
    Magister en Administracion
    Introducción

    Con la aparición de CSS, se hace posible separar presentación


    de contenido. Como resultado, la presentación puede ser
    removida del documento HTML y almacenada en un archive
    separado, el cual puede ser incluido en el documento usando una
    etiqueta link. Por consiguiente, todos los elementos y atributos
    asociados a la presentación en HTML fueron remplazados por CSS
    proveyendo versatilidad y accesibilidad.
    Incorporando CSS en HTML

    Podemos incorporar CSS en HTML de las siguientes formas:


    • Ingline styles.
    • Internal styles.
    • External stylesheets.
    • Import command
    •
    Inline styles

    <html>
    <p style="color: lime">Inline styles</p>
    </html>
    No es utilizado con mucha frecuencia, dado que desafía el concepto
    de etiquetado semántico y hace el código mas complicado. Se debe
    utilizer solo cuando no existe otra manera de aplicar CSS.
    Internal styles
    <html>
    <head>
    <title> Internal styles </title>
    <style type="text/css">
    p{ color: red;}
    </style>
    </head>
    <body>
    <p> Uso de Internal Styles </p>
    </body>
    </html>
    Es utilizado cuando queremos definir estilo para toda la página.
    Incrustamos el código CSS dentro del código HTML utilizando la
    etiqueta style. Es una buena práctica incluir la etiqueta style entre
    las etiquetas head.
    External stylesheets
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="main.css">
    </head>
    <div>
    External Stylesheets
    </div>
    </html>

    Creamos un archivo llamado main.css (hoja de estilos externa) y


    definimos el elemento div de la siguiente manera:

    div {
    color: red;
    }
    Import command
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="main.css"
    >
    <style type="text/css"> @import url(change.css);
    </style>
    </head>
    </html>
    El comando import se define entre las etiquetas style.

    Es utilizado cuando tenemos un estilo aplicado a todo el sitio y


    necesitamos cambiar una sección de estilo solo en una página
    específica.
    Definiendo CSS
    Estructura de CSS.

    selector {
    property:value;
    }

    El selector(por ejemplo div) debe ser escrito primero, la


    propiedad y el valor deben ser definidos entre llaves ({}). color,
    text-decoration, and font-size son ejemplos de propiedades usadas
    en CSS.

    div {
    color: red;
    margin: 20px;
    }
    Selectores
    Los selectores nos ayudan a seleccionar los elementos a los
    que queremos aplicar estilos. Hay diferentes clases
    selectors en CSS. Un elemento, ID, o clase pueden ser usados
    como selectores.

    div {
    color: blue;
    margin: 30px;
    }
    Selectores ID y Class
    Los selectores mas usados comunmente en CSS son de clase e
    ID. El selector de clase es precedido por un punto (.) por
    otro lado por ID es precedido por un simbolo #.
    <html>
    <head>
    <title> Selector de Id y Clase </title>
    <style type="text/css" >
    #pubman {color: red;}
    .packt {color: navy;}
    </style>
    </head>
    <body>
    <p class="packt"> Estilo por clase</p>
    <p id="pubman"> Estilo por ID</p>
    </body>
    </html>
    Agrupando Selectores
    En CSS, podemos agrupar cualquier cantidad de selectores
    para definir propiedades que son comunes.
    <html>
    <head>
    <title> Example of Grouping selectors </title>
    <style type="text/css" >
    p, div {color: navy;}
    </style>
    </head>
    <p> Primera</p>
    <div> Segunda</div>
    </html>
    Anidando Selectores
    Podemos aplicar estilos a selectores entre otros selectores.
    <html>
    <head>
    <title> Selectores Anidados </title>
    <style type="text/css">
    p{color: lime;}
    div{background-color: yellow;}
    #packt p {color: orangered;}
    </style>
    </head>
    <body>
    <p> Primer mensaje</p>
    <div id="packt">Segundo Mensaje
    <p> Tercer Mensaje</p>
    </div>
    <p> Cuarto Mensaje </p>
    </body>
    </html>
    Fuentes y Textos
    En HTML, el tamaño de una Fuente puede ser aumentado usando
    etiquetas como h1 o h2 por mencionar algunos. Sin embargo,
    por buena práctica, eso debe ser definido en las hojas de
    estilo. Por lo tanto, las fuentes son importantes en CSS.
    Fuentes y Textos
    <html>
    <head>
    <title> Fonts in CSS </title>
    <style type= "text/css" >
    P{
    font-family: 'Times New Roman', Times, serif;
    font-style: normal;
    color: lime;
    font-size: 1.5em;
    }
    div {
    font-family:Arial,Helvetica
    font-weight: bold;
    font-style: oblique;
    color: orangered;
    font-size: 3em;
    }
    </style>
    </head>
    <body>
    <p> Packt Publishing </p>
    <div id= "packt"> Packt Online Library </div>
    </body>
    </html>

    You might also like