CSS. Página 1/16 Introducción CSS <!DOCTYPE html> <html lang= es > <head> <link rel= stylesheet href= estilo.css > </head> p, span{ color: #FF0000; font-size:24px; Pseudoclases <div id= wrapper > <p class= mitexto1 >Mi texto1</p> <p class= mitexto2 >Mi texto2</p> <p class= mitexto3 >Mi texto3</p> <p class= mitexto4 >Mi texto4</p> </div> Atributo id #texto1 {font-size: 20px;. <p id= texto1 >Texto</p> p:nth-child(2) { background: #999999 Quiere decir el elemento hijo en la posicion 2 Atributo class.texto1 {font-size:20px;. <p.class= texto1 >Texto1</p> <p.class= texto1 >Texto2 </p> Si queremos sólo para determinados elementos: p.texto1 {font-size: 20 px; p:nth-child(odd){ background: #999999; p:nth-child(even){ background: #CCCCCC; even = par odd = impar :not(p){ 2margin: 0px; Se aplicaría la propiedad a los elementos distintos a p Los navegadores consideran a cada elemento HTML como una caja. Inicialmente el diseño web se hacía con tablas. Pero hoy en día, con div y CSS se pueden crear cajas de un tamaño determinado, definir bordes, etc CSS Colores #primero{ background-color:red #segundo{ background-color:rgb(0, 255, 0) #tercero{ background-color:#0000ff
CSS. Página 2/16 CSS Background-image Para especificar que la imagen de fondo esté fija (que no haga scroll con el resto de la página): background-attachment : fixed ; Bordes HTML: <p class="normal">normal border</p> <p class="round1">round border</p> CSS: p.normal { border-left: 6px solid red; background-color: lightgrey; p.round1 { border: 2px solid red; border-radius: 5px; Padding-margin-border.normal { width:150px; height:100px; padding: 25px; margin: 0 auto; border:5px solid #cacaca;
CSS. Página 3/16 Fonts HTML <h1>heading 1 (center)</h1> <h2>heading 2 (left)</h2> <h3>heading 3 (right)</h3> CSS body { color: blue; h1 { color: green; text-align: center; text-decoration: overline; h2 { text-align: left; text-decoration: line-through; h3 { text-align: right; text-decoration: underline; Links html <p><b><a href="default.asp" target="_blank">this is a link</a></b></p> css a:link { color: red; background-color: yellow; /* visited link */ a:visited { background-color: cyan; /* mouse over link */ a:hover { color: hotpink; background-color: lightgreen; /* selected link */ a:active {
CSS. Página 4/16 color: blue; background-color: hotpink; Link botón html <a href="default.asp" target="_blank">this is a link</a> css a:link, a:visited { background-color: #f44336; color: white; padding: 14px 25px; text-align: center; text-decoration: none; display: inline-block; a:hover, a:active { background-color: red; Tablas
CSS. Página 5/16 Modelos caja Código html <!DOCTYPE html> <html > <head> <meta charset="utf-8"> <title>a Pen by transistor47</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="caja_principal"> <header id="cabecera"> <h1>título principal</h1> <h2>subtítulo</h2> </header> <nav id="menu"> <ul> <li>inicio</li> <li>contacto</li> </ul> </nav> <section id="area_principal"> <article> <header> <hgroup> <h1>título primera entrada</h1> <h2>subtítulo de la primera entrada</h2> </hgroup> <time datetime="2013-01-02" pubdate>publicado</time> <footer> <p>comentarios</p> </footer> </article> </section> <aside id="barra_lateral"> <blockquote>artículo 1 </blockquote> <blockquote>artículo 2</blockquote> </aside> <footer id="pie"> Copyright </footer> </div> </body> </html> Código CSS h1{ font: bold 20px verdana, sans-serif; h2{ font: bold 14px verdana, sans-serif; body{ text-align: center; #caja_principal{ #area_principal{ float:left; width:660px; margin: 20px; #barra_lateral{ float: left; width:220px; margin:20 px 0px; padding: 20 px; background: #CCCCCC figcaption{ font: italic 14px verdana, sans-serif
CSS. Página 6/16 width: 960px; margin: 15px auto; text-align: left; #menu { background: #CCCCCC; padding: 5px 15px; #menu li { display: inline-block; list-style: none; padding: 5px; font: bold 14px verdana, sans-serif; #pie{ clear:both; padding: 20px; border-top: 2px solid #999999; article{ background:#fffbcc; border: 1px solid #999999; padding: 20px; margin-bottom:15px; article footer{ text-align: right; time{ color:#999999; ANOTACIÓN A Inicio Contador Si se usa display:inline-block aparece: Inicio Contador (en la misma línea y no en líneas separadas) ANOTACIÓN B Si se usa padding se deja un espacio entre el contenido y su alrededor Cajas flexibles La propiedad flex es una forma abreviada del uso de las propiedades flex-grow, flex-shrink y flex-basis.
CSS. Página 7/16 flex: flex-grow flex-shrink flex-basis auto initial inherit; flex-grow será un número que especificará como el elemento crecerá relativamente al resto de los elementos flexibles flex-shrink igual que el anterior pero en vez de crecer lo que hace es encoger flex-basis longitud del elemento Un contenedor flexible se define de la siguiente manera: #contenedor{ display: flex; Se va a usar el siguiente código HTML para todos los ejemplos de cajas flexibles: <section id="contenedor"> <div id="caja1">caja 1</div> <div id="caja2">caja 2</div> <div id="caja3">caja 3</div> <div id="caja4">caja 4</div> </section> Propiedad Flex display: flex; #caja1{ flex:1; #caja2{ flex:1; #caja3{ flex:1; #caja4{ flex:1; 600px(ancho)*1(flex bloque)/4(suma de los flex)=150 px display: flex;
CSS. Página 8/16 #caja1{ flex:2 #caja2{ flex:1; #caja3{ flex:1; #caja4{ flex:1; 600px (ancho contenedor)*2(su valor flex)/5(suma de todos los flex)= 240 px display: flex; #caja1{ flex:1 1 200px; #caja2{ flex:1 5 100px; #caja3{ flex:1 5 100px; #caja4{ flex:1 5 100px Los 3 parámetros de flex: flex-grow: relación de expansión flex-shrink: determina la proporción en que las cajas se reducirán para encajar en el espacio disponible flex-basis: primero se usa este valor (prioridad máxima) y después los valores de expansión y reducción display: flex; #caja1{ width: 200px; flex:1 1 auto; 100*1/4=25. Esta cantidad se sumará: width= 100 px + 25 = 125px
CSS. Página 9/16 #caja2{ width: 100px; flex:1 1 auto; #caja3{ width:100px; flex:1 1 auto; #caja4{ width:100px; flex:1 1 auto; display: flex; #caja1{ width: 100px; #caja2{ width: 100px; #caja3{ width:100px; #caja4{ width:100px; El espacio libre es de 200 px, que se dejan al final (justify-content). Daría el mismo resultado si se escribiese lo siguiente en el contenedor justify-content:flex-start; justify-content:flex-end; display: flex; justify-content:center;
CSS. Página 10/16 display: flex; justify-content:space-between; display: flex; justify-content:space-between; height:200px; #caja1{ width: 100px; height:100px; #caja2{ width: 100px; height:100px; #caja3{ width:100px; height:100px; #caja4{ width:100px; height:100px; display: flex; justify-content:space-between; height:200px; align-items: center;
CSS. Página 11/16 align-items: flex-start; align-items: flex-end; display: flex; justify-content:center; align-items: flex-end; flex-wrap:wrap; #caja1{ width: 100px; #caja2{ width: 100px; #caja3{ width:100px; #caja4{ flex:1 1 400px; flex-wrap:wrap; Es un contenedor de más de una línea align-content css display: flex; flex-wrap:wrap; height:200px;
CSS. Página 12/16 align-content:flex-start; #caja1{ flex: 1 1 100px; #caja2{ flex: 1 1 100px; #caja3{ flex: 1 1 100px; #caja4{ flex:1 1 400px; align-content:flex-start; align-content:center; align-content:stretch
CSS. Página 13/16 align-content:stretch; Floating
CSS. Página 14/16
CSS. Página 15/16 CSS3 HTML <header id="contenedor"> <span id="titulo">css3 Y HTML5 </span> </header> CSS body{ #contenedor{ display:block; width:500px; margin: 50px auto; border: 1px solid #999999; padding:15px; #titulo{ font: bold 36px verdana, sans-serif; Texto CSS
#contenedor{ display:block; width:500px; margin: 50px auto; border: 1px solid #999999; padding:15px; #titulo{ font: bold 36px verdana, sans-serif; color:blue; text-align: justify; text-decoration: underline; text-shadow:0 0 3px #FF0000, 0 0 5px #0000FF; CSS. Página 16/16