Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • Cómo Diseñar Con Estilos Css en Html5

    Загружено:

    ricardorcrdarteaga
    20 просмотров4 страницы
    Sencillo tutorial sobre como enlazar la hoja de estilos CSS a nuestro proyecto web en HTML5.

    Оригинальное название

    Cómo diseñar con Estilos Css en Html5

    Авторское право

    © © All Rights Reserved

    Доступные форматы

    PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ
    Sencillo tutorial sobre como enlazar la hoja de estilos CSS a nuestro proyecto web en HTML5.

    Авторское право:

    © All Rights Reserved
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    20 просмотров4 страницы

    Cómo Diseñar Con Estilos Css en Html5

    Загружено:

    ricardorcrdarteaga
    Sencillo tutorial sobre como enlazar la hoja de estilos CSS a nuestro proyecto web en HTML5.

    Авторское право:

    © All Rights Reserved
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 4

    ESTRUCTURANDO CAJAS CON ESTILOS CSS

    Conceptos Bsicos
    Antes de comenzar, ya estudiamos la etiqueta <link> y cmo utilizarla para insertar archivos con estilos
    CSS en nuestros documentos. Utilizando la lnea <link rel=stylesheet href=misestilos.css>
    le decimos al navegador que cargue el archivo misestilos.css porque contiene todos los estilos
    necesitados para presentar el documento en pantalla.
    Conceptos bsicos: Recuerde que en HTML cada elemento es considerado como una caja. El margen
    (margin) es en realidad el espacio alrededor del elemento, el que se encuentra por fuera del borde de esa
    caja (el estilo padding, por otro lado, es el espacio alrededor del contenido del elemento pero dentro de
    sus bordes, como el espacio entre el ttulo y el borde de la caja virtual formada por el elemento <h1> que
    contiene ese ttulo). El tamao del margen puede ser definido por lados especficos del elemento o todos
    sus lados a la vez. El estilo margin: 0px en nuestro ejemplo establece un margen 0 o nulo para cada
    elemento de la caja. Si el tamao hubiese sido especificado en 5 pixeles, por ejemplo, la caja tendra un
    espacio de 5 pixeles de ancho en todo su contorno. Esto significa que la caja estara separada de sus vecinas
    por 5 pixeles. Volveremos sobre este tema ms adelante en este captulo. Comencemos con algunas reglas
    bsicas que nos ayudarn a proveer consistencia al diseo:

    Modelos de caja
    Para aprender cmo podemos crear nuestra propia organizacin de los elementos en pantalla, debemos
    primero entender cmo los navegadores procesan el cdigo HTML. Los navegadores consideran cada
    elemento HTML como una caja.

    Representacin visual de
    una pgina web mostrada
    con estilos por defecto.

    Tenga en cuenta que en la misma carpeta deben estar los archivos


    (index con la extensin.html y misestilos con la extensin .css)
    para ser abierto y procesado correctamente.
    Antes de comenzar nuestro documento de estilos css es posible asignar estilos a todos los elementos
    creando una regla para cada uno de ellos:
    La primera regla usa el
    selector universal * para
    asignar el mismo estilo a cada
    elemento del documento.

    *
    {
    margin: 0px;
    padding: 0px;
    }

    Esto con el fin de quitar los mrgenes que por defecto aplica el navegador y es til cuando necesitamos
    establecer ciertas reglas bsicas. En este caso, configuramos el marging y el padding de todo el documento
    en 0 pixeles
    Conceptos bsicos: La propiedad padding trabaja exactamente como margin. Cuatro valores pueden
    ser especificados: superior, derecho, inferior, izquierdo, en este orden. Si solo declaramos un valor, el mismo
    ser asignado para todos los espacios alrededor del contenido del elemento. Si en cambio especificamos dos
    valores, entonces el primero ser asignado como margen interno de la parte superior e inferior del
    contenido y el segundo valor ser asignado al margen interno de los lados, izquierdo y derecho.

    Estableciendo la propiedad width


    Con la propiedad width se puede definir la anchura concreta de un elemento, en este caso se modificar la
    caja de la cabecera:

    Estableciendo la propiedad height


    En el ejemplo anterior la altura de la caja queda establecida por el contenido de la misma. Se puede influir
    en la altura de un elemento con la propiedad height. Por ejemplo, probemos a fijar la altura de la caja en
    500px:

    Referenciando con el atributo class


    El atributo class es como un nombre que identifica al elemento desde nuestro archivo CSS la regla debe
    ser declarada con el smbolo punto (.)y al frente el valor que usamos para identificar el elemento:
    <!DOCTYPE html>
    <html lang="es">
    <head>
    <title>Este texto es el ttulo del documento</title>
    <link rel="stylesheet" href="misestilos.css">
    </head>
    <body>
    <article class=texto1>lorem ipsum</article>
    </body>
    </html>

    En nuestro documento de CSS debera verse as:


    .texto1
    {
    Font-size: 20px;
    }

    Muy importante cada estilo debe


    cerrar en (;)para poder continuar
    correctamente.

    Este estilo cambia el tamao por defecto del texto dentro del elemento <article> a un nuevo tamao de
    20 pixeles.

    Вам также может понравиться