Identificación del lenguaje ccs
624 views
13 slides
Apr 10, 2014
Slide 1 of 13
1
2
3
4
5
6
7
8
9
10
11
12
13
About This Presentation
No description available for this slideshow.
Slide Content
Identificación del lenguaje CCS - Definición de CSS y especificación oficial Funcionamiento básico y formas de conclusión de CSS en XHTML Uso de comentarios y sintaxis de la definición de cada propiedad Selectores, agrupación, reglas y herencia Colisiones de estilos, unidades medidas y colores
Funciones de CSS y especificación oficial Hojas de Estilo en Cascada ( Cascading Style Sheets ) es el lenguaje de hojas de estilo utilizado para describir el aspecto y el formato de un documento escrito en un lenguaje de marcas, esto incluye varios lenguajes basados en XML como son XHTML o SVG. Las especificaciones de CSS son mantenidos por el Consorcio World Wide Web (W3C). Tipo de medio de Internet ( tipo MIME ) text / css está registrado para su uso con CSS por RFC 2318 (marzo de 1998), y también opera un libre servicio de validación de CSS .
Código selector [, selector2, ...] [: pseudo-class ][:: pseudo-element ] { propiedad: valor; [propiedad2: valor2 ; ...] } /* comentarios */
Funcionamiento básico y formas de conclusión de CSS en XHTML Una de las principales características de CSS es su flexibilidad y las diferentes opciones que ofrece para realizar una misma tarea. De hecho, existen tres opciones para incluir CSS en un documento HTML . Los estilos se definen en una zona específica del propio documento HTML. Se emplea la etiqueta < style > de HTML y solamente se pueden incluir en la cabecera del documento (sólo dentro de la sección <head>).
Código <!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 >
Uso de comentarios y sintaxis de la definición de cada propiedad CSS funciona a base de reglas. Cada regla está compuesta por un selector y la declaración. La declaración a su vez esta compuesta por una propiedad y su valor. La declaración debe estar definida entre llaves( { ... } )
Código <head> < style type =" text / css "> p.azul { color:blue } p.rojo { color:red } </ style > </head> < body > <p class ="azul">Este texto es de color azul</p> <p class ="rojo">Este texto es de color rojo</p> </ body >
Selectores, agrupación de reglas y herencia Selector Se utiliza para seleccionar todos los elementos de la página. El siguiente ejemplo elimina el margen y el relleno de todos los elementos HTML. Agrupación de reglas Cuando se crean archivos CSS complejos con decenas o cientos de reglas, es habitual que los estilos que se aplican a un mismo selector se definan en diferentes reglas : Herencia Una de las características principales de CSS es la herencia de los estilos definidos para los elementos. Cuando se establece el valor de una propiedad CSS en un elemento, sus elementos descendientes heredan de forma automática el valor de esa propiedad. Si se considera el siguiente ejemplo:
Código selectores h1 { color: #8A8E27; font-weight : normal; font-family : Arial, Helvetica , sans-serif ; } h2 { color : #8A8E27; font-weight : normal; font-family : Arial, Helvetica , sans-serif ; } h3 { color: #8A8E27; font-weight : normal; font-family : Arial, Helvetica , sans-serif ; }
Código agrupación de reglas h1 { color: red; } ... h1 { font-size : 2em; } ... h1 { font-family : Verdana ; } h1 { color: red; font-size : 2em; font-family : Verdana ; }
Código herencia <!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 herencia de estilos</ title > < style type =" text / css "> body { color: blue; } </ style > </head> < body > <h1>Titular de la página</h1> <p>Un párrafo de texto no muy largo.</p> </ body > </ html >
Colisiones de estilos, unidades medidas y colores Colisiones de estilos En las hojas de estilos complejas, es habitual que varias reglas CSS se apliquen a un mismo elemento HTML. El problema de estas reglas múltiples es que se pueden dar colisiones como la del siguiente ejemplo : Unidades de medida y colores Además , CSS es tan flexible que permite indicar las medidas y colores de muchas formas diferentes.
Código p { color: red; } p { color: blue; } < p>...</p > p { color: red; } p#especial { color: green ; } * { color: blue; } <p id="especial">...</p>
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 624
- Slides 13
- Age 4254 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
30 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
32 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
30 views
14
Fertility awareness methods for women in the society
Isaiah47
29 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
26 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
28 views