Beruflich Dokumente
Kultur Dokumente
com
www.ceneinnova.com/eddyesanchez 1
Escuela Académica Profesional de
Ingeniería de Sistemas
INTRODUCCIÓN A CSS
EL MODELO DE CAJA
POSICIONAMIENTO DE ELEMENTOS
CRITERIOS DE CALIDAD.
Escuela Académica Profesional de
Ingeniería de Sistemas
Ejemplo
p {
color: red;
text-align: center;
}
Escuela Académica Profesional de
Ingeniería de Sistemas
<!DOCTYPE html>
<html>
El selector de elementos <head>
selecciona elementos <style>
p{
basados en el nombre del text-align: center;
elemento. color: red;
}
Puede seleccionar todos </style>
los elementos <p> en una </head>
página como esta (en este <body>
caso, todos los elementos <p>Cada párrafo se verá afectado por el estilo.</p>
<p> estarán alineados- <p id="para1">Yo también</p>
<p>Y tú</p>
centro, con un color rojo
texto): </body>
</html>
Escuela Académica Profesional de
Ingeniería de Sistemas
<!DOCTYPE html>
selecciona los elementos con
<html>
un atributo de clase <head>
específica. <style>
Para seleccionar elementos .center {
text-align: center;
con una clase específica, color: red;
escriba un punto (.), seguido }
del nombre de la clase. </style>
En el siguiente ejemplo, </head>
<body>
todos los elementos HTML <h1 class="center">Titulo Rojo y alineado al centro</h1>
con class = "centro" será de <p class="center">El parrafo rojo y alineado al centro.</p>
color rojo y alineado al </body> </html>
centro:
Escuela Académica Profesional de
Ingeniería de Sistemas
<!DOCTYPE html>
También puede <html>
especificar que los <head>
elementos HTML <style>
específicos p.center {
solamente deben text-align: center;
color: red;
verse afectadas por }
una clase. </style>
En el siguiente </head>
ejemplo, solamente <body>
<p> elementos con <h1 class="center">Esta rubrica no se vera afectada</h1>
<p class="center">El presente apartado sera de color rojo y alineado al centro.</p>
class = "centro" </body>
estarán alineados- </html>
centro:
Escuela Académica Profesional de
Ingeniería de Sistemas
<head>
<link rel="stylesheet" type="text/css" href="miestilo.css">
</head>
Escuela Académica Profesional de
Ingeniería de Sistemas
Un estilo en línea pierde muchas de las ventajas de una hoja de estilo (mediante la
mezcla de contenido con la presentación). Utilizar este método con moderación!
Escuela Académica Profesional de
Ingeniería de Sistemas
<!DOCTYPE html>
<html>
<body>
<h2>RGB Color Examples</h2>
<h2 style="background-color:rgb(255, 0, 0)">Color de fondo con rgb(255, 0, 0)</h2>
<h2 style="background-color:rgb(0, 255, 0)"> Color de fondo con rgb(0, 255, 0)</h2>
<h2 style="background-color:rgb(0, 0, 255)"> Color de fondo con rgb(0, 0, 255)</h2>
<h2 style="background-color:rgb(255, 165, 0)"> Color de fondo con rgb(255, 165, 0)</h2>
<h2 style="background-color:rgb(255, 255, 0)"> Color de fondo con rgb(255, 255, 0)</h2>
<h2 style="background-color:rgb(0, 255, 255)"> Color de fondo con rgb(0, 255, 255)</h2>
</body>
</html>
Escuela Académica Profesional de
Ingeniería de Sistemas
<!DOCTYPE html>
<html>
<body>
<h2>HEX Color Examples</h2>
<h2 style="background-color:#FF0000"> Color de fondo con #FF0000</h2>
<h2 style="background-color:#00FF00"> Color de fondo con #00FF00</h2>
<h2 style="background-color:#0000FF"> Color de fondo con #0000FF</h2>
<h2 style="background-color:#FFA500"> Color de fondo con #FFA500</h2>
<h2 style="background-color:#FFFF00"> Color de fondo con #FFFF00</h2>
<h2 style="background-color:#00FFFF"> Color de fondo con #00FFFF</h2>
</body>
</html>
Escuela Académica Profesional de
Ingeniería de Sistemas
<!DOCTYPE html>
<html> <body>
<head> <h2>Estilo de bordes - Propiedades</h2>
<style> <p>Que tipo de Borde desea Visualizar:</p>
p.dotted {border-style: dotted;} <p class="dotted">Un borde de puntos.</p>
p.dashed {border-style: dashed;} <p class="dashed">Un borde punteado.</p>
p.solid {border-style: solid;} <p class="solid">Un borde solido.</p>
p.double {border-style: double;} <p class="double">Un borde doble.</p>
p.groove {border-style: groove;} <p class="groove">Un borde Ranurado.</p>
p.ridge {border-style: ridge;} <p class="ridge">Un borde Cresta.</p>
p.inset {border-style: inset;} <p class="inset">Un borde recuadro.</p>
p.outset {border-style: outset;} <p class="outset">Un borde inicial.</p>
p.none {border-style: none;} <p class="none">Sin Borde.</p>
p.hidden {border-style: hidden;} <p class="hidden">Un borde oculto.</p>
p.mix {border-style: dotted dashed solid double;} <p class="mix">Un borde mixto.</p>
</style> </body>
</head> </html>
30
Escuela Académica Profesional de
Ingeniería de Sistemas
32
33
Escuela Académica Profesional de
Ingeniería de Sistemas
p{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
Escuela Académica Profesional de
Ingeniería de Sistemas
<!DOCTYPE html>
<html> Usando este estilo, también
<head> obtenemos lo mismo
<style> <style>
p{ p{
border-top-style: dotted; border-style: dotted solid;
border-right-style: solid; }
border-bottom-style: dotted; </style>
border-left-style: solid;
}
</style>
</head>
<body>
</body>
</html>
Escuela Académica Profesional de
Ingeniería de Sistemas
Property Description
Property Description
Property Description
Tener una navegación fácil de usar es importante para cualquier sitio web.
Con CSS se puede transformar menús HTML aburridas en barras de buen aspecto de
navegación.
Escuela Académica Profesional de
Ingeniería de Sistemas
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
<!DOCTYPE html> Escuela Académica Profesional de
<html> Ingeniería de Sistemas
<body>
<ul>
<li><a href="#home">INICIO</a></li>
<li><a href="#news">NOTICIAS</a></li>
<li><a href="#contact">CONTACTANOS</a></li>
<li><a href="#about">ACERCA DE</a></li>
</ul>
</body>
</html>
44
Escuela Académica Profesional de
Ingeniería de Sistemas
ul {
Crear una barra de list-style-type: none; margin: 0;
navegación vertical padding: 0; width: 200px;
básico con un color de background-color: #f1f1f1; }
li a {
fondo gris y cambiar el display: block; color: #000;
color de fondo de los padding: 8px 0 8px 16px;
enlaces cuando el text-decoration: none; }
usuario mueve el /* Change the link color on hover */
ratón sobre ellos: li a:hover {
background-color: #555; color: white; }
Escuela Académica Profesional de
<!DOCTYPE html> <body> Ingeniería de Sistemas
<html> <head> <style> <ul>
ul { list-style-type: none; margin: 0; <li><a class=“active” href="#home">INICIO</a></li>
padding: 0; overflow: hidden; <li><a href="#news">NOTICIAS</a></li>
background-color: #0066FF; } <li><a href="#contact">CONTACTO</a></li>
li { float: left; } <li><a href="#about">ACERCA DE</a></li>
li a { display: block; color: #000000; </ul>
text-align: center padding: 14px 16px; </body> </html>
font-size: 20px; text-decoration: none; }
li a:hover { background-color: #FFFF33; color: red; }
</style> </head>
46
Escuela Académica Profesional de
Ingeniería de Sistemas
Crear un menú ul {
desplegable que list-style-type: none; margin: 0;
permite al usuario padding: 0; width: 200px;
background-color: #f1f1f1; }
elegir una opción li a {
de una lista: display: block; color: #000;
padding: 8px 0 8px 16px;
text-decoration: none; }
/* Change the link color on hover */
li a:hover {
background-color: #555; color: white; }
<!DOCTYPE html> <div class="dropdown">
Escuela Académica Profesional de
<html> <head> <style> <buttonIngeniería
class="dropbtn">Desplegable</button>
de Sistemas
.dropbtn { background-color: #4CAF50; <div class="dropdown-content">
color: white; padding: 16px; font-size: 16px; <a href="#">Matricula</a>
border: none; cursor: pointer; } <a href="#">Notas</a>
.dropdown { position: relative; display: inline-block; } <a href="#">Reporte</a>
.dropdown-content { display: none; position: absolute; </div>
background-color: #f9f9f9; min-width: 160px; </div>
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } <p><strong>Nota:</strong> Utilizamos href="#" para los
.dropdown-content a { color: black; padding: 12px 16px; enlaces de texto. En un sitio web real esto sería URL.</p>
text-decoration: none; display: block; } </body> </html>
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content { display: block; }
.dropdown:hover .dropbtn {background-color: #3e8e41;
}
</style> </head>
<body>
<h2>MENU DESPLEGABLE</h2>
<p>MOVER EL PUNTERO DEL RATON, SOBRE EL BOTON
PARA ABRIR EL MENU DESPLEGABLE.</p>
48
Escuela Académica Profesional de
Ingeniería de Sistemas