Instituto Tecnológico de Reynosa
Carrera: TIC
Grado y Grupo: 6 Semestre
Materia: Programacion Web
Nombre del Maestro: Ing. Mario Santiago
Nombre del Alumno: Edilberto Gonzalez Rios
Nombre del Proyecto: Unidad 3 - Programacion del Lado del Servidor
=====================================================================
SINTAXIS
•
Funcionamiento básico de CSS
Antes de que
se generalizara el uso de CSS, los diseñadores de páginas web utilizaban
etiquetas HTML especiales para modificar el aspecto de los elementos de la página.
El siguiente ejemplo muestra una página HTML con estilos definidos sin utilizar
CSS:
-->-->
• El ejemplo anterior utiliza
la etiqueta con sus atributos color, face y size para definir el
color, el tipo y el tamaño de letra de cada elemento de la página.
• El problema de utilizar este
método para definir el aspecto de los elementos se puede ver claramente con el
siguiente ejemplo: si la página tuviera 50 elementos diferentes, habría que
insertar 50 etiquetas .
• La solución que propone CSS
es mucho mejor, como se puede ver en el siguiente ejemplo:
• CSS permite separar los
contenidos de la pagina y la información sobre su aspecto. En le ejemplo
anterior, dentro de la propia página HTML se crea una zona especial en la que
se incluye toda la información relacionada con los estilos de la pagina.
• Utilizando CSS, se puede
establecer los mismos estilos con menos esfuerzo y sin ensuciar el código
HTML de los contenidos con etiquetas
. Como se verá mas adelante, la etiqueta • Incluir CSS en el mismo
documento HTML
• Los estilos se definen en una
zona específica del propio documento HTML.
• Se emplea la etiqueta • Definir CSS en un archivo
externo
• En este caso, todos los
estilos CSS se incluyen en un archivo de tipo CSS que las paginas HTML enlazan
mediante la etiqueta . Un archivo de tipo CSS no es mas un archivo
simple de texto cuya extensión es .css Se pueden crear todos los archivos CSS
que sean necesarios y cada página HTML puede enlazar tantos archivos CSS como
necesite.
• Si se quieren incluir los
estilos del ejemplo anterior en un archivo CSS externo, se deben seguir los
siguientes pasos:
- Se
crea un archivo de texto y se le añade solamente el siguiente contenido:
p {color: black;
font-family: verdana; }
- Se
guarda el archivo de texto con el nombre estilos.css Se debe poner
especial atención a que el archivo tenga extensión .css y no .txt
- En
la pagina HTML se enlaza el archivo CSS externo mediante la etiqueta
:
Cuando el navegador carga la pagina HTML
anterior, antes de mostrar sus contenidos también descarga los archivos CSS
externos enlazados mediante la etiqueta y aplica los estilos a los
contenidos de la pagina.
Normalmente, la etiqueta incluye cuatro atributos cuando
enlaza un archivo CSS:
• Rel: indica el tipo de
relación que existe entre el recurso enlazado (en este caso, el archivo CSS) y
la pagina HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet.
• Type: indica el tipo de
recurso enlazado. Sus valores están estandarizados y para los archivos CSS su
valor siempre es text/css.
• Href: indica la URL del
archivo CSS que contiene los estilos. La URL indicada puede ser relativa o
absoluta y puede apuntar a un recurso interno o externo al sitio web.
• Media: indica el medio en el
que se van a aplicar los estilos del archivo CSS. Mas adelante se explican en
detalle los medios CSS y su funcionamiento.
•
Glosario básico.
CSS define una serie de términos que permiten describir cada una de las partes que componen los estilos
CSS.
Los diferentes términos se definen a continuación:
- Regla:
cada uno de los estilos que componen una hoja de estilos CSS. Cada regla
esta compuesta de una parte de “selectores”, un símbolo de “llave de
apertura”({), otra parte denominada “declaración” y por ultimo, un símbolo
de “llave de cierre” (}).
- 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 compuesta por
una o mas propiedades CSS.
- Propiedad:
características que se modifican en el elemento seleccionado, como por
ejemplo su tamaño de letra, su color de fondo, etc.
- Valor:
establece el nuevo valor de la característica modificada en el elemento.
Una archivo CSS puede contener un número ilimitado de reglas CSS, cada
regla se puede aplicar a varios selectores diferentes y cada declaración
puede incluir tantos pares propiedad/valor como se desee.
REFERENCIA
http://librosweb.es/libro/xhtml/capitulo_2/sintaxis_de_las_etiquetas_xhtml.html
=================================================
SELECTORES
=================================================
REFERENCIA
http://librosweb.es/libro/css/capitulo_2/selectores_basicos.html
=================================================
TIPOS DE MEDIOS
=================================================
REFERENCIA
https://librosweb.es/libro/css/capitulo_1/medios_css.html
=================================================
MODELO DE CAJA
=================================================
REFERENCIA
http://librosweb.es/libro/css/capitulo_2/selectores_basicos.html
=================================================
TIPOS DE MEDIOS
REFERENCIA
https://librosweb.es/libro/css/capitulo_1/medios_css.html
=================================================
MODELO DE CAJA
• El modelo de cajas o "box model" es
seguramente la característica más importante del lenguaje de hojas de estilos
CSS, ya que condiciona el diseño de todas las páginas web. El modelo de cajas
es el comportamiento de CSS que hace que todos los elementos de las páginas se
representen mediante cajas rectangulares.
• Las cajas de una página se crean
automáticamente. Cada vez que se inserta una etiqueta HTML, se crea una nueva
caja rectangular que encierra los contenidos de ese elemento.
• puedes ver el orden espacial que tienen las
distintas capas que forman el modelo. Por ejemplo, si una "caja"
tiene imagen y ésta no es transparente no se verá el fondo.
• Las cajas se crean automáticamente al definir
cada elemento HTML.CSS permite controlar:
• El aspecto de todas las cajas: la altura y
anchura de cada caja, el margen existente entre cajas y el espacio de relleno
interior que muestra cada una de ellas.
• La forma en la que se visualizan las cajas: se
pueden ocultar, desplazar respecto de su posición original y fijarlas en una
posición específica dentro del documento.
• Las cajas de las páginas no son visibles a simple vista porque
inicialmente no muestran ningún color de fondo ni ningún borde.
• Las partes que componen cada caja y su orden de visualización, desde el
punto de vista del usuario, son:
• Contenido (content): contenido HTML del
elemento (las palabras de un párrafo, una imagen, el texto de una lista de elementos,
una tabla, etc.).
• Relleno (padding): espacio libre opcional
existente entre el contenido y el borde que lo encierra.
• Borde (border): línea que encierra
completamente el contenido y su relleno.
• Imagen de fondo (background-image):
imagen que se muestra por detrás del contenido y el espacio de relleno.
• Color de fondo (background-color): color
que se muestra por detrás del contenido y el espacio de relleno.
• Margen (margin): espacio libre entre la
caja y las posibles cajas adyacentes.
• El relleno y el margen son
transparentes, por lo que en el espacio ocupado por el relleno se muestra el
color o imagen de fondo (si están definidos) y en el espacio ocupado por el
margen se muestra el color o imagen de fondo de su elemento padre (si están definidos).
• Si ningún elemento padre tiene definido un
color o imagen de fondo, se muestra el color o imagen de fondo de la propia
página (si están definidos).
• Si una caja define tanto un color como una
imagen de fondo, la imagen tiene más prioridad y es la que se visualiza. No
obstante, si la imagen de fondo no cubre totalmente la caja del elemento o si
la imagen tiene zonas transparentes, también se visualiza el color de fondo.
Combinando convenientemente cada una de estas partes se obtienen resultados muy
interesantes.
• El modelo de cajas o "box
model" es seguramente la característica más importante del
lenguaje de hojas de estilos CSS, ya que condiciona el diseño de todas las
páginas web. El modelo de cajas es el comportamiento de CSS que hace que todos
los elementos de las páginas se representen mediante cajas rectangulares.
• Las cajas de una página se crean
automáticamente. Cada vez que se inserta una etiqueta HTML, se crea una nueva
caja rectangular que encierra los contenidos de ese elemento. La siguiente
imagen muestra las tres cajas rectangulares que crean las tres etiquetas HTML
que incluye la página:
• Figura 4.1 Las cajas se crean
automáticamente al definir cada elemento HTML
• Las cajas de las páginas no son visibles a
simple vista porque inicialmente no muestran ningún color de fondo ni ningún
borde. La siguiente imagen muestra las cajas que forman la página web de
http://www.alistapart.com/ después de forzar a que todas las cajas muestren su
borde:
• Figura 4.2 Cajas que forman la página
alistapart.com
• Los navegadores crean y colocan las cajas de
forma automática, pero CSS permite modificar todas sus características. Cada
una de las cajas está formada por seis partes, tal y como muestra la siguiente
imagen:
=================================================
REFERENCIA
https://librosweb.es/libro/css/capitulo_4.html
=================================================
REFERENCIA
https://librosweb.es/libro/css/capitulo_4.html
=================================================
APLICACION EN UN DOCUMENTO WEB
• Partes de un documento HTML Además de todo
esto, un documento HTML ha de estar delimitado por la etiqueta y
. Dentro de este documento, podemos asimismo distinguir dos partes
principales: El encabezado, delimitado por y donde
colocaremos etiquetas de índole informativo como por ejemplo el titulo de
nuestra página. El cuerpo, flanqueado por las etiquetas y
, que será donde colocaremos nuestro texto e imágenes delimitados
a su vez por otras etiquetas como las que hemos visto.
• El resultado es un documento con la siguiente
estructura: Etiquetas y contenidos del encabezado
Datos que no aparecen en nuestra página pero que son importantes para
catalogarla: Titulo, palabras clave,... Etiquetas y
contenidos del cuerpo Parte del documento que será mostrada por el navegador:
Texto e imágenes Las mayúsculas o minúsculas son
indiferentes al escribir etiquetas A notar que las etiquetas pueden ser
escritas con cualquier tipo de combinación de mayúsculas y minúsculas.
, o son la misma etiqueta. Resulta sin
embargo aconsejable acostumbrarse a escribirlas en minúscula ya que otras
tecnologías que pueden convivir con nuestro HTML (XML por ejemplo) no son tan
permisivas y nunca viene mal coger buenas costumbres desde el principio para
evitar fallos triviales en un futuro
=================================================
REFERENCIA
http://www.elprofesionaldelainformacion.com/contenidos/1996/diciembre/creacin_de_documentos_web_dinmicos_tres_editores_html.html
=================================================
=================================================
REFERENCIA
http://www.elprofesionaldelainformacion.com/contenidos/1996/diciembre/creacin_de_documentos_web_dinmicos_tres_editores_html.html
=================================================
