ccs

Apuntes sobre Hojas de Estilo en Cascada (CSS) Seminario de Integración y Producción

conjunto de instrucciones que indican a un navegador como debe presentar un elemento concreto en una página html. CSS HTML CSS HTML HTML

Características de las CSS Separar la visualización del contenido. Simplificar el código HTML. Controlar el estilo y diseño de forma global. HTML CSS HTML HTML

Reglas de estilo p {color: #ff0033;}

p {color: #ff0033;} Selector : Indica al navegador que elemento se verá afectado por la regla de estilo. Reglas de estilo

Regla : Conjunto de propiedades que indican al navegador como se debe mostrar el elemento indicado por el selector. p {color: #ff0033;} Reglas de estilo

Declaración de estilo p {color: #ff0033;} Reglas de estilo

Propiedad p {color: #ff0033;} Reglas de estilo

Separador p {color: #ff0033;} Reglas de estilo

Valor p {color: #ff0033;} Reglas de estilo

h1 { color: #ff0033; font-family: Verdana; font-weight: bold; font-size: 16px; text-align: center; } CSS Simples : A, BODY, P, BR, H1, H2, BLOCKQUOTE… Selectores

h1 { color: #ff0033; font-family: Verdana; font-weight: bold; font-size: 16px; text-align: center; } CSS <h1>Título del artículo</h1> HTML Simples : A, BODY, P, BR, H1, H2, BLOCKQUOTE… Selectores

Simples : A, BODY, P, BR, H1, H2, BLOCKQUOTE… h1 { color: #ff0033; font-family: Verdana; font-weight: bold; font-size: 16px; text-align: center; } CSS <h1>Título del artículo</h1> HTML Selectores

CLASS : Precedido por el carácter . hace referencia a un elemento HTML con un valor en el atributo CLASS igual al nombre del selector. .destacado { font-family: Tahoma; font-size: 11px; font-weight: normal; text-align: left; line-height: 13px; background-color: #EFEFD1; border-width: 1px; border-style: dashed; border-color: #a06000; padding: 10px 10px 10px 10px; } CSS Selectores

CLASS : Precedido por el carácter . hace referencia a un elemento HTML con un valor en el atributo CLASS igual al nombre del selector. .destacado { font-family: Tahoma; font-size: 11px; font-weight: normal; text-align: left; line-height: 13px; background-color: #EFEFD1; border-width: 1px; border-style: dashed; border-color: #a06000; padding: 10px 10px 10px 10px; } CSS <div class="destacado"> <h3 class="entry-header"> TP Presentación personal en HTML</h3> <br /> <strong>Consigna:</strong> Producir una presentación personal desarrollada en Código HTML que incluirá:<br /><br /> <a href="http://www.dialogica.com.ar/digicom/ 2007/04/trabajo_practico_presentacion.php"> Leer texto completo: Consigna del Trabajo Práctico</a> </div> HTML Selectores

#container { width: 714px; background-color: #f1f1f1; } CSS ID : Precedido por el carácter # hace referencia a un elemento HTML con un valor en el atributo ID igual al nombre del selector. Selectores

#container { width: 714px; background-color: #f1f1f1; } CSS <body> <div ID=“container”> <h1>Título del artículo</h1> <p>Texto</p> </div> </body> HTML ID : Precedido por el carácter # hace referencia a un elemento HTML con un valor en el atributo ID igual al nombre del selector. Selectores

ID : Precedido por el carácter # hace referencia a un elemento HTML con un valor en el atributo ID igual al nombre del selector. #container { width: 714px; background-color: #f1f1f1; } CSS <body> <div ID=“container”> <h1>Título del artículo</h1> <p>Texto</p> </div> </body> HTML Selectores

Estructura Container Nav Banner <body> <div id=“Banner”> xxxxxxxxxxxxxxxx </div> <div id=“Container”> <div class="destacado"> 1 </div> <div class="destacado"> 2 </div> <div class="destacado"> 3 </div> </div> <div id=“Nav”> Xxxxxxxx </div> </body> HTML 1 2 3

Estructura Banner <body> <div id=“Banner”> xxxxxxxxxxxxxxxx </div> <div id=“Container”> <div class="destacado"> 1 </div> <div class="destacado"> 2 </div> <div class="destacado"> 3 </div> </div> <div id=“Nav”> Xxxxxxxx </div> </body> HTML

Estructura Container <body> <div id=“Banner”> xxxxxxxxxxxxxxxx </div> <div id=“Container”> <div class="destacado"> 1 </div> <div class="destacado"> 2 </div> <div class="destacado"> 3 </div> </div> <div id=“Nav”> Xxxxxxxx </div> </body> HTML 1 2 3

Estructura Container <body> <div id=“Banner”> xxxxxxxxxxxxxxxx </div> <div id=“Container”> <div class="destacado"> 1 </div> <div class="destacado"> 2 </div> <div class="destacado"> 3 </div> </div> <div id=“Nav”> Xxxxxxxx </div> </body> HTML 1 2 3 destacado

Estructura Nav <body> <div id=“Banner”> xxxxxxxxxxxxxxxx </div> <div id=“Container”> <div class="destacado"> 1 </div> <div class="destacado"> 2 </div> <div class="destacado"> 3 </div> </div> <div id=“Nav”> Xxxxxxxx </div> </body> HTML

Enlazar archivo CSS <head > <title>Mi página HTML</title> <link rel=“stylesheet” href=“estilos.css” type="text/css“> </head> HTML HTML CSS HTML HTML

Bibliografía de Consulta Manual de CSS de Web Estilo Hojas de estilo en cascada de Web Design Group Proyecto Camaleón HTML CSS HTML HTML

ccs

Más contenido relacionado

La actualidad más candente (16)

Destacado (9)

Similar a ccs (20)

Último (20)

ccs