Que es css

63By: Elar E., HANCCO QUISPE www.elarcorp.com
¿Que son las hojas de estilo (CSS)?
CSS son las siglas de Cascade Style Sheet que traducido significa hojas de estilo en
cascada.
Con este lenguaje, aplicamos reglas de estilo a las distintas etiquetas del documento
HTML.
HTML no pone mucha atención en la apariencia del documento. CSS describe como los
elementos dispuestos en la página son presentados al usuario. CSS es un gran avance que
complementa el HTML y la Web en general.
Con CSS podemos especificar estilos como el tamaño, fuentes, color, espaciado entre
textos y recuadros así como el lugar donde disponer texto e imágenes en la página.
El lenguaje de las Hojas de Estilo está definido en la Especificaciones
CSS1, CSS2 y CSS3 del World Wide Web Consortium (W3C), es
un estándar aceptado por toda la industria relacionada con la
Web, o por lo menos, gran parte de navegadores (es verdad el
IExplorer de Microsoft nos puede dar un dolor de cabeza con los
navegadores antiguos).
Ventajas de CSS
Menor tiempo de desarrollo de las páginas.
Mayor orden de nuestro código.
Menos peso en las páginas.
Mayor flexibilidad en los cambios
Al ser un standard de la W3C, todos los navegadores lo soportan.
Una misma página puede tener diferentes presentaciones para diferentes medios
(Pantalla, impresión, móviles, etc.)

El proceso de desarrollo con CSS
Obtener el documento HTML
Crear las reglas de estilo.
Adjuntar hoja de estilos al documento.
Si se desean hacer cambios en la visualidad (layout) del documento, editar las
reglas de estilo CSS.
¿Cómo funciona CSS?
Todos los navegadores tienen sus reglas. Así, por ejemplo el HTML define que las
cabeceras del nivel uno (el texto que está entre las etiquetas <H1> y </H1>) se muestre
como un texto alineado a la izquierda, un par de puntos mayor que el resto, en negrita y en
la fuente Times Roman.
Sintaxis básica de CSS
A qué etiqueta o etiquetas
HTML se aplicará la propiedad
(ejemplo: “body”)
El atributo CSS al que se le desea asignar un valor (ejemplo: “background-color”)
El valor de la propiedad (ejemplo:
“#FF0000 que es el valor para
“rojo”)
selector {atributo:valor;}
Ejemplo

¿Dónde se escribe el código CSS?
Se pueden escribir en tres lugares:
1. En línea (usando el atributo style).
2. Interno (la etiqueta style).
3. Externo (enlazar a una hoja de estilos).
1. Escribir CSS en línea: el atributo style
Podemos asignar la propiedad escribiendo directamente en el elemento HTML
al que deseamos dar estilo.
2. Interno: la etiqueta style
Podemos insertar una etiqueta style directamente en el documento HTML,
dentro de ella incluimos una o varias reglas.
<html>
<head>
<title>Ejemplo Elarcorp.com</title>
</head>
<body style="background-color: #FF0000;">
<p>Esta es una página con fondo rojo</p>
</body>
</html>
<html>
<head>
<title>Ejemplo elarcorp.com</title>
<style type="text/css"> body {background-color: #FF0000;}
</style>
</head>
<body>
<p>Esta es una página con fondo rojo – elarcorp.com</p>
</body>
</html>

3. Externo: enlace a una hoja de estilos
Una hoja de estilos es un archivo de texto con la extensión .css que se vincula
con una etiqueta link dentro del documento HTML.
3. Externo: ventajas de usar una hoja de estilos externa.
Al usar una hoja externa, podemos usar un único archivo .css que guarde el
diseño de todas las páginas de un mismo sitio.
<html>
<head>
<title>Mi ejemplo - elarcorp</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<p>Página de Ejemplo – elarcorp.com</p>
</body>
</html>

SELECTORES
selector {atributo:valor;}
Tipos de selectores.
1. Selectores simples
2. Selectores de clase
3. Selectores de ID
1.- Selectores simples.
En este caso, el selector es el nombre del tipo de etiqueta HTML a la que
aplicaremos la regla.
body {background-color:#FF0000;}
h1 {
font-color: #000000;
font-size: 20px;
}
p {
color: red;
display: block;
background-color: black;
}

2.- Selectores de clases.
Una clase es una regla de estilo que se puede aplicar a todas etiquetas que se
estimen convenientes.
Se pueden aplicar varias clases a un mismo elemento HTML
Una clase tiene un nombre definido por el usuario.
En el documento .css, ese nombre se define con un punto
En el documento HTML, ese nombre se referencia con el atributo HTML
“class”.
3.- Selectores de ID.
Una ID es un identificador único asociado a
un elemento HTML.
Un elemento HTML no puede tener más de una ID.
En el documento .css se definen con un caracter gato (#).
En el documento HTML se definen con el atributo HTML “id”.
.miClase {
font-color: #000000;
}
<p class=“miClase”> Hola!!! </p>
<H1 class=“miClase”> Servicio ELARCORP </p>
estilos.css index.html
#cabeza {
border: 1px dotted #0000FF;
}
<div id=“cabeza”>Manuales Elarcorp</p>
estilos.css index.html

ATRIBUTOS
 Atributos para fuentes
font-family
font-style
font-variant
font-weight
font-size
font
 Atributos para el texto
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
text-align
text-indent
line-height
text-indent
white-space
display
 Color y Background
El atributo “color” puede declararse:
Por su nombre (ej. red, aqua, black, blue, etc)
Hexadecimal (ej. #FF0000)
RGB (ej. 255,0,0)

 Background
background-color
background-image
repeat
background-attachment
background-position
background
 Listas
list-style-type
list-style-image
list-style-position
Atributos para cajas.

Estructura de la caja.

Posicionamiento CSS
position
left
top
height
width
visibility
z-index
clip
overflow
Float.
Cualquier elemento puede flotar en una página. Al asignar “float” a cualquier elemento lo
convertimos en una caja, debiéndole asignar una anchura determinada.
float
o right
o left
o none

clear
o none
o left
o right
o Both
Tablas.
• Caption
Asignar “caption” en el documento HTML para definir cuál es el título de la tabla
Caption en CSS
• Celdas vacías
<table style="empty-cells: show;">
• border-collapse
<table border="3" style="border-collapse: collapse;">
• border-spacing
<table border="3" style="border-collapse: collapse;border-spacing:0.5em 1em;">
• table-layout
 Cursores y estilo.
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize

se-resize
sw-resize
w-resize
s-resize
text
wait
progress
help
Ejemplos de Estilos individuales con nombre.
De la misma forma que se definen clases, se pueden definir estilos individuales con
nombre. Cada uno de ellos se identifica con el atributo “id” en la etiqueta html. Ejemplo:
/* Estilo de clase: */
.borde {
color:red;
border:thin solid #black;
}
/*Estilos individuales con identificador: */
#bazul { background-color: #3399FF;}
#azul {color:blue;}
#verde {color:green;}
Se aplica con: Resultadoà
<p class="borde">Texto 1 </p>
<p class="borde" id="bazul">Texto 2</p>
<p class="borde" id="verde">Texto 3</p>
<p id="verde">Texto 4</p>

.
.
Etiquetas DIV y SPAN
DIV y SPAN son etiquetas html muy útiles para aplicar estilos.
La etiqueta SPAN no hace nada pero permite aplicar estilos. Se recomienda
utilizar SPAN para pequeños fragmentos de texto a los que se aplica un estilo
determinado.
La etiqueta DIV se comporta igual que <P> (añade un salto de línea al inicio y
al final del texto que contiene). Se recomienda el uso de DIV para agrupar
varios párrafos de texto.
Ejemplo:
.mifuente {
font-family: Arial, Helvetica, sans-serif;
color: #FF0000;
}
<div class="mifuente">Elarcorp</div>
#verde {color: green}
<div class="mifuente">
<p>Esto es un párrafo</p>
<p>esto es otro párrafo </p>
</div>
Aplicando en uno solo.
<div class="mifuente" id="verde">Ejemplo elarcorp</div>
DIV y bloques o capas.
Ejemplo:
<div style="position:absolute; left:100; top:50; width:80;
background-color: red">Esto es un ejemplo de una capa</div>
<div style="position:absolute; left:300; top:50; width:200; background-image:
url(images/special.jpg)"> Esto es una capa con una imagen de fondo</div>

Que es css

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (16)

Similar a Que es css

Similar a Que es css (20)

Más de Elar Hancco Quispe

Más de Elar Hancco Quispe (13)

Último

Último (20)

Que es css