-
8/17/2019 Definición o Concepto de Lenguaje Css
1/9
DEFINICIÓN O CONCEPTO DE LENGUAJE CSS
CSS es un lenguaje utilizado en la presentación de documentos
HTML. Un documento HTML viene siendo
coloquialmente “una página e!". #ntonces podemos decir que el
lenguaje CSS sirve para organizar la
presentación $ aspecto de una página e!. #ste lenguaje es
principalmente utilizado por parte de los
navegadores e! de internet $ por los programadores e!
in%ormáticos para elegir multitud de opciones depresentación como
colores& tipos $ tama'os de letra& etc.
La (loso%)a de CSS se !asa en intentar separar lo que es la
estructura del documento HTML de su
presentación. *or decirlo de alguna manera+ la página e! ser)a
lo que ,a$ de!ajo -el contenido $ CSS ser)a
un cristal de color que ,ace que el contenido se vea de una
%orma u otra. Usando esta (loso%)a& resulta mu$
%ácil cam!iarle el aspecto a una página e!+ !asta con cam!iar
“el cristal" que tiene delante. *iensa por
ejemplo qu/ ocurre si tienes un li!ro de papel $ lo miras a
trav/s de un cristal de color azul+ que ves el li!ro
azul. #n cam!io& si lo miras a trav/s de un cristal
amarillo& verás el li!ro amarillo. #l li!ro -el contenido es
el
mismo& pero lo puedes ver de distintas maneras.
0lgunas opciones !ásicas del lenguaje CSS por ejemplo pueden ser
el poder cam!iar el color de algunas
t)picas etiquetas HTML como 1H23 -,2 es una etiqueta en el
lenguaje HTML destinada a mostrar un te4to
como enca!ezado& en tama'o grande. *ero tam!i/n ,a$
%unciones algo más complejas& como introducir
espaciado entre elementos 15673 -div es una etiqueta HTML para
identi(car una determinada región o
división de contenido dentro de una página e! o esta!lecer
imágenes de %ondo.
CSS es mu$ intuitivo $ sencillo una vez se llega a aprender&
$a que para su de(nición siempre se ,ace uso de
un identi(cador de etiqueta HTML -como por ejemplo 1H23& $
luego indicamos con qu/ aspecto queremos
que se muestren todas las etiquetas 1H23 que aparezcan en un
documento. 0l igual que con 1H23
podemos de(nir cómo queremos que se muestren las distintas
partes del documento HTML& pudiendo en
cada caso de(nir sus propiedades -color& tipo de %uente&
tama'o& espacio& imagen con alg8n determinado
valor deseado.
7amos a partir de un ejemplo mu$ sencillo& que tratará de
una página e! o arc,ivo HTML donde tan solo
tendremos una párra%o de te4to $ so!re cu$a etiqueta 1p3 iremos
realizando cam!ios e iremos aplicando los
conocimientos que vamos a ir adquiriendo $ posteriormente
veremos los resultados que o!tenemos.
-
8/17/2019 Definición o Concepto de Lenguaje Css
2/9
9uestro documento ,tml contendrá el siguiente te4to de partida
-en este caso se ,a llamado ejemplo.,tml+
-
8/17/2019 Definición o Concepto de Lenguaje Css
3/9
-
8/17/2019 Definición o Concepto de Lenguaje Css
4/9
-
8/17/2019 Definición o Concepto de Lenguaje Css
5/9
*rincipalmente ,a$ G tipos de selectores& el punto - . $ la
almo,adilla - .
#l selector . a%ecta a todas las etiquetas HMTL que tengan un
atri!uto en HTML del tipo class. *or ejemplo
para
podr)amos de(nir un estilo CSS del tipo .azul{color:blue;}.
#scri!iendo esto en el
arc,ivo css lo que ,acemos es de(nir que cada vez que se indique
que una etiqueta es de clase “azul" la
propiedad de estilo color será esta!lecida a
blue -!lue es azul en ingl/s. 0s) si escri!i/ramos 1p
class
“azul"3Te4to de ejemplo para visualizar resultados1
-
8/17/2019 Definición o Concepto de Lenguaje Css
6/9
nt-si6*%10$:;
E al re%rescar nuestro navegador o!tendr)amos el siguiente
resultado+
http://www.aprenderaprogramar.com/http://www.aprenderaprogramar.com/
-
8/17/2019 Definición o Concepto de Lenguaje Css
7/9
Como podemos o!servar ,emos modi(cado nuestro documento ,tml
para que tuviera I parra%os. Los G
primeros pertenecen a la misma clase azul $a que su
atri!uto class se corresponde con el estilo azul que
se
,a de(nido en la ,oja de estilos -en el arc,ivo estilos.css.
#l tercero pertenece a la clase “roja"& mientras que el
cuarto es un párra%o con id pos!da!a $ por tanto
pertenece al estilo del selector 8nico pos!da!a.
AMBITO DE DEFINICION PARA CSS
La %orma de de(nición de estilos css que ,emos e4plicado en este
art)culo es la que más separa la
presentación de la in%ormación en una página e!. #s mu$ 8til
porque tenemos los estilos por un lado $ los
contenidos por otro. Si en un momento dado queremos cam!iar la
%orma en que se ve la página pero no sus
contenidos& 8nicamente tendr)amos que modi(car los arc,ivos
css. *ero tam!i/n e4isten estas otras G %ormas
de aplicar estilos.
2? Defnición en línea: #n este m/todo se de(ne las
propiedades de la etiqueta HTML con el
atri!uto s!"le dentro del mismo arc,ivo HTML $ se le asigna
una determinada cadena que de(nir)a el
comportamiento. #jemplo+ 1p st$leDcolor+red@D3
#n este ejemplo asignamos en l)nea a la etiqueta p el
s!"le -st$le es estilo en ingl/s de(nido& en el que la
propiedad color toma el valor red de modo que el te4to se
mostrará en rojo. #sta opción de de(nición& es
rápida $ para peque'as cosas o reparaciones de mantenimiento e!
puede ser 8til& pero si se a!usa de esta
t/cnica tendremos una página e! mu$ poco legi!le $a que
tendremos en un mismo arc,ivo el contenido de
la página e! junto con su presentación. Hacer cam!ios en la
presentación se ,ace entonces más
complicado& al tener que ir revisando todas las etiquetas
que queramos cam!iar una por una.
G? Defnición h!a "e e#$il# in$e%na:#n este m/todo se de(nen las
propiedades de estilo de la misma
manera que ,ac)amos en el arc,ivo css independiente& pero en
este caso se ,ace en la misma página entre
las etiquetas 1,ead3 $ 1
-
8/17/2019 Definición o Concepto de Lenguaje Css
8/9
-
8/17/2019 Definición o Concepto de Lenguaje Css
9/9
SABER M'S( APRENDER CSS
uienes quieran tra!ajar como programadores& maquetadores o
dise'adores e! de!en conocer CSS pues
es un lenguaje imprescindi!le para este tipo de actividad
pro%esional. *ara %ormarte en CSS dispones del
curso “Tutorial !ásico del programador e!+ CSS desde cero" de
aprenderaprogramar.com& al que puedesacceder en+
,ttp+
