Css - Y El Diseño Web Responsive: Datos Informativos Alumno Período Fecha Docente Carrera Materia

CSS Y EL DISEO WEB RESPONSIVE
DATOS INFORMATIVOS
Alumno : Jamil Licuy
Perodo : 5to
Fecha : 21 de noviembre de 2017
Docente : Ing. Diego Rojas
Carrera : Anlisis de Sistemas
Materia : Diseo de Sistema
INTRODUCCIN
CSS o tambin conocido como Hoja de estilo en cascada es un lenguaje usado para definir
la esttica o la presentacin de una pgina web, es decir para dar le una mejor vista al
usuario o cliente. Y esto se crea basado de un documento estructurado escrito en HTML.
Para poder hace el diseo de la pgina existe algo denominado reglas, selectores y
declaraciones, cada regla o conjunto de reglas consiste en uno o ms selectores y un
bloque de declaracin o tambin conocidos como bloques de estilo, y dentro de bloques
existen las propiedades o elementos, los cuales tiene un valor. Los estilos se aplican a los
elementos del documento que cumplan con el selector que les precede. Cada bloque de
estilos se define entre llaves, y est formado por una o varias declaraciones de estilo con
la sintaxis.
CSS
DEFINICIN
(Cascading Style Sheets, u Hojas de Estilo en Cascada) es la tecnologa desarrollada por
el World Wide Web Consortium (W3C) con el fin de separar la estructura de la
presentacin.
CSS es un lenguaje para especificar cmo los documentos se presentan a los usuarios.
Un documento (document) es una coleccin de informacin que est estructurado
utilizando un lenguaje de formato (markup language).
SELECTOR CSS
El selector CSS (Cascading Style Sheet) es el nexo de unin entre la hoja de estilos y los
documentos a los que se aplique dicha hoja. Ya sean (x)HTML, XLM, SVG y con
independencia del medio en que se muestre (media type).
TIPOS DE SELECTORES
Selector universal
Se aplica a todos los elementos en el documento.
Ejemplo: *{ }
En el ejemplo estamos diciendo que aplicaremos una regla a todos los elementos de la
pgina.
*{
margin: 0;
padding: 0;
Selector de tipo o etiqueta

Selecciona por nombre del elemento.
Ejemplo: h1, h2, h3 { }
En el ejemplo estamos diciendo que aplicaremos una regla a los elementos h1, h2, h3 de
la pgina.
h1 {
color: red;
}
h2 {
color: blue;
}
p{
color: black;
}
Selector de clase
Selecciona un elemento cuyo atributo de clase tiene el valor que coincide con alguna clase
especfica.
Ejemplo: .destacado { }
En el ejemplo estamos seleccionando cualquier elemento que tenga la clase .destacado en
su valor de atributo.
html
<body>
<p class="destacado">Lorem ipsum dolor sit amet...</p>
<p>Nunc sed lacus et est adipiscing accumsan...</p>
<p>Class aptent taciti sociosqu ad litora...</p>
</body>
css
.destacado { color: red; }
Ejemplo: p.destacado { }
En el ejemplo solo selecciona los elementos < p > que tengan la clase .hot y les aplica
una regla de estilo.
<body>
<p class="destacado">Lorem ipsum dolor sit amet...</p>
<p>Nunc sed lacus et <a href="#" class="destacado">est adipiscing</a> accumsan...</

p>
<p>Class aptent taciti <em class="destacado">sociosqu ad</em> litora...</p>
</body>
CSS
p.destacado { color: red }
Selector por id
Selecciona un elemento cuyo atributo id tenga un valor que coincida con un valor
especifico despus del signo #
Ejemplo: #destacado
En el ejemplo va a seleccionar el elemento que contenga el id llamado destacado y le
aplicara una regla de estilo.
#destacado { color: red; }
<p>Primer prrafo</p>
<p id="destacado">Segundo prrafo</p>
<p>Tercer prrafo</p>
Selectores hijos
Selecciona un elemento que es el hijo directo de otro elemento.
Ejemplo: li > a { }
En el ejemplo estamos seleccionando cualquier elemento < p > que sea hijo del elemento
< span >.
p > span { color: blue; }
<p><span>Texto1</span></p>
<p><a href="#"><span>Texto2</span></a></p>
Selector descendente
Selecciona un elemento que es descendiente de otro elemento especificado ( no solo un
hijo director de ese elemento).
Ejemplo: p a { }
En el ejemplo selecciona cualquier elemento < a > que se encuentre dentro del elemento
< p > incluso si hay otros elementos anidados dentro de ellos.
p a { color: red; }
<p><a href="#">Enlace1</a></p>
Selector adyacente
Selecciona un elemento que es el hermano siguiente del otro.
Ejemplo: h1 + h2 { }
En el ejemplo selecciona el elemento < h2 > despus de cualquier elemento < h1 >.
html
<body>
<h1>Titulo1</h1>
<h2>Subttulo</h2>
...
<h2>Otro subttulo</h2>
...
</body>
css
h2 { color: green; }
h1 + h2 { color: red }
Selector general de hermanos

Selecciona un elemento que es un hermano de otro, aunque no tiene que ser el elemento
que precede directamente.
Ejemplo: h1 ~ p { }
Si tienes dos elementos < p > que son hermanos de un elemento < h1>, esta regla aplicar
para los dos elementos.
p ~ span {
color: red;
}
<span>Este span no es rojo.</span>
<p>Aqu hay un prrafo.</p>
<code>Aqu hay algo de cdigo.</code>
<span>Aqu hay un span. Es rojo porque va precedido de un prrafo y ambos comparten
el mismo padre.</span>
DISEO RESPONSIVE
El diseo web responsive o adaptativo es una tcnica de diseo web que busca la correcta
visualizacin de una misma pgina en distintos dispositivos. Desde ordenadores de
escritorio a tablets y mviles.
Hoy en da accedemos a sitios web desde todo tipo de dispositivos; ordenador, tablet,
smartphone por lo que, cada vez ms, nos surge la necesidad de que nuestra web se
adapte a los diferentes tamaos de los mismos.
En qu consiste el diseo responsive?
Se trata de redimensionar y colocar los elementos de la web de forma que se adapten al
ancho de cada dispositivo permitiendo una correcta visualizacin y una mejor experiencia
de usuario. Se caracteriza porque los layouts (contenidos) e imgenes son fluidos y se usa
cdigo media-queries de CSS3.
El diseo responsive permite reducir el tiempo de desarrollo, evita los contenidos
duplicados, y aumenta la viralidad de los contenidos ya que permite compartirlos de una
forma mucho ms rpida y natural.
Caractersticas diseo responsive

Se basa en proporcionar a todos los usuarios de una web los mismos contenidos y una
experiencia de usuario lo ms similar posible, frente a otras aproximaciones al desarrollo
web mvil como la creacin de apps, el cambio de dominio o webs servidas
dinmicamente en funcin del dispositivo.
VENTAJAS DE LA WEB 'RESPONSIVE'
Carga ms veloz del sitio en los dispositivos porttiles
Mejor lectura, con el tamao de letra adecuado para una lectura cmoda ya sea en
smartphone o tablet.
Mejor experiencia en la navegacin: con botones adaptados para el uso tctil del
dispositivo.
Ahorro de costes ya que no es necesario desarrollar mltiples versiones del site o
incluso desarrollar una app para Iphone / Ipad y Android.
CONCLUSIN
La nueva versin de CSS nos va a permitir que el diseo de pginas web cambie por
completo, esta nueva versin nos va a permitir hacer cosas que antes eran impensables,
podremos incluso dibujar con CSS, hacer que nuestras webs cobren vida, y otras muchas
cosas.
La comprensin de cmo hacer un sitio con diseo responsivo no requiere demasiado
aprendizaje y sin duda es mucho menos estresante y ms productivo que disear y
codificar una pgina para cada dispositivo de forma individual.
Este tipo de diseo y lo mencionado anteriormente no es la respuesta final a una

plataforma mvil en constante cambio. Sin embargo, el diseo web adaptable es un
concepto que cuando se implementa adecuadamente puede mejorar la experiencia del
usuario e impulsar la presencia del sitio en los motores de bsqueda.
LINKS
https://codigofacilito.com/articulos/selectores-de-css
http://www.arumeinformatica.es/dudas/css/
https://developer.mozilla.org/es/docs/Web/CSS/Introducci%C3%B3n/Selectors
https://www.40defiebre.com/que-es/diseno-responsive/
http://www.vgagenciadigital.com/ver/3511/dise%C3%B1o-web-responsive.html

Css - Y El Diseño Web Responsive: Datos Informativos Alumno Período Fecha Docente Carrera Materia

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Css - Y El Diseño Web Responsive: Datos Informativos Alumno Período Fecha Docente Carrera Materia

Cargado por

Copyright:

Formatos disponibles

CSS Y EL DISEO WEB RESPONSIVE

Selector de tipo o etiqueta

<p class="destacado">Lorem ipsum dolor sit amet...</p>

<p>Nunc sed lacus et est adipiscing accumsan...</p>

<p>Class aptent taciti sociosqu ad litora...</p>

.destacado { color: red; }

<p class="destacado">Lorem ipsum dolor sit amet...</p>

<p>Nunc sed lacus et <a href="#" class="destacado">est adipiscing</a> accumsan...</

<p>Class aptent taciti <em class="destacado">sociosqu ad</em> litora...</p>

p.destacado { color: red }

#destacado { color: red; }

<p id="destacado">Segundo prrafo</p>

p > span { color: blue; }

Selector general de hermanos

Caractersticas diseo responsive

Este tipo de diseo y lo mencionado anteriormente no es la respuesta final a una

También podría gustarte