Está en la página 1de 16

INVESTIGACIÓN CSS

PROGRAMACIÓN WEB
8° “A”
INTEGRANTES: BRISEIDA NAJERA VISOSO, DANIEL SALDAÑA
XELHUANTZI, RICARDO CORONA ALONSO, YAZMIN REYES TEOYOTL
Programación Web

Contenido
Significado de CSS ................................................................................................................. 2
Historia .................................................................................................................................... 2
Niveles................................................................................................................................. 2
CSS1................................................................................................................................ 2
CSS2................................................................................................................................ 2
CSS 2.1 ........................................................................................................................... 3
CSS3................................................................................................................................ 3
Sintaxis.................................................................................................................................... 3
Propiedades ........................................................................................................................ 4
Ejemplos ................................................................................................................................11
Referencias ............................................................................................................................14
Programación Web

Significado de CSS
Las siglas de CSS son “Cascade Style Sheet”, en español hojas de estilo en
cascada. CSS es un lenguaje que nos permite otorgar atributos a los elementos de
los documentos realizados en HTML; CSS permite realizar una separación del
diseño (formato y estilos) de los contenidos de las páginas web.1

Historia
Con la expansión de internet, y el crecimiento del lenguaje HTML, surgieron varios
tipos de navegadores y con ellos, la dificultad de visualizar un sitio web con la misma
apariencia en todos ellos. El organismo W3C (World Wide Web Consorcium),
organismo encargado de crear los estándares relacionados con la web, propuso la
creación de un lenguaje de hojas de estilos específico para HTML y, de las 9
propuestas que fueron presentadas, se eligieron dos: la CHSS (Cascading HTML
Style Sheets) y la SSP (Stream-based Style Sheet Proposal). Los dos responsables
de cada propuesta, se unieron para definir uno común escogiendo lo mejor de cada
uno, y así fue como, entre 1994 y 1995 nació lo que hoy conocemos como CSS.
Niveles
CSS se ha creado en varios niveles y perfiles. Cada nivel se construye sobre el
anterior, generalmente añadiendo funciones al previo. Los perfiles son,
generalmente, parte de uno o varios niveles de CSS definidos para un dispositivo o
interfaz particular.
CSS1
La primera especificación oficial de CSS, recomendada por la W3C fue CSS1,
publicada en diciembre 1995 y abandonada en abril de 2008. Algunas de las
funcionalidades que ofrece son:

 Propiedades de las fuentes, como tipo, tamaño, énfasis...


 Color de texto, fondos, bordes u otros elementos.
 Atributos del texto, como espaciado entre palabras, letras, líneas, etcétera.
 Alineación de textos, imágenes, tablas u otros.
 Propiedades de caja, como margen, borde, relleno o espaciado.
 Propiedades de identificación y presentación de listas.
CSS2
La especificación CSS2 fue desarrollada por la W3C y publicada como
recomendación en mayo de 1998, y abandonada en abril de 2008. Como ampliación
de CSS1, se ofrecieron, entre otras las funcionalidades propias de las capas (<div>)
como de posicionamiento relativo/absoluto/fijo, niveles (z-index), etcétera, soporte
para las hojas de estilo auditivas, texto bidireccional, sombras, etcétera.
Programación Web

CSS 2.1
La primera revisión de CSS2, usualmente conocida como "CSS 2.1", corrige
algunos errores encontrados en CSS2, elimina funcionalidades poco soportadas o
inoperables en los navegadores y añade alguna nueva especificación.
CSS2.1 tuvo el estatus de "candidato" (candidate recommendation) durante varios
años, pero la propuesta fue rechazada en junio de 2005; en junio de 2007 fue
propuesta una nueva versión candidata, y está actualizada en 2009, pero en
diciembre de 2010 fue nuevamente rechazada. En abril de 2011, CSS 2.1 volvió a
ser propuesta como candidata y después de ser revisada por el W3C Advisory
Committee, fue finalmente publicada como recomendación oficial el 7 de junio de
2011.
CSS3
CSS3 está dividida en varios documentos separados, llamados "módulos". Cada
módulo añade nuevas funcionalidades a las definidas en CSS2, de manera que se
preservan las anteriores para mantener la compatibilidad. Los primeros borradores
de CSS3 fueron liberados en junio de 1999.
Debido a la modularización del CSS3, diferentes módulos pueden encontrarse en
diferentes estados de su desarrollo, de forma que, a fechas de noviembre de 2011,
hay alrededor de cincuenta módulos publicados, tres de ellos se convirtieron en
recomendaciones oficiales de la W3C en 2011: "Selectores", "Espacios de nombres"
y "Color". Algunos módulos, como "Fondos y colores", "Consultas de medios" o
"Diseños multi- columna" están en fase de "candidatos", y considerados como
razonablemente estables, a finales de 2011, y sus implementaciones en los
diferentes navegadores son señaladas con los prefijos del motor del mismo.

Sintaxis
Para explicar más fácil la sintaxis de un CSS se dará el ejemplo de cambiar el fondo
a negro.
Primero que nada se define la hoja de estilos, después se definirá un selector que
es la referencia que se le aplicara solo a una parte del HTML y que en este estarán
las instrucciones al que se le aplicara al HTML, en este caso se usara uno con el
nombre body en donde se hará la instrucción, otra parte importante de un CSS son
las sentencias en el cual está formada de una propiedad por ejemplo color y estará
seguida de dos puntos de indica que será modificado, se le agregara un valor en
este caso va hacer hexadecimal ya que es un color y se cierra con un punto y coma.2
Estas instrucciones tienen la siguiente coherencia y sintaxis:
Programación Web

Propiedades
Fuente

Propiedad Valor Descripción


font-family Fuente específica (Arial, Define uno o más nombres de fuentes o familias
Times, Verdana) de fuentes. Si se definen múltiples fuentes, se
Familia (serif, sans-serif, utilizará la primera que se encuentre en el
fantasy, monospace, sistema del usuario.
cursive)
font-style normal, italic, oblique Define el estilo de la escritura
font- lighter, normal, bold o Define el grosor de la fuente
weight bolder. Valor numérico
(100, 200, 300, 400, 500,
600, 700, 800, 900)
font-size xx-small, x-small, small, Define el tamaño de la fuente
medium, large, x-large,
xx-large Tamaño en
puntos (pt), cm, %
font- normal, small-caps Define una variante (mayúsculas chicas)
variant
Font font: Verdana, Arial, bold Acceso directo a todas las propiedades
italic 8px;
Textos y párrafos

Propiedad Valor Descripción


Color "#RRGGBB" Define el color del texto
line-height line-height: 12pt; Define el espacio entre
las líneas
text-align left, center, right o justify Define la alineación del
texto
text-indent text-indent: 5px; Define la sangría
text- blink (parpadeo), underline (subrayado), line- Define la decoración
decoration through (tachado), overline (línea sobre el
texto) o none (sin decoración)
Programación Web

text- text-shadow: 1px 2px 4px black; Define una sombra


shadow paralela del texto y
representa,
respectivamente, la
sombra hacia la derecha,
hacia abajo, radio de
desenfoque y color.
text- uppercase (mayúscula), lowercase(minúscula) Define la capitalización
transform o capitalize (primea letra en mayúscula) del texto
white- normal (el texto continuará en la próxima línea), División de palabras
space pre (el texto aparecerá con los espacios en
blanco que se ingresaron), nowrap (el texto no
continuará)
word- word-spacing: 6px; Define cuánto espacio
spacing insertar entre las palabras
width en puntos (pts), pulgadas ("), centímetros, Define el ancho de un
píxeles (px) o en % texto o una imagen
height en puntos (pts), pulgadas ("), centímetros, Define la altura de un
píxeles (px) o en % texto o una imagen
Colores de fondo

Propiedad Valor Descripción


background- "#RRGGBB" Define el color de fondo
color
background- url(http://url) Define la imagen de fondo
image
background- repeat, repeat-x, Define cómo se repite la imagen de fondo
repeat repeat-y, no-repeat
background- scroll, fixed Especifica si la imagen de fondo se quedará
attachment en su lugar cuando la pantalla se desplace
background- top, middle, bottom, Posiciona la imagen con respecto a la esquina
position left, center o right superior izquierda
Background background: Acceso directo a las propiedades de fondo
url(test.jpg) fixed
repeat;
Márgenes

Propiedad Ejemplo Descripción


margin-top margin-top: 5px; Valor del margen superior
margin-right margin-right: 0.5em; Valor del margen derecho
margin- margin-bottom: 2pt; Valor del margen inferior
bottom
margin-left margin-left: 0; Valor del margen izquierdo
Margin margin: 5px 0.5em 2pt Acceso directo a las propiedades de márgenes
0;
Bordes
Programación Web

Propiedad Valor Descripción


border[-top - en puntos (pts), pulgadas ("), Grosor del borde (para la ubicación
left -bottom - centímetros, píxeles (px) o en % dada)
right]-width
border[-top - border-left-color: #RRGGBB; Color del borde (para la ubicación
left -bottom - dada)
right]-color
border[-top - solid (sólido), dashed (con Estilo del borde (para la ubicación
left -bottom - trazos), dotted (con dada)
right]-style puntos), double (dos líneas)
o ridge(tridimensional)
border- collapse Agrega o elimina el efecto "3D"
collapse separate
Border border: 1px 0 0 2px dotted green; Acceso directo global a las
propiedades de bordes
Relleno

Propiedad Valor Descripción


padding-top padding-top: 3px; Relleno entre el elemento y el borde superior
padding-right padding-right: 0.25em; Relleno entre el elemento y el borde derecho
padding- padding-bottom: 0; Relleno entre el elemento y el borde inferior
bottom
padding-left padding-left: 2pt; Relleno entre el elemento y el borde izquierdo
padding padding: 3px 0.25em 0 Acceso directo a las propiedades de relleno
2pt;
Tablas

Propiedad Valor Descripción


border- separate o collapse Combina los bordes de las celdas
collapse (collapse), no los combina (separate)
border- border-spacing: 4px; Espacio de las celdas
spacing
caption- top, bottom, left o right Ubica la leyenda de la tabla
side
empty- show o collapse Muestra (show) u oculta (collapse) las
cells celdas vacías
table- fixed (independiente del Ancho fijo o variable
layout contenido de la celda)
o auto(depende del contenido
de la celda)
speak- always (siempre antes de cada Propiedad destinada para los ciegos y
headers celda) o once (sólo una vez) minusválidos visuales que indica cómo
actúa el sonido al leer las celdas de
encabezado de las tablas
Programación Web

Listas

Propiedad Valor Descripción


list-style-type decimal, upper-roman, lower-latin, Tipo de viñetas y numeración
disc, circle, square o none
list-style- list-style-image: url(image.png); Personaliza las viñetas con una
image imagen
list-style- inside o outside Especifica la sangría de las
position viñetas
list-style Acceso directo a las propiedades
de lista
Presentación de la página

Propiedad Valor Descripción


@page @page(size: portrait) Define la presentación de impresión
size auto, landscape o Formato de impresión
portrait
margin-top margin-top: 3 cm; Margen superior
margin- margin-right: 1,5 cm; Margen derecho
right
margin- margin-bottom: 1 cm; Margen inferior
bottom
margin-left margin-left: 2 cm; Margen izquierdo
marks crop (marcas de Marcas de recorte y marcas cruzadas
recorte), cross
(marcas cruzadas),
none (sin marcas)
page- Always, avoid Inserta un salto de página antes de un elemento
break-
before
page- Always, avoid Inserta un salto de página después de un
break-after elemento
orphans orphans: 2; Evita que haya líneas huérfanas al final de una
página. Define la cantidad mínima de líneas de un
elemento que quedan en la parte inferior de una
página antes del salto de página.
widows widows: 1; Evita que haya líneas viudas al final de una
página. Define la cantidad mínima de líneas de un
elemento que quedan en la parte superior de una
página después de un salto de página.

Tamaño

Propiedad Valor Descripción

width auto | distancia | porcentaje anchura


Programación Web

min-width distancia | porcentaje anchura mínima

max-width distancia | porcentaje anchura máxima

height auto | distancia | porcentaje altura

min-height distancia | porcentaje altura mínima

max-height distancia | porcentaje anchura máxima

overflow auto | hidden | scroll | visible si el contenido desborda al elemento

Posición

Propiedad Valor Descripción

display none | block | compact(-) | inline | inline- tipo de caja


block(+) | inline-table | list-item | marker(-) | run-
in | table | table-caption | table-cell | table-
column | table-column-group | table-footer-
group | table-header-group | table-row | table-
row-group

float none | left | right modo de posicionamiento


flotante

clear none | both | left | right lado en el que no puede


haber elementos flotantes

position absolute | fixed | relative | static modo de posicionamiento

top auto | distancia | porcentaje posición del borde superior


del elemento

right auto | distancia | porcentaje posición del borde derecho


del elemento

bottom auto | distancia | porcentaje posición del borde inferior


del elemento

left auto | distancia | porcentaje posición del borde


izquierdo del elemento
Programación Web

Clip auto | forma recorta el elemento

Visibility hidden | collapse | visible visibilidad

z-index auto | número-entero apilamiento

Interfaces de Usuario

Propiedad Valor Descripción

cursor [uri,]* | auto | crosshair | default | h tipo de cursor


elp | move | pointer | progress | n-
resize | ne-resize | e-resize | se-
resize | s-resize | sw-resize | w-
resize | nw-resize | text | wait

outline outline-color || outline-width || cuatro bordes simultáneamente


outline-style

outline- Color color de los bordes


color

outline- border-width grosor de los bordes


width

outline- border-style estilos de los bordes


style

Pseudo-elementos

Propiedad Valor Descripción

:after content: contenido inserta contenido después


del elemento

:before content: contenido inserta contenido antes del


elemento

:first-letter primera letra

:first:line primera línea de texto


Programación Web

content normal(+) | none(+) | [ texto | uri | contador | contenido generado


attr(atributo) | open-quote | close-
quote | no-open-quote | no-close-quote ]+

counter- none | [ identificador número-entero? ]+ incremento de contador


increment

counter- none | [ identificador número-entero? ]+ puesto a cero de contador


reset

quotes none | [ texto-apertura texto-cierre ]+ comillas

Pseudo-clases

Propiedad Valor Descripción

:active cuando se hace clic sobre el elemento

:first-child primer elemento hijo

:focus cuando el elemento tiene el foco

:hover cuando el ratón pasa sobre el elemento

:lang :lang(en) | :lang(es) | :lang(fr) idioma


etc.

:link enlaces no visitados

:visited enlaces ya visitados


Programación Web

Ejemplos
Texto con decoraciones3

Menú y galería de imágenes tipo slide


Programación Web

Simulador de frames (marcos)


Programación Web

Estilos en línea
Programación Web

Estilos internos

Estilos externos

Referencias
1 Enrique E. Condor Tinoco, Iván Soria Solís. (2014). CSS. En Programación Web
con CSS, JavaScript, PHP y AJAX (250 páginas). Perú: Editor Iván Soria Solís.
Ralph G. Schulz. (2008). Fundamentos CSS. En Diseño web con CSS (304
páginas). España: Marcombo.
Programación Web

2 IES Abastos de Valencia (España). (2016). Lista de propiedades CSS 3. 2017, de


IES Abastos de Valencia (España) Sitio web:
http://www.mclibre.org/consultar/amaya/css/css3_propiedades.html
IES Abastos de Valencia (España). (2016). Lista de propiedades CSS estables.
2017, de IES Abastos de Valencia (España) Sitio web:
http://www.mclibre.org/consultar/amaya/css/css_propiedades.htmlhttp://www.mclib
re.org/consultar/amaya/css/css_propiedades.html
3 Condor E., & Soria I. (2016). CSS. En Programación Web con CSS, JavaScript,
PHP y AJAX (p.33). España: Primera Edición.
Fernández A. (2010). Menú y galería de imágenes tipo slide con CSS y HTML. mayo
04, 2017, de lawebera.es Sitio web: http://www.lawebera.es/como -hacer/ejemplos-
css/menu-y-galeria-imagenes-slide-css-html.php
Fernández A. (2010). Simular frames (marcos) con HTML y CSS. mayo 04, 2017,
de lawebera.es Sitio web: http://www.lawebera.es/como -hacer/ejemplos-
css/simular-frames-marcos-con-html-y-css.php

También podría gustarte