Nombre:
Alexandra Maguana
Ciclo: Quinto
“Sistemas”
Qué es CSS
CSS es un lenguaje para definir
el estilo o la apariencia de las páginas web, escritas con HTML o de los
documentos XML. CSS se creó para separar el contenido de la forma, a la vez que
permite a los diseñadores mantener un control mucho más preciso sobre la
apariencia de las páginas.
Con CSS 3, más control sobre la
forma
El
objetivo inicial de CSS, separar el contenido de la forma, se cumplió ya con
las primeras especificaciones del lenguaje. Sin embargo, el objetivo de ofrecer
un control total a los diseñadores sobre los elementos de la página ha sido más
difícil de cubrir. Las especificaciones anteriores del lenguaje tenían muchas
utilidades para aplicar estilos a las webs, pero los desarrolladores aun
continúan usando trucos diversos para conseguir efectos tan comunes o tan
deseados como los bordes redondeados o el sombreado de elementos en la página.
CSS 1 ya significó un avance considerable a la hora
de diseñar páginas web, aportando mucho mayor control de los elementos de la
página. Pero como todavía quedaron muchas otras cosas que los diseñadores
deseaban hacer, pero que CSS no permitía especificar, éstos debían hacer uso de
trucos para el diseño. Lo peor de esos trucos es que muchas veces implica
alterar el contenido de la página para incorporar nuevas etiquetas HTML que
permitan aplicar estilos de una manera más elaborada. Dada la necesidad de
cambiar el contenido, para alterar al diseño y hacer cosas que CSS no permitía,
se estaba dando al traste con alguno de los objetivos para los que CSS fue
creado, que era el separar por completo el contenido de la forma.
CSS 2 incorporó algunas novedades interesantes, que
hoy ya utilizamos habitualmente, pero CSS 3 todavía avanza un poco más en la
dirección, de aportar más control sobre los elementos de la página.
Así pues, la novedad más importante que aporta CSS
3, de cara a los desarrolladores de webs, consiste en la incorporación de
nuevos mecanismos para mantener un mayor control sobre el estilo con el que se
muestran los elementos de las páginas, sin tener que recurrir a trucos o hacks,
que a menudo complicaban el código de las web.
Propiedades nuevas en CSS 3
He aquí
una lista de las principales propiedades que son novedad en CSS3.
Bordes
- border-color
- border-image
- border-radius
- box-shadow
Fondos
- background-origin
- background-clip
- background-size
- hacer capas con múltiples imágenes de fondo
Color
- colores HSL
- colores HSLA
- colores RGBA
- Opacidad
Texto
- text-shadow
- text-overflow
- Rotura de palabras largas
- Web Fonts
Interfaz
- box-sizing
- resize
- outline
- nav-top, nav-right, nav-bottom, nav-left
Selectores
- Selectores por atributos
Modelo de
caja básico
Degradados
CSS3
- Degradados lineales
- Degradados radiales
- Degradados lineales de repetición
- Degradados radiales de repetición
Otros
- media queries
- creación de múltiples columnas de texto
- propiedades orientadas a discurso o lectura automática de páginas web
- animaciones CSS3
Parte de
este listado de nuevas propiedades de CSS 3 lo he sacado de: http://www.css3.info/preview/. Es un sitio en inglés, pero
puede estar bien visitar para ir conociendo más detalles sobre CSS 3. Sin
embargo, en ese sitio faltaban algunas cosas como los degradados o las
animaciones, por lo menos cuando lo visitamos, por lo que hemos completado para
la realización de este índice.
En futuros artículos ofreceremos algunas claves y
explicaciones sobre varias de estas propiedades, al menos las más interesantes,
así como ejemplos que sirvan para ir conociendo esta nueva especificación de
CSS. Todo ello lo iremos colocando en el Manual de CSS 3.
Como Trabajar con CSS
Puedes incluir CSS en un documento HTML de tres
formas:
- Incluir CSS dentro del documento HTML
- Incluir CSS en las etiquetas HTML
- Incluir CSS desde un archivo externo
Incluir CSS dentro del documento HTML
Para incluir CSS dentro del documento
HTML hacemos uso de la etiqueta <style>, la cual estara
incluida dentro de la etiqueta <head>. El inconveniente de definir
CSS dentro del mismo documento es que si ocupas un mismo estilo en diferentes
documentos HTML a la hora de que quieras realizar algun cambio tendras que
hacerlo en todos los documentos HTML.
Ejemplo:
<html>
<head>
<style type="text/css">
p { color: blue; font-size:15px; font-family:Arial; }
</style>
</head>
<body>
<p>Este es un parrafo </p>
</body>
</html>
<head>
<style type="text/css">
p { color: blue; font-size:15px; font-family:Arial; }
</style>
</head>
<body>
<p>Este es un parrafo </p>
</body>
</html>
Incluir CSS dentro de la etiqueta HTML
Se puede incluir CSS dentro de la misma etiqueta
html mediante el atributo style.
Ejemplo:
<html>
<head>
</head>
<body>
<p style="color: blue; font-size:15px; font-family:Arial;"> Este es un parrafo </p>
</body>
</html>
<head>
</head>
<body>
<p style="color: blue; font-size:15px; font-family:Arial;"> Este es un parrafo </p>
</body>
</html>
Incluir CSS desde un archivo externo
La otra forma de incluir CSS es definiendo en un
archivo todos los estilos que vayamos a ocupar y lo guardamos con la extension
.CSS, Una vez que tenemos el archivo creado lo enlazamos mediante la
etiqueta <link>
Ejemplo:
Archivo: estilo.css
Archivo: estilo.css
p { color: blue;
font-family:Arial;
font-size:15px;
}
<div id="container">
<div id="foo">
<p>Foo</p>
</div>
<div id="var">
<p>Var</p>
</div>
</div>
#container {
width: 500px;
display: -webkit-box; /* Indica que el contenedor usará el box model */
-webkit-box-orient: horizontal; /* Vertical */
border: 1px solid green;
}
#foo {
border: 1px solid red;
-webkit-box-flex: 1; /* El box es flexible */
}
#var {
-webkit-box-flex: 0; /* El box no es flexible */
border: 1px solid blue;
}
<div id="container">
<div id="foo">
<p>Foo</p>
</div>
<div id="var">
<p>Var</p>
</div>
</div>
#container {
width: 500px;
border: 4px solid green;
}
#foo {
width: 500px;
border: 4px solid red;
-webkit-box-sizing: content-box; /* El ancho es relativo al contenido,
es decir que la caja junto con los bordes miden 508px de ancho */
}
#var {
width: 500px;
border: 4px solid blue;
-webkit-box-sizing: border-box; /* El ancho es relativo al borde,
es decir que la caja junto con los bordes miden 500px de ancho (Por defecto) */
}
<div id="container">
<div id="foo">
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</div>
#container {
width: 500px;
border: 4px solid green;
}
#foo {
-webkit-column-count: 3; /* Número de columnas */
-webkit-column-width: 120px; /* Ancho de las columnas */
-webkit-column-gap: 50px; /* Ancho entre columnas */
-webkit-column-rule: 4px dotted blue; /* Borde entre columnas (se escribe como la forma reducida de bordes) */
/*
Reduciendo:
-webkit-columns: width count;
*/
}
font-family:Arial;
font-size:15px;
}
WebKit
WebKit es una plataforma para aplicaciones que funciona
como base para el navegador web Safari, Google Chrome,
Opera1
, Epiphany,
Maxthon,
Midori, QupZilla
entre otros. Está basado originalmente en el motor de renderizado KHTML del navegador web
del proyecto KDE,
Konqueror.
Características de la
Aplicación
La API de WebKit está
desarrollada en Objective-C y posibilita interactuar con un servidor web
para recuperar y renderizar páginas web,
descargar archivos, y administrar plugins.
Webkit incluye dos frameworks de más bajo nivel: WebCore,
un analizador sintáctico y motor de renderizado de HTML basado en KHTML, y JavaScriptCore,
un intérprete de JavaScript basado en KJS.
Historia
El código que se convertiría en WebKit se inició en 1998 como parte de
un proyecto KDE de renderizado HTML denominado KHTML y del motor JavaScript
de KDE (KJS). El nombre del proyecto y 'WebKit' fueron creados en 2002, cuando
Apple Inc. creó un «fork»
(bifurcación) de KHTML y KJS.
Los desarrolladores de Apple explicaron en un correo electrónico a los
desarrolladores de KDE4
que estos motores permiten un desarrollo más fácil que otras tecnologías por el
hecho de ser pequeños (menos de 140.000 líneas de código), diseñados limpiamente y
compatibles con las normas. KHTML y KJS fueron portados a Mac OS X con la ayuda
de una biblioteca adaptada y renombrada como WebCore
y JavaScriptCore.
JavaScriptCore se anunció en un correo electrónico a una lista de correo de KDE
en junio de 2002, junto con la primera versión de los cambios de Apple.5
WebCore fue anunciado en la Macworld Expo en enero de 2003 por el CEO de Apple Steve Jobs
con el lanzamiento del navegador web Safari.
JavaScriptCore se incluyó por primera vez con el Mac OS X v10.2 como un
framework privado, que Apple utilizaba en su aplicación Sherlock, mientras que
WebCore debutó con la primera beta de Safari. Mac OS X v10.3 fue el primer
lanzamiento de un sistema operativo de Apple que instalaba el paquete WebKit, a
pesar de que ya se había compilado como una versión menor del OsX 10,2.
Código abierto
El 7 de junio de 2005, Dave Hyatt, desarrollador de Safari, anunció en
su blog que Apple estaba abriendo el código fuente de WebKit (anteriormente,
sólo eran de código abierto WebCore y JavaScriptCore) y el acceso a la estructura de
árbol de WebKit CVS además de la Base de Datos de Bugs. De esta manera se anunció en la WWCD
(Conferencia Mundial de Desarrolladores de Apple) del 2005 por el
Vicepresidente Senior de Ingeniería de Apple Bertrand
Serlet. A mediados de diciembre 2005, se incluyó soporte para SVG (gráficos vectoriales
escalables) y se incluyó en la distribución estándar y a principios de enero de
2006, el código fuente se migró desde el CVS a Subversion.
JavaScriptCore WebKit y los componentes WebCore están disponibles bajo la GNU General Public
License, mientras que el resto de WebKit está disponible bajo una licencia tipo
BSD.
WebKit2
WebKit2 se anunció el 8 de abril de 2010. WebKit2 está diseñado desde
cero para generar un modelo de procesos divididos, donde el contenido de la web
(Javascript,
HTML, diseño, etc) se
ejecuta cada uno en proceso separado. Este modelo es similar a lo que a día de
hoy Google Chrome
tiene implementado, la principal diferencia es que en WebKit2 ha construido el
modelo de proceso de separación directamente en un framework,
permitiendo que otros desarrolladores lo puedan utilizar. Actualmente WebKit2
está disponible para Mac y Windows [24], cualquiera que desee portar el código
a otro sistema está libre de hacerlo dado que es código abierto.
Cronología
El 7 de junio
de 2005,
Dave Hyatt,
uno de los desarrolladores de Safari, anunció que Apple Computer
convertía a WebKit y sus dos componentes en un desarrollo de código
abierto y permitiría el acceso al sistema CVS y a la herramienta Bugzilla
dedicados al mismo.6
El 13 de junio
de 2005, Nokia
anunció que se encontraba desarrollando un navegador web basado en WebKit, que
finalmente sería conocido como Web Browser for S60.7
El 15 de diciembre de 2005 se implementó el
soporte para Gráficos Vectoriales Escalables.8
El 10 de enero
de 2006
se oficializó el cambio del sistema de control de versiones CVS por Subversion.9
El 2 de junio
de 2008,
el intérprete de JavaScript pasó a ser SquirrelFish. Este
proyecto pasó a ser SquirrelFish Extreme (SFX) en septiembre del 2008. SFX
compila JavaScript en código máquina eliminando la necesidad de un intérprete y
por lo tanto acelerando la velocidad de ejecución de JavaScript.10
Hasta la fecha (28 de septiembre de 2008) la única arquitectura soportada es la
x86.
El 13 de febrero de 2013, se anuncia que el
navegador web Opera deja Presto, su propio motor de renderizado,
para unirse a Webkit y contribuir con sus desarrollos a este motor y a Chromium, y anuncia que dará soporte a sus
navegadores para Android
y Apple iOS
en los próximos meses.11
CSS 3: Etiquetas propias de cada navegador
(-webkit, -moz, -ms, -o)
En CSS 3
existen etiquetas nuevas que cada navegador interpreta de forma diferente al no
haber un estandar por el que se tengan que regir. Es por ello que por ejemplo,
que a la hora de hacer un degradado, o con algunas de las etiquetas
nuevas, tengamos que usar diferentes prefijos. Estos prefijos nuevos
son los siguientes:
|
Versión
|
Navegador
|
Prefijo
|
Ejemplo
|
|
|
Firefox
3.6+
|
 |
-moz
|
-moz-linear-gradient
|
|
|
Chrome,
Safari 4
|
  |
-webkit
|
-webkit-gradient
|
|
|
Crhome
10+, Safari 5.1+
|
|
-webkit
|
-webkit-linear-gradient
|
|
|
Opera
11.10+
|
 |
-o
|
-o-linear-gradient
|
|
|
Internet
Explorer 6-9
|
 |
filter
|
Filter
|
|
|
Internet
Explorer 10+
|
|
-ms
|
-ms-linear-gradient
|
|
|
Estándar
W3C
|
-
|
Ninguno
|
linear-gradient
|
|
|
Navegadores
antiguos
|
-
|
Sin soporte
|
No
soportan etiquetas de CSS3.
|
Ejemplos de Webkit CSS
Retomando nuestra costumbre de ayudarles con
artículos de Diseño, presentamos ejemplos de como usar Webkit CSS y CSS 3, en
esta entrega: Flexible Box Model, Box Sizing y Columns
Webkit es un motor para
navegadores de Código abierto, muchos
navegadores actuales lo usan como base y está basado originalmente en el
navegador de Konqueror de KDE.
Uno de los proyectos de Webkit es
implementar la mayoría de las propiedades de CSS1,
CSS2 y CSS3.
Webkit es mayormente usando en la creación de
aplicaciones web poderosas y además aplicaciones para dispositivos como el iPhone, iPad, Android, etc.
En una serie de entradas les trataré de mostrar con
ejemplos de la manera más específica posible como podemos usar Webkit
CSS. Antes aclarar que si
deseas ver los ejemplos podrías usar Google Chrome, Mozilla Firefox o Safari
en sus últimas versiones. Obviamente Internet Explorer no está en esta lista.
CSS. Antes aclarar que si
deseas ver los ejemplos podrías usar Google Chrome, Mozilla Firefox o Safari
en sus últimas versiones. Obviamente Internet Explorer no está en esta lista.
Flexible Box Model
Usamos:
- display: -webkit-box
- -webkit-box-orient
- -webkit-box-flex
Empiezo
(a mi criterio) por el más difícil de explicar. La propiedad –webkit-box-flex permite que un elemento ocupe
todo el espacio sobrante que le da su contenedor, siempre y cuando tenga el
valor de 1, de lo contrario (si tiene el valor 0) ocupa el espacio de su
contenido.
HTML:
<div id="container">
<div id="foo">
<p>Foo</p>
</div>
<div id="var">
<p>Var</p>
</div>
</div>
CSS:
#container {
width: 500px;
display: -webkit-box; /* Indica que el contenedor usará el box model */
-webkit-box-orient: horizontal; /* Vertical */
border: 1px solid green;
}
#foo {
border: 1px solid red;
-webkit-box-flex: 1; /* El box es flexible */
}
#var {
-webkit-box-flex: 0; /* El box no es flexible */
border: 1px solid blue;
}
El
resultado sería:
Esto
puede servirnos particularmente si estamos maquetan un sitio y deseamos
conservar un diseño líquido.
Box Sizing
Usamos:
- -webkit-box-sizing
Esta
propiedad define como el comportamiento del ancho o la altura de un elemento de
bloque. El ejemplo es mas descriptivo:
HTML:
<div id="container">
<div id="foo">
<p>Foo</p>
</div>
<div id="var">
<p>Var</p>
</div>
</div>
CSS:
#container {
width: 500px;
border: 4px solid green;
}
#foo {
width: 500px;
border: 4px solid red;
-webkit-box-sizing: content-box; /* El ancho es relativo al contenido,
es decir que la caja junto con los bordes miden 508px de ancho */
}
#var {
width: 500px;
border: 4px solid blue;
-webkit-box-sizing: border-box; /* El ancho es relativo al borde,
es decir que la caja junto con los bordes miden 500px de ancho (Por defecto) */
}
Obtenemos:
El
comportamiento de Foo nos recuerda como trabajaban las medidas de un elemento
de bloque en Internet Explorer 6.
Columns
Usamos:
- -webkit-column-count
- -webkit-column-width
- -webkit-column-gap
- -webkit-column-rule
Tal cual
un periódico o un libro podemos dividir texto en varios bloques. Otra vez nos
vamos al ejemplo para entender mejor:
HTML:
<div id="container">
<div id="foo">
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</div>
CSS:
#container {
width: 500px;
border: 4px solid green;
}
#foo {
-webkit-column-count: 3; /* Número de columnas */
-webkit-column-width: 120px; /* Ancho de las columnas */
-webkit-column-gap: 50px; /* Ancho entre columnas */
-webkit-column-rule: 4px dotted blue; /* Borde entre columnas (se escribe como la forma reducida de bordes) */
/*
Reduciendo:
-webkit-columns: width count;
*/
}
BIBLIOGRAFIA
No hay comentarios:
Publicar un comentario