Scribd
Cargar
53 vistas16 páginas

Clase # 3 CSS-Introducción

CSS es un lenguaje de diseño gráfico usado para definir y crear la presentación de documentos HTML. CSS permite dar formato a los elementos de una página web mediante reglas de estilo que controlan propiedades como fuentes, colores, espaciado y diseño de layout. Los estilos CSS pueden definirse de forma interna, en línea o externa a través de hojas de estilo.

Cargado por

Kayetana Lopez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
53 vistas16 páginas

Clase # 3 CSS-Introducción

CSS es un lenguaje de diseño gráfico usado para definir y crear la presentación de documentos HTML. CSS permite dar formato a los elementos de una página web mediante reglas de estilo que controlan propiedades como fuentes, colores, espaciado y diseño de layout. Los estilos CSS pueden definirse de forma interna, en línea o externa a través de hojas de estilo.

Cargado por

Kayetana Lopez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 16

CSS

Qué es CSS???

CSS es un lenguaje utilizado en la presentación de


documentos HTML. Un documento HTML viene
siendo coloquialmente “una página web”. Entonces
podemos decir que el lenguaje CSS sirve para
organizar la presentación y aspecto de una página
web..

Siglas en inglés de Cascading Style Sheets


https://www.youtube.com/watch?v=8cSo0ijtkzU

Fuente: w3School
Estilos en CSS
Para maquetar o darle estilos a una página
web, lo podemos hacer sobre cada etiqueta
que tengamos en nuestro documento html.
Los estilos CSS son reglas que se definen para
los elementos HTML. Dentro de un archivo
CSS podemos incluir infinitas reglas, y cada
una se puede aplicar a varios selectores
diferentes y cada declaración puede incluir
tantos pares propiedad/valor como sean
necesarios.

Fuente: w3School
Estructura de una web con CSS 3
• En línea. Nosotros podemos aplicar estilos
directamente sobre el propio elemento una
vez estamos declarando la etiqueta de
apertura, independiente de la etiqueta que
sea:

<etiqueta style=”mis propiedades”> </cierre


etiqueta>

Ejemplo:

Fuente: w3School
Estructura de una web con CSS 3
* Internos, en cabecera o embebidos. ....
Además de definir nuestros estilos en la propia ....
<head>
etiqueta, en línea, podemos hacerlo
<meta charset=”utf-8” />
internamente en la cabecera de la página <style>
actual. Es decir, si quiero aplicar a toda la p{
página un estilo concreto podemos hacerlo font-size: 22px;
declarándolo dentro del <head></head> como font-style: italic;
}
vimos en un ejemplo del módulo anterior.
</style>
</head>
....
....

Fuente: w3School
Estructura de una web con CSS 3
* Externos. En la mayoría de los proyectos de gran embergadura, será necesario trabajar con varios archivos a
la vez, y cada uno de ellos deberá hacer su función, tendremos por tanto:
- Un archivo HTML5 (extensión .html) donde tendremos nuestras etiquetas: texto, formularios, tablas, la
semántica de la web, etc.
- Un archivo CSS3 , (extensión .css) donde tendremos las reglas de estilo referidas a las etiquetas con nuestro
diseño. Archivo style.css
Archivo index.html

Fuente: w3School
Sintaxis CSS

Fuente: w3School
Modelo de caja (Model box)

Fuente: https://www.solvetic.com/tutoriales/article/581-el-modelo-de-caja-css/
Comentarios CSS
Sintaxis:
/* Comentarios */
/* Comentario de una sola línea */

/*
Un comentario
que se extiende
en varias
líneas
*/

Fuente: https://www.solvetic.com/tutoriales/article/581-el-modelo-de-caja-css/
Selectores y reglas básicas

Selectores

Los selectores en CSS permiten definir el


elemento o los elementos a los que se aplican
un determinado estilo. Dichos selectores
pueden ir desde simples elementos del
lenguaje HTML hasta complejos patrones que
permiten aplicar el estilo a un elemento o
conjunto de elementos.

Fuente: w3School
Selectores de tipo de etiqueta

Estos selectores son los más sencillos,


porque coinciden con las etiquetas de
los elementos del lenguaje HTML. Un
selector de tipo aplica el estilo a todos
los elementos que coincidan con el
mismo tipo. Los diseñadores con
frecuencia hacen uso del
agrupamiento para definir todas las
propiedades comunes de los
elementos.

Fuente: w3School
Selector Universal
El selector universal * es muy fácil de
utilizar. Su función es la de aplicar una
propiedad o conjunto de propiedades a
todos los elementos de la página. No es
muy comúnmente utilizado debido que
no es implementado por la mayoría de
los navegadores. Y por otro lado,
resulta muy difícil aplicar una misma
propiedad a todos los elementos de la
página.
Fuente: w3School
Selectores de descendientes

El selector de descendientes se utiliza cuando se


desea aplicar una propiedad solamente a un
elemento que está contenido dentro de otro
elemento. Estos selectores son mucho más
específicos que los selectores de tipo. Para definir
un selector de descendientes se escriben los
selectores separados por espacios en blanco
seguidos de la definición:

Sintaxis: sel1 sel2 sel3 … selN {Definción}

Se verán más adelante en profundidad


Fuente: w3School
El atributo class y el atributo id
Selector de clases. El selector de clase permite seleccionar un elemento de
tipo sel a cuyo atributo class sea igual clase . Su sintaxis es:
Sintaxis: sel.clase{Definción}

Este método, es el más utilizado ya que permite definir subcategorías de


elementos.

Por ejemplo, a continuación se establece la clase titulo dentro de la etiqueta


< p > que muestra el texto de color rojo.
p.titulo { color: red}

Y en la página web se utiliza de la siguiente forma:


<p class=titulo> Hola a todo el mundo </p>

El selector de clases, aunque se trata como un selector más, es equivalente a


utilizar un selector de atributos de tipo elemento[class ~= clase].

Fuente: w3School
El atributo class y el atributo id

Selector de id. El selector permite seleccionar un elemento


por su atributo id.

Recuerde que el atributo id permite asignar un


identificador a una instancia dentro de la estructura del
documento. Por tanto, el selector de clases se utiliza
normalmente para asignar propiedades específicamente a
un solo elemento de la página, ya que el valor de un
atributo id dentro de una página es único.

Sintaxis: sel#identi{Definción}

Fuente: w3School
Gracias 
“La tecnología no se evade, se asume como un nuevo reto educativo”… Ky

También podría gustarte