Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 2022 00 U01 T02 Maquetación Web (4930)

    Cargado por

    Alessander
    12 vistas22 páginas
    Este documento proporciona una introducción a los estilos CSS. Explica los diferentes tipos de selectores CSS como el selector universal, de etiqueta, de clase, de id y descendente. También describe cómo crear hojas de estilos internas y externas y cómo vincularlas a documentos HTML para aplicar formato a los elementos.

    Descripción original:

    Título original

    PPT 2022 00 U01 T02 Maquetación Web (4930).pptx

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PPTX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    Este documento proporciona una introducción a los estilos CSS. Explica los diferentes tipos de selectores CSS como el selector universal, de etiqueta, de clase, de id y descendente. También describe cómo crear hojas de estilos internas y externas y cómo vincularlas a documentos HTML para aplicar formato a los elementos.

    Copyright:

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

    2022 00 U01 T02 Maquetación Web (4930)

    Cargado por

    Alessander
    Este documento proporciona una introducción a los estilos CSS. Explica los diferentes tipos de selectores CSS como el selector universal, de etiqueta, de clase, de id y descendente. También describe cómo crear hojas de estilos internas y externas y cómo vincularlas a documentos HTML para aplicar formato a los elementos.

    Copyright:

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

    Arquitectura de Entornos

    Web
    Unidad 1: HTML y CSS3
    Tema 2: Estilos CSS
    Tema 02: Estilo CSS

    2
    Índice
    1.2 Estilos CSS
    1.2.1.Selector de estilo CSS
    1.2.1.1. Tipos de estilos
    1.2.2. Selectores CSS
    1.2.2.1. Selector universal
    1.2.2.2. Selector de etiqueta
    1.2.2.3. Selector descendente
    1.2.2.4. Selector de clase
    1.2.2.5. Selector de id
    1.2.2.6 Combinación de selectores

    3
    Capacidades
    • Diseña páginas web utilizando etiquetas HTML5 y CSS3 .

    4
    Introducción
    • En este capítulo aprenderás a definir reglas de estilo para que los elementos de la página web tengan una mejor
    presentación.
    • Asimismo, aprenderás a definir nuevas reglas de estilo en los selectores universal y de etiqueta.

    5
    Estilos CSS

    6
    Selector de estilo CSS
    • Un selector de estilo CSS es una regla
    que le dice al navegador cómo
    desplegar un elemento dentro de una
    pagina.
    • Por ejemplo: se puede crear una regla
    CSS para las todas las directivas <h1>,
    cuyo tamaño sea de 36 pixeles, su
    fuente Courier y su color de letra azul.

    7
    Selector de estilo CSS

    8
    Tipos de estilo
    Interno
    • Si deseas crear definiciones de estilo
    solamente para una página del sitio web
    debes crear un estilo interno.
    • Los estilos se definen en una zona
    específica del propio documento HTML.
    Se emplea la etiqueta <style> de HTML y
    solamente se pueden incluir en la
    cabecera del documento (solo dentro de
    la sección <head>).

    9
    Tipos de estilo: Externo
    • Si deseas que el sitio web tenga un
    aspecto uniforme, utiliza una hoja de
    estilos externa y vinculada a cada
    documento. A uno o más documentos.
    • Un archivo de tipo CSS se podrá enlazar
    a una página HTML mediante la etiqueta
    <link>. Se pueden crear todos los
    archivos CSS que sean necesarios y cada
    página HTML puede enlazar tantos
    archivos CSS necesite.

    10
    Selectores CSS

    11
    Selector universal
    • Se utiliza para seleccionar todos los
    elementos de la página. El selector
    universal se indica mediante un asterisco
    (*).
    • A pesar de su sencillez, no se utiliza
    habitualmente, ya que es difícil que un
    mismo estilo se pueda aplicar a todos los
    elementos de una página.

    12
    Selector de etiqueta
    • Selecciona todos los elementos de la
    página cuya etiqueta HTML coincide con
    el valor del selector.
    • Si algunos selectores contienen reglas
    similares, se agrupan en una sola regla,
    donde los selectores se encuentran
    separados por una coma.

    13
    Selector descendente
    • Permite definir reglas a los elementos
    que se encuentran dentro de otros
    elementos.
    • Un elemento es descendente de otro
    cuando se encuentra entre las etiquetas
    de apertura y de cierre del otro
    elemento.

    14
    Selector de clase
    • Para personalizar una regla y aplicarlo a
    determinados elementos de la página, se
    define el selector de class.
    • En el archivo css se define una clase
    destacada con los estilos que se van a
    aplicar a los elementos. Para ello, se le
    antecede el punto (.).

    15
    Selector de id
    • Para aplicar estilos CSS a un único
    elemento de la página, se utiliza el
    selector de id.
    • Este tipo de selectores solo selecciona
    un elemento de la página porque el valor
    del atributo id no se puede repetir en
    dos elementos diferentes de una misma
    página.

    16
    Combinación de selectores
    Los selectores CSS incluyen una combinación de diversas combinaciones de selectores
    simples.
    CSS 3 contiene cuatro combinaciones:
    • selector de descendiente (separados por espacios)
    • selector de elemento hijo (mayor de delimitado)
    • selector de hermanos adyacentes (más delimitado)
    • selector de hermano ordinaria (separados por un guion)

    17
    Ejercicio
    • Diseña una página HTML utilizando las estructuras básicas de
    HTML: uso de párrafos, imágenes, hipervínculos y listas,
    definiendo los selectores CSS en un archivo externo.
    • El diseño de las páginas HTML será bajo el asesoramiento del
    docente.

    18
    Conclusiones
    • Un selector de estilo CSS es una regla que le dice al navegador cómo desplegar un elemento dentro de una
    página.
    • Si se desea crear definiciones de estilo solamente para una página del sitio web, emplea la etiqueta <style> de
    HTML y solamente se pueden incluir en la cabecera del documento (sólo dentro de la sección <head>).
    • Si deseas que el sitio web tenga un aspecto uniforme, utiliza una hoja de estilos externa. Un archivo de tipo CSS
    se podrá enlazar a una página HTML mediante la etiqueta <link>.
    • El selector universal se utiliza para seleccionar todos los elementos de la página. El selector universal se indica
    mediante un asterisco (*).
    • El selector de etiqueta se utiliza para asignar reglas a todos los elementos de la página, cuya etiqueta HTML
    coincide con el valor del selector.

    19
    Conclusiones
    • Si algunos selectores contienen reglas similares, se agrupan en una sola regla, en la cual los selectores se
    encuentran separados por una coma.
    • Para aplicar estilos CSS a un único elemento de la página, se utiliza el selector de id. Este tipo de selector no se
    puede repetir en dos elementos diferentes de una misma página.
    • Para personalizar una regla y aplicarlo a varios elementos de la página define el selector de class. Este selector se
    define en el archivo css, y se crea la regla a aplicar a los elementos. Se le antecede el punto (.).
    • El selector descendente aplica reglas a los elementos que se encuentran dentro de otros elementos. Un elemento
    es descendente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento.

    20
    Referencias bibliográficas
     Acera Garcia, M.A. (2012). CSS3. Madrid: Anaya Multimedia

    Centro de Información: Código 006.7 ACER

     Álvarez Garcia, A. (2012). Manual imprescindible de HTML. Madrid : Anaya Multimedia.

    Centro de Información: Código 006.74HTML ALVA/M


     Gauchat, J.D (2019). El gran libro de HTML5, CSS3 y JavaScript. 3ra Edición. Barcelona:Marcombo. Recuperado de
    https://elevaciondigital.pe/wp-content/uploads/2019/06/El-gran-libro-de-HTML5-CSS3-y-JavaScript.pdf

    • JL. Curso de HTML. (s.f.). Recuperado de https://www.uv.es/jbosch/PDF/Curso%20de%20HTML.pdf

    • Sanchez, J. (2003). HTML Guía práctica de referencia. Recuperado de


    http://www.aragonemprendedor.com/archivos/descargas/manual_rapido_html.pdf

    21
    GRACIAS

    SEDE LIMA CENTRO SEDE INDEPENDENCIA SEDE BREÑA SEDE BELLAVISTA


    Av. Uruguay 514 Av. Carlos Izaguirre 233 Av. Brasil 714 – 792 Av. Mariscal Oscar R. Benavides 3866 – 4070
    Cercado – Lima Independencia – Lima (CC La Rambla – Piso 3) (CC Mall Aventura Plaza)
    Teléfono: 419-2900 Teléfono: 633-5555 Breña – Lima Bellavista – Callao
    Teléfono: 633-5555 Teléfono: 633-5555

    SEDE TRUJILLO SEDE SAN JUAN DE LURIGANCHO SEDE AREQUIPA


    Calle Borgoño 361 Av. Próceres de la Independencia 3023-3043 Av. Porongoche 500
    Trujillo San Juan de Lurigancho – Lima (CC Mall Aventura Plaza)
    Teléfono: (044) 60-2000 Teléfono: 633-5555 Paucarpata - Arequipa
    Teléfono: (054) 60-3535

    www.cibertec.edu.pe

    También podría gustarte