Mostrando entradas con la etiqueta fuentes. Mostrar todas las entradas
Mostrando entradas con la etiqueta fuentes. Mostrar todas las entradas

miércoles, 30 de enero de 2019

15 Html, Css. Fuentes

Cambia la fuente para los textos en tu #web usando #googleFonts.
Los cambios en los archivos de nuestra web son:

CSS
*{

margin:0 auto;

padding:0px;

/*font-family: 'Playfair Display', serif;*/

font-family: 'Quicksand', sans-serif;}


HTML
<head>

<title>Web principal</title>

<meta charset="utf-8">

<link rel="stylesheet" href="estilos.css"/>

<link href="https://fonts.googleapis.com/css?family=Playfair+Display|Quicksand" rel="stylesheet">

</head>



domingo, 4 de septiembre de 2016

03. CSS Propiedades Textos

En este video se exponen ejemplos de como dar formato a textos mediante CSS, cambiando color, tamaño y otras propiedades.



El codigo del archivo HTML es:

<!doctype html>
<html lang="ES">
<head>
<link rel="stylesheet" type="text/css" href="css/formatoFuentes.css">
<title>
Formato Fuentes
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Titulo Principal</h1>
<h2>Titulo Secundario</h2>
</hgroup>
</article>
<p class="nowrap">Parrafo nowrap                      primero jdlkf<br>jalkdjslakjflkajdkljflkasdjflkjadlkjflkasj<br>dflkjasdlkjflkajdlkfjldsakjfljlfjladsjlkfjladjlfjl</p>
<p class="inherit">Parrafo segundo  inherit                      jhdlkajdkjfsaaa<br>aaaaaaalkdfjdlajflajdlsjfldjslkfjlasdkjflkjsdljflsdjlfjlsdajfljsdlkfjlksdajflkjsdlj</p>
</section>
<aside>
</aside>
<footer>
<h4>Pie de pagina</h4>
</footer>
</body>
</html>

El codigo del archivo CSS es:

/*Comentario de CSS*/
/*selector universal*/
*{
    background-color:gray;
}
p{
    font-family:Helvetica,sans-serif;
    font-size:medium;
    font-style:italic;
    text-transform:lowercase;
    letter-spacing:3px;
    word-spacing:10px;
   
}
p .nowrap{
    white-space:nowrap;
}
p .inherit{
    white-space:inherit;
}
h1{
    font-size:1.25em;
    font-weight:bold;
    color:blue;
    text-shadow:4px 3px 5px red;
}
h2{
    font-size:1em;
    color:white;
    text-decoration:underline;
}

Espero sea util. No olvideis practicar.