Resumen
•
1 recomendación•1,905 vistas
Este documento resume los conceptos básicos de CSS como clases, etiquetas <div> e <id>, y estilos para fuentes, colores de fondo, alineación de texto y más. También cubre elementos HTML como enlaces, imágenes, tablas y formularios.
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (19)
Similar a Resumen
Similar a Resumen (20)
Más de Joseph Gregory Sandoval
Más de Joseph Gregory Sandoval (17)
Resumen
- 1. Resumen general de la Unidad 1. INTRODUCCIÓN A CLASES CSS. Un concepto simple de clase puede ser: “sirven para identificar una etiqueta y, de ese modo, nos resulta más sencillo agregarle propiedades” Las clases se deben definir en el encabezado del documento HTML, es decir en el HEAD (<head> </head> Se definen con las etiquetas <style> </style> Ejemplo: <html> <head> <style type=”text/css”> .nombreclase {color:red;font-size:18px;font-family: Verdana, Geneva, sans-serif;} </style> </head> <body> </body> </html> Nota: Las clases se definen anteponiendo un punto. Las clases permiten asignar atributos a una etiqueta o conjunto de etiquetas y se deben “invocar “ desde el cuerpo (body) del documento HTML. Por ejemplo vamos a invocar la clase definida anteriormente: …. <body> <H1 class=”nombreclase”> texto que asume los atributos <H1> </body> Div. La etiqueta <div> se emplea para definir un bloque de contenido o sección de la página, para poder aplicarle diferentes estilos e incluso para realizar operaciones sobre ese bloque específico. Sintaxis. <div> <h1>Índice</h1> Página principal<br /> Material multimedia<br /> Autores<br /> </div> El bloque DIV, se complementa con la etiqueta id, que permite establecer un identificador único para el bloque. Ejemplo: #derecha {width: 120px;height: 350px;border: none;background-color: yellow;float: left; } Se define en el encabezado y su diferencia con una clase es que inicia con # y la clase con . (punto) El llamado en el cuerpo del documento se hace así: <div id="derecha"> Respecto a la etiqueta <div> podemos decir: No sólo contiene texto, sino que puede contener cualquier otro elemento HTML: imágenes, párrafos, iframes, vídeos, etc.
- 2. Podemos anidar unos <div> dentro de otros; es una práctica más que habitual para estructurar correctamente una página web. Podemos posicionarlos en el lugar que más nos convenga, gracias a algunas de las propiedades de las hojas de estilo. TRABAJO CON TEXTO. Títulos o Titulares: Se pueden utilizar diferentes niveles de titulares para las distintas secciones de un documento Web. Se usa el elemento Hn, donde n es un número del 1 al 6 que indica el nivel del titular. Texto muy grande Texto grande Texto algo más grande de lo normal Texto normal Texto pequeño Texto muy pequeño Realzado de Caracteres. Negrita: Existen dos etiquetas que convierten el texto en negrita. Ejemplo <b>negrita</b> <strong>también</strong> Cursiva. <i>cursiva</i> <em>también</em> Subrayado <u>Así subrayaríamos una frase importante</u> ESTILOS DE FUENTES EN CSS Estilo color <div style="color:#FF0000;">Este texto se verá de color rojo.</div> <div style="color:RED;">Este texto se verá de color rojo.</div> Estilo font-size Nos sirve para indicarle el tamaño a la letra. Se lo podemos indicar utilizando las unidades de medida de CSS o mediante los siguientes valores: xx-large, x-large, large, medium, small, x-small, xx-small; siendo “xx-small” el más pequeño y “xx-large” el más grande. Ejemplo: <div style=" font-size:25px;">Este texto tiene un tamaño de 25 pixeles.</div> <h1> Texto muy grande</h1> <h2>Texto grande</h2> <h3>Texto algo más grande de lo normal</h3> <h4>Texto normal</h4> <h5>Texto pequeño</h5> <h6>Texto muy pequeño</h6>
- 3. Estilo font-family Para definir el tipo de fuente que queramos que tenga el texto. Si no le indicamos nada, el texto estará escrito en la tipografía que el usuario tenga en su sistema. Ejemplo: <div style=" font-family: Georgia, 'Times New Roman', serif;">xzyw </div> Estilo font-weight Se usa para darle anchura al texto. Es decir, define la anchura que tendrá cada caracter. La anchura la podemos especificar de forma relativa al valor actual que tenga el texto (bold , bolder , lighter) o mediante un valor numérico (del 100 al 900). Ejemplo: <div style=" font-weight: bold;">Estos caracteres tienen una anchura mayor.</div> PARRAFOS Estilo text-decoration. Permite dar un estilo diferente al párrafo. Así podremos subrayarlo (underline), sobrerayarlo (overline) o tacharlo (line-through) Ejemplo Este es el ejemplo que utilizaremos para explicar el estilo text-decoration: <span style="text- decoration:underline;">Este es el resultado de utilizar "underline</span>", <span style="text-decoration:overline;">así que da el texto utilizando "overline"</span> y <span style="text-decoration:line-through;">así quedaría el texto utilizando "line-through"</span>. Estilo text-align Alinear el texto a la izquierda (left), a la derecha (right), al centro (center) o justificarlo (justify). Ejemplo: <div style="text-align:center;">Este texto alineado al centro. </div> <div style="text-align:right;">Este texto alineado a la derecha. </div> <div style="text-align:left;">Este texto alineado a la izquierda. </div> Estilo text-transform Este estilo permite cambiar la apariencia del párrafo. Gracias a él podemos cambiar todo el texto a mayúsculas (uppercase), todo el texto a minúsculas (lowercase) o hacer que todas las primeras letras del párrafo se conviertan en mayúsculas (capitalize). Ejemplo. El siguiente texto va a explicarnos los diferentes resultados que podemos conseguir mediante el estilo text-transform: <span style="text-transform:uppercase;">como vemos aqui podemos hacer que todo un parrafo este en mayusculas</span> y <span style="text- transform:lowercase;">QUE TODO UN PARRAFO ESTE EN MINUSCULAS.</span> <span style="text-transform:capitalize;">Y también que las primeras letras se conviertan automáticamente a mayúsculas.</span>
- 4. Estilos de Fondo Ejemplo <div style="background-color:#FF0000;">Este texto irá sobre fondo rojo</div> Estilo background-repeat. Este atributo se usa para especificarle a la imagen que hemos usado de fondo si queremos o no que se repita y, en caso afirmativo, indicarle de qué modo queremos que se repita. Si queremos que la imagen se repita en vertical y horizontal utilizaremos el atributo “repeat”, si queremos que la imagen se repita sólo en horizontal usaremos “repeat-x”.Y usaremos “repeat-y” para que se repita la imagen sólo en vertical. Si queremos que no se repita se lo indicaremos con “no-repeat”. LISTAS Y GRAFICOS Imágenes. El atributo "src" es imprescindible para poder colocar una imagen. Este atributo es el que indica dónde se encuentra alojada la imagen que queremos mostrar. Se escribe así: <img src="x">, siendo "x" la dirección o la url dónde se encuentra situada la foto. También podemos poner una descripción de la imagen dentro de la misma para que la gente puede leerla al mantener el ratón encima de ella. Esta descripción podemos escribirla mediante el atributo "alt" y lo escribiríamos de la siguiente manera: alt= "x", siendo "x" la descripción que le gente leerá al pasar el ratón por encima. el height y el width. El height marca la altura de la imagen, mientras que el width marca la anchura. Son recomendables porque así ayudaremos al navegador a representar la imagen. Ejemplo. <img src="html/imagenes/prueba.jpg" border="1" alt="Este es el ejemplo de un texto alternativo" width="400" height="300"> HYPERENLACES: son llamados también vínculos, y al hacer clic sobre ellos, nos lleva a otro enlace o página. Para insertar un enlace se pueden definir diferentes elementos como un texto o una imagen y estos se deben estipular con las etiquetas <a> </a> y se debe usar el atributo href para especificar la pagina que se quiere asociar al enlace. Ejemplo: <a href=”http://infotecnotics.blogspot.com”> Visita mi blog </a> DISEÑAR TABLAS <table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000"> <tr> <th>Encabezado 1</th> <th>Encabezado 2</th>
- 5. <th>Encabezado 3</th> </tr> <tr> <td rowspan="2" valign="middle" align="left">Este texto está alineado al centro verticalmente y a la izquierda horizontalmente</td> <td> </td> <td> </td> </tr> <tr> <td colspan="2"> </td> </tr> </table> FORMULARIOS. Los formularios html nos ayudan a aumentar la interactividad de nuestra Web y nos permiten recibir información de los usuarios de nuestro sitio. Los formularios html están compuestos por campos de texto y botones. La etiqueta de los formularios es <form> y su cierre </form>. Todo lo que vaya dentro de estas etiquetas, serán parte del formulario. Atributos. Action. El atributo “action” indica el tipo de acción que va a realizar el formulario. <form action=mailto:direcciondelcorreo@correo.com…></form>. Este tipo de envíos se utilizarían para casos de formularios de contacto, de sugerencias, etc. Method. indicamos al formulario la forma en la que el formulario será enviado. Existen dos valores posibles: get y post. El valor get es el valor por defecto. Si no concretamos el method, la información se enviará a través de este medio. “get” indica que los datos enviados se adjuntarán en la barra de direcciones del cliente, al final de la url correspondiente y después de un signo de interrogación de cierre. Si se envía más de un dato, éstos irán separados por el símbolo &. Enctype. Mediante este atributo indicaremos la forma en la que viajará la información que se mande a través del formulario. La forma puede ser de varios tipos, aunque el más común es que la información se envíe como texto plano (enctype="text/plain").