Cruso de CSS

TALLER DE PROGRAMACIÓN WEB
ÍNDICE
1. CAPÍTULO 01..................................................................................................................................................4
1.1. TRES MANERAS DE INSERTAR HOJAS DE ESTILO.....................................................................................4
1.2. SELECTORES............................................................................................................................................4
1.2.1. SELECTOR DESCENDIENTE INNECESARIA........................................................................................5
1.2.2. LLAMADO DE UN SELECTOR DE FORMA CORRECTA.............................................................................5
1.3. TIPOS DE DATOS.....................................................................................................................................5
1.4. VARIABLES Y HERENCIAS........................................................................................................................6
1.5. ESTILOS DE TEXTOS.................................................................................................................................6
2. CAPÍTULO 02..................................................................................................................................................8
2.1. SECTORES EN CSS....................................................................................................................................8
/* Selectores de tipo etiqueta HTML*/..........................................................................................................8
/* Selectores de tipo Id*/...............................................................................................................................8
/* Selectores de clases (recomendados)*/.....................................................................................................8
ESPECIFICIDAD................................................................................................................................................8
2.2. SELECTORES DE ATRIBUTOS....................................................................................................................9
2.3. SELECTORES COMPUESTOS..................................................................................................................10
/* CONCEPTO DE SELECTORES COMPUESTOS*/...........................................................................................10
2.4. PSEUDO CLASE EN FORMULARIOS........................................................................................................11
/* Pseudo clases de formularios */..............................................................................................................12
2.5. PSEUDO CLASE CHILD...........................................................................................................................13
2.6. PSEUDO CLASE TYPE.............................................................................................................................14
/* Concepto Pseudo Clase type */................................................................................................................14
2.7. PSEUDO CLASES....................................................................................................................................14
/* CONCEPTO PSEUDO CLASES.................................................................................................................15
3. CAPITULO 03.................................................................................................................................................17
3.1. SELECTORES AGRUPADOS.....................................................................................................................17
3.2. INLINE BLOCK........................................................................................................................................17
3.3. MARGIN AND PADDING........................................................................................................................18
3.4. BORDER................................................................................................................................................19
3.5. DIMENSIONES DE LA CAJA BOX SIZING.................................................................................................19
3.6. BORDER-RADIUS...................................................................................................................................20
3.7. BACKGROUND......................................................................................................................................20
3.8. PSEUDO ELEMENTOS............................................................................................................................21
3.9. FLOAT OVERFLOW................................................................................................................................22

4. CAPITULO 04.................................................................................................................................................24
4.1. FLUJO Y POSICIÓN DE UN ELEMENTO...................................................................................................24
HTML............................................................................................................................................................24
CSS................................................................................................................................................................24
4.2. FLUJO RELATIVO...................................................................................................................................24
HTML............................................................................................................................................................24
CSS................................................................................................................................................................25
4.3. POSICIÓN ABSOLUTA...........................................................................................................................25
HTML............................................................................................................................................................25
CSS.................................................................................................................................................................... 25
4.4. EJEMPLO MENÚ....................................................................................................................................26
HTML............................................................................................................................................................26
CSS................................................................................................................................................................27
4.5. POSICION FIXED....................................................................................................................................28
HTML............................................................................................................................................................28
CSS................................................................................................................................................................28
4.6. MENÚ FIXED.........................................................................................................................................29
HTML............................................................................................................................................................29
CSS................................................................................................................................................................30
4.7. Z-INDEX.................................................................................................................................................30
HTML............................................................................................................................................................30
CSS................................................................................................................................................................30
4.8. POSITION STICKY...................................................................................................................................31
HTML............................................................................................................................................................31
CSS................................................................................................................................................................32
5. CAPITULO 05 FLEXBOX..................................................................................................................................32
5.1. FLEXBOX................................................................................................................................................32
HTML............................................................................................................................................................32
CSS................................................................................................................................................................32
VISTA............................................................................................................................................................33
5.2. DIRECCIÓN DE EJE (AXIS)......................................................................................................................33
HTML............................................................................................................................................................33
CSS................................................................................................................................................................34
VISTA............................................................................................................................................................34
5.3. ALINEAR EN EJE (AXIS)..........................................................................................................................34
HTML............................................................................................................................................................34
CSS................................................................................................................................................................35
VISTA............................................................................................................................................................35
5.4. ALINEAR EN EJE SECUNDARIO (AXIS)...................................................................................................35
HTML............................................................................................................................................................35
CSS................................................................................................................................................................36
ISTA...............................................................................................................................................................36
5.5. CAJA FLEX BOX......................................................................................................................................37
HTML............................................................................................................................................................37
CSS................................................................................................................................................................37
VISTA............................................................................................................................................................38
5.6. DISEÑO DE UNA PÁGINA ADECUADAMENTE CON FLEX.......................................................................38
HTML............................................................................................................................................................38
CSS................................................................................................................................................................38
VISTA............................................................................................................................................................39
5.7. MENÚ ANIMADO CON FLEX..................................................................................................................39
HTML............................................................................................................................................................39
CSS................................................................................................................................................................39
VISTA............................................................................................................................................................40
1. CAPÍTULO 01
1.1. TRES MANERAS DE INSERTAR HOJAS DE ESTILO
Index.html
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">


<link rel="stylesheet" href="css/styles.css">
<title>Tema 01</title>
<style>
*/
/* here code /*CSS*/
</style>
</head>
<body>

<h1 style="background: rgba(200, 100, 255, 0.5); color: #fff; width:
60%; text-align: center;">Introducción a CSS</h1>

</body>
</html>
1.2. SELECTORES
Styles.css
INTRODUCCIÓN Y RECURSOS EN CSS
:root{
}
body{ /* body selector de etiqueta */
background: #BDBDBD;
}
body span{/* selector descendientes*/
font-size: 60px;
color: blue;
}
1.2.1. SELECTOR DESCENDIENTE INNECESARIA
/*
body header h1 span{
color: green;
}
*/
1.2.2. LLAMADO DE UN SELECTOR DE FORMA CORRECTA
h1{
background: black;
font-size: 50px;
font-family: seans-serif;
text-decoration: underline;
color: white;
}
SELECTORES ESPECIALES (este tema lo aclararemos más adelante con

detalle)
h1:nth-of-type(2) {
color: yellow;
}
1.3. TIPOS DE DATOS

(Numéricos, caracteres, boléanos, hexadecimales,… )
tiposDatos.css
/*Tipos de datos*/
header span{
color:red;
color:hsl(0,100%,50%);
color: rgb(255,0,0);
color:#ff0000;
color:1s;/*DATO INCORRECTO NO MUESTRA EL ERROR DE DEBUG*/
}
header span{
pág. 5
transition:left 2s;/* esto funciona*/

transform: rotate(2deg);
transform: rotate(1turn);
margin:calc(100% - 100px);
margin:10rem;
margin:10em;
content:'hola mundo' /*esto es string*/;
order:10;/*tambien soporta numeros */
}
1.4. VARIABLES Y HERENCIAS
variablesHerencias.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Variables y Herencias</title>
<link rel="stylesheet" href="css/variablesHerencias.css">
</head>
<body>
<h1>Variables y <span>Herencias en </span>CSS</h1>

</body>
</html>
variablesHerencias.css
/*Variables y Heerencias*/
:root{
--jpmcolor:green;
}
body{
background:var(--jmpcolor);
}
body span{
color:grey;
1.5. ESTILOS DE TEXTOS

Para este trabajo agregaremos estilos de textos google fonts
estilotexto.html
<!DOCTYPE html>
<html lang="en">
pág. 6
<head>
<title>Estilos para Textos y estilo por defecto</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300"
rel="stylesheet">
<link rel="stylesheet" href="css/estiloTexo.css">
</head>
<body>
<h1>Estilos para un texto</h1>
<h1>Estilos por defecto</h1>
<nav>
<ul>
<li>Item01</li>
<li>Item02</li>
<li>Item03</li>
<li>Item04</li>
</ul>
</nav>
</body>
</html>
estiloTexto.css
body{
margin:0;
}
h1{
color: green;
font-size: 50px;
font-family: sans-serif;
font-family: Arial, serif;/*full-back*/
font-family: 'Open Sans Condensed', sans-serif;
line-height: 10px;/*Interlineado*/
}
nav ul li{
text-align: center;
color: skyblue;
}
/*font-family: monospace;*/
pág. 7
2. CAPÍTULO 02
En este capítulo ampliaremos el tema de selectores en CSS
2.1. SECTORES EN CSS
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="css/selectoresCSS.css">
</head>
<body>
<ul>
<li class="menu-01" id="pri" >Item01</li>
<li class="menu-item red">Item02</li>
<li class="algo3">Item03</li>
</ul>
</body>
</html>
/* Selectores de tipo etiqueta HTML*/

li{
background: coral;
}
/* Selectores de tipo Id*/
#pri{
background: rgba(205,200,100);
}
/* Selectores de clases (recomendados)*/
.menu-item{
background: lime;
}
.menu-item{
background: red !important;
}
.red{
background: green !important;
}
/*
ESPECIFICIDAD
Es un algoritmo de CSS por el cual se resuelven los conflictos de estilos.
 type 1
 class 10
 id 100
 inline 1000
 !important Superior a los demas
pág. 8
*/
2.2. SELECTORES DE ATRIBUTOS
<!DOCTYPE html>
<html lang="en">
<head>
<title>Selectores de Atributos</title>
<link rel="stylesheet" href="css/selectoresAtributos.css">
</head>
<body>
<a href="https://google.com">Ir a google</a>
<a href="https://facebook.com" title="facebook">Ir a facebook</a>
<a href="http://youtube.com">Ir a youtube</a>
<span title="span">Selectores de atributos</span>
<a href="resultadoPdf.docx">Descargue los resultados</a>
</body>
</html>
CONCEPTO DE SELECTOR CON ATRIBUTOS

/* Selectores de Atributos
Usan corchetes [] para indicar el atributo
Se pueden usar solo como atributo ó como atributo valor
Nota: sin espacios es un selector combinado
*/
[href="https://facebook.com"]{
color:blueviolet;
font-size: 20px;
}
[href="https://facebook.com"]{
color:blueviolet;
font-size: 20px;
}
/*Selector combinado*/
[href][title]{
color:aqua;
font-size: 2em;
}
/*se pueden usar ^ comodines (comienza con)*/

[title^="fa"]{
background:yellow;
}
/* Comodin $ (termina con)*/
[title$="n"]{
background:coral;
pág. 9
}
/* Comodin * (contiene) */
[href*="pdf" i]{
background:
url(http://icons.iconarchive.com/icons/hopstarter/software/32/Microsoft-Word-
icon.png) left / contain no-repeat;
padding-left: 1.5em;
}
2.3. SELECTORES COMPUESTOS
<!DOCTYPE html>
<html lang="en">
<head>
<title>Selectores Compuestos</title>
<link rel="stylesheet" href="css/selecoresCompuestos.css">
</head>
<body>
<ul>
<li><span>Item01</span></li>
<li>Item02</li>
<li>Item03</li>
<li>Item04</li>
</ul>
<section>
<h1 class="second title" >Selector adyacente</h1>
<p class="second" >Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Labore, voluptates!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit,
porro.</p>
<p>Lorem ipsum dolor sit amet.</p>
</section>
<input type="text" placeholder="">
</body>
</html>
/* CONCEPTO DE SELECTORES COMPUESTOS*/

/* Descendiente
padre hijo{
style
}
Algo mejor
ancestro descendiente{
style
}
*/
/* Hijos directos
ul>span{
pág. 10
background: red;
} la forma correcta es:
*/
ul>li>span{
color:coral;
}
/* Selector hermano siguiente (adyacente)*/

/* Esto afecta al objeto de lado*/
h1 + p{
background: #ff0000;
}
/* Selector hermanos siguientes*/

/* Selecciona a todos los hnos.*/
h1~p{
background: pink;
}
/*Combinar selectores*/
/* esto no es adecuado
.second{
color:green;
} */
/*esto es correcto*/
.second.title{
color:green;
}
2.4. PSEUDO CLASE EN FORMULARIOS
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pseudo Clase en Formularios</title>
<link rel="stylesheet" href="css/psudocodicoFormularios.css">
</head>
<body>
<form action="get">
<input disabled type="text">
<input type="text">
<input required type="text">
<input class="selection" type="radio" id="opcion-01">
<label for="opcion-01">Opcion 01</label>
<input type="email" id="email">
<input type="number" max="20">
</body>
</html>
pág. 11
/* Pseudo clases de formularios */

/* Pseudo clase formulario :focus*/
input:focus{
background: #00ffff;
}
/* :enable :disable*/
input:disabled{
background: #ff000;
}
input:enabled{
background: #00ff00;
}
input{
display: block;
width: 50%;
margin: 0.5em;
border: none;
}
label{
display: block;
width: 50%;
margin: 0.5em;
border: none;
}
/* checked */
.selection:checked + label{
font-size: 2em;
background: chocolate;
color: white;
}
/* :required :optional */
input:optional{
border: 1px solid green;
}
form :required{
border: 1px solid red;
}
/* :valid :invalid */
#email:valid{
background: yellow;
}
#email:invalid{
background: red;
}
/* :in-range :out-of-range*/
:in-range{
background: blue;
pág. 12
}
:out-of-range{
background: red;
}
2.5. PSEUDO CLASE CHILD
<!DOCTYPE html>
<html lang="en">
<head>
<title>PSEUDOCLASES CHILD</title>
<link rel="stylesheet" href="css/pseudoClaseChild.css">
</head>
<body>
<div>
<p>Parrafo 1</p>
<p>Parrafo 2</p>
<p>Parrafo 3</p>
<p>Parrafo 4</p>
<p>Parrafo 5</p>
</div>
<div class="item-color">
<div>Div 1</div>
<div>Div 2</div>
<p>Item 1</p>
<p>Item 2</p>
<p>Item 3</p>
<p>Item 4</p>
<p>Item 5</p>
</div>
</body>
</html>
/* PSEUDOCLASE CHILD */
p:first-child{
background: coral;
}
p:last-child{
background: cyan;
}
/* Puede ser p:nth-child(3n) ó p:nth-child(3n+1) ó p:nth-child(even) pares , p:nth-
child(odd) inpares */
p:nth-child(3){
background: blue;
color:darkgreen;
}
/* contar al revez */
p:nth-last-child(2n){
background: blue;
color:darkgreen;
}
pág. 13
/* se aplica a un hijo unico */

p:only-child{
background: blue;
color:darkgreen;
}
.item-color p:nth-child(3){
background: red;
color: white;
}
2.6. PSEUDO CLASE TYPE
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pseudo Clase type</title>
<link rel="stylesheet" href="css/psudoClasesType.css">
</head>
<body>
<div class="menu-item">
<p class="parrafo">Parrafo 1</p>
</div>
</body>
</html>
/* Concepto Pseudo Clase type */
/* :first-child :first-of-type */
/* :last-child :last-of-type */
/* :nth-child() :nth-of-type(n) */
.parrafo:nth-of-type(4){
background: red;
color:aqua;
}
p:nth-of-type(4){
background: coral;
color:white;
}
2.7. PSEUDO CLASES
<!DOCTYPE html>
pág. 14
<html lang="en">
<head>
<title>Pseudo Clases</title>
<link rel="stylesheet" href="css/psedudoClases.css">
</head>
<body>
<nav>
<a href="Youtube">Youtube</a>
<a href="#parrafo">Ir Parrafo</a>
</nav>
<div id="parrafo">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat,
architecto!</p>
</div>
<a class="buttom" href="#">Ir Google</a>
<span>Artículo 01</span>
<span></span>
<span>Artículo 03</span>
</body>
</html>
/* CONCEPTO PSEUDO CLASES

Son selectores dinámicos, que responden al contexto, a la interacción del
usuario o a algunas propiedades de los elementos.
*/
/*Enlaces */
.buttom{
display: inline-block;
color: white;
line-height: 2;
padding: 0 1em;
text-decoration: none;
border-radius: 6px;
box-shadow: 3px 2px black;
}
/* Estados */
/* Cuando pones el cursor sobre*/
.buttom:hover{
background: green;
}
/* Momento en el que se pulsa la etiqueta*/
.buttom:active{ transform: scale(0.9);
}
/* para indicar que la pagina ya fue visitada*/
.buttom:visited{
background: pink;
}
nav{
background: green;
pág. 15
position: fixed;
width: 100%;
height: 50px;
top: 0;
}
nav a{
padding: 0 0.5em;
color:seashell;
display: inline;
text-align: center;
line-height: 50px;
}
#parrafo{
margin-top: 50em;
margin-bottom: 50em;
}
#parrafo:target{
padding-top: 50px;
}
/* Enlaces Root */
/* hace referencia a html */
:root{
background: #D8D8D8;
}
/* Enlace empty */
span{
display: block;
padding: 0.5em;
}
span:empty{
display:none;
padding: 0;
}
pág. 16
3. CAPITULO 03
3.1. SELECTORES AGRUPADOS
HTML
<link rel="stylesheet" href="css/01selectoresAgrupados.css">
<h1 class="titulo">hola Mundo</h1>
<p class="welcome">Bienvenidos a mi web</p>
CSS
/* Selectores agrupados */
/* .titulo{
color:red;
}
.welcome{
color:blue;
} */
/* válido */
.titulo,
.welcome{
}
.titulo{
color:aqua;
}
.welcome{
color:chocolate;
}
3.2. INLINE BLOCK

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Elementos de bloque y elementos de linea</title>
<link rel="stylesheet" href="css/03InlineBlock.css">
</head>
<body>
<h1>Hola mundo</h1>
<a href="#">Hola 01</a>
</body>
</html>
CSS
h1{
background: coral;
pág. 17
height:50px;
}
a:nth-of-type(2){
/* display: inline-block; */
color:white;
background: darkcyan;
height: 50px;
}
/* Lo mejor de inline: Se ajusta al contenido
Lo mejor de block: Tiene Height y width; */
NOTA 1
3.3. MARGIN AND PADDING
MODELO DE MODELO DE CAJA - BOX MODEL

INTERNOS
content
padding
border
EXTERNOS
margin
NOTA 2
HTML
<link rel="stylesheet" href="css/04MarginPadingColapsado.css">
<div class="elemento">Lorem ipsum dolor sit amet.</div>
<div class="elemento">Lorem ipsum dolor sit amet.</div>

CSS
.elemento{
background: coral;
padding: 10px;
display: block;
/* display: block; Colapso de margen se utiliza el margen demaryor tamaño*/
/* padding: 20px 100px 60px 10px; */
/* padding: 20px 100px; */
/* padding-top:; padding-right: ; padding-bottom: ; padding-left: ; */
margin:20px;
}
/* body{
background: #0ff0ff
}
h1{
background: yellow;
} */
pág. 18
3.4. BORDER
HTML
<link rel="stylesheet" href="css/05bordes.css">
<div class="caja">Hola Rene</div>
CSS
/* .caja{
width:200px;
height:100px;
border-color: red;
border-style:dashed; dotted, solid, dashed,
text-align: center; */
/* .caja{
width: 100px;
height:50px;
border: 1px dashed red;
border-bottom: none;
} */
.caja{
width:200px;
height:100px;
border-color:aliceblue red coral green;
border-style: dashed;
border-width: 2px 5px 12px 20px;
border-left: 10px double green;
}
3.5. DIMENSIONES DE LA CAJA BOX SIZING

Dimensiones de las caja
Sin dimensiones declaradas:
Alto : contenido + padding + border
Ancho : contenido + padding + border
Con dimensiones declaradas:

Alto : height + padding + border
Ancho : width + padding + border
HTML
<link rel="stylesheet" href="css/05DimensionesCaja-Box-sizing.css">
<div class="caja">
hola
</div>
CSS
*,
pág. 19
*:before,
*:after{
box-sizing: border-box;
}
.caja{
width: 276px;
height: 176px;
border: 2px solid coral;
padding:10px;
}
3.6. BORDER-RADIUS
HTML
<link rel="stylesheet" href="css/06BorderRadio.css">
<link rel="icon" href="img/logo%20ci.png">
<div class="caja">
Rene Inca
</div>
CSS
.caja{
width:200px;
height:100px;
border: 6px double coral;
box-sizing:border-box;
/* border-radius:12%;
border-bottom-right-radius: 50%; */
border-radius: 15% 25% 50% 100%;
}
3.7. BACKGROUND
HTML
<link rel="stylesheet" href="css/07Background.css">
<div class="caja">...</div>
CSS
.caja{
width: 400px;
height: 400px;
/* background: red; */
background-image: url(../img/logo.png),url(../img/css.png);
background-color: lightcoral;
background-repeat: no-repeat, repeat;
background-size: 50%, 18%;
background-position: center,left top;
}
pág. 20
HTML
<link rel="stylesheet" href="css/08Background.css">
<link rel="icon" href="img/logo.png">
<div class="caja"></div>
<div class="gear"></div>
CSS
.caja{
width:400px;
height:400px;
border: 20px dashed coral;
background: url(../img/dibujo.png),url(../img/Perro.jpg),chocolate;
background-repeat: no-repeat;
background-position: center,center;
background-size: 50%, cover;
background-clip: border-box; /*me indica el lugar a mostrarse ya se a
conten-box , padding-box*/
background-origin: border-box;
}
.gear{
width: 200px;
height:200px;
background: grey;
border-radius: 50%;
border: 35px dashed grey;
background-clip: padding-box;
}
3.8. PSEUDO ELEMENTOS

HTML
<link rel="stylesheet" href="css/09PseudoElementos.css">

<a href="descarga.pdf" class="download">Descarga manual</a>

<a href="descarga.doc" class="download">Descarga manual</a>
<a href="descarga.xls" class="download">Descarga manual</a>
CSS
/* los Pseudo elementos no existen en el HTML */
/* .title::before{
content: "Hola";
}
.title::after{
content: " Mundo"
} */
.title::before{
pág. 21
content: 'Dercargue en Excel';

width:content;
height:content;
background:coral;
display:inline-block; /* el elemento es inline */
}
.download{
display: block;
text-decoration:none;
margin-bottom: 1em;
}
[href$="pdf"]::before{
content: url(../img/pdf.png);
}
[href*="doc"]::before{
content: url(../img/word.png)
}
[href*="xls"]::before{
content: url(../img/excel.png)
}
.download::before{
margin-right: 3px;
}
3.9. FLOAT OVERFLOW

HTML
<link rel="stylesheet" href="css/10FloatOverflow.css">
<article class="art">
<h1>Lorem ipsum dolor sit amet.</h1>
<img src="img/Perro.jpg" alt="" class="img" height="200" width="300">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum veritatis
quae illum, magnam atque libero, vitae totam quaerat. Autem, voluptatibus
corporis necessitatibus deserunt eos sequi praesentium quam ratione, illo,
asperiores fuga incidunt expedita ad architecto nam vero voluptates rem
temporibus. Magni vitae repudiandae aliquam ab debitis voluptatibus nisi
voluptate excepturi.</p>
<h1>Audiroria en SEO en python</h1>

<pre class="code-python">
<code>
1. #Verificar HTTPS
2. import urllib.request as request #imports
3. print('auditoria a python.org\n===========================')
4. req = request.Request('http://python.org')
5. resultado = request.urlopen(req)
pág. 22
6. print('HTTP OR HTTPS',resultado.geturl())
</code>
</pre>
</article>
CSS
/* FLOAT Y OVERFLOW */
.img{
float: left;
margin: 0 10px 0 10px;
.art{
width:60%;
margin: auto;
border: 1px dashed blue;
overflow:scroll; /* hidden | scroll | auto */
}
.art::after{
content: '';
display: block;
height: 300px;
width: 300px;
background: coral;
margin-left: -100px;
}
.code-python{
width: 360px;/* width: 100%;*/
border: 2px solid gray;
overflow: auto; /* overflow-x ||overflow-y */
}
pág. 23
4. CAPITULO 04
4.1. FLUJO Y POSICIÓN DE UN ELEMENTO

HTML


<link rel="stylesheet" href="css/FlujoPosition.css">
<h1>Título</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque accusantium,
velit tempore ex adipisci accusamus nostrum dolores eligendi assumenda ducimus
porro eos quas quisquam nihil est esse rem temporibus eum itaque, repellat eaque
explicabo. Quam iste consectetur, velit eos asperiores.</p>
CSS
/* que es un elemento posicionado */
/* propiedad position:static =>| relative | absolute | fixed | sticky;
Cuando un elemento está posicionado, se sale del flujo. Además adquiere nuevas
propiedades:
top
right
bottom
left
z-index
*/
/* h1{
position: absolute;
} */
h1{
background: yellow;
}
p{
background: pink;
margin-top: -50px;
z-index:inherit;
}
4.2. FLUJO RELATIVO
HTML
<link rel="stylesheet" href="css/01PositionRelative.css">
<div class="content-style">
<h1>Position Relative</h1>
</div>
<p>Lorem100p>
pág. 24
CSS
/* POSITION RELATIVE
1. El elemto conserva su espacio en el flujo (No se nota el cambio).
2. Conserva sus dimensiones originales.
3. Su contexto su posición inicial.
4. El espacio dejado se conserva. */
h1{
background: yellow;
margin: 0;
position: relative;
/* Adquiere las cinco propiedades .. Su contexto es su posicion inicial*/
top: 20px; /* 20px del top del contexto div */
right: 30px;/* 30px del right del contexto div */
/* Si utilizamos top y bottom ; left y right
El resultado seria top > bottom y left > right */
}
.content-style{
border: 4px dashed coral;
}
4.3. POSICIÓN ABSOLUTA
HTML
<link rel="stylesheet" href="css/02PositionAbsolute.css">
<div class="poster">
<img src="img/Perro.jpg" alt="peroo">
<p class="caption-style">RAZA SIBERIANO</p>
</div>
CSS
/* POSITION ABSOLUTE
1. El elemeto No conserva su espacio en el flujo;
2. Sus dimensiones se adaptan al contenido
3. Su contexto es su ancestro posicionado mas cercano
*/
.poster{
pág. 25
width: 500px;
margin: 0;
position:absolute;/* absolute; padre del .caption */
}
.poster img{
width: 100%;
display: block;
}
.caption-style{
position: absolute;
color: white;
margin:0;
background: rgba(0,0,0,.2);
width: 100%;
height: 100%;
text-align: center;
font-size: 40px;
/* efecto */
top: -800px;
overflow: hidden;
transition: all .6s;
}
.poster:hover .caption-style{
top: 0;
}
4.4. EJEMPLO MENÚ

HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="css/03AbsolutePositionMenu.css">
<meta name="description" content="" >
<ul class="menu">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a>
<ul class="menu">
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 3</a>
<ul class="menu">
<li><a href="#">Item 1</a></li>
</ul>
</li>
</ul>
</li>
pág. 26

<li><a href="#">Item 6</a>
<ul class="menu">
<li><a href="#">Sub Menu 3</a>
<ul class="menu">
</ul>
</li>
</ul>
</li>
</ul>
CSS
.menu,.menu ul{
list-style: none;
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
}
.menu{
display: table;
}
.menu>li {
float: left;
}
.menu li{
position: relative;
}
.menu li:hover{
}
.menu a{
color: white;
pág. 27
display: block;
padding: .5em 1.5em;
white-space:nowrap;
}
.menu li>ul{
display: none;
position: absolute;
}
.menu li:hover>ul{
display: block;
animation: all 40s;
}
.menu ul ul{
top: 0;
left: 100%;
}
4.5. POSICION FIXED
HTML
<link rel="stylesheet" href="css/04PositionFixed.css">

<header class="style-menu">JMPSYSTEMS</header>
<h1>TITULO</h1>
<p>Lorem100p>
<img src="img/Perro.jpg" alt="">
CSS
/* Position Fixed
pág. 28
1. Pierde su espacio en el flujo.
2. Su contexto es el viewport.
3. Sus dimensiones se ajustan acontenido.(salvo que se haya declarado su
tamaño)
4. Se queda fijo en el viewport sin moverse con el scroll.
*/
body{
margin-bottom: 2000px;
margin-top: 50px;
}
.style-menu{
background: hsl(180,60%,60%);
padding: 1em;
text-align: center;
position: fixed;
top: 0;
width: 100%;
opacity: 0.8;
}
p{
text-align: justify;
}
img{
width: 40%;
position: fixed;
border: 10px solid hsl(180,60%,60%);
overflow: auto;
border-radius: 80% 1% 80% 80%;
opacity: 0.8;
top:50px;
right: 0;
}
4.6. MENÚ FIXED
HTML
pág. 29
CSS
.menu-style{
position: fixed;
height: 100%;
width: 25%;
overflow: auto;
}
.ul-style{
list-style: none;
margin-bottom: 0;
margin-top: 0;
padding-left: 0;
}
.li-style{
line-height: 4;
display: block;
border-bottom: 1px solid green;
}
.li-style::before{
content: url(../img/excel.png);
line-height: 4;
}
.a-style{
color: white;
padding-left: 1em;
}
.main-style{
margin-left: 27%;
}
4.7. Z-INDEX
HTML
<link rel="stylesheet" href="css/06z-index.css">
<div class="a forma">A</div>
<div class="b forma">B</div>
<div class="c forma">C</div>
CSS
.forma{
width: 200px;
height: 200px;
border-radius: 10%;
pág. 30
line-height: 200px;
text-align: center;
font-size: 4em;
color: white;
position: relative;
}
.a{
background: hsl(100,50%,70%);;
z-index: 40;
}
.b{
top: -50px;
left: 150px;
z-index: 20;
}
.c{
top: -100px;
left: 300px;
z-index: 10;
}
}
4.8. POSITION STICKY

HTML
<link rel="stylesheet" href="css/07PositionSticky.css">
<h1>Título</h1>
pág. 31
<nav class="menu-style">Python</nav>

CSS
.menu-style{
line-height: 50px;
text-align: center;
font-size: 35px;
color: white;
position: sticky;
top: 100px;
padding: 1em;
}
5. CAPITULO 05 FLEXBOX
5.1. FLEXBOX
HTML
<link rel="stylesheet" href="CSS/01Flexbox.css">
<div class="container">
HIJO-FLEX-01
<div class="item">HIJO-FLEX-2</div>
</div>
CSS
/* Flexbox requiere de un elemento padre y al menos de un elemento hijo */
/* el principio para trabajar con Flexbox es:
padre => flex-container
hijo => flex-item
padre{
display:flex | inline-flex ; Crea un context flex para sus hijos
* flex -> para adentro es un flex, para los elementos de afuera es un

block.
* inline-flex -> para adentro es un flex, para los elementos de afuera es un
inline.
}
*/
/* Contexto un área a partir del cual podía moverse */
/* Los hijos (flex-items) son las cajas flexibles
Quien es Flex items:
* Elementos hijos directos del flex-container
* Pseudo elementos ::before ::after
* El texto
*/
pág. 32
/*
Según el valor indicado, el main axis será:
row: horizontal, izquierda a derecha
row-reverse: horizontal, derecha a izquierda
column: vertical, de arriba hacia abajo
column-reverse: vertical, de abajo hacia arriba
*/
.container{
display: flex;
width:300px;
height:300px;
/* flex-direction:column-reverse; */
justify-content:space-between;
align-items:flex-start;
border-radius: 10%;
padding: 1em;
}
.item{
align-self: flex-end;
order: -1;
}
VISTA
5.2. DIRECCIÓN DE EJE (AXIS)
HTML
<link rel="stylesheet" href="CSS/02DireccionEjes.css">

<div class="main-flex">
.div{$$}*40
</div>
pág. 33
CSS
/* .main-flex{
display:flex;
flex-direction: row; column|column-reverse|row|row-reverse
} */
.main-flex{
display: flex;
/* flex-direction: row-reverse;
flex-wrap: wrap; todo esto es equivalente a: */
flex-flow: row-reverse wrap;
}
.item-flex{
border-radius: 50%;
width: 1em;
padding: 1em;
color: white;
font-size: 20;
VISTA
5.3. ALINEAR EN EJE (AXIS)

HTML
<link rel="stylesheet" href="CSS/03AlineacionEjes.css">
</div>
CSS
.main-flex{
pág. 34
display: flex;
/* flex-direction: row-reverse;
flex-wrap: wrap; todo esto es equivalente a:
flex-flow: row-reverse wrap;
*/
flex-direction:row-reverse;
justify-content:flex-end; /*final*/
justify-content:center; /*centro*/
justify-content:space-around; /*Distribucion alrededor */
justify-content:space-between; /*Distribucion alrededor entre ellos*/
justify-content: flex-start; /*inicio*/
height: 40em;
width: 40em;
}
.item-flex{
border-radius: 2%;
width: 1em;
padding: 1em;
color: white;
font-size: 20;
height: 1em;
width: 1em;
/* margin: auto Para centrar automaticamente*/
}
.item-flex:nth-child(even){
}
.item-flex:nth-child(3){
margin-right: auto;
margin-left: auto;
}
VISTA
5.4. ALINEAR EN EJE SECUNDARIO (AXIS)
HTML
<link rel="stylesheet" href="CSS/04AlineacionEjeSecundarioCross.css">
pág. 35
</div>
CSS
.main-flex{
display: flex;
justify-content: flex-start; /*inicio*/
height: 500px;
width: 500px;
flex-direction: column;
align-items: flex-start;
}
.item-flex{
border-radius: 20%;
padding: 1em;
color: white;
font-size: 20;
height: 15px;
width: 15px;
/* margin: auto Para centrar automaticamente*/
}
.item-flex:nth-child(even){
}
.item-flex:nth-child(3){
margin-right: auto;
margin-left: auto;
}
ISTA
5.5. CAJA FLEX BOX
pág. 36
HTML
<link rel="stylesheet" href="css/04CajasFlex.css">
<div class="flex-content">
<div class="flex-item">01</div>
</div>
CSS
/*
flex-basic: main-size inicial
flex-gorw: factor de crecimiento
unit grow = espacio disponible / suma de flex-grow
flex-shrink: factor de encogimiento
fle: grow shrink basic

flex:none
flex: 2 1 auto
*/
.flex-content{
width: 400px;
height: 400px;
display: flex;
}
.flex-item{
height: 80px;
flex-basis: 40px;
border-radius: 10%;
flex-grow: 0;
}
.flex-item:nth-child(even){
}
.flex-item:nth-child(2){
flex:0 1 4px;
}
VISTA
5.6. DISEÑO DE UNA PÁGINA

ADECUADAMENTE CON
FLEX
HTML
<link rel="stylesheet" href="css/05Dise
%C3%B1oFlexAdecuado.css">
<header class="header">Header</header>
<div class="content">
pág. 37
<aside class="first">aside first</aside>

<main class="main">main</main>
<aside class="second">aisde second</aside>
</div>
<footer class="footer">footer</footer>
CSS
/*
flex-basic: main-size inicial
flex-gorw: factor de crecimiento
unit grow = espacio disponible / suma de flex-grow
flex-shrink: factor de encogimiento
fle: grow shrink basic

flex:none
flex: 2 1 auto
*/
.flex-content{
width: 400px;
height: 400px;
display: flex;
}
.flex-item{
height: 80px;
flex-basis: 40px;
border-radius: 10%;
flex-grow: 0;
}
.flex-item:nth-child(even){
}
.flex-item:nth-child(2){
flex:0 1 4px;
}
pág. 38
VISTA
5.7. MENÚ ANIMADO CON FLEX

HTML
<link rel="stylesheet" href="css/08MenuFlex02.css">
<div class="banner">
<div class="item"><span>Menu 01</span></div>
</div>
CSS
*{
}
.banner{
display: flex;
width: 80%;
margin-left: auto;
margin-right: auto;
height: 200px;
}
.item{
display: flex;
flex: auto;
/* border: 1px dashed coral; */
margin: 1px;
border-radius: 5%;
box-shadow:
inset 0 5px white,
inset 0-5px 0 #bbb,
inset 5px 0 #d7d7d7,
inset -5px 0 #d7d7d7;
}
pág. 39
.item:hover{
flex: 80 0 0;
}
.item:hover span{
transform: none;
transition: all .6s;
}
.item span{
margin: auto;
text-transform: uppercase;
transform: rotate(-90deg);
color: white;
font-size: 20;
}
.item:nth-child(1){
}
.item:nth-child(2){
}
.item:nth-child(3){
}
.item:nth-child(4){
}
VISTA
pág. 40
6. CAPITULO 06
6.1. Display Table
HTML
<link rel="stylesheet" href="css/01TableCSS.css">
<div class="table">
<h2>Titulo</h2>
<a href="#">ir</a>
</div>

CSS
/*
se adapta al contenido
elimina float.
*/
.table{
background: yellow;
display: table;
margin-left: auto;
margin-right: auto;
padding: 1em;
}
h2{
float: left;
}
a{
float: right;
}
/* ejm 02 */
table{
border:1px dashed coral;
margin:2em auto;
padding: 1em;
border-collapse: collapse;
pág. 41
border-spacing: 10px;
table-layout: fixed;
width: 75%;
}
tr:nth-child(even){
background: #eee;
}
td{
border: 1px solid coral;
padding: .3em;
VISTA
6.2. Colores Hexadecimales
HTML
<link rel="stylesheet" href="css/02ColorHexadecimal.css">
<h1>Color Hexadecimal</h1>
CSS
/* 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f */
h1{
background-color: #f00;
color: #2f2;
}
VISTA
6.3. Colores HLS

HTML
<link rel="stylesheet" href="css/03ColorHLS.css">
CSS
body{
height: 100hw;
background-color: hsl(60,100%,50%);
}
pág. 42
VISTA
6.4. Degradado
HTML
<link rel="stylesheet" href="css/04Degradado.css">
<div class="libreta"></div>
CSS
body{
height: 100hw;
background-image: linear-gradient(to right, hsl(60,100%,85%)
98%,hsl(0,60%,45%) 98%);
background-size: 50px;
/* margin-right:
se puede usar 10deg => grados
*/
}
.libreta{
height: 50%;
width: 400px;
margin: auto;
border-radius: 10%;
background: url(../img/Perro.jpg) center / cover;
position: relative;
}
.libreta::before{
content: "";
width: 100%;
height: 100%;
background-image:radial-gradient(circle at 20px
30px,hsl(120,80%,50%) ,hsl(220,100%,50%) );
opacity: .5;
display: block;
pág. 43
VISTA
6.5. Grid
HTML
<link rel="stylesheet" href="css/05Grid.css">
<div class="grid-container">
<div class="grid-item">1</div>
</div>
CSS
.grid-container{
display: grid;
grid-template-columns: 300px 200px 1fr;
grid-template-rows: 200px 150px 100px 50px;
/* grid-gap: 5px; */
grid-row-gap: 5px;
}
.grid-item{
}
.grid-item:nth-child(even){
background: hsl(120,50%,50%)
}
.grid-item:nth-child(10){
/* grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
pág. 44
grid-row-end: 3; */
grid-column: 2 / 4;
grid-row: 1 / span 2 /* ocupa dos columna */;
}
VISTA
6.6. Ejercicio con Grid

HTML
<link rel="stylesheet" href="css/06LayoutGrid.css">
<div class="content">
<header>header</header>
<footer>footer</footer>
<asaid>asaid 01</asaid>
<main>main</main>
<asaid>asaid 02</asaid>
</div>
CSSS
*{
}
.content{
margin: 0;
display: grid;
grid-template-columns: 20% 60% 20%;
grid-template-rows: 100px 1fr 100px;
height: 100vh;
grid-template-areas: "header header header"
"asaid01 main asaid02"
"footer footer footer";
grid-gap: 10px;
width: calc(100% - 20px);
pág. 45
header{
grid-area: header;
}
asaid{
}
main{
grid-area: main
}
footer{
grid-area: footer;
}
VISTA
pág. 46
7. CAPITULO 07
7.1. Rotate
HTML
<link rel="stylesheet" href="css/01Transformaciones.css">
<h1>Transformación</h1>
<div class="container">
<div class="box">BOX</div>
</div>
CSS
:root{
--size: 300px;
}
.container{
width: var(--size);
height: var(--size);
border: 2px solid black;
margin: auto;
}
.box{
/* background: hsl(320,80%,50%); */
line-height: var(--size);
text-align: center;
font-size: 2em;
opacity: .8;
color: white;
transform: rotate(20deg);
width: var(--size);
height: var(--size);
background: linear-gradient(
transparent 49%,
red 49%,
red 49%,
transparent 50%
),
linear-gradient(
to left,
transparent 49%,
red 49%,
red 49%,
transparent 50%
);
pág. 47
transform: rotate(40deg) translateY(200px);

transform: rotate(40deg) translateY(200px) scaley(2);
transform: scaleY(2) translateY(200px) rotate(40deg)
}
/*
transform:
scale(x,y) |scaleX()|scaleY()
translate(x,y) |translateX()|translateY()
rotate(angulo) |rotateX()|rotateY()
skew(x,y)
*/
a{
transform: scale(1.5);
transform: translate(100%,0);
transform: skewX(10deg)
}
VISTA
pág. 48

Cruso de CSS

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Cruso de CSS

Cargado por

Copyright:

Formatos disponibles

TALLER DE PROGRAMACIÓN WEB

3.9. FLOAT OVERFLOW................................................................................................................................22

SELECTORES ESPECIALES (este tema lo aclararemos más adelante con

1.3. TIPOS DE DATOS

transition:left 2s;/* esto funciona*/

1.4. VARIABLES Y HERENCIAS

1.5. ESTILOS DE TEXTOS

2.1. SECTORES EN CSS

/* Selectores de tipo etiqueta HTML*/

2.2. SELECTORES DE ATRIBUTOS

CONCEPTO DE SELECTOR CON ATRIBUTOS

/*se pueden usar ^ comodines (comienza con)*/

2.3. SELECTORES COMPUESTOS

/* CONCEPTO DE SELECTORES COMPUESTOS*/

/* Selector hermano siguiente (adyacente)*/

/* Selector hermanos siguientes*/

2.4. PSEUDO CLASE EN FORMULARIOS

/* Pseudo clases de formularios */

2.5. PSEUDO CLASE CHILD

/* se aplica a un hijo unico */

2.6. PSEUDO CLASE TYPE

2.7. PSEUDO CLASES

/* CONCEPTO PSEUDO CLASES

3.2. INLINE BLOCK

3.3. MARGIN AND PADDING

MODELO DE MODELO DE CAJA - BOX MODEL

3.5. DIMENSIONES DE LA CAJA BOX SIZING

Con dimensiones declaradas:

3.8. PSEUDO ELEMENTOS

<a href="descarga.pdf" class="download">Descarga manual</a>

content: 'Dercargue en Excel';

3.9. FLOAT OVERFLOW

<link rel="stylesheet" href="css/10FloatOverflow.css">

<h1>Audiroria en SEO en python</h1>

4.1. FLUJO Y POSICIÓN DE UN ELEMENTO

4.3. POSICIÓN ABSOLUTA

4.4. EJEMPLO MENÚ

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<li><a href="#">Item 5</a></li>

4.5. POSICION FIXED

<link rel="stylesheet" href="css/04PositionFixed.css">

4.8. POSITION STICKY

* flex -> para adentro es un flex, para los elementos de afuera es un

5.2. DIRECCIÓN DE EJE (AXIS)

5.3. ALINEAR EN EJE (AXIS)

5.4. ALINEAR EN EJE SECUNDARIO (AXIS)

5.5. CAJA FLEX BOX

fle: grow shrink basic

5.6. DISEÑO DE UNA PÁGINA

<aside class="first">aside first</aside>

fle: grow shrink basic

5.7. MENÚ ANIMADO CON FLEX

6.3. Colores HLS

6.6. Ejercicio con Grid

transform: rotate(40deg) translateY(200px);

También podría gustarte

/se pueden usar ^ comodines (comienza con)/