PLANEACION SEGUNDO PERIODO Y FASE INTRODUCTORIA A HTML5 Y CSS
PLANEACIÓN SEGUNDO PERIODO
Consulta:
1. ¿QUÉ SE ENTIENDE POR CSS INTERNO Y EXTERNO?
Hoja de estilo externa
En Empezar con el CSS, vinculamos una hoja de estilo externa a nuestra página. Este es el método más común y útil para adjuntar CSS a un documento, porque puedes vincular el CSS a varias páginas y dar estilo a todas ellas con la misma hoja de estilo. En la mayoría de los casos, las diferentes páginas de un sitio web se verán más o menos iguales, de modo que puedes usar el mismo conjunto de reglas para el aspecto y la interacción básicos.
Una hoja de estilo externa significa que el CSS está escrito en un archivo independiente con una extensión .css y que lo vinculas desde un elemento <link> de HTML:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Mi experimento CSS</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>¡Hola, mundo!</h1> <p>Este es mi primer ejemplo de CSS</p> </body> </html>
Copy to Clipboard
El archivo CSS podría parecerse a esto:
h1 { color: blue; background-color: yellow; border: 1px solid black; } p { color: red; }
Copy to Clipboard
El atributo href del elemento <link> tiene que hacer referencia a un archivo de tu sistema de archivos.
En el ejemplo anterior, el archivo CSS está en la misma carpeta que el documento HTML, pero puedes colocarlo en otro lugar y especificar la ruta adecuada. Por ejemplo:
<!-- Dentro de un subdirectorio llamado styles dentro del directorio de trabajo --> <link rel="stylesheet" href="styles/style.css"> <!-- Dentro de un subdirectorio llamado general, que está en un subdirectorio llamado styles, dentro del directorio de trabajo --> <link rel="stylesheet" href="styles/general/style.css"> <!-- Sube un nivel de directorio, y luego dentro de un subdirectorio llamado styles --> <link rel="stylesheet" href="../styles/style.css">
Copy to Clipboard
Hoja de estilo interna
Una hoja de estilo interna es cuando no hay ningún archivo CSS externo, sino que colocas tu CSS dentro de un elemento <style> contenido dentro del elemento <head> del HTML.
En este caso, el HTML se vería así:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Mi experimento CSS</title> <style> h1 { color: blue; background-color: yellow; border: 1px solid black; } p { color: red; } </style> </head> <body> <h1>¡Hola, mundo!</h1> <p>Este es mi primer ejemplo de CSS</p> </body> </html>
Copy to Clipboard
Esto puede ser útil en algunas circunstancias (tal vez estés trabajando con un sistema de administración de contenido donde no sea posible modificar los archivos CSS directamente), pero no es tan eficiente como las hojas de estilo externas: en una página web, deberías repetir el CSS en cada página y actualizarlo en varios lugares en caso de que hubiera que hacer cambios.
2. ¿QUÉ SON ATRIBUTOS ID Y CLASS?
el atributo class te ayuda a enlazar un estilo de CSS (lo que define el aspecto de ese elemento, y todos los demás elementos donde apliques ese CSS). Por ejemplo:
.rojo { background-color: red; }
<div class="rojo">Hola</div>
<div class="rojo">Qué tal</div>
Y el atributo id te permite identificar ese elemento de forma única en todo el documento para usarlo después, ya bien sea con CSS o con javascript..rojo { background-color: red; }
<div class="rojo">Hola</div>
<div id="rojo" class="rojo">Qué tal</div>
document.getElementById('rojo').innerHTML = 'Qué tal, bien gracias.'
Los "id" no deben repetirse en mismo documento o ocurrirán comportamientos inesperados.
Resumiendo, con un id actúas directamente en el elemento que quieres y con class puedes actuar masivamente en todos los elementos que usen esa clase.
3. ¿QUÉ SON SELECTORES CSS?
Los selectores CSS son herramientas utilizadas para definir el estilo que quieres dar a tus elementos en CSS. Existen muchos tipos de selectores en este lenguaje, cada uno con su propia sintaxis y utilidad. El uso de las reglas de programación correctas ayuda al explorador a aplicar propiedades específicas a los elementos indicados.
Los elementos a los que dirige un selector CSS son comúnmente referidos como «sujetos del selector». Estos sujetos pueden seleccionarse con base en el tipo de elemento al que pertenecen, su clase, su nombre de identificación por algún atributo o pseudo-estado.
Con tanta variedad de tipos no solo puedes diseñar tu sitio de manera más rápida; también puedes mantener un control más detallado y específico sobre tu código.
4. RESOLVER EN EL ENLACE EL TEST Y PUBLICAR RESULTADOS COMO UNA
IMAGEN (ENLACE: https://www.digitallearning.es/tests/test-html-css.html)
5. DIGA DOS CONCLUSIONES RELACIONADOS CON LA CONSULTA REALIZADA.
Gracias a esto se amplia nuestro conocimiento, ayudándonos de manera que podemos mejor y embellecer los códigos que se deban realizar, además de esto estas herramientas le dan un mejor uso y facilita a la hora de crear y aprender.
En general la información que investigamos nos ayudan con respecto a conocer maneras diferentes de como arreglar los códigos y de igual forma, estos conocimientos nos indicaran y guiaran en un futuro para aplicarlo en nuestra vida laboral.
6. WEBGRAFIA
https://developer.mozilla.org/es/docs/Learn/CSS/First_steps/How_CSS_is_structured
https://es.stackoverflow.com/questions/368145/cu%C3%A1l-es-la-diferencia-entre-atributo-class-y-atributo-id
https://blog.hubspot.es/website/selectores-css
Comentarios
Publicar un comentario