Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 9 vistas

    13 de Marzo de 2023

    Cargado por

    Arturo
    El documento presenta códigos HTML y CSS para trabajar con selectores y medidas relativas en CSS. En la sección de selectores CSS, se muestran diferentes selectores como el selector de tipo, clase, identificador y atributos, así como la especificidad de los estilos. En la sección de medidas relativas, se explican y ejemplifican unidades como em, ex, rem, puntos, pulgadas y porcentajes.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd

    13 de Marzo de 2023

    Cargado por

    Arturo
    9 vistas8 páginas
    El documento presenta códigos HTML y CSS para trabajar con selectores y medidas relativas en CSS. En la sección de selectores CSS, se muestran diferentes selectores como el selector de tipo, clase, identificador y atributos, así como la especificidad de los estilos. En la sección de medidas relativas, se explican y ejemplifican unidades como em, ex, rem, puntos, pulgadas y porcentajes.

    Título original

    13 DE MARZO DE 2023

    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?

    El documento presenta códigos HTML y CSS para trabajar con selectores y medidas relativas en CSS. En la sección de selectores CSS, se muestran diferentes selectores como el selector de tipo, clase, identificador y atributos, así como la especificidad de los estilos. En la sección de medidas relativas, se explican y ejemplifican unidades como em, ex, rem, puntos, pulgadas y porcentajes.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    9 vistas8 páginas

    13 de Marzo de 2023

    Cargado por

    Arturo
    El documento presenta códigos HTML y CSS para trabajar con selectores y medidas relativas en CSS. En la sección de selectores CSS, se muestran diferentes selectores como el selector de tipo, clase, identificador y atributos, así como la especificidad de los estilos. En la sección de medidas relativas, se explican y ejemplifican unidades como em, ex, rem, puntos, pulgadas y porcentajes.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    de 8

    Realizar los siguientes codigos en su libreta ------------------------ Lunes 13 de marzo

    SELECTORES HTML

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <title>Original</title>

    <link rel="stylesheet" href="normalize.css">

    <link rel="stylesheet" href="08 - selectores.css">

    <script src="modernizr-custom.js"></script>

    </head>

    <body>

    <header>

    <div>

    <h2 title="main cabecera otro">Titulo secundario en cabecera</h2>

    </div>

    </header>

    <h2 lang="es-MX">Titulo Secundario 2</h2>

    <h2 title="otro">Titulo Secundario</h2>

    <h2 lang="es-ES">Titulo Terciario</h2>

    <p>Texto de prueba</p>

    <p>Texto de prueba</p>

    <p id="azul">Texto de prueba</p>

    <p>Texto de prueba</p>

    <p>Texto de prueba</p>

    <p class="prueba grande">Texto con clase</p>


    Realizar los siguientes codigos en su libreta ------------------------ Lunes 13 de marzo

    <p class="prueba">Texto con clase</p>

    <div>

    <article>

    <p class="prueba grande">Texto con clase</p>

    <p class="rojo naranja" id="grisaceo">Texto con clase</p>

    <p class="prueba">Texto con clase</p>

    </article>

    </div>

    <p>Hola</p>

    </body>

    </html>

    SELECTORES CSS

    header h2,

    h3{

    color: green;

    /*

    p#azul{

    color: orange;

    .prueba{

    color: green;

    .grande{
    Realizar los siguientes codigos en su libreta ------------------------ Lunes 13 de marzo

    font-size: 20px;

    */

    /* elemento1 + elemento2

    p+p{

    font-weight: bolder;

    */

    div > p {

    color: red;

    p~p{

    color: green;

    /*

    h2[title]{

    color: red;

    */

    h2[title ~= "otro"]{

    color: red;

    h2[lang |= "es"]{

    color: blue;

    div{
    Realizar los siguientes codigos en su libreta ------------------------ Lunes 13 de marzo

    font-size: 50px;

    article p{

    font-size: 20px;

    #grisaceo{

    color: gray;

    .naranja{

    color: orange;

    .rojo{

    color: red !important;

    /*

    colision de estilos

    1- css del navegador

    2- css del usuario

    3- archivos css enlazados en el orden añadidos

    4- propiedades que se heredan

    5- propiedades propias del elemento

    6- clases asignadas, y en el mismo orden

    7- identificador
    Realizar los siguientes codigos en su libreta ------------------------ Lunes 13 de marzo

    8- !important

    */

    MEDIDAS RELATIVAS HTML

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <title>Curso Diseño Web</title>

    <link rel="stylesheet" href="normalize.css">

    <link rel="stylesheet" href="09 - unidades de medida.css">

    <script src="modernizr-custom.js"></script>

    </head>

    <body>

    <div class="fija"></div>

    <div class="porcentual">

    </div>

    <p class="in">Pulgadas</p>

    <p class="cm">Centímetros</p>

    <p class="mm">Milímetros</p>

    <p class="pt">Puntos</p>

    <p class="pc">Picas</p>

    <p>Párrafo Normal</p>

    <p class="em">Párrafo EM</p>

    <p class="ex">Párrafo EX</p>


    Realizar los siguientes codigos en su libreta ------------------------ Lunes 13 de marzo

    <p class="px">Párrafo PX</p>

    <div>

    <p>em heredado</p>

    <p class="rem">ejemplo rem</p>

    </div>

    </body>

    </html>

    MEDIDAS RELATIVAS CSS

    body{

    font-size: 16px;

    p.em{

    font-size: 2em;

    div p{

    font-size: 2em;

    div p.rem{

    font-size: 3rem;

    p.ex{

    font-size: 1ex;

    /*

    in: (inches o pulgadas)

    1in = 2.54cm

    cm: centímetros

    mm: milímetros
    Realizar los siguientes codigos en su libreta ------------------------ Lunes 13 de marzo

    pt: puntos

    1pt = 0.35mm

    pc: picas

    1pc = 12pt = 4.23mm

    */

    p.in{

    font-size: .2in;

    p.cm{

    font-size: 1.5cm;

    p.mm{

    font-size: 15mm;

    p.pt{

    font-size: 30pt;

    p.pc{

    font-size: 3pc;

    div.fija{

    height: 100px;

    width: 100px;

    background: red;

    div.porcentual{

    height: 100px;

    width: 50%;

    background: green;
    Realizar los siguientes codigos en su libreta ------------------------ Lunes 13 de marzo

    margin: 5%;

    También podría gustarte