Weitere ähnliche Inhalte Ähnlich wie Estilo css (15) Kürzlich hochgeladen (20) 2. Hojas de estilos en cascada.
css Instrucciones que debe seguir un
navegador para presentar la
información
3. 1996.
css Recomendaciones para
mejorar la visualización de
un html.
4. css Separar al máximo la forma
(presentación) y el fondo
(datos)
8. body
{
background-color:#FFFFFF;
}
16. Selector: Pseudo elemento
¿Dónde?
a:hover Declaración
{
background-color:#FFFFFF;
}
Propiedad: Atributo
¿Qué? Valor: ¿Cómo?
25. Ante un conflicto de definiciones
l navegador tomará la que se determin
con mayor especificidad
26. <body>
<h1>Hola</h1>
<p>Contenido</p>
</body>
27. <body>
<h1>Hola</h1> Hola
<p>Contenido</p> Contenido
</body>
28. <body>
<h1>Hola</h1> Hola
<p>Contenido</p> Contenido
</body>
body
{
color:red;
}
29. <body>
<h1>Hola</h1> Hola
<p>Contenido</p> Contenido
</body>
body
{
color:red;
}
30. <body>
<h1>Hola</h1> Hola
<p>Contenido</p> Contenido
</body>
body
{
color:red;
}
body p
{
color:blue;
}
31. <body>
<h1>Hola</h1> Hola
<p>Contenido</p> Contenido
</body>
body
{
color:red;
}
body p
Elemento contextual
{
color:blue;
}
32. <body>
<h1>Hola</h1> Hola
<p>Contenido</p> Contenido
</body>
body
{
color:red;
}
body p
{
color:blue;
}
35. <body>
<h1>Hola</h1> Hola
<p>Contenido</p> Contenido
</body>
h1
{
color:red;
}
36. <body>
<h1>Hola</h1> Hola
<p>Contenido</p> Contenido
</body>
h1
{
color:red;
}
h1
{
color:blue;
}
37. <body>
<h1>Hola</h1> Hola
<p>Contenido</p> Contenido
</body>
h1
{
color:red;
}
h1
{
color:blue;
}
40. <body>
<h1>Hola</h1> Hola
<p>Contenido</p> Contenido
</body>
BODY
{
color:red;
}
42. p
{
font-size:14px;
}
Absolutas
43. p
{
font-size:12pt;
}
Absolutas
44. h1
{
font-size:4em;
}
Relativas
50. <div id=“marco”>
<input id=“campo” />
</div>
#marco
{
position:relative;
border-color:red
}
input#campo
{
position:absolute;
left:25px;
top:10px;
}
51. <div id=“marco”>
<input id=“campo” />
</div>
#marco
{
position:relative;
border-color:red
}
input#campo
{
position:absolute;
left:25px;
top:10px;
}
53. <div id=“caja1”>
1 1
</div>
<div id=“caja2”> 2
2
</div> 3
<div id=“caja3”>
3
</div>
54. <div id=“caja1”>
1 1
</div>
<div id=“caja2”> 2
2
</div> 3
<div id=“caja3”>
3
</div>
#caja1
{
border-color:red
float:left;
}
55. <div id=“caja1”>
1 1 2
</div>
<div id=“caja2”> 3
2
</div>
<div id=“caja3”>
3
</div>
#caja1
{
border-color:red
float:left;
width:25px;
}
56. <div id=“caja1”>
1 1 2
</div>
<div id=“caja2”> 3
2
</div>
<div id=“caja3”>
3
</div>
#caja1
{
border-color:red
float:left;
width:25px
}
#caja2
{
border-color:blue
float:left;
width:25px;
}
57. <div id=“caja1”>
1 1 2 3
</div>
<div id=“caja2”>
2
</div>
<div id=“caja3”>
3
</div>
#caja1
{
border-color:red
float:left;
width:25px
}
#caja2
{
border-color:blue
float:left;
width:25px;
}
59. <div id=“caja1”>
1 1 2 3
</div>
<div id=“caja2”>
2
</div>
<div id=“caja3”>
3
</div>
#caja1
{
border-color:red
float:left;
width:25px
}
#caja2
{
border-color:blue
float:left;
width:25px;
}
60. <div id=“caja1”>
1 1 2 3
</div>
<div id=“caja2”>
2
</div>
<div id=“caja3”>
3
</div>
#caja2
{
border-color:blue
float:left;
width:25px;
}
#caja3
{
width:25px;
clear:both;
}
61. <div id=“caja1”>
1 1 2
</div>
<div id=“caja2”> 3
2
</div>
<div id=“caja3”>
3
</div>
#caja2
{
border-color:blue
float:left;
width:25px;
}
#caja3
{
width:25px;
clear:both;
}
63. <div id=“marco”>
<input id=“campo” />
</div>
#marco
{
position:relative;
border-color:red
}
input#campo
{
position:absolute;
left:25px;
top:10px;
}
64. <div id=“marco”>
<input id=“campo” />
<button>
</button>
</div>
#marco
{
position:relative;
border-color:red
}
input#campo
{
position:absolute;
left:25px;
top:10px;
}
65. <div id=“marco”>
<input id=“campo” />
<button>
</button>
</div>
#marco
{
position:relative;
border-color:red
}
input#campo
{
position:absolute;
left:25px;
top:10px;
}
66. <div id=“marco”>
<input id=“campo” />
<button>
</button>
</div>
input#campo
{
position:absolute;
left:25px;
top:10px;
}
#marco button
{
position:absolute;
left:100px;
top:10px;
}
67. <div id=“marco”>
<input id=“campo” />
<button>
</button>
</div>
input#campo
{
position:absolute;
left:10px;
top:10px;
}
#marco button
{
position:absolute;
left:100px;
top:10px;
}
68. <div id=“marco”>
<input id=“campo” />
<button>
</button>
</div>
input#campo
{
position:absolute;
left:10px;
top:10px;
}
#marco button
{
position:absolute;
left:100px;
top:10px;
}
69. <div id=“marco”>
<input id=“campo” />
<button>
</button>
</div>
input#campo
{
position:absolute;
left:10px;
top:10px;
z-index:1;
}
#marco button
{
position:absolute;
left:100px;
top:10px;
z-index:2;
}
70. <div id=“marco”>
<input id=“campo” />
<button>
</button>
</div>
input#campo
{
position:absolute;
left:10px;
top:10px;
z-index:1;
}
#marco button
{
position:absolute;
left:100px;
top:10px;
z-index:2;
}
72. <div id=“caja1”>
1 1
</div>
#caja1
{
border-color:red
float:left;
width:25px;
}
73. <div id=“caja1”>
1
</div>
1
#caja1
{
border-color:red
float:left;
width:25px;
}
74. <div id=“caja1”>
1
</div>
1
#caja1
{
border-color:red
float:left;
width:25px;
padding:
}
75. <div id=“caja1”>
1
</div>
1
#caja1
{
border-color:red
float:left;
width:25px;
padding:
}
76. <div id=“caja1”>
1
</div>
1
#caja1
{
border-color:red
float:left;
width:25px;
padding:5px 10px 4px 9px;
}
77. <div id=“caja1”>
1 5px
</div>
9px
4px
1 10px
#caja1
{
border-color:red
float:left;
width:25px;
padding:5px 10px 4px 9px;
}
78. <div id=“caja1”>
1
</div>
1
#caja1
{
border-color:red
float:left;
width:25px;
padding:5px 10px 4px 9px;
margin:
}
79. <div id=“caja1”>
1
</div>
#caja1
{
border-color:red
1
float:left;
width:25px;
padding:5px 10px 4px 9px;
margin:
}
80. <div id=“caja1”>
1 3px
</div>
1
7px
8px
#caja1
{
border-color:red
float:left;
width:25px;
2px
padding:5px 10px 4px 9px;
margin:3px 7px 2px 8px;
}
81. <div id=“caja1”>
1
</div>
#caja1
{
border-color:red
1
float:left;
width:25px;
}
82. <div id=“caja1”>
1
</div>
#caja1
{
border-color:red
1
float:left;
width:25px;
border-width:4px;
}
83. <div id=“caja1”>
1
</div>
#caja1
{
border-color:red
1
float:left;
width:25px;
border-width:4px;
}
84. <div id=“caja1”>
1
</div>
#caja1
{
border-color:red
1
float:left;
width:25px;
border-width:4px;
border-style:dotted;
}
85. <div id=“caja1”>
1
</div>
#caja1
{
border-color:red
1
float:left;
width:25px;
border-width:4px;
border-style:dotted;
}
86. <div id=“caja1”>
1
</div>
#caja1
{
border-color:red
1
float:left;
width:25px;
border-width:4px;
border-style:dashed;
}
87. <div id=“caja1”>
1
</div>
#caja1
{
border-color:red
1
float:left;
width:25px;
border-width:4px;
border-style:dashed;
}
88. <div id=“caja1”>
1
</div>
#caja1
{
border-color:red
1
float:left;
width:25px;
border-width:4px;
border-style:none;
}
89. <div id=“caja1”>
1
</div>
#caja1
{
border-color:red
1
float:left;
width:25px;
border-width:4px;
border-style:none;
}
90. <div id=“caja1”>
1
</div>
#caja1
{
border-color:red
1
float:left;
width:25px;
border-width:4px;
border-style:solid;
}
91. <div id=“caja1”>
1
</div>
#caja1
{
float:left;
1
width:25px;
border:4px solid red;
}
96. <h1>Titulo</h1> IE
<p>Contenido</p> Titulo
Contenido
h1
{
color:red; MF
}
p
{
color:blue;
}
97. <h1>Titulo</h1> IE
<p>Contenido</p> Titulo
Contenido
h1
{
color:red; MF
}
p
{
color:blue;
}
98. <h1>Titulo</h1> IE
<p>Contenido</p> Titulo
Contenido
h1
{
color:red; MF
}
p
{
}
color:blue;
¿?
99. <h1>Titulo</h1> IE
<p>Contenido</p> Titulo
Contenido
h1
{
color:red; MF
}
p
{
Titulo
color:blue;
}
Contenido
100. <h1>Titulo</h1> IE
<p>Contenido</p> Titulo
Contenido
h1
{
color:red; MF
margin:0 0 0 0;
}
p
Titulo
{
color:blue;
}
margin:0 0 0 0; Contenido
102. <h1>Titulo</h1>
<p>Contenido</p>
Titulo IE
Contenido
h1
{
color:red;
margin:10px 0 10px 25px;
Titulo MF
} Contenido
p
{
color:blue;
margin:0 0 10px 25px;
}
103. <h1>Titulo</h1> IE
<p>Contenido</p> Titulo
Contenido
h1
{
color:red; MF
}
margin:10px 0 10px 25px; Titulo
p
{
Contenido
color:blue;
margin:0 0 10px 25px;
}
104. <h1>Titulo</h1> IE
<p>Contenido</p>
<p>Contenido</p>
Titulo
Contenido
h1
{
color:red; MF
}
margin:10px 0 10px 25px; Titulo
p
{
Contenido
color:blue;
margin:0 0 10px 25px;
}
105. <h1>Titulo</h1> IE
<p>Contenido</p>
<p>Contenido</p>
Titulo
Contenido
Contenido
h1
{
color:red; MF
}
margin:10px 0 10px 25px; Titulo
p
{
Contenido
color:blue; Contenido
margin:0 0 10px 25px;
}
107. <div id=“caja1”>
1
</div>
#caja1
{
border:1px solid red
1
width:25px;
height:25px;
} 25px
108. <div id=“caja1”>
1
</div>
#caja1
{
border:1px solid red
1
width:25px;
height:25px;
padding:5px 10px 4px 9px; 25px
}
109. <div id=“caja1”>
1
</div>
5px
#caja1
{
border:1px solid red
9px
1
4px
10px
width:25px;
height:25px;
padding:5px 10px 4px 9px; 25px
}
110. <div id=“caja1”>
1
</div>
5px
#caja1
{
border:1px solid red
9px
1
4px
10px
width:25px;
height:25px;
padding:5px 10px 4px 9px; 25px
margin:3px 7px 2px 8px;
}
111. <div id=“caja1”>
1 3px
</div>
5px
1
7px
8px 9px 10px
#caja1
{
border:1px solid red 4px
width:25px;
height:25px;
2px
padding:5px 10px 4px 9px;
margin:3px 7px 2px 8px;
}
25px
112. 25px IE
3px
5px
8px
9px
1 10px
7px
4px
2px
MF
113. 25px IE
3px
5px
8px
9px
1 10px
7px
30px
4px
2px
40px
MF
114. 25px IE
3px
5px
8px
9px
1 10px
7px
30px
4px
2px
40px
MF
¿?
115. 25px IE
3px
5px
8px
9px
1 10px
7px
30px
4px
2px
40px
25px
MF
3px
5px
8px
9px
1 10px
7px
4px
2px
116. 25px IE
3px
5px
8px
9px
1 10px
7px
30px
4px
2px
40px
25px
MF
3px
5px
8px
9px
1 10px
7px
4px
2px
117. 25px IE
3px
5px
8px
9px
1 10px
7px
30px
4px
2px
40px
3px MF
5px
8px
9px
1
25px
10px
7px
4px
2px
118. 25px IE
3px
5px
8px
9px
1 10px
7px
30px
4px
2px
40px
3px MF
5px
8px
9px
1
25px
10px
7px
61px
4px
2px
119. 25px IE
3px
5px
8px
9px
1 10px
7px
30px
4px
2px
40px
3px MF
5px
8px
9px
1
25px
10px
7px
61px=8+1+9+25+10+1+7
4px
2px
120. <div id=“caja1”>
1 3px
</div>
#caja1 5px
{
1
border:1px solid red 7px
width:25px;
height:25px;
padding:5px 10px 4px 9px; 8px 9px 10px
margin:3px 7px 2px 8px;
}
4px
2px
25px
121. <div id=“caja1”> IE
1
</div>
#caja1
{
border:1px solid red
width:25px;
¿?
height:25px;
padding:5px 10px 4px 9px;
margin:3px 7px 2px 8px;
}
MF
¿?
122. <div id=“caja1”> IE
1
</div>
#caja1
{
border:1px solid red
width:25px;
¿?
height:25px;
padding:5px 10px 4px 9px;
margin:3px 7px 2px 8px;
}
MF
¿Javascript?
123. <div id=“caja1”> IE
1
</div>
#caja1
{
border:1px solid red
width:25px;
¿?
height:25px;
padding:5px 10px 4px 9px;
margin:3px 7px 2px 8px;
}
MF
¿?
124. #caja1 IE
25px
{
border:1px solid red 3px
width:25px; 5px
height:25px;
}
padding:5px 10px 4px 9px;
margin:3px 7px 2px 8px; 8px
9px
1 10px
7px
4px
2px
MF
3px
5px
25px
8px
9px
1 10px
7px
4px
2px
125. #caja1 IE
25px
{
border:1px solid red 3px
width:25px; 5px
height:25px;
}
padding:5px 10px 4px 9px;
margin:3px 7px 2px 8px; 8px
9px
1 10px
7px
4px
/*Comienza el hack-box*/
2px
/*Termina el hack-box*/
MF
3px
5px
25px
8px
9px
1 10px
7px
4px
2px
126. #caja1 IE
25px
{
border:1px solid red 3px
width:25px; 5px
height:25px;
}
padding:5px 10px 4px 9px;
margin:3px 7px 2px 8px; 8px
9px
1 10px
7px
4px
/*Comienza el hack-box*/
2px
#caja
{
voice-family: ""}"";
voice-family:inherit; MF
} 3px
html>body div#caja 5px
{ 25px
}
/*Termina el hack-box*/
8px
9px
1 10px
7px
4px
2px
127. #caja1 IE
25px
{
border:1px solid red 3px
width:25px; 5px
height:25px;
}
padding:5px 10px 4px 9px;
margin:3px 7px 2px 8px; 8px
9px
1 10px
7px
4px
/*Comienza el hack-box*/
2px
#caja
{
voice-family: ""}"";
voice-family:inherit; MF
25px
width:4px;
height:14px; 3px
}
5px
html>body div#caja
{
width:4px;
height:14px;
8px
9px
1 10px
7px
4px
}
2px
/*Termina el hack-box*/
128. #caja1 IE
25px
{
border:1px solid red 3px
width:25px; 5px
height:25px;
}
padding:5px 10px 4px 9px;
margin:3px 7px 2px 8px; 8px
9px
1 10px
7px
4px
/*Comienza el hack-box*/
2px
#caja
{
voice-family: ""}"";
voice-family:inherit; MF
25px
width:4px;
height:14px;
}
4+1+10+1+9 3px
5px
html>body div#caja
{
width:4px;
height:14px;
8px
9px
1 10px
7px
4px
}
2px
/*Termina el hack-box*/
129. #caja1 IE
25px
{
border:1px solid red 3px
width:25px; 5px
height:25px;
}
padding:5px 10px 4px 9px;
margin:3px 7px 2px 8px; 8px
9px
1 10px
7px
4px
/*Comienza el hack-box*/
2px
#caja
{
voice-family: ""}"";
voice-family:inherit; MF
25px
width:4px;
height:14px;
}
4+1+10+1+9 3px
5px
html>body div#caja
{
width:4px;
height:14px;
8px
9px
1 10px
7px
4px
}
14+1+5+1+4 2px
/*Termina el hack-box*/
