Professional Documents
Culture Documents
Programación HTML II
Instituto IACC
compañía de análisis de mercado denominada Merana, y las últimas dos semanas fue asignado a
un nuevo proyecto donde requerían realizar una encuesta online para indagar respecto de la
página web mediante el uso de CSS. Esta semana le fue asignada la personalización de los
detalles finos del formulario para que se adapte a la imagen corporativa, la cual es
En tal sentido, se deberá hacer la personalización de los diferentes elementos presentes en las
páginas web (la página del formulario y la respuesta de confirmación generada con PHP) para
que se adapten a dichos colores, manteniendo una presentación agradable y uniforme. Se deberá
considerar la utilización de los selectores y atributos que serán necesarios para alterar la
presentación, tanto del texto como de los elementos interactivos (como <input>, <select>, etc.).
Además, se deberá hacer uso de unidades de medida relativas, tanto para el texto como para
el resto de los elementos, a fin de ofrecer una presentación receptiva (es decir, que se altere
Usando CSS Media Queries podemos definir como se vera nuestra web en los diferentes
CSS: tienen nombres y aceptan ciertos valores. Hay, sin embargo, varias diferencias importantes
Las propiedades son usadas en declaraciones para dar información sobre la forma de
La mayoría de las características de los medios aceptan el opcional ‘ min- ‘o’ max- ‘.
Prefijos para expresar “mayor o igual que” y “menor o igual que” en las limitaciones.
Las propiedades requieren siempre un valor para formar una declaración. Las
características de los medios, por otro lado, también se puede utilizar sin un valor. Las
funciones de medios que llevan el prefijo min / max no se puede utilizar sin un valor.
Las propiedades pueden aceptar valores más complejos, por ejemplo, los cálculos que
involucran a otros valores. Los medios de comunicación (Media features) solo aceptan
‘aspect-ratio’ y ‘device-aspect-ratio’
width
El valor es de longitud (length) y se aplica a tipos de medios visuales y táctiles. Acepta los
prefijos min / max. Con ‘width’ media feature (función de medios) especificamos el ancho de
height
El valor es de longitud (length) y se aplica a tipos de medios visuales y táctiles. Acepta los
prefijos min / max. Con ‘height’ media feature (función de medios) especificamos el alto de
Código
<!—se crea archivo css en el cual se realizarán los cambios solicitados, se resetean los estilos por
*{
margin: 0;
padding: 0;
<!—se indica que el tipo de fuente sea Times New Roman y de color #3E77F5, color
corporativo-->
body{
margin: 0;
padding: 0;
background: #3E77F5;
}
<!—se llama el contenedor bodega que contiene un witdth de 80% y un margin de 0, de color
#bodega{
width: 80%;
margin: 0 auto;
background: #3E77F5;
padding: 20px;
<!—se llama el contenedor bodega y se le indica todas las características que sean necesarias->
#bodega
<!—se llama el contenedor anidado form con las características que sean necesarias->
#form{
margin: auto;
position: relative;
width: 880px;
height: 768px;
padding-left: 30px;
padding-right: 30px;
padding-top: 20px;
background-color: #269906;
border-radius: 40px;
}
select{
border-radius: 8px;
border-color: #9EF3F5;
input[name="rut"], input[name="edad"]{
border-radius: 8px;
border-color: #9EF3F5;
textarea{
width: 860px;
height: 105px;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 10px;
line-height: normal;
font-size-adjust: none;
font-stretch: normal;
border-radius: 8px;
fieldset{
border-radius: 20px;
padding-left: 10px;
padding-right: 10px;
padding-top: 0px;
<!—comenzamos a usar media queries, indicando los estilos css que debe cargar al contenedor
#bodega{
width:60%;
margin: 0 auto;
#bodega{
width:80%;
margin: 0 auto;
#bodega #form{
width:60%;
margin: 0 auto;
#bodega #form{
width:80%;
margin: 0 auto;
textarea{
width:60%;
margin: 0 auto;
textarea{
width:80%;
margin: 0 auto;
fieldset{
width:60%;
margin: 0 auto;
fieldset{
width:80%;
margin: 0 auto;
IACC (2015). Hojas de estilo CSS II. Programación HTML II. Semana 5.