Guia CSS3

CSS3
DESARROLLO
CSS
CSS es un lenguaje de hojas de estilo que se utiliza para controlar el aspecto de un documento HTML.
CSS describe cmo deben mostrarse los elementos HTML en el navegador, en el papel o en otros
medios. Color, tamao y tipo de letra del texto, separacin horizontal y vertical entre elementos,
posicin de cada elemento dentro de la pgina, etc.
Ejemplo :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo css</title>
<link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
<h1>Desarrollo Web</h1>
<p>Ejemplo utilizando css</p>
<ul>
<li>Buenos Das</li>
<li>Buenas Noches</li>
</ul>
</body>
</html>
Y nuestro archivo css estilos.css
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}p
{
color: red;
}
li {
text-decoration: underline;
color: green;
}
Combinando estos dos se producir el siguiente resultado:

Sintaxis CSS
El cdigo CSS es un lenguaje declarativo, por lo que es muy fcil de entender, su sintaxis permite
comprender el cdigo css de manera muy sencilla adems permite cometer errores sin que afecte todo
el cdigo. En la Figura 1 se muestra un esquema de una regla css la cual consiste en un selector y un
bloque de declaracin.
Figura 1. Recuperado de http://www.tutorialhtml.net/manualCSS/css-sintaxis.php
Cada regla est constituida por uno o ms "selectores", una llave de apertura , otra parte
llamada "declaracin" y por ltimo, una "llave de cierre".
Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS.
Declaracin: especifica los estilos que se aplican a los elementos. Est compuesta por una o
ms propiedades CSS.
Propiedad: caracterstica que se modifica en el elemento seleccionado, como por ejemplo su

tamao de letra, su color de fondo, etc.
Valor: establece el nuevo valor de la caracterstica modificada en el elemento.

Ejemplo:
Selector
Propiedad Valor
Separador de declaraciones
h1 {
color: blue;
Regla css background-color: yellow;
border: 1px solid black;
}
Selectores y Propiedades
Los selectores CSS se usan para buscar o seleccionar elementos HTML ya sean por el nombre del
elemento, id, o clase y las propiedades CSS son las que nos permiten personalizar los sitios, darles
ciertas caractersticas especiales, ajustar cada detalle de una pgina web.
El selector de elementos
El selector de elementos selecciona elementos basados en el nombre del elemento.
Ejemplo:
Tenemos la etiqueta <p> en nuestro documento HTML:
<p>Ejemplo utilizando css</p>
<p>hola mundo</p>
Puede seleccionar todos los elementos <p> en una pgina como sta (en este caso, todos los elementos
<p> estarn alineados en el centro, con un color de texto rojo):
p {
text-align: center;
color: red;
}
El selector de ID
El selector id utiliza el atributo id de un elemento HTML para seleccionar un elemento especfico.

El id de un elemento debe ser nico dentro de una pgina, por lo que el selector id se utiliza para
seleccionar un elemento nico. Para seleccionar un elemento con un identificador especfico, escriba
un carcter hash (#) seguido del id del elemento.
Ejemplo. Tenemos el siguiente elemento HTML con el atributo id:
<h1 id="titulo1" >Desarrollo Web</h1>

La regla de estilo siguiente se aplicar al elemento HTML con id = "titulo1":
#titulo1 {
text-align: center;
color: blue;
}
El selector de clases
El selector de clases selecciona elementos con un atributo de clase especfico. Para seleccionar
elementos con una clase especfica, escriba un carcter de punto (.) Seguido del nombre de la clase.
Ejemplo, Tenemos el siguiente elemento HTML con el atributo clase:
<h1 clase="titulos" >Desarrollo Web</h1>
En el ejemplo siguiente, todos los elementos HTML con class = "titulos" estarn en azul y alineados
en el centro:
#titulos {
text-align: center;
color: blue;
}
Seleccionadores de agrupamiento
Si tenemos varios elementos con las mismas reglas css, como esto :
h1 {
text-align: center;
color: green;
}
h2 {
text-align: center;
color: green;
}
p {
text-align: center;
color: green;
}
En este caso es mejor agrupar los selectores, para minimizar el cdigo. Para agrupar selectores, separe
cada selector con una coma. Como se muestra a continuacin:
h1, h2, p {
text-align: center;
color: green;
}
Modelo de cajas
Cuando insertamos una etiqueta HTML el navegador crea una nueva caja rectangular que encierra el
contenido de ese elemento. Por cada etiqueta automticamente se crea una caja. En la figura 2 muestra
las tres cajas rectangulares que crean las tres etiquetas HTML que incluye la pgina:
Figura 2. Recuperado de http://librosweb.es/img/css/f0402.gif
Como mencionamos anteriormente el navegador crean y colocan las cajas de forma automtica, pero
utilizando CSS se puede modificar todas sus caractersticas. Por cada etiqueta el navegador crea algo
como lo que vemos en la figura 2:
Figura 2
Contenido :El contenido del cuadro, donde aparecen texto e imgenes
Padding: Borra un rea alrededor del contenido. El relleno es transparente
Border: Un borde que rodea al relleno y el contenido
Margen: borra un rea fuera de la frontera. El margen es transparente
El modelo de caja nos permite agregar un borde alrededor de los elementos, y definir el espacio entre
los elementos.
Ejemplo:
h1 {
width: 300px;
border: 15px solid green;
padding: 5px;
margin: 20px;
}
Resultado:
Para poder entender mejor observemos la siguiente imagen. De esta manera quedara nuestra caja de
modelos para el elemento del ejemplo anterior.
Border
CSS permite modificar el aspecto de cada uno de los cuatro bordes de la caja de un elemento. Para
cada borde CSS le permiten especificar el estilo, el ancho y el color del borde, borde redondeados, si
queremos que nuestro borde sea una imagen etc.
Estilo: La propiedad border-style especifica qu tipo de borde mostrar.
Valor Descripcin
dotted Define un borde punteado
dashed Define un borde discontinuo
solid Define una frontera slida
double Define un borde doble
groove Define un borde acanalado en 3D. El efecto depende del valor
del color del borde
ridge Define un borde estriado en 3D. El efecto depende del valor
del color del borde
inset Define un borde de insercin 3D. El efecto depende del valor
del color del borde
outset Define un borde de inicio 3D. El efecto depende del valor del
color del borde
none No define frontera
hidden Define un borde oculto
Ejemplo:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p class="dotted">Hola Mundo</p>
<p class="dashed">Hola Mundo</p>
<p class="solid">Hola Mundo</p>
<p class="double">Hola Mundo</p>
<p class="groove">Hola Mundo</p>
<p class="ridge">Hola Mundo</p>
<p class="inset">Hola Mundo</p>
<p class="outset">Hola Mundo</p>
<p class="none">Hola Mundo</p>
<p class="hidden">Hola Mundo</p>
<p class="mescla">Hola Mundo</p>
</body>
</html>
Y nuestro estilo.css
.dotted {border-style: dotted;}
.dashed {border-style: dashed;}
.solid {border-style: solid;}
.double {border-style: double;}
.groove {border-style: groove;}
.ridge {border-style: ridge;}
.inset {border-style: inset;}
.outset {border-style: outset;}
.none {border-style: none;}
.hidden {border-style: hidden;}
.mescla {border-style: dotted dashed solid double;}
Resultado:
Anchura: la propiedad border-width establece el ancho de los cuatro bordes de un elemento.
Esta propiedad puede tener de uno a cuatro valores. El ancho se puede establecer como una
unidad de medida como pixeles, porcentaje o utilizando uno de los tres valores predefinidos:
delgado, medio o grueso.
Ejemplo :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p class="probando">hola universo</p>
</body>
</html>
Y nuestro estilo.css
.probando{
border-style: solid;
border-width: 5px;
}
Resultado:
La border-width propiedad puede tener de uno a cuatro valores (para el borde superior, el
borde derecho, el borde inferior y el borde izquierdo).
.probando{
border-width: 5px 0px 3px 2px;
}
Color: La border-color propiedad se utiliza para establecer el color de los cuatro bordes. El
color lo podemos establecer mediante el nombre, valor hexadecimal y RGB
Ejemplo:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Nuestro estilo.css
.probando{
border-color: blue;
}
Resultado:
La propiedad border-color puede tener de uno a cuatro valores (para el borde superior, el borde
derecho, el borde inferior y el borde izquierdo).
.probando{
border-color: blue red yellow green;
}
Bordes redondeados: La propiedad border-radius se utiliza para agregar esquinas
redondeadas a un elemento. Si especifica slo un valor para la propiedad border-radius, este
radio se aplicar a las 4 esquinas.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Nuestro estilo.css
p {
border-radius: 5px;
}
Resultado:
Es posible especificar cada que esquina queremos redondear por separado si se desea.
p {
border-radius: 10px 0px 10px 0px;
}
Marguen (margin)
CSS define cuatro propiedades para controlar los mrgenes horizontales y verticales de un elemento.
estas propiedades son:
- margin-top
- margin-right
- margin-bottom
- margin-left
Cada una de las propiedades establece la separacin entre el borde lateral de la caja y el resto de cajas
adyacentes, como se muestra en la figura 3.
Figura 3. Recuperado de
http://librosweb.es/libro/css/capitulo_4/margen_y_relleno.html
Las unidades de medida son pixeles, porcentaje y em. Cada uno se utiliza segn sea el caso los pixeles
se utilizan cuando se requiere precisin, los em para hacer diseos que mantengan proporciones y los
porcentajes para crear diseos fluidos.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>hola mundo</p>
<p>hola cosmos</p>
</body>
</html>
Y ahora nuestro estilo.css
.probando{
margin-left: 100px;
}
Resultado:
Relleno (padding)
CSS define cuatro propiedades para controlar el padding o relleno tanto horizontales como verticales
de un elemento. estas propiedades son:
- padding-top
- padding-right
- padding-bottom
- padding-left
Cada una de las propiedades establece la separacin entre el borde lateral de la caja del elemento,
como se muestra en la figura 4.
Figura 3. Recuperado de
http://librosweb.es/libro/css/capitulo_4/margen_y_relleno.html
Las unidades de medida para el relleno padding pueden ser pixeles, porcentaje y em etc.
Posicionamiento
Como ya sabemos los navegadores crean un modelo por cada elemento HTML, pero tambin los
posiciona de manera automtica dentro de la pgina HTML. No obstante, CSS nos permite modificar
la posicin en la que se muestra cada caja.
El posicionamiento de una caja se establece mediante la propiedad position y puede tener los
siguientes valores:
static: es el posicionamiento normal o esttico que utilizan por defecto los navegadores para
mostrar los elementos de las pginas. En este posicionamiento, slo se tiene en cuenta si el
elemento es de bloque o en lnea, sus propiedades width y height y su contenido.
relative: conocido como posicionamiento relativo, desplaza una caja respecto de su posicin
original establecida mediante el posicionamiento normal. El desplazamiento de la caja se
controla con las propiedades top, right, bottom y left.
absolute: conocido como posicionamiento absoluto, la posicin de una caja se establece de

forma absoluta respecto de su elemento contenedor y el resto de elementos de la pgina
ignoran la nueva posicin del elemento.
fixed: conocido como posicionamiento fijo, convierte una caja en un elemento inamovible, de
forma que su posicin en la pantalla siempre es la misma independientemente del resto de
elementos e independientemente de si el usuario sube o baja la pgina en la ventana del
navegador.
Float
El posicionamiento de una caja tambin se puede establecer mediante otra propiedad muy usada
llamada float dicha propiedad puede tener los valores right, left y none.
Al utilizar la propiedad float en un elemento HTML, en este caso en un div, este se convierte en una
caja flotante, lo que significa que se desplaza hasta la zona ms a la izquierda o ms derecha
dependiendo al valor de la propiedad float.
Ejemplo:
.caja1{
width: 100px;
height: 50px;
margin: 4px;
}
.caja2{
width: 100px;
height: 50px;
margin: 4px;
}
.caja3{
width: 100px;
height: 50px;
margin: 4px;
}
float:right
.caja1{
width: 100px;
height: 50px;
margin: 4px;
}
.caja2{
width: 100px;
height: 50px;
margin: 4px;
float: right;
}
.caja3{
width: 100px;
height: 50px;
margin: 4px;
}
float:left
.caja1{
width: 100px;
height: 50px;
margin: 4px;
}
.caja2{
width: 100px;
height: 50px;
margin: 4px;
float: left;
}
.caja3{
width: 100px;
height: 50px;
margin: 4px;
}
En este ltimo ejemplo podemos que la caja
Maquetacin
La maquetacin es la distribucin de los elementos en una pgina web. La maquetacin de una pgina
web HTML5, se puede realizar utilizando las nuevas etiquetas que ya hemos visto (header, nav,
section, article y footer) pero por lo general para la maquetacin de las paginas estas etiquetas suelen
estar recogidas o envueltas por el elemento (<div>).
Anterior mente la maquetacin de las pginas web se realizaba utilizando tablas (<table>). Con esta
tcnica la creacin de pginas web se volva un tema muy tedioso adems el cdigo se volva
complejo de entender.
Actualmente, la maquetacin de las pginas y se realiza utilizando el elemento (<div>), tambin

conocido como caja o contenedor. La colocacin de estos contenedores se realiza a travs de CSS.
Esto permite, por ejemplo, que podamos pasar de un diseo con un men lateral a otro con el men en
la parte superior, slo cambiando la hoja de estilos.
A continuacin veremos un simple ejemplo de cmo maquetar nuestra pgina web.
Ejemplo:
A continuacin de muestra la estructura bsica de una pgina web la siguiente estructura :
En base a la anterior estructura y utilizando CSS para maquetacin, realizaremos la siguiente pgina
web.
Como podemos apreciar ,nuestra pgina web cuanta con una cabecera (header), una barra de
navegacin (nav), una seccin (section) , un aside y un pie de pgina (footer).
EJERCICIOS/ACTIVIDADES
Actividades planteadas a desarrollar en clase o individualmente

BIBLIOGRAFIA
https://www.w3schools.com/w3css/

Guia CSS3

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Guia CSS3

Загружено:

Авторское право:

Доступные форматы

CSS3

Y nuestro archivo css estilos.css

Combinando estos dos se producir el siguiente resultado:

Figura 1. Recuperado de http://www.tutorialhtml.net/manualCSS/css-sintaxis.php

Propiedad: caracterstica que se modifica en el elemento seleccionado, como por ejemplo su

Valor: establece el nuevo valor de la caracterstica modificada en el elemento.

El selector de elementos selecciona elementos basados en el nombre del elemento.

Tenemos la etiqueta <p> en nuestro documento HTML:

<p>Ejemplo utilizando css</p>

El selector id utiliza el atributo id de un elemento HTML para seleccionar un elemento especfico.

Ejemplo. Tenemos el siguiente elemento HTML con el atributo id:

<h1 id="titulo1" >Desarrollo Web</h1>

Ejemplo, Tenemos el siguiente elemento HTML con el atributo clase:

<h1 clase="titulos" >Desarrollo Web</h1>

Figura 2. Recuperado de http://librosweb.es/img/css/f0402.gif

Estilo: La propiedad border-style especifica qu tipo de borde mostrar.

<p class="probando">hola universo</p>

<p class="probando">hola universo</p>

<p class="probando">hola universo</p>

absolute: conocido como posicionamiento absoluto, la posicin de una caja se establece de

En este ltimo ejemplo podemos que la caja

Actualmente, la maquetacin de las pginas y se realiza utilizando el elemento (<div>), tambin

A continuacin veremos un simple ejemplo de cmo maquetar nuestra pgina web.

Actividades planteadas a desarrollar en clase o individualmente

Вам также может понравиться