Lenguajes de programación HTML y CSS Parte 2. Formato con CSS
Clase de CSS Parte 2
Click here to load reader
-
Upload
joaquin-lara-sierra -
Category
Education
-
view
133 -
download
3
description
Transcript of Clase de CSS Parte 2
![Page 1: Clase de CSS Parte 2](https://reader038.fdocuments.net/reader038/viewer/2022100600/556cf7d6d8b42a3b128b4c0e/html5/thumbnails/1.jpg)
Taller en clase
CSS
![Page 2: Clase de CSS Parte 2](https://reader038.fdocuments.net/reader038/viewer/2022100600/556cf7d6d8b42a3b128b4c0e/html5/thumbnails/2.jpg)
Selectores
una regla de CSS está formada por una parte llamada "selector" y otra parte llamada "declaración".
Selectores básicos: Se utiliza para seleccionar todos los elementos de la página. El selector universal
se indica mediante un asterisco (*).
* { margin: 0; padding: 0; }
Margen
Relleno
![Page 3: Clase de CSS Parte 2](https://reader038.fdocuments.net/reader038/viewer/2022100600/556cf7d6d8b42a3b128b4c0e/html5/thumbnails/3.jpg)
Selector de tipo o etiqueta
Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor
del selector.
El siguiente ejemplo selecciona todos los párrafos de la página:
p { ... }
h1 { color: red; } h2 { color: blue; } p { color: black; }
![Page 4: Clase de CSS Parte 2](https://reader038.fdocuments.net/reader038/viewer/2022100600/556cf7d6d8b42a3b128b4c0e/html5/thumbnails/4.jpg)
h1 { color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
h2 { color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
h3 { color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
h1, h2, h3 { color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif; }
![Page 5: Clase de CSS Parte 2](https://reader038.fdocuments.net/reader038/viewer/2022100600/556cf7d6d8b42a3b128b4c0e/html5/thumbnails/5.jpg)
Selector descendente
Selecciona los elementos que se encuentran dentro de otros elementos. Un
elemento es descendiente de otro cuando se encuentra entre las etiquetas de
apertura y de cierre del otro elemento.
p span { color: red; } h1 span { color: blue; }
• Los elementos <span> que se encuentran dentro de un elemento <p> se muestran de color rojo.
• Los elementos <span> que se encuentran dentro de un elemento <h1> se muestran de color azul.
• El resto de elementos <span> de la página, se muestran con el color por defecto aplicado por el navegador.
![Page 6: Clase de CSS Parte 2](https://reader038.fdocuments.net/reader038/viewer/2022100600/556cf7d6d8b42a3b128b4c0e/html5/thumbnails/6.jpg)
Selector de clase
.destacado { color: red; }
<body> <p class="destacado">Estudiantes de la UTB...</p> <p>Universidad Tecnológica de Bolívar...</p> <p>Diseño web I...</p> </body>
![Page 7: Clase de CSS Parte 2](https://reader038.fdocuments.net/reader038/viewer/2022100600/556cf7d6d8b42a3b128b4c0e/html5/thumbnails/7.jpg)
Ejercicio .destacado { color: red; }
.aviso {
padding: 2.5em;
border: 3px solid #98be10;
background: #f6feda;
}
.error {
color: #930;
font-weight: bold;
}
h1 {
color: red;
}
h2 {
color: blue;
}
p {
color: green;;
}
![Page 8: Clase de CSS Parte 2](https://reader038.fdocuments.net/reader038/viewer/2022100600/556cf7d6d8b42a3b128b4c0e/html5/thumbnails/8.jpg)
<!doctype html>
<html>
<head>
<title>Clase 2 de abril de 2014</title>
<link rel="stylesheet" type="text/css" href="micss.css" media="screen" />
</head>
<body>
<h1>Dis Web I</h1><hr>
<h2>Miercoles</h2><hr>
<h3>Universidad Tecnologica de Bolivar</h3><hr>
<p>Bienvenidos a la clase de DisWeb</p>
<div>
<p>Hoy estamos trabajando con CSS</p>
</div><hr>
</body>
</html>
![Page 9: Clase de CSS Parte 2](https://reader038.fdocuments.net/reader038/viewer/2022100600/556cf7d6d8b42a3b128b4c0e/html5/thumbnails/9.jpg)
.destacado { color: red; }
.aviso {
padding: 2.5em;
border: 3px solid #98be10;
background: #f6feda;
}
.error {
color: #930;
font-weight: bold;
}
.menu {
padding: 1.1em;
border: 1px solid #FE2E2E;
background: #DBA901;
}
h1 {
color: red;
}
ctype html>
<html>
<head>
<title>Clase 2 de abril de 2014</title>
<link rel="stylesheet" type="text/css" href="micss.css"
media="screen" />
</head>
<body>
<nav class="menu">
<button>Navegador</button>
<button>Facebook</button>
<button>Twitter</button>
</nav>
<h1>Dis Web I</h1><hr>
<h2>Miercoles</h2><hr>
<h3 class="aviso">Universidad Tecnologica de Bolivar</h3><hr>
<p>Bienvenidos a la clase de DisWeb</p>
<div>
<p class="destacado">Hoy estamos trabajando con CSS</p>
</div><hr>
</body>
</html>