CSS

ALFAS   :D

¿Qué es CSS?

  • Cascading Style Sheets
  • Describe como los elementos HTML seran mostrados en la pantalla

Filosofia

  • Separar lo que es la estructura del documento HTML de su presentación.

Historia

  • Guerra de Navegadores y Falta de estándares
  • W3C (World Wide Web Consortium) propone crear lenguaje hojas de estilo
  • 9 propuestas, CHSS y SSP
  • Finales de 1994 se unieron para definir CSS derivado de ambas propuestas

Versiones

  • 1996 W3C publico primera recomendación oficial CSS 1
  • 1998 Segunda recomendacion CSS 2
  • 7 de junio 2011 CSS 2.1 publicada como recomendación oficial
  • CSS3 trabaja con módulos aceptados oficialmente 2011

Insertar CSS

  • Hoja Estilo Externa
  • Hoja Estilo Interna
  • Estilo En Linea

Hoja Estilo Interna

<head>
<style>
body {
    background-color: green;
}

h2 {
    color: blue;
    margin-left: 40px;
} 
</style>
</head>

Hoja Estilo Externa

<head>
    <link rel="stylesheet" type="text/css" href="estilos.css">
</head>

Estilo en linea

<h6 style="color:blue;margin-top:30px;">ALFAS :V</h6>

Múltiples Hojas De Estilo

<head>
<link rel="stylesheet" type="text/css" href="estilo.css">
<style>
h1 {
    color: green;
}
</style>
</head>

Color verde

<head>
<style>
h1 {
    color: green;
}
</style>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>

Color link

Prioridad

  1. Estilo en linea
  2. Hojas de estilo internas y externas
    1. ID
    2. Clase
  3. Predeterminado del Navegador

CSS Syntax

/*Selector*/
h1{
    /*Declaracion*/
    /*Propiedad  Valor*/
    color:blue;
    /*Propiedad  Valor*/
    font-size:12px;
}

CSS Selectors

  • ID Selector
  • Class Selector
  • Element Selector

Element Selector

  • Selecciona un elemento del HTML
  • Se seleccionan todos los elementos de la pagina

Element Selector

<!-- HTML -->

<h1>ALFAS</h1>

/* CSS */

h1{
    color: green;
}

Class Selector

  • Selecciona elementos con un atributo de clase especifico
  • Para seleccionar una clase especifica usar (.) después el nombre de la clase

Class Selector

<!-- HTML -->

<div class="alfas"> <h1>ALFAS</h1> </div>
<div class="alfas"> 
    <ul>
        <li>Uno</li>v
        <li>Dos</li>
    </ul>
 </div>


/* CSS */
.alfas{
    text-align: center;
    color: red;
}

ID Selector

  • Utiliza el atributo ID de un elemento HTML
  • El ID del elemento tiene que ser único
  • Para Seleccionar el ID usar (#)

ID Selector

<!-- HTML -->
<h1 id="alfas">ALFAS</h1>

/* CSS */
#alfas {
    text-align: center;
    color: red;
}

Agrupar Selectores

/*   Varios Elementos */           
h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    color: red;
}

p {
    text-align: center;
    color: red;
}

/* Agrupar */
h1, h2, p {
    text-align: center;
    color: red;
}

CSS Comentarios

p {
    color: red;
    /* Una Sola Linea De Comentarios */
    text-align: center;
}

/* Estas
son
unas 
múltiples
linea de comentarios*/

Aplausos :v

CSS

By Jesús Glez

Made with Slides.com

CSS

  • 249

More from Jesús Glez