Que Es CSS
Que Es CSS
Que Es CSS
SEDE HUEHUETENANGO
DESARROLLO WEB
TEMA: CSS
ESTUDIANTES CARNET
HILKER DANIEL CIFUENTES RIVAS 0904-16-14995
ELMER BRAYTON SAMAYOA CAMPOSECO 0904-16-2182
JORGE MARIO HERRERA ALFARO 0904-16-4265
MAYCOL ALEXANDER MENDOZA PUENTES 0904-16-1481
NOE MARCO ANTONIO VILLATORO AGUSTIN 0904-16-7968
VIII CICLO
SECCIÓN “A”
2019
INDICE
QUE ES CSS...................................................................................................................................1
COMO FUNCIONA CSS................................................................................................................2
COMO APLICAR CSS EN HTML................................................................................................3
CSS PARA APLICAR A DUN DISEÑO RESPONSIVO..............................................................5
SINTAXIS.......................................................................................................................................6
EJEMPLOS DE CSS.......................................................................................................................8
CSS FRAMEWORKS...................................................................................................................10
1
QUE ES CSS
Las siglas CSS Cascading Style Sheets significan, Hojas de estilo en cascada y parten de
un concepto simple pero muy potente: aplicar estilos, colores, formas, márgenes a uno o
varios documentos generalmente documentos HTML, páginas webs de forma masiva.
Se le denomina estilos en cascada porque se aplican de arriba a abajo (siguiendo un
patrón denominado herencia que trataremos más adelante) y en el caso de existir
ambigüedad, se siguen una serie de normas para resolverla.
De esta forma, se puede unificar todo lo relativo al diseño visual en un solo documento
CSS, y con ello, varias ventajas:
Si necesitamos hacer modificaciones visuales lo hacemos en un sólo lugar y no tenemos
que editar todos los documentos HTML en cuestión por separado.
Se reduce la duplicación de estilos en diferentes lugares, por lo que es más fácil de
organizar y hacer cambios. Además, al final la información a transmitir es
considerablemente menor (las páginas se descargan más rápido).
Es más fácil crear versiones diferentes de presentación para otros tipos de dispositivos:
tablets, smartphones o dispositivos móviles.
2
COMO FUNCIONA CSS
3
El uso del Inspector DOM
Para analizar un DOM, se necesita un software especial. Usted puede usar el
complemento de Mozilla DOM Inspector (DOMi) para analizar un DOM. Usted sólo
tendrá que instalar el complemento (ver más detalles abajo).
Utilice el navegador Mozilla para abrir el documento en versión HTML.
Desde la barra de menú de su navegador, selecciona Herramientas> Inspector DOM, o
Herramientas> Desarrollo Web> Inspector DOM.
4
Este método se emplea cuando se define un número pequeño de estilos o cuando se
quieren incluir estilos específicos en una determinada página HTML que completen los
estilos que se incluyen por defecto en todas las páginas del sitio web.
El principal inconveniente es que si se quiere hacer una modificación en los estilos
definidos, es necesario modificar todas las páginas que incluyen el estilo que se va a
modificar.
Los ejemplos mostrados en este libro utilizan este método para aplicar CSS al contenido
HTML de las páginas. De esta forma el código de los ejemplos es más conciso y se
aprovecha mejor el espacio.
Incluir CSS en los elementos HTML
El último método para incluir estilos CSS en documentos HTML es el peor y el menos
utilizado, ya que tiene los mismos problemas que la utilización de las etiquetas <font>.
Esta forma de incluir CSS directamente en los elementos HTML solamente se utiliza en
determinadas situaciones en las que se debe incluir un estilo muy específico para un solo
elemento concreto.
Antes que nada, debemos ser conscientes de la diferencias entre los navegadores,
principalmente haciendo alusión a las versiones antiguas de Internet Explorer.
Para evitar que cada navegador interprete un modelo de caja diferente, deberemos indicar
con el atributo box-sizing cómo debe de comportarse. Por esta razón, si no lo definimos
en todo el sitio, las páginas podrían verse de forma diferente en cada uno de los
navegadores.
5
CSS PARA APLICAR A DUN DISEÑO RESPONSIVO
En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS que las páginas
HTML enlazan mediante la etiqueta <link>. Un archivo de tipo CSS no es más que un
archivo simple de texto cuya extensión es .css Se pueden crear todos los archivos CSS
que sean necesarios y cada página HTML puede enlazar tantos archivos CSS como
necesite.
Si se quieren incluir los estilos del ejemplo anterior en un archivo CSS externo, se deben
seguir los siguientes pasos:
Cuando el navegador carga la página HTML anterior, antes de mostrar sus contenidos
también descarga los archivos CSS externos enlazados mediante la etiqueta <link> y
aplica los estilos a los contenidos de la página.
Normalmente, la etiqueta <link> incluye cuatro atributos cuando enlaza un archivo CSS:
rel: indica el tipo de relación que existe entre el recurso enlazado (en este caso, el archivo
CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet
type: indica el tipo de recurso enlazado. Sus valores están estandarizados y para los
archivos CSS su valor siempre es text/css
href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser
relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web.
media: indica el medio en el que se van a aplicar los estilos del archivo CSS. Más
adelante se explican en detalle los medios CSS y su funcionamiento.
De todas las formas de incluir CSS en las páginas HTML, esta es la más utilizada con
mucha diferencia. La principal ventaja es que se puede incluir un mismo archivo CSS en
multitud de páginas HTML, por lo que se garantiza la aplicación homogénea de los
mismos estilos a todas las páginas que forman un sitio web.
6
Con este método, el mantenimiento del sitio web se simplifica al máximo, ya que un solo
cambio en un solo archivo CSS permite variar de forma instantánea los estilos de todas
las páginas HTML que enlazan ese archivo.
En este caso, para incluir en la página HTML los estilos definidos en archivos CSS
externos se utiliza una regla especial de tipo @import. Las reglas de tipo @import
siempre preceden a cualquier otra regla CSS (con la única excepción de la regla
@charset).
La URL del archivo CSS externo se indica mediante una cadena de texto encerrada con
comillas simples o dobles o mediante la palabra reservada url(). De esta forma, las
siguientes reglas @import son equivalentes:
@import '/css/estilos.css';
@import "/css/estilos.css";
@import url('/css/estilos.css');
@import url("/css/estilos.css");
SINTAXIS
7
La sintaxis se ve de esta manera:
Un archivo CSS puede tener un número ilimitado de reglas CSS y dentro de cada regla
podemos escribir tantas propiedades como necesitemos. Una misma regla se puede
utilizar sobre varias etiquetas del HTML
Tipos de Selectores
El selector es la parte de la regla que asocia un elemento HTML con su diseño.
Básicamente los selectores se pueden clasificar en 4 grupos: de etiqueta, de clase,
de id y compuestos.
Al primero al que recurrimos es al selector de etiqueta, porque aprovechamos las
etiquetas que ya están escritas en el html. Por ejemplo: si en el HTML tenemos la
etiqueta <body>, para crear una regla en CSS simplemente escribo el nombre de la
etiqueta y coloco las propiedades entre las llaves: body {}.
Pero cuando tenemos varias etiquetas iguales y sólo queremos darle diseño a una de ellas,
entonces necesitamos identificarla de alguna manera y tenemos dos opciones: a esa
etiqueta en el HTML le podemos agregar el atributo class="" por ejemplo:<article
class="destacado"> y en ese caso en el CSS el selector comienza con un
punto: .destacado {} o el atributo id="" por ejemplo: <article id="destacado"> entonces el
selector comienza con numeral: #destacado {}
La diferencia entre un estilo de clase y uno de id es que en un archivo HTML puede haber
varias etiquetas con el mismo class, en cambio no puede haber dos etiquetas con el
mismo id.
Muchas veces el selector simple no nos alcanza para identificar un elemento en particular.
Por ejemplo si queremos definir un diseño para la etiqueta <a> del menú principal pero
8
no queremos que afecte el diseño de las otras etiquetas <a>del sitio. Entonces usamos un
selector compuesto. En este caso el selector descendente, por ejemplo: nav a {}.
Con este selector estamos diciendo que la regla se aplica a todas las etiquetas <a> que se
encuentren dentro de una etiqueta <nav>. Entonces esa regla no afecta al resto de los
enlaces del sitio.
EJEMPLOS DE CSS
Selectores
selectores CSS se utilizan para "encontrar" los elementos HTML que desea estilo.
Ejemplo
Aquí, todos los <p> elementos de la página serán centro alineado, con un color rojo
texto:
p {
text-align: center;
color: red;
}
Color de fondo CSS
Puede establecer el color de fondo de los elementos HTML:
Ejemplo
CSS background-color
9
La background-colorpropiedad especifica el color de fondo de un elemento.
Ejemplo
El color de fondo de una página se establece así:
body {
background-color: lightblue;
}
10
padding-left: 80px;
}
CSS FRAMEWORKS
Bootstrap
11
Una iniciativa de Twitter, Bootstrap se atribuye el mérito de introducir un diseño
receptivo a gran escala. Fue el primer marco para promover la filosofía de "móvil
primero". Ya no se diseñaba para pantallas más pequeñas un proyecto separado en sí
mismo; todo lo que tenía que hacer era incluir las clases de Bootstrap relevantes, y el
diseño se ajustaría automáticamente para diferentes tamaños de pantalla (bueno, casi).
Foundation
Si las tecnologías fueran religiones, los chicos de Foundation y Bootstrap estarían
dispuestos a la sangre del otro. Ninguna discusión sobre marcos CSS modernos está
completa sin mencionar Foundation, así que aquí vamos.
Sin embargo, los partidarios del marco de la Fundación saben que hay al menos algo de
verdad en eso. Foundation fue desarrollada para ir naturalmente con el marco de Rails, y
varios de los principios rectores "similares al zen" de Rails se pueden ver en el trabajo.
Si bien Foundation es mucho menos popular que Bootstrap, es un secreto comercial para
muchos desarrolladores expertos de front-end.
12
Bulma
Bulma es un participante relativamente nuevo en el campo de batalla de los frameworks
CSS y se ha hecho un nombre en poco tiempo. Su atractivo radica en un enfoque estricto,
solo CSS no hay componentes de JavaScript y valores predeterminados elegantes, que es
algo con lo que muchos desarrolladores con buen ojo para el diseño tienen problemas
cuando trabajan con Bootstrap.
Gran parte del impulso de Bulma proviene de las altas tasas de adopción con la
comunidad Laravel un marco web PHP, en caso de que no lo supiera), que estoy seguro
es más o menos lo que ayudó a Vue.js a alcanzar la cima de la popularidad entre los
marcos de JavaScript.
UIkit
Lo que viene a la mente al pensar en UIkit es el minimalismo. Minimalismo no en
características (de hecho, ofrece quizás la mayoría de las características de todos los
marcos), sino en diseño. Si lo tuyo son los diseños súper limpios, elegantes y que no son
tímidos, UIkit te tiene cubierto.
13
Semantic UI
Otro competidor en la carrera es la interfaz de usuario semántica, que trata de distinguirse
con muchos temas y personalizaciones. Hay más de 3000 variables de temática, lo que
resulta en una amplitud masiva. O eso dicen los documentos.
Bootstrap 4 cubre todo esto y también es totalmente personalizable, pero una ventaja de
la interfaz de usuario semántica es que da como resultado diseños bonitos por defecto.
Aún así, no es el mejor aspecto de la caja, por eso lo puse más adelante en mi lista.
14