Академический Документы
Профессиональный Документы
Культура Документы
CSS
Permiten separar las instrucciones de formato del resto de elementos de una pgina. Consisten en un conjunto de reglas para determinar cmo se muestran en pantalla los elementos de las pginas web.
Pg. 2
Pg. 3
El cdigo (X)HTML solamente describir la estructura del documento y sus contenidos, mediante:
encabezados (<h1>, <h2>, ...), prrafos (<p>), contenedores de bloque (<div>), agrupaciones de elementos en lnea (<span>), tablas, etc. combinados con identificadores (id) y clases (class).
Nuestro sitio web tendr un aspecto ms uniforme y consistente. Podremos cambiar la presentacin de las pginas de manera ms sencilla.
Pg. 4
<div>: permite crear secciones lgicas o divisiones del documento que pueden ser tratadas como un bloque:
<divstyle=width:300px;marginleft:10em;> <h3>Esteeselencabezadodeunbloquediv</h3> <p>Todoloqueaparecedentrodelasetiquetasdiv setratacomounbloque,pudiendodarleformatode maneraconjunta.</p> <p>Veremoscmosehaceestocon<em>CSS</em>. Esmuyfcil.</p> </div>
Pg. 5
Identificadores (id)
Asignan un nombre para identificar de forma nica a un elemento (X)HTML. Su uso es opcional. Dos elementos no pueden llevar el mismo id. Sirven para identificar elementos que sern afectados por estilos (CSS) o scripts (JavaScript)
<divid=identificador1> Estebloquetienecomoatributoidelvalor identificador,demaneraqueluegopodrser referenciadodesdecssparaaplicarleunestilo. </div>
Pg. 6
Clases (class)
Agrupan los elementos HTML por clases o grupos. Su uso es opcional. Un elemento puede pertenecer a varias clases a la vez. Varios elementos pueden pertenecer a la misma clase.
<pclass=introduccion> Esteesunparrafodelaclaseintroduccion </p> <pclass=introduccionimportante> Esteotroademspertenecealaclaseimportante </p>
Pg. 7
Reglas de estilo
Identifica el elemento HTML a seleccionar y la apariencia que se le quiere dar. Selector: qu elementos son afectados Declaracin: pares propiedad/valor
2 partes:
h2{color:yellow;background:black;}
selector
propiedad
valor
propiedad
valor
Pg. 8
Pg. 9
Pg. 10
Pg. 11
3 formas posibles:
Aplicar estilos directamente a los elementos (X)HTML Aplicar estilos solamente a la pgina donde se ubican Aplicar estilos de manera comn a varias pginas
Pg. 12
Mayor precedencia: anulan cualquier otro estilo Desaprobado en Transitional XHTML y prohibido en Strict XHTML 1.0
Pg. 13
Se puede importar una hoja de estilo externa dentro de un elemento <style>, siempre antes de otras reglas:
<styletype=text/css> @importhoja_externa.css; </style>
Pg. 14
Pg. 15
Herencia
Pg. 16
Herencia
Pg. 17
Especifidad
Los atributos id son los ms especficos (al ser nicos en el documento) Un selector con atributo class es ms especfico que un selector con slo nombre. Las reglas heredadas son las ms generales.
Pg. 18
Ubicacin
Pg. 19
Cada propiedad CSS tiene distintas normas sobre los valores aceptables, pudiendo ser:
El valor de un atributo id debe ser nico en el documento: el selector id se debe aplicar solamente a un elemento.
Pg. 21
Pg. 22
En funcin del ascendiente: selecciona un elemento que es descendiente (no necesariamente hijo directo) de otro
tableb{color:blue;} /*seleccionaloselementosbqueestndetro deunatabla*/ div#especialp{borderstyle:solid;} /*seleccionalosprrafosdentrodeldiv conidespecial*/
Pg. 23
En funcin del hermano adyacente: selecciona el elemento que se corresponde con el siguiente hermano de otro:
h1+p{color:blue;}/*seleccionaelprimerprrafo decualquierencabezadodenivel2*/ div#especialp+p/*questamosseleccionando?*/
Pg. 24
Pseudoelementos: hacen referencia a contenido que no se puede marcar manualmente como un elemento independiente. La primera letra de un elemento:
p:firstletter{fontsize:18pt;} div.descripcionesp:firstletter{fontsize:20pt;} .nuevo:firstletter{textdecoration:underline};
Pg. 25
Pseudoclases: hacen referencia a clases para caractersticas que no se pueden marcar manualmente. Vnculo an no visitado: Vnculo visitado: Al sealar vnculo:
a:link{color:red;} a:visited{color:orange;}
Pg. 26
Pg. 27
y qu significar sto?
Pg. 28
Fuente
Tipo de fuente:
h1,h2{fontfamily:ArialBlack,sansserif;}
El usuario visitante debe tener la fuente en su sistema. Se puede indicar ms de una fuente: el navegador utilizar la primera de la lista que tenga instalada. Se pueden utilizar nombres genricos de fuente, por si el usuario no tiene instalada ninguna de las indicadas anteriormente:
Fuente
Estilo de fuente:
fontstyle:normal|italic|oblique
Fuente en negrita:
fontweight:normal|bold|bolder|lighter| 100|200|300|400|500|600|700|800|900
Variante de fuente:
fontvariant:normal|smallcaps
Pg. 30
Fuente
Tamao de fuente:
Absoluto:
fontsize:xxsmall|xsmall|small|medium| large|xlarge|xxlarge
Pg. 31
Longitudes
Unidades absolutas:
pt punto pc pica in pulgada cm centmetro mm milmetro px pixel em tamao de fuente ex altura letra x
Pg. 32
Unidades relativas:
Porcentajes
Formato de texto
Color: Fondo
p{color:black;}
Ajuste de texto:
textalign:left|right|center|justify
Pg. 33
Formato de texto
Sangra de texto:
textindent:longitud p{textindent:2em}/*sangrade2letras*/ p{textindent:1.5em}/*sangracolgantede1.5*/
Espacios en blanco:
whitespace:normal|pre|nowrap
normal muestra mltiples espacios y retornos de carro como un solo espacio pre muestra todos los espacios en blanco y retornos de carro nowrap no genera saltos de lnea (solo con <br />)
Pg. 34