Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (18)
Similar a Css básico
Similar a Css básico (20)
Más de Joseph Gregory Sandoval
Más de Joseph Gregory Sandoval (17)
Último
Último (10)
Css básico
- 1. VENTAJAS DEL CSS control de la presentación de muchos documentos desde una única hoja de estilo control más preciso de la presentación aplicación de diferentes presentaciones a diferentes tipos de medios (pantalla, impresión, etc.) SINTAXIS CSS body {background-color: #FF0000;} HOJAS DE ESTILO CSS CSS, siglas de "Cascade Style Sheet", son un conjunto de instrucciones que definen la apariencia de diversos elementos de un documento HTML. Las CSS son importantes ya que El html es limitado a la hora de aplicarle formato a un documento. Las css, ayudan a superar las limitaciones y dar una mejor apariencia a los documentos HTML Ejemplo: Usando HTML <span style="border-bottom:1px dotted #000000">¿Qué es poesía?, dices mientras clavas</span> <div style="font-style:italic;font-size:20px;">en mi pupila tu pupila azul.<br> ¡Que es puesía!, Y tú me lo preguntas?</div> <span style="font-weight:bold;color:#00FF00">Poesía... eres tú.</span>
- 2. Usando CSS http://css.hazunaweb.com/202.php ALTERNATIVAS PARA APLICAR UN DOCUMENTO CSS. 1. Forma Directa. Aplican estilo a una parte concreta del texto, usa para este fin el parámetro <style> Van dentro del mismo documento, sólo dentro de la sección <head> Ejemplo: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Ejemplo de estilos CSS en el propio documento</title> <style type="text/css"> p { color: black; font-family: Verdana; } </style> </head> <body> <p>Un párrafo de texto.</p> </body> </html> Este método se emplea cuando se define un número pequeño de estilos o cuando se quieren incluir estilos específicos en una determinada página HTML que completen los estilos que se incluyen por defecto en todas las páginas del sitio web. El principal inconveniente es que si se quiere hacer una modificación en los estilos definidos, es necesario modificar todas las páginas que incluyen el estilo que se va a modificar. 2. CSS indirectas dentro del mismo documento Otra forma es incluir el código CSS usando la etiqueta HTML <style>. Estas se usan cuando se quiere que los estilos se apliquen en forma global a todas las etiquetas de un documento. por ejemplo <html> <head> <title>Ejemplo</title> <style type="text/css"> body {background-color: #FF0000;} </style>
- 3. </head> <body> <p>Esta es una página con fondo rojo</p> </body> </html> Esta forma de incluir CSS directamente en los elementos HTML solamente se utiliza en determinadas situaciones en las que se debe incluir un estilo muy específico para un solo elemento concreto. 3. Indirectas Fuera del Documento. CSS Externo Se define como un archivo aparte que es básicamente un archivo de texto con la extensión CSS y se enlaza mediante la etiqueta <link>. Se pueden crear todos los archivos CSS que sean necesarios y cada página HTML puede enlazar tantos archivos CSS como necesite. En la siguiente imagen, se ilustra el proceso de vinculación de un archivo Css externo, este puede quedar en un directorio de estilos o simplemente en el mismo folder del archivo HTML. <link rel="stylesheet" type="text/css" href="style/style.css" /> El atributo href permite indicar la ruta de la hoja de estilo. Una Hoja de estilo puede aportar formato a diferentes documentos HTML, correspondientes a un mismo proyecto, en este caso al actualizar el archivo CSS, automáticamente se actualizan los formatos en los diferentes documentos.
- 4. Ejemplo de un archivo css, incluido en una documento HTML. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Ejemplo de estilos CSS en un archivo externo</title> <link rel="stylesheet" type="text/css" href="/css/estilos.css" media="screen" /> </head> <body> <p>Un párrafo de texto.</p> </body> </html> Normalmente, la etiqueta <link> incluye cuatro atributos cuando se enlaza un archivo CSS: rel: indica el tipo de relación que tiene el recurso enlazado (en este caso, el archivo CSS) y la página 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.
- 5. ELEMENTOS BÀSICOS CSS ▪ Regla: cada uno de los estilos que componen una hoja de estilos CSS. Cada regla está compuesta de una parte de "selectores", un símbolo de "llave de apertura" ({), otra parte denominada "declaraciones" y por último, 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. Está compuesta por una o más propiedades CSS. ▪ Propiedad: permite modificar el aspecto de una característica del elemento. ▪ Valor: indica el nuevo valor de la característica modificada en el elemento. Comentarios. Css, permite agregar comentarios entre sus reglas y estilos, estos aportan información sobre el código, los comentarios son ignorados por los navegadores. Ej /* Este es un comentario en CSS */ /* Este es un comentario CSS de varias lineas */ Clases. Una clase es una serie de propiedades y métodos que se agrupan en una estructura para poder aplicarlos conjuntamente a una serie de objetos, como CSS no tiene métodos, en este caso la clase solo contendrá propiedades (atributos) y los objetos que pertenecen a esta clase se definen con el atributo HTML class. 1. Definir un estilo para todas las etiquetas de un determinado tipo de un documento.
- 6. <style type=”text/css”> P {color:red; font-family:Courier New;font-size:12pt;color:#0000FF;} h4 { color:#FF0000;font-family:verdana;text-align:center;} </style> Ejemplo: 2. ul.navbar quiere decir que al ul que tenga una clase llamada navbar, le afectan los atributos que hayas escrito. Es decir, al que tenga este código: <ul class="navbar"></ul> ul.navbar li quiere decir que los li que estén dentro de un ul con la clase navbar le afectan los atributos que hayas escrito. Es decir, a los que tengan este código: <ul class="navbar"><li>Texto</li></ul> a:link quiere decir que le afectarán los atributos a todos los enlaces con los vínculos no visitados. SELECTORES DE CLASE Si se considera el siguiente código HTML de ejemplo: <body> <p>Lorem ipsum dolor sit amet...</p> <p>Nunc sed lacus et est adipiscing accumsan...</p> <p>Class aptent taciti sociosqu ad litora...</p> </body> Una de las soluciones más sencillas para aplicar estilos a un solo elemento de la página consiste en utilizar el atributo class de HTML sobre ese elemento para indicar directamente la regla CSS que se le debe aplicar: <body> <p class="destacado">Lorem ipsum dolor sit amet...</p> <p>Nunc sed lacus et est adipiscing accumsan...</p> <p>Class aptent taciti sociosqu ad litora...</p> </body> A continuación, se crea en el archivo CSS una nueva regla llamada destacado con todos los estilos que se van a aplicar al elemento. Para que el navegador no confunda este selector con los otros tipos de selectores, se prefija el valor del atributo class con un punto (.) tal y como muestra el siguiente ejemplo: .destacado { color: red; } El selector .destacado se interpreta como "cualquier elemento de la página cuyo atributo class sea igual a destacado", por lo que solamente el primer párrafo cumple esa condición.
- 7. Este tipo de selectores se llaman selectores de clase y son los más utilizados junto con los selectores de ID que se verán a continuación. La principal característica de este selector es que en una misma página HTML varios elementos diferentes pueden incluir el mismo valor en el atributo class: <body> <p class="destacado">Lorem ipsum dolor sit amet...</p> <p>Nunc sed lacus et <a href="#" class="destacado">est adipiscing</a> accumsan...</p> <p>Class aptent taciti <em class="destacado">sociosqu ad</em> litora...</p> </body> Los selectores de clase son imprescindibles para diseñar páginas web complejas, ya que permiten disponer de una precisión total al seleccionar los elementos. Además, estos selectores permiten reutilizar los mismos estilos para varios elementos diferentes. Colores Los colores en CSS se pueden indicar de cinco formas diferentes: palabras clave, colores del sistema, RGB hexadecimal, RGB numérico y RGB porcentual. Aunque el método más habitual es el del RGB hexadecimal, a continuación se muestran todas las alternativas que ofrece CSS. Palabras clave para colores aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow.