Scribd
Cargar
11 vistas37 páginas

Css

Este documento explica los conceptos básicos de HTML5, CSS3 y los diferentes tipos de selectores en CSS como universal, de etiqueta, ID y clase. También describe las tres formas de aplicar estilos CSS a una página web.

Cargado por

al2222040166
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 PDF, TXT o lee en línea desde Scribd
11 vistas37 páginas

Css

Este documento explica los conceptos básicos de HTML5, CSS3 y los diferentes tipos de selectores en CSS como universal, de etiqueta, ID y clase. También describe las tres formas de aplicar estilos CSS a una página web.

Cargado por

al2222040166
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 PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 37

CSS 3

HTML 5 y CSS3
Las etiquetas semánticas (HTML5) no tienen un estilo
predeterminado que el navegador le vaya a asignar si no mas
bien estos son asignados a cada uno de los elementos del
documento HTML mediante el lenguaje CSS.

Las etiquetas semánticas no indican la forma como se deben


mostrar, sino el significado que tienen dentro del contexto del
documento. Por ello, todos los estilos y posicionamiento deben
fundamentarse el las CSS.
Definición
CSS
(Cascading Style Sheets)

Las hojas de estilo en cascada son un lenguaje empleado para


definir la estética o la presentación de una página web,
separando el contenido de la forma, es decir, el aspecto y
formato de un documento de la información que contiene,
manteniendo un control más preciso del aspecto de las
páginas.

Se genera a partir de un documento estructurado escrito en


HTML.
Historia
Ventajas y desventajas
Ventajas:
• Modifica la presentación de cada elemento sin modificar el código HTML,
ahorrando esfuerzo y tiempo de edición.
• Ofrece una amplia gama de herramientas de composición más potentes que
HTML.
• Evita recurrir a “trucos” para conseguir algunos efectos.
• Puede usarse con otros lenguajes de programación (por ejemplo JavaScript) para
conseguir efectos dinámicos en las páginas.
• Se pueden especificar Hojas de Estilo para distintos navegadores.
• Se pueden definir hojas de estilo para usuarios con alguna discapacidad,
obligando al navegador a suplantar el CSS del autor de la página.

Desventajas:
• El soporte irregular que tienen las CSS por parte de los navegadores.
• Pueden existir incompatibilidades con determinadas propiedades según el
navegador o plataforma que se utilice.
Soporte en browsers
Regla CSS
(estilos que se aplican a una parte de la página en una hoja de estilos CSS)
Selector: Indica el elemento o elementos HTML a los que se aplica la
regla CSS
Declaración: Especifica los estilos que se aplican a los elementos. Esta

Sintaxis CSS3
compuesta por una o mas propiedades CSS con sus valores.
Propiedad: Modifica el aspecto de una característica del elemento.

Valor: Indica el nuevo valor de la característica modificada en el


elemento.
Existen 3 maneras de aplicar un estilo CSS a una estructura
HTML:

Aplicación de un CSS
1. Estilos CSS en el mismo documento
(en documento .html)
2. Estilos CSS vinculados
(en documento .css)
3. Estilos en elementos particulares
(en etiqueta específica)
Estilos CSS en el mismo documento
(en documento .html)

Aplicación de un CSS
<!DOCTYPE html>
<html>
<head>
<title> Una página HTML 5 básica </title>

<style type="text/css">

#apDiv1 {
width: 900px;
height: 150px;
background-color: #FF0000;
}

</style>
</head>

<body>

<div id="apDiv1"> Esta es un bloque de contenido de la página.


</div>

</body>

</html>
Estilos CSS en el mismo documento
(en documento .html)

Aplicación de un CSS
Visualización en navegador
Estilos CSS vinculados
(en documento .css)

HTML

Aplicación de un CSS
<!DOCTYPE html>
<html>
<head>
<title> Una página HTML 5 básica </title>

<link href="estilos.css" rel="stylesheet" type="text/css">


</head>

<body>

<div id="apDiv1"> Esta es un bloque de contenido de la página.


</div>

</body>

</html>
Estilos CSS vinculados
(en documento .css)

CSS (estilos.css)

Aplicación de un CSS
@charset "utf-8";
/* CSS Document */

header {
width: 900px;
height: 150px;
background-color: #FF0000;
}

A diferencia de la aplicación anterior, este archivo CSS puede


compartirse con varios documentos HTML y asignarles las
misma propiedades.
Estilos CSS vinculados
(en documento .css)

Aplicación de un CSS
Visualización en navegador
Estilos CSS en etiquetas específicas
(en documento .html)

Aplicación de un CSS
<!DOCTYPE html>
<html>
<head>
<title> Una página HTML 5 básica </title>

</head>

<body>

<div id="apDiv1" style="width:900px; height:150px;


background-color:#FF0000">Esta es un bloque de contenido
de la página.
</div>

</body>

</html>
Estilos CSS en etiquetas específicas
(en documento .html)

Aplicación de un CSS
Visualización en navegador
Selectores
Para poder aplicar estilos CSS en una página web deben
emplearse reglas, selectores y declaraciones.
Cada regla consiste en uno o más selectores y un bloque de
declaración o estilo, dentro de los cuales se declaran las
propiedades con un valor.
Los estilos se aplican a los elementos que cumplan con el selector
que les precede.
En CSS existen diferentes selectores:

Selectores básicos
1. Selector Universal
2. Selector de tipo o etiqueta
3. Selector de ID (identificador)
4. Selector de clase
• Seudo clases
Selectores Universal
Se utiliza para seleccionar todos los elementos que contendrá la
página y se indica mediante un asterisco (*).
Sintaxis: *{ propiedad: valor;}

Ejemplo: (elimina el margen y el relleno de todos los elementos HTML)

En archivo.css

* {

margin: 0;

padding: 0;

}
Selectores Universal
Selectores de etiqueta
Se utiliza para seleccionar todos los elementos de la página web
cuya etiqueta HTML coincida con el valor del selector y para
utilizarlo solamente es necesario indicar el nombre de una
etiqueta (sin los caracteres < y >) correspondiente a los elementos
que se quieren seleccionar.
Sintaxis: Etiqueta html{ propiedad: valor;}

Ejemplo: (establece el estilo –color– de todos los títulos (h1) de la página)


En archivo.css

h1 {

color: red;

}
Selectores de etiqueta
Selectores de etiqueta
Se puede aplicar el mismo estilo a dos etiquetas diferentes,
encadenando en selectores múltiples, que incluyen todos los
selectores separados por una coma (,).
Sintaxis: Etiqueta html, Etiqueta html{ propiedad: valor;}

Ejemplo: (establece el estilo –color– de todos los títulos (h1, h2 y h3) de la página)
En archivo.css

h1, h2, h3 {

color: red;

}
Selectores de etiqueta
Selectores de etiqueta
Se pueden agrupar las propiedades comunes de varios elementos
en una única regla CSS y, posteriormente, definir las propiedades
específicas de esos mismos.

Ejemplo: (se establece primero las propiedades comunes de los títulos (h1, h2
y h3) y a continuación se establecen las propiedades particulares de cada uno de ellos)

En archivo.css

h1, h2, h3 {

color: #8A8E27;

h1 { font-size: 2em; }

h2 { font-size: 1.5em; }

h3 { font-size: 1.2em; }
Selectores de etiqueta
Se utiliza el selector identificador cuando se quiere aplicar un
estilo a un solo elemento en específico dentro del documento
HTML, no pudiéndose repetir en dos elementos diferentes del
mismo.
Sintaxis: #valorID{ propiedad: valor;} en archivo.css

Selectores ID
<etiqueta id=“valorID"> Texto </etiqueta> en archivo. html

Ejemplo: (el selector #destacado solamente selecciona el segundo párrafo – cuyo


atributo id es igual a destacado –).

En archivo.css
#destacado{

color: red;

En archivo.html

<p>Primer párrafo</p>

<p id="destacado">Segundo párrafo</p>

<p>Tercer párrafo</p>
Selectores ID
Se utiliza para aplicar estilo a diferentes elementos en una misma
página HTML marcados con el mismo valor del atributo class.
Sintaxis: .valorclass{ propiedad: valor;}

Selectores de clase
en archivo.css

<etiqueta class=“valorclass"> Texto </etiqueta> en archivo. html

Ejemplo: (el selector #destacado solamente selecciona el segundo párrafo – cuyo


atributo id es igual a destacado –).

En archivo.css

#destacado{

color: blue;

En archivo.html

<p class=“parrafo”>Primer párrafo</p>

<p>Segundo párrafo</p>

< p class=“parrafo”> Tercer párrafo</p>


Selectores de clase
Existen tres variantes de lenguaje CSS, de acuerdo a su
aplicación:

Normalizar
1. Estilos que aplica por default el browser a los documentos web
que visualiza.
2. Estilos que aplican los usuarios en sus browsers.
3. Estilos que aplica el diseñador a la página web.
Dado que aun no todos los atributos provistos por el CSS pueden
ser vistos en todos los navegadores, existen archivos para
normalizar las páginas web ̶ como lo es Normalize.css
(https://necolas.github.io/normalize.css/) ̶ el cual, vinculado como
hoja de estilo hace que los navegadores muestren todos los

Normalizar
elementos de forma más consistente y en línea con los estándares
modernos, dirigiéndose específicamente a los estilos que necesitan
normalización.
Normalizar
Existen varios tipos de medidas para escribir el tamaño o posición
de un elemento HTML:

1. Relativas (px, em, ex)

Medidas CSS
2. Absolutas (in, cm, ml, pt, pc)
3. Porcentuales (%)
Existen varias maneras de asignar color a un elemento HTML:

1. Con palabras reservadas


2. RGB decimal

Colores CSS
3. RGB hexadecimal
4. RGB porcentual
5. HSL
6. Con transparencia
Propiedades CSS
https://www.w3schools.com/css/default.asp
Conclusiones
Conclusiones
Sintaxis en CSS:

Colores CSS
1. Con palabras reservadas atributo: blue;

2. RGB decimal atributo: rgb (100,0,0);

3. RGB hexadecimal atributo: #55BB88; ó atributo: #5B8;

4. RGB porcentual atributo: rgb (50%,20%,75%);

5. HSL atributo: hsl (240, 20%,75%);

6. Con transparencia atributo: rgb (100,50,0,.5);

También podría gustarte