Codifíca.me | Desarrollo web | Programación | SEOCodifíca.me | Desarrollo web | Programación | SEO
  • Monetizar
    • Adsense
    • SEO
  • Desarrollo web
    • Php
    • WordPress
    • Blogger
    • Facebook (API)
      • Aplicación Test
      • Conectar con Facebook
      • Facebook en Español
      • Publicar Facebook
    • Google Maps
    • JavaScript
    • Opencart
    • Prestashop
    • XML
    • Flash
  • Bases de datos
    • Oracle
    • MySql
    • Data Mining
    • Forms
    • SGBD
  • Código
    • Android
    • Ensamblador
    • Código ensamblador
    • Java
    • ms-dos
    • Pro*C
    • Vb.net
  • Crear Blog
  • Cajon desastre
    • Redes
    • Arquitectura
    • Ubuntu
    • Hardware
    • Software
    • Consolas
    • Iphone
  • Tools
    • Get Backlinks
    • SQL 2 XML
    • Footprints enlaces
    • Whois
Ops! Hemos pasado los 1000 comentarios!!! Gracias a vosotros llevamos 1022 comentarios.
Participa en el blog!

Aplicar estilos a los elementos CSS

Se el primero en comentarDesarrollo web
Aplicar estilos a los elementos CSS
Vota esta entrada.

Aplicar estilos a los elementos CSS
Existen dos formas de aplicar estilo a un elemento, vamos a repasarlas con ejemplos.
Método directo: Básico, colocas el estilo directamente en la etiqueta del elemento mediante el parámetro style. Por ejemplo:

<span style="color: white">Texto de ejemplo</span>

<span style="color: white">Texto de ejemplo</span>

En caso de querer agregar más de un atributo se separa por un caracter punto y coma:

<span style="color white; font-weight: bold">Texto de ejemplo</span>

<span style="color white; font-weight: bold">Texto de ejemplo</span>

Este método es bueno solo cuando quieres aplicar estilo a uno o varios (no muchos) elemento en concreto.
Método indirecto: En el head del documento defines el estilo de cada elemento mediante la etiqueta ‘style’. Se identifica el elemento por clases, por el identificador del mismo, por el nombre de la etiqueta o por alguno de los anteriores (elemento padre) seguido por un símbolo mayor que (>) y el nombre del elemento hijo al que le deseamos aplicar estilo CSS.

Ejemplo 1:

 
<head>
<style>
#logo{
font-family: Arial;
}
</style>
 
</head>
<body>
<header>
<h1 id="logo">Logo</h1>
</header>
<body>
</pre >
 
Ejemplo 2:
 
<pre lang="HTML">
 
<head>
<style>
h1{
font-family: Arial;
}
</style>
</head>
<body>
<header>
<h1>Titulo de la web</h1>
</header>
</body>

<head> <style> #logo{ font-family: Arial; } </style> </head> <body> <header> <h1 id="logo">Logo</h1> </header> <body> </pre > Ejemplo 2: <pre lang="HTML"> <head> <style> h1{ font-family: Arial; } </style> </head> <body> <header> <h1>Titulo de la web</h1> </header> </body>

Ejemplo 3:

 
<head>
<style>
.header > h1{
font-family: Arial;
}
</style>
<head>
<body>
<header class="header">
<h1>Titulo de la web</h1>
</header>
</body>

<head> <style> .header > h1{ font-family: Arial; } </style> <head> <body> <header class="header"> <h1>Titulo de la web</h1> </header> </body>

Dentro del método indirecto existen dos formas de aplicar estilos la primera fue la que antes hemos visto y la segunda consiste en crear una hoja de estilos con cualquier nombre y colocarle de extensión .css, luego incluirlo en el head de nuestro documento mediante esta forma.


Dentro de la hoja de estilos colocamos lo mismo que lo anteriormente pusimos dentro de las etiquetas

<style></style>

<style></style>

.
Por ejemplo.

 
<head>
<link rel="stylesheet" href="estilo.css" />
</head>
<header>
    <h1>Logo</h1>
</header>

<head> <link rel="stylesheet" href="estilo.css" /> </head> <header> <h1>Logo</h1> </header>

Y en la misma carpeta que se encuentra el documento creo la hoja de estilos ‘estilo.css’ y colocamos el siguiente código en el contenido de la misma.

 
header > h1{
font-family: Arial;
}

header > h1{ font-family: Arial; }

Miguel Ber
Miguel Ber Software Developer

Ingeniero informático y desarrollador de aplicaciones web. Experto en desarrollo web, Webmaster, e-commerce y SEO.

Code is {poetry}
¿Necesitas un desarrollador? Contáctame!
¿Tienes alguna pregunta? Te respondemos ya!!

Comparte esto:

  • Haz clic para compartir en Google+ (Se abre en una ventana nueva)
  • Haz clic para compartir en Twitter (Se abre en una ventana nueva)
  • Haz clic para compartir en Facebook (Se abre en una ventana nueva)
  • Haz clic para compartir en LinkedIn (Se abre en una ventana nueva)
  • Haz clic para compartir en Pinterest (Se abre en una ventana nueva)
  • Haz clic para compartir en Tumblr (Se abre en una ventana nueva)
  • Haz clic para enviar por correo electrónico a un amigo (Se abre en una ventana nueva)
Tags: css, desarrollo web, html

Deja un comentario Cancelar respuesta

Tu dirección de correo electrónico no será publicada.

Síguenos en las redes

Facebook
Twitter
Google+
Skype
GitHub
  • El mejor ordenador para empezar a programar
  • dell Opinión sobre el portátil Dell XPS 13 Review
  • Los mejores routers WiFi
  • Comparando los sistemas de almacenamiento en la nube
  • discos duros el mejor Comparativas disco duros externos
  • ips Cómo utilizar mi servidor como proxy
codifica.me
Este sitio emplea cookies para prestar sus servicios, para personalizar anuncios y para analizar el tráfico. Si utilizas este sitio web, se sobreentiende que aceptas el uso de cookies..Accept Leer más
Privacidad y Política de Cookies
loading Cancelar
La entrada no fue enviada. ¡Comprueba tus direcciones de correo electrónico!
Error en la comprobación de email. Por favor, vuelve a intentarlo
Lo sentimos, tu blog no puede compartir entradas por correo electrónico.