Scribd
Cargar
25 vistas9 páginas

Capitulo HTML y CSS

Cargado por

dg626438
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
25 vistas9 páginas

Capitulo HTML y CSS

Cargado por

dg626438
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 9

INTRODUCCIÓN AL DISEÑO WEB

USANDOHTML

Estilos HTML
- CS
S
CSS significa hojas de estilo en cascada.

CSS ahorra mucho trabajo. Permite controlar el diseño de varias páginas


web a la vez.

¿Qué es CSS?
Las hojas de estilo en cascada (CSS) se utilizan para dar formato al diseño
de una páginaweb.

¡Con CSS, puedes controlar el color, la fuente, el tamaño del texto, el


espaciado entre elementos, cómo se posicionan y disponen los elementos,
qué imágenes o colores de fondo se utilizarán, diferentes pantallas para
diferentes dispositivos y tamaños
de pantalla, y mucho más!

Consejo:La palabra "en cascada " significa que un estilo aplicado a un


elemento principal también se aplicará a todos los elementos secundarios
dentro del elemento principal. Por lo tanto, si establece el color del texto
del cuerpo en "azul", todos los encabezados, párrafos y otros elementos de
texto dentro del cuerpo también tendrán el mismo color (a menos que
especifique algo más).

Usando CSS
Se pueden añadir CSS a documentos HTML de tres maneras:

styleatributo dentro de elementos


• En línea: mediante el uso del
HTML

pág.1
INTRODUCCIÓN AL DISEÑO WEB
USANDOHTML

• <style
Interno: mediante el uso de un > elemento en
la <head>sección
<link> elemento para vincular a un
• Externo: mediante el uso de un
archivo CSS externo

La forma más común de agregar CSS es mantener los estilos


en archivos
CSS externos. Sin embargo, en este tutorial usaremos estilos internos y en
línea, porque es más fácil demostrarlo y para que puedas probarlo tú
mismo.

CSS en línea
Se utiliza un CSS en línea para aplicar un estilo único a un solo elemento
HTML.

Un CSS en línea utiliza style


el atributo de un elemento HTML.

El siguiente ejemplo establece el color del texto del


<h1>elemento en azul y
el color del texto del
<p>elemento en rojo:

Ejempl
o
<h1 style
="color:blue;"
>A Blue Heading
</h1>

<p style
="color:red
;">A red paragraph.
</p>

CSS interno
Se utiliza un CSS interno para definir un estilo para una sola página HTML.

Un CSS interno se define en<la


head> sección de una página HTML, dentro
de un<style
> elemento.

El siguiente ejemplo establece el color del


xtote
de TODOS
los <h1>elementos (en esa página) en azul y el color del texto de TODOS
los <p>elementos en rojo. Además, la página se mostrará con un color de
fondo "azul pálido":

pág. 2
INTRODUCCIÓN AL DISEÑO WEB USANDO HTML

Ejemplo
<!DOCTYPE html>
<html>

<head>
<style>
body {background-color:
powderblue;} h1 {color: blue;}
p {color: red;}
</style>
</head>

<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

CSS externo
Se utiliza una hoja de estilo externa para definir el estilo de muchas páginas
HTML.

Para utilizar una hoja de estilo externa, agregue un enlace a ella en la


<head>sección de cada página HTML:

Ejemplo
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>

pág. 43
INTRODUCCIÓN AL DISEÑO WEB
USANDOHTML

<p>This is a paragraph.
</p>

</body
>
</html
>

La hoja de estilo externa se puede escribir en cualquier editor de texto. El


archivo no debe contener código HTML y debe guardarse con extensión
.css.

Así es como se ve el archivo "styles.css":

"estilos.css"
:body {
background
-color
: powderblue
;
}
h1 {
color
: blue;
}
p{
color
: red;
}

Consejo:Con una hoja de estilo externa, puedes cambiar la apariencia de


un sitio web completo, ¡cambiando un archivo!

Colores, fuentes y tamaños CSS


Aquí, demostraremos algunas propiedades CSS
uso
decomún. Aprenderá
más sobre ellas más adelante.

La propiedad CSScolordefine el color del texto que se utilizará.

La propiedad CSSfont-familydefine la fuente que se utilizará.

La propiedad CSSfont-size define el tamaño del texto que se utilizará.

E emplo
jUso de las propiedades CSS color, font
- family y font
- size:
INTRODUCCIÓN AL DISEÑO WEB
USANDO HTML

<!DOCTYPEhtml>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana
;
font-size: 300%;
}
p {
color: red;
font-family: courier
;
font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading
</h1>
<p>This is a paragraph.
</p>

</body>
</html>

Borde CSS
La borderpropiedad CSS define un borde alrededor de un elemento HTML.

Consejo: puedes definir un borde para casi todos los elementos HTML.

Ejemplo
Uso de la propiedad deborde CSS:

p {
border
: 2px solid powderblue
;
}

Relleno CSS

pág. 6
pág. 7
INTRODUCCIÓN AL DISEÑO WEB
USANDOHTML

La padding
propiedad CSS define un relleno (espacio) entre el texto y el
borde.

Ejempl
o
Uso de propiedades de borde y relleno CSS:

p{
border
: 2px solid powderblue
;
padding
: 30px;
}

MargenCSS
La propiedad CSS define un margen (espacio) fuera del borde.
margin

Ejempl
o
Uso de propiedades de borde y margen CSS:

p{
border
: 2px solid powderblue
;
margin
: 50px;
}

Enlace a CSS externo


Se puede hacer referencia a las hojas de estilo externas
una
con
URL
completa o con una ruta relativa a la página web actual.

Ejempl
o
Este ejemplo utiliza una URL completa para vincular a una hoja de estilo:

<link rel="stylesheet"
href="https://www.w3schools.com/html/styles.cs
s">

Ejempl
o
Este ejemplo se vincula a una hoja de estilo ubicada en la carpeta html del
sitio web actual:

pág. 8
INTRODUCCIÓN AL DISEÑO WEB
USANDOHTML

<link rel="stylesheet"
href="/html/styles.css"
>

Ejemplo
Este ejemplo se vincula a una hoja de estilo ubicada en la misma carpeta
que la página actual:

<link rel="stylesheet"
href="styles.css"
>

Resumen del capítulo


• Style Utilice el atributo
HTML para el estilo en línea
• Utilice el elemento HTML <style> para definir CSS interno
• Utilice el elemento HTML <link> para hacer referencia a un archivo
CSS externo
• Utilice elelemento HTML<head> para almacenar elementos <style> y
<link>
• Utilice lacolorpropiedad CSS para los colores del texto
• Utilice lafont-familypropiedad CSS para fuentes de texto
• Utilice lafont-size propiedad CSS para tamaños de texto
• Utilice laborderpropiedad CSS para los bordes
• Utilice lapaddingpropiedad CSS para el espacio dentro del borde
• Utilice lamarginpropiedad CSS para el espacio fuera del borde

pág. 9

También podría gustarte