CSS Ss

FACULTAD DE INGENIERÍA Y ARQUITECTURA
CARRERA DE INGENIERÍA DE SISTEMAS
El entorno Web
Introducción al desarrollo web
INFORMÁTICA PARA LA GESTIÓN

Comandos
Emmet
Crear la estructura básica de html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Document</title>
Html:5 "tab" </head>
<body>
</body>
</html>
Elementos básicos de Emmet
Agrupar ()
Bajar nivel >
Añadir texto {}
Igual nivel +
Añadir atributo []
Subir nivel ^
Añadir clase .
Multiplicar *
Añadir ID #
Bajar un nivel >
p{Hola}>strong{Pedro.} "tab"
Hola Pedro.
Crear elementos en el mismo nivel +,
repetir elementos *, agregar numeración $
h1{Título}+p{Párrafo $}*3 "tab"
<h1>Título</h1>
Párrafo 1
Párrafo 2
Párrafo 3
Subir un nivel ^, generar un texto
de pruebas lorem
lorem5: genera un texto de 5 palabras.

p>lorem10+strong>lorem5^lorem10 "tab"
Lorem ipsum dolor sit amet, consectetur

adipisicing elit. Esse, expedita.Lorem ipsum
dolor sit amet. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Accusantium, earum.
Ejercicios
ol>li{item $@3}*5 "tab"
<ol>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
</ol>
Ejercicios
ol>li{item $}*5 "tab"
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ol>
Ejercicios
ul>li{Item $$@-}*6"tab"
<ol>
<li>item 06</li>
<li>item 05</li>
<li>item 04</li>
<li>item 03</li>
<li>item 02</li>
<li>item 01</li>
</ol>
Ejercicios
a.enlace$[target]{link $}*6"tab"
<a href="" class="enlace1" target="">link 1</a>

Ejercicios
(p.clase$#id$>lorem20)*5 "tab"
Lorem ipsum dolor sit amet,

consectetur adipisicing elit. Earum, fugit.
Ea quisquam accusantium tempora
odit saepe hic aliquid facilis, nulla!
Aliquid, magni sapiente obcaecati,
doloribus perspiciatis maxime nulla! Placeat, dolorum.
Cascading Style Sheets (CSS)
‒ CSS es un lenguaje de hojas de estilos creado para controlar el
aspecto o presentación de los documentos HTML.
‒ CSS utiliza reglas para definir el aspecto de cada elemento como el

color, tamaño y tipo de letra del texto, separación horizontal y vertical
entre los elementos, etc.
‒ CSS es desarrollado por la World Wide Web Consortium (W3C). Su

página es: www.w3.org
‒ El último nivel de CSS es CSS3.

Las propiedades
colo
bac r
kg rou
nd oa t
fl
heigh
t
text-decorati
on ty le
t-s a rgin
Lis m
e borde
Font-siz r
Text-
trans
width form
ily a d di ng
nt-fa m p
Fo
Las Reglas
Una regla está formada por uno o más selectores y una declaración
de estilos formada por un bloque que define el aspecto de los
elementos html del documento.
p { color : #FF0000 ; background-color : #00FF00 ; }
Propiedad Separador (;)

Separador (:) Separador (;) Separador(:) Punto y coma
Selector dos puntos Punto y coma Dos puntos
Propiedad Valor Valor
Declaración de estilos
Selectores CSS
Los principales selectores son:
a) Selector de tipo o etiqueta .
b) Selector de clase.
c) Selector de ID.
Selector de tipo o etiqueta
Selecciona todos los elementos cuya etiqueta HTML
coincide con el valor del selector.

Selector de tipo o etiqueta
En CSS
body {
background-color: lightblue; }
h1 {
color: white;
text-align: center; }
p {
font-family: verdana;
font-size: 20px; }
Selector de clase
Se usa el atributo class de HTML sobre el o
los elementos para indicar la regla CSS que
se debe aplicar.
Selector de clase
En HTML En CSS
Texto 1. .pal { color : red ;

font-family : Giorgia ;}
Texto 2. 
.pol { color : blue ;
Texto 3. font-family : Verdana ;}
Texto 4. .pul { color : green ;

font-family : Arial ; }
Selector de ID
Se usa el atributo id de HTML permite
seleccionar un único elemento de la página,
porque su valor es único.

Selector de ID
En HTML En CSS
<body> body {background-color: aqua;}
Texto 1. #cal { color : red ;

Texto 2. font-size : 15px ; }
Texto 3. .ale { color : blue ;

</body> font-size : 10px ; }
¿En donde se escriben las reglas CSS?
En HTML las reglas se escriben de 3 formas diferentes:
‒ Atributo style en el body (no utilizado).
‒ Etiqueta style en el head.
‒ Etiqueta link en el head para enlazar un archivo css.

Etiqueta <style> </style>
<html lang="es">
<head>
<title>Mi
El selector y la declaración de título</title>
<style>
estilos se escriben dentro de la reglas css
</style>
etiqueta style en el head. </head>
<body>
</body>
</html>
Etiqueta link
Se escribe en el head, tiene dos atributos: href en la

que se escribe la ruta del archivo css y rel con el valor
"stylesheet" que indica que es una hoja de estilos .
<link href = "localización" rel = "stylesheet" />

Etiqueta link
Con Emmet se puede generar con el comando: link:css
El selector y la declaración
de estilos se escriben en un
html html
archivo diferente de extensión
css y puede ser usados por
varios documentos html. html css html
Actividad 1
CSS
Pagina1.html con estilo.css
body{background-color : rgba(23, 101, 180, 0.18);
width : 80%;
margin : auto;}
h1{color : #fa4807;
text-shadow : 4px 4px 5px black;
text-align : center;
font-size : 30pt; }
h2{color : rgb(11, 11, 247);
text-shadow : 4px 4px 5px gray;
font-size : 25pt; }
p{ font-size : 18pt;
text-align : justify;
color : rgba(157, 127, 127, 0.99);
line-height : 1.5;}
strong{color : coral;}
em{color : darkcyan;}
ol{list-style-type : lower-latin;
font-size : 18pt;
line-height : 1.5;}
ul{list-style-type : square;
font-size : 18pt;
line-height : 1.5;}
a:hover{text-decoration : none;
background-color : rgba(0, 29, 255, 0.88);
color : yellow;
font-style : italic;}
#logo{margin : auto;
display : block;
width : 40%}
#pedrito{margin : auto;
display : block;
width : 30%;}
table {border-collapse : collapse;

margin : auto; }
td, th {border : 2px solid green;
padding : 10px;
font-size : 18pt;}
th {background-color : black;
color : white;}
.i {background-color : #d8ac72}
.p {background-color : #10e9f0}

CSS Ss

Cargado por

Información del documento

Descripción original:

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 Ss

Cargado por

Copyright:

Formatos disponibles

FACULTAD DE INGENIERÍA Y ARQUITECTURA

CARRERA DE INGENIERÍA DE SISTEMAS

Introducción al desarrollo web

INFORMÁTICA PARA LA GESTIÓN

h1{Título}+p{Párrafo $}*3 "tab"

lorem5: genera un texto de 5 palabras.

<p>Lorem ipsum dolor sit amet, consectetur

<a href="" class="enlace1" target="">link 1</a>

<p class="clase1" id="id1">Lorem ipsum dolor sit amet,

‒ CSS utiliza reglas para definir el aspecto de cada elemento como el

‒ CSS es desarrollado por la World Wide Web Consortium (W3C). Su

‒ El último nivel de CSS es CSS3.

p { color : #FF0000 ; background-color : #00FF00 ; }

Propiedad Separador (;)

Los principales selectores son:

a) Selector de tipo o etiqueta .

Selecciona todos los elementos cuya etiqueta HTML

coincide con el valor del selector.

Se usa el atributo class de HTML sobre el o

los elementos para indicar la regla CSS que

<p class = "pal">Texto 1. </p> .pal { color : red ;

<p class = "pul">Texto 4. </p> .pul { color : green ;

Se usa el atributo id de HTML permite

seleccionar un único elemento de la página,

porque su valor es único.

<body> body {background-color: aqua;}

<p class = “ale”>Texto 1.</p> #cal { color : red ;

<p class = “ale”>Texto 3.</p> .ale { color : blue ;

En HTML las reglas se escriben de 3 formas diferentes:

‒ Atributo style en el body (no utilizado).

‒ Etiqueta style en el head.

‒ Etiqueta link en el head para enlazar un archivo css.

Se escribe en el head, tiene dos atributos: href en la

<link href = "localización" rel = "stylesheet" />

table {border-collapse : collapse;

También podría gustarte