Clase de CSS Parte 2

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

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;
}

h1 {
color: #8A8E27;
font-weight: normal;
font-family:Arial, Helvetica, sans-serif;
}
h2 {
color: #8A8E27;
}
h3 {
color: #8A8E27;
}
h1, h2, h3 {
color: #8A8E27;
font-family: Arial, Helvetica,
sans-serif;
}

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.

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>

Ejercicio
.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;;
}

<!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>DisWeb I</h1><hr>
<h2>Miercoles</h2><hr>
<h3>UniversidadTecnologica de Bolivar</h3><hr>
<p>Bienvenidos a la clase de DisWeb</p>
<div>
<p>Hoy estamos trabajando con CSS</p>
</div><hr>
</body>
</html>

.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>DisWeb I</h1><hr>
<h2>Miercoles</h2><hr>
<h3 class="aviso">UniversidadTecnologica 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>

Clase de CSS Parte 2

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Similaire à Clase de CSS Parte 2

Similaire à Clase de CSS Parte 2 (20)

Plus de Joaquin Lara Sierra

Plus de Joaquin Lara Sierra (20)

Dernier

Dernier (20)

Clase de CSS Parte 2