ÍNDICE
1. ¿Qué son las CSS?
2. Su Sintaxis
- Selector y sus tipos
- Declaraciones (propiedad: valor;)
- Comentarios en CSS
3. Insertar Hojas de Estilos
- Externa
- Interna
- En linea
AngeduCiel – trucoswindows.net 2005
Esta es una discusión para el tema Tutorial Básico de CSS en el foro Manuales Webmaster, bajo la categoría Dudas Webmaster; ÍNDICE
1. ¿Qué son las CSS?
2. Su Sintaxis
Selector y sus tipos Declaraciones (propiedad: valor;) Comentarios en CSS
3. Insertar Hojas de Estilos
Externa Interna En linea
AngeduCiel – ...
Página: 1
ÍNDICE
1. ¿Qué son las CSS?
2. Su Sintaxis
- Selector y sus tipos
- Declaraciones (propiedad: valor;)
- Comentarios en CSS
3. Insertar Hojas de Estilos
- Externa
- Interna
- En linea
AngeduCiel – trucoswindows.net 2005
¿Qué son las CSS?
CSS son las siglas de Cascading Style Sheets (Hojas de Estilo en Cascada). Es un lenguaje desarrollado por la W3C* que nos permite aplicar formato a nuestros documentos escritos en HTML - (X)HTML - XML con el fin de separar el contenido de la presentación. Esto significa que en el documento HTML solo tendremos la estructura y el contenido de la página, mientras que la forma visual (fuente, color, tamaño de texto, etc) no será definida en ese documento, sino en la Hoja de Estilo.
Al usar CSS la carga de nuestra Web será menor. Tendremos la facilidad de modificar uno o varios elementos de nuestra Web sin tener que alterar el contenido de nuestro HTML, ahorrando bastante tiempo.
La hoja de estilos siempre debe guardarse con la extensión *.css
Su Sintaxis
Esta es una regla de CSS:
Cada regla consta de lo siguiente:body {
font-size: 12px;
}
1. Selector: body
2. Apertura de llaves: {
3. Declaración(es):
- Propiedad: font-size:
- Valor: 12px;
4. Cierre de llaves: }
Siempre se escribirá respetando el orden anterior.
Selector
Es el que especifica a que elemento de la página Web le vamos a aplicar el estilo.
Tenemos 3 principales tipos de selectores
Selector de Elementos. Son los que identifican a algún elemento del lenguaje HTML para que se le aplique el estilo.
Tenemos un párrafo señalado por los elementos
</p> al cual le aplicaremos un estilo.
Entonces en nuestra hoja de estilos lo indicaremos de esta forma:Código HTML:Te invitamos a registrarte y ser parte de nuestra COMUNIDAD y a que disfrutes libremente de nuestro contenido, de todos los trucos que hemos seleccionado para ti y de nuestras descargas.</p>
Selector de clases. Estos nos sirven para identificar varios elementos del HTML y aplicarles cierto estilo, pero para ello tendremos que modificar el código HTML.p {
color: blue;
text-align: justify;
}
En nuestra hoja de estilos lo escribiremos de esta forma:
Comenzamos con un punto seguido del nombre que le queramos poner a nuestra clase, así:
Y en el código HTML le asignaremos el atributo “class” a los elementos que queramos..name_clase {
text-align: center;
font-weight: bold;
}
Selector de identificadores. Este selector nos sirve para identificar a un solo elemento de nuestro código, mediante el atributo “id.Código HTML:<h1 class="name_clase"></h1> <span id=”boxtitle”></span> <li class="head">
En la hoja de estilo iniciamos escribiendo “#” y enseguida el nombre del identificador.
En el HTML le pondremos el atributo “id” al elemento que deseamos..name_id {
width: 760px;
margin: auto;
}
<span style='font-size:12pt;line-height:100%'>:: Declaración(es)</span>Código HTML:<div id=”header”></div>
Una declaración esta compuesta por una propiedad y un valor.
Propiedad. Específica que aspecto vamos a cambiar.
Valor. Determina el valor de la propiedad
Lista de propiedades CSS
Comentarios
Los comentarios en CSS deben comenzar con "/*" y terminar con "*/".
/*Este es un comentario en CSS*/
Insertar Hojas de Estilos
Existen tres formas de insertar estilos al documento HTML de nuestra Web
Hoja de Estilos Externa
Este método es el más recomendable, pues se puede aplicar a varias páginas y para hacer cambios solo tendremos que modificar la hoja.
De esta forma relacionaremos la hoja de estilos mediante el tag <link>, el cual colocaremos entre las etiquetas <head> de nuestro código HTML.
rel="stylesheet" especifica que el vinculo es a una hoja de estilos.Código HTML:<head> <link rel="stylesheet" type="text/css" href="estilos.css" /> </head>
type="text/css" define el tipo de hoja de estilos.
href="estilos.css" da la ubicación de nuestra hoja de estilos.
Hoja de Estilos Interna
Si queremos aplicar un estilo único a un página determinada, este método nos puede servir.
Aquí definiremos directamente los estilos entre las etiquetas <head>, haciendo uso del tag <style>.
<span style='font-size:12pt;line-height:100%'>:: Hoja de Estilos en Línea</span>Código HTML:<head> <style type="text/css"> body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12px; } img { border: none; } a {text-decoration: none; color: #012772;} a:visited {color: #012772;} a:hover {color: #6799CE;} </style> </head>
Esta es la opción menos recomendable, pero en ocasiones necesaria. Y consiste en aplicar el estilo directamente a la etiqueta HTML que queramos utilizando el atributo "style"
Dudas, preguntas o sugerencias:Código HTML:<span style="font-size: 10px; color: red; background-color: black;">Mi contenido</style>
Foro "Dudas Webmaster"
AngeduCiel – trucoswindows.net 2005
Permisos de publicación
