Tutoriales
Tutoriales ~ css ~ Cascading Style Sheet Basico| Cascading Style Sheet Basico | |
|
Fecha: 2008-12-07 Nivel: Facil Impresiones: 2 Autor: Shinji Categoria: css Descripcion: Con este tutorial aprenderas lo basico del css.. |
Bookmark:
  E-mail to a friend View printable version Permanlink |
Este es mi primer tutorial de css, en esta ocasión vamos a ver los básico del cascading style sheet.
Para que me sirve el css?, bueno este te permite una mayor limpieza en tus paginas, para aplicarles colores, bordes, márgenes desde una hoja externa
Primero que nada debes manejar algún editor web como notepad, dreamweaver, front page etc. que te permitan crear hojas de estilo .css la mayoría de las etiquetas <> en html son reconocidas en css para aplicarles estilos estos se definen así por ejemplo body {}, el "{" significa que un estilo se esta aplicando y el "}" significa que se cierra el estilo entre {} se aplican los distintos estilos.
Lo que debemos conocer de los básico de los css son los atributos, valores y selectores
Los Atributos: son las palabras que usaremos para definir que tipo de estilo aplicar por ejemplo: background, font, border, etc.
Los Valores: Son las propiedades que la vamos a aplicar a los atributos por ejemplo, #fff, 1px, verdana, etc.
Los Selectores: Son para definir a cual elemento le queremos aplicar un estilo estos se pueden definir de 3 maneras:
p {} : este aplica a todas las etiquetas <p>
#p {} : este es de identificador se aplica por ejemplo llamando una etiqueta así <div id="p">lo que sea</div>
.p {} : Este es del tipo clase se aplica para diferentes estilos por ejemplo <div class="p">lo que sea</div>
La sintaxis: debe empezar con el selector seguido de un "{" de ahi los atributos y valores y cerramos con un "}"
por ejemplo:
/*Este es un comentario de Css*/
body {
font-family: verdana;
font-size: 14px;
color: red;
background-color: #ffffff;
}
body {
font-family: verdana;
font-size: 14px;
color: red;
background-color: #ffffff;
}
Puedes aplicar de 3 formas los estilos
La primera es de un enlace externo a una hoja estilo .css
Con el siguiente código entre los <head></head>
<link href="estilo.css" rel="stylesheet" type="text/css">
Otra forma de aplicar el estilo es directamente en el <head>
<head><style type="text/css">
<!--
body {
font-family: verdana;
font-size: 14px;
color:#red;
background-color: #ffffff;
}
-->
</style></head>
<!--
body {
font-family: verdana;
font-size: 14px;
color:#red;
background-color: #ffffff;
}
-->
</style></head>
Hay otra forma pero es la menos recomendable, puedes aplicarlos estilos directamente a la etiqueta <>
<div style="background-color:#ffffff; width:200px; height:100px;">lo que sea</div>
Como pueden ver existen muchos atributos y valores, estos los puedes visualizar cuando le aplicas estilo a la pagina,
Hoy en día la mayoría de las webs utilizan los archivos .css, por lo cual es mas fácil cambiar el diseño de una web.
Comentarios
No hay Comentarios.
Ads
Ultimos Tutoriales
Efecto de Luz en: photoshop el: 2008-12-08 por: Shinji
Triple Borde en: photoshop el: 2008-12-08 por: Shinji
Fondos con Pinceles en: photoshop el: 2008-12-08 por: Shinji
Glowing Skin en: photoshop el: 2008-12-08 por: Shinji
Negar Acceso a Archivos en: misc el: 2008-12-07 por: Shinji
Ultimos Layouts
