¿Qué es CSS?
Significa Hojas
de Estilo en Cascada (Cascading Style Sheets), es un
mecanismo simple que describe cómo se va a mostrar un documento en la pantalla,
o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información
presente en ese documento a través de un dispositivo de lectura. Esta forma de
descripción de estilos ofrece a los desarrolladores el control total sobre
estilo y formato de sus documentos.
Sirve para dar estilo a documentos HTML separando el contenido de la presentación. Los Estilos definen la forma de mostrar los elementos HTML y XML. CSS permite a los desarrolladores Web controlar el estilo y el formato de múltiples páginas Web al mismo tiempo. Cualquier cambio en el estilo marcado para un elemento en la CSS afectará a todas las páginas vinculadas a esa CSS en las que aparezca ese elemento.
CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más elementos. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un documento HTML o XML. La regla tiene dos partes: un selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne.
Echo se usa
para visualizar: echo “ <b> este texto tiene <i> <i>un
formato</i></b>
Estilos Físicos
Para textos en negrita: <b>
Titulo: <heder>
Para lo que va a contener la pagina: <body>
Para cursiva: <i>
Para subrayado: <u>
Para tachado: <strike>
Parpadeo: <blink>
Texto en grande: <big>
Texto pequeño <small>
Para saltos de pagina </br>
Estilos lógicos
Énfasis: <em>
Texto destacado: <strong>
Código: <code>
Citas: <cite>
Entrada por teclado: <kbd>
Ejemplos: <samp>
Variables: <var>
Imágenes:
Las imágenes de contenido son las que proporcionan información y complementan
la Información textual. Las imágenes de adorno son las que se utilizan para hacer bordes redondeados, para mostrar pequeños
iconos en las listas de elementos, para mostrar fondos de página, etc. Las imágenes
de contenido se incluyen directamente en el código HTML mediante la etiqueta <img> y las imágenes de adorno no se deberían incluir
en el código HTML, sino que deberían emplearse hojas de estilos CSS para
mostrarlas
Para insertar imágenes ponemos el siguiente código: <img scr” ”>
Ejemplo:
<img src=”imágenes/procesador.jpg”>
Va el nombre de la carpeta y el nombre de la imagen.
Párrafos
Para los párrafos se usa el siguiente código: <p>
Ejemplo:
<p>párrafos</p>
Enlaces:
Para los enlaces usamos el siguiente código: <a href>
Ejemplo:
<a href =” www.google.com”>
URL
Hace referencia al identificador único de
Cada recurso disponible en Internet. Las URL son esenciales para crear los
enlaces, pero también, Se utilizan en otros elementos HTML como las imágenes y
los formularios.
La URL de un recurso tiene dos objetivos principales:
▪ Identificar de forma única a ese recurso
▪ Permitir localizar de forma eficiente ese recurso
Las URL permiten que cada página HTML publicada en Internet tenga un
Nombre único que permita diferenciarla de las demás. De esta forma es
posible crear enlaces que
Apunten de forma inequívoca a una determinada página.
La cadena de texto http://www.google.com es la URL completa de la página principal de Google.
Enlaces relativos y absolutos
Las URL relativas prescinden de algunas partes de las URL para
hacerlas más breves. Como se Trata de URL incompletas, es necesario disponer de
información adicional para obtener el, Recurso enlazado. En concreto, para que
una URL relativa sea útil es imprescindible conocer la URL del origen del
enlace.
Enlaces básicos
Los enlaces en HTML se crean mediante la etiqueta <a>.
A continuación se
muestra la definición simplificada de
<a> y más adelante se muestra su definición
completa:
<a> Enlaces
Atributos comunes básicos,
i18n, eventos y foco
Atributos, Específicos
▪ Name = "texto" - Permite nombrar al enlace para que se pueda acceder
desde
Otros enlaces
▪ Href = "url" - Indica la URL del recurso que se quiere enlazar
Tipo de elemento En línea
Descripción Se emplea para enlazar todo tipo de
recursos
El atributo más importante de la etiqueta <a> es href, que se utiliza
para indicar la URL a la que apunta el
enlace. Cuando el usuario pincha sobre un enlace, el navegador se dirige a la
URL del recurso indicado mediante href. Las URL de los enlaces pueden ser
absolutas, relativas, internas y externas.
Enlazar varias hojas de estilos CSS
<link
rel="stylesheet" type="text/css"
href="/css/comun.css" />
<link
rel="stylesheet" type="text/css"
href="/css/secciones.css" />
Cuadros de texto
Para insertar
un cuadro de texto nos vamos a insertar en dreamweaver formulario- cuadro de
texto.
Listas
Es posible agrupar determinadas palabras o frases en un conjunto de
elementos que tienen más significado de forma conjunta.
Aunque cada palabra por separado tiene sentido, de forma conjunta constituyen
el menú de navegación de la página, por lo que su Significado conjunto es mayor
que por separado. El lenguaje HTML define tres tipos diferentes de listas para
agrupar los elementos: listas no ordenadas (se trata de una colección simple de
elementos en la que no importa su orden), listas ordenadas (similar a la
anterior, pero los elementos están numerados y por tanto, importa su orden) y
listas de definición (un conjunto de términos y definiciones similar a un
diccionario).
Listas no ordenadas
Las listas no ordenadas son las más sencillas y las que más
se utilizan. Una lista no ordenada es un conjunto de elementos relacionados
entre sí pero para los que no se indica un orden o
Secuencia determinados. La etiqueta <ul> encierra todos
los elementos de la lista y la etiqueta
<li>
cada uno de sus elementos.
<ul> Lista no
ordenada.
Ejemplo sencillo de lista no ordenada:
<Html>
<head><title>Ejemplo de etiqueta
UL</title></head>
<body>
<h1>Menú</h1>
<ul>
Listas ordenadas
Las listas ordenadas son casi idénticas a las listas no ordenadas, salvo
que en este caso los elementos relacionados se muestran siguiendo un orden
determinado. Cuando se crea por ejemplo una lista con las instrucciones de un
producto, es importante el orden en el que se realiza cada paso. Cuando se
muestra un índice o tabla de contenidos en un libro, es importante el orden de
cada elemento del índice
<Ol> Lista ordenada
Ejemplo
de lista ordenada
<Html>
<head><title>Ejemplo de etiqueta
OL</title></head>
<body>
<h1>Instrucciones</h1>
<ol>
<li>Enchufar
correctamente</li>
<li>Comprobar
conexiones</li>
<li>Encender el
aparato</li>
</ol>
</body>
</html>
Tablas
Utilizan los mismos conceptos de filas, columnas, cabeceras y títulos que
los que se utilizan en cualquier otro entorno de publicación de documentos.
Las tablas pueden contener elementos simples, agrupaciones de filas y de
columnas, cabeceras y pies de tabla, subdivisiones, cabeceras múltiples y otros
elementos complejos.
Son fáciles de comprender y utilizar, son uno de los elementos más polémicos
de HTML. El problema de las tablas es que no siempre se utilizan adecuadamente.
Aunque parezca obvio, las tablas se deben utilizar para mostrar información tabular
<table> Tabla
<Tr> Fila de tabla
<Td> Celda de tabla
<Th> Celda cabecera de tabla
<Caption> Leyenda o título de tabla
No hay comentarios:
Publicar un comentario