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

sábado, 19 de septiembre de 2020

13 Section, aside, footer y Google fonts



Para terminar esta introducción a CSS, damos formato al contenido principal de nuestro documento web.

Observa el siguiente código:

section{

    width: 70%;

    margin-left:15px;

    margin-top: 25px;

    padding:10px;

    float: left;

    background:#404033;

}

article h2{

    font-size:1.5em;

}

aside{

    width: 20%;

    margin-left:15px;

    margin-top:25px;

    padding:10px;

    float: left;

    font-size:1.5em;

}

footer{

    width:95%;

    clear:both;

    margin-left: 15px;

    margin-top: 25px;

    padding:10px;

    font-size:0.5em;

}

 

Section y aside van a compartir el ancho total de nuestro documento web.

A “section” le damos el 70% del ancho y a “aside” le asignamos el 20%, la diferencia la pueden tomar los márgenes externos “margin” y los márgenes internos “padding”.

A las dos etiquetas les damos la propiedad float con valor left.

Asignamos también a los títulos de tamaño h2 una proporción de 1.5 sobre el valor del tamaño de fuente normalizado.

Despues pasamos a dar formato al pie de la web, el “footer”, lo mas significativo es “clear:both” que vuelve a asignar el flujo normal del documento, esto hace que el pie aparezca bajo el “section” y “aside”, asignando también un tamaño de fuente inferior 0.5 em.

 

Google fonts

Para terminar vamos a cambiar el tipo de fuente de textos en el documento web, para ello vamos al siguiente enlace https://fonts.google.com/ , seleccionamos la fuente que mas nos guste, pulsamos “select this style” y podemos descargar el archivo u obtener el codigo desde “embed”, obtendremos un enlace para insertar en el head del código html.

<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">

 

Despues, en la hoja de estilos insertaremos el código para dar el formato, como el siguiente:

*{

    color:#F3F390;

    background:#404033;

    font-family: 'Lobster', cursive;

    font-size: 14px;

}

 

Identificadores, clases

Por ultimo, vamos a ver dos tipos de etiquetas que podremos usar en nuestros documentos para dar formato CSS, son los identificadores y las clases.

La diferencia principal es que los identificadores son únicos en el documento no puede existir mas de una etiqueta con el mismo identificador, pero si podemos tener varias etiquetas con la misma clase.

En CSS llamaremos a los identificadores anteponiendo el símbolo “#” a su nombre (#enlace) y a las clases anteponiendo un punto “.”  a su nombre (.enlace2)  te indicare como crear el formulario y las etiquetas mas importantes. Veamos el siguiente ejemplo para explicar sus detalles.

En el documento “html” ponemos:

 

<footer>

<blockquote class="enlace2">Jose Ojeda 2020&copy</blockquote>

<div id="enlace">Google</div>

</footer>

 

En el documento “CSS” ponemos:

#enlace {

    color:red;

}

.enlace2{

    color:green;

}

 

La clase la podríamos poner en varias etiquetas y el identificador solo en una.

Publicado por en No hay comentarios:
Etiquetas: , , , , , , , , , ,

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>

Publicado por en No hay comentarios:
Etiquetas: , , , , , ,

viernes, 26 de enero de 2018

02 Curriculum Vitae. Adaptado a movil y cambio tipo letra

Mediante unas pequeñas modificaciones conseguimos que nuestra web se adapte a dispositivos moviles.
Vemos tambien como añadir tipos de fuentes desde google fonts.




HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Curriculum Vitae">
<meta name="keywords" content="curriculum,jose ojeda,html,css">
<meta name="author" content="Jose Ojeda">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/estilo.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Risque" rel="stylesheet">
<title>
Curriculum Vitae
</title>
</head>
<body>
<div id="contenido">

<header>
<h1>CV de Jose Ojeda</h1>
<p>Diplomado en Ciencias Empresariales</p><br/>
<p>Sobre 20 años de experiencia <br/>en tareas Administrativas y Contables
<br/><br/>ticoticotaa@gmail.com</p></header>
<section>

<article><div id="formacion">
<h3>Formacion</h3>
<dl>
<dt>
Diplomado en Ciencias Empresariales</dt>
<dd>Universidad de Sevilla</dd>
</dl>
<dl>
<dt>
Tecnico Superior en Prevencion de Riesgos Laborales</dt>
<dd>Seguridad, Ergonomia e Higiene Industrial</dd>
</dl>
</div>
<div id="imagen">
<img src="img/jose.jpg">
</div>
</article>
<article>
<h3>Experiencia Profesional</h3>
<dl>
<dt>
Contable - Administrativo</dt>
<dd>2000 - Actualidad</dd>
</dl>
<dl>
<dt>
Profesor Contabilidad y Matematicas Financieras</dt>
<dd>2002 - 2003</dd>
</dl>
<dl>
<dt>
Administrativo</dt>
<dd>1998 - 2000</dd>
</dl>
</article>
<article>
<h3>Otros</h3>
<dl>
<dt>
Docencia</dt>
<dd>Formador de formadores</dd>
</dl>
<dl>
<dt>
Programacion</dt>
<dd>Java, JavaScript, Php, Python, Android, Html, Css</dd>
</dl>
<dl>
<dt>
Software</dt>
<dd>Contabilidad, Nominas, Facturacion, Office, TPV, Navegadores, Correo</dd>
</dl>
</article>


</section>
<footer>
<address>
Mi direccion <br/>
Mi ciudad
</address>
</footer>

</div>
</body>
</html>
 CSS
 body{
    font-family: 'Risque', cursive;
    margin:0;
    width-max:960px;
}
header,footer{
    background-color:#f06292;
    color:white;
    text-align:center;
    padding:5px;  
    margin-right:auto;
    margin-left:auto;
}
h1{
    display:inline-block;
    width:400px;
    font-weight:700;
}
h3{
    font-size:36px;
    font-weight:700;
}
p{
    display:inline-block;
    width:400px;
    font-weight:200;
}
section{
    width:80%;
    margin-right:auto;
    margin-left:auto;
    vertical-align:top;
}
article{
    display:inline-block;
    width:97%;
    font-size:22px;  
    margin-bottom:12px;
    margin-top:36px;  
}
#imagen{
    display:inline-block;
    margin-top:45px;
    margin-left:10px;
    width:18%;
    float:left;
}
#formacion{
    display:inline-block;
    width:80%;
    float:left;
}
/*movil*/
@media screen and (max-width:480px){
    *{
        display:block;
        margin:1px;
      
    }
    h1{
        font-weight:300;
    }
    h3{
        font-weight:200;
    }
    article{
        font-size:1em;
    }
    p{
      
        font-size:1em;
    }
    #imagen{
        display:none;
    }
}
Publicado por en No hay comentarios:
Etiquetas: , , , , , , , , ,

sábado, 6 de mayo de 2017

Crea tu Web responsive Video 05

Seleccionar y cambiar el tipo de letra de nuestra web con Google fonts.
 
 
Publicado por en No hay comentarios:
Etiquetas: , , , , , ,
Suscribirse a: Entradas (Atom)