🌐 Guía Visual y Actualizada de CSS3, HTML5 y PHP 7.3
Esta guía te permitirá comprender de forma visual y práctica cómo aplicar estilos con CSS3, estructurar páginas con HTML5 y trabajar en el servidor con PHP 7.3.
🎨 CSS (Cascading Style Sheets)
Permite aplicar estilos a documentos HTML. Actualmente se utiliza CSS3.
📌 Formas de aplicar CSS
- Estilo en línea
Se utiliza el atributostyledirectamente dentro de una etiqueta. htmlCopiarEditar<p style="font-size:20px; background-color:blue;">Texto</p> - Estilo embebido
Dentro de la etiqueta<head>con<style>. htmlCopiarEditar<style> p { font-size:20px; background-color:blue; } </style> - Estilo externo
Archivo.cssenlazado con<link>: htmlCopiarEditar<link rel="stylesheet" href="estilos.css" type="text/css" media="screen">
Prioridad: Inline > Embebido > Externo.
🔍 Tipos de Selectores
- Etiqueta →
p { ... }→ Aplica a todas las etiquetas<p>. - ID →
#idEjemplo { ... }→ Aplica a un elemento con ese ID. - Clase →
.miClase { ... }→ Aplica a todos los elementos con esa clase. - Universal →
* { ... }→ Aplica a todo el documento. - Descendiente →
div p { ... }→ Aplica a<p>dentro de un<div>. - Hijo directo →
div > p { ... }. - Adyacente →
h1 + p { ... }. - General de hermanos →
h1 ~ p { ... }. - Atributo →
[target="_blank"] { ... }. - Pseudo-clases →
a:hover,a:visited,input:focus, etc. - Posición →
position: static | relative | absolute | fixed | sticky;
🛠 Herramientas y Frameworks
- Preprocesadores: SASS, LESS, Stylus.
- Frameworks CSS: Bootstrap, TailwindCSS, Bulma, Foundation, Materialize.
🖥 HTML5 (HyperText Markup Language)
Lenguaje de marcado para estructurar contenido web.
📌 Estructura básica
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi página</title>
</head>
<body>
<h1>Hola Mundo</h1>
</body>
</html>
📑 Etiquetas nuevas en HTML5
- Estructura:
<header>,<footer>,<nav>,<article>,<section>,<aside>. - Medios:
<audio>,<video>,<canvas>,<svg>,<source>,<track>. - Formularios: Nuevos tipos de input como
email,date,number,color,range,search, etc.
📦 APIs de HTML5
- LocalStorage y SessionStorage → Almacenamiento local en el navegador.
- Geolocalización →
navigator.geolocation.getCurrentPosition() - Drag & Drop → Arrastrar y soltar elementos.
- Web Workers → Procesos en segundo plano.
⚙ PHP 7.3 (Personal Hypertext Preprocessor)
Lenguaje que trabaja en el servidor para generar contenido dinámico.
📌 Características
- No distingue mayúsculas de minúsculas en nombres de variables.
- Variables se declaran con
$: phpCopiarEditar$mensaje = "Hola mundo"; echo $mensaje; - Comentarios: phpCopiarEditar
// Una línea /* Varias líneas */
🔗 Incluir archivos externos
include("conexion.php");
require("funciones.php");
🌍 Variables globales y locales
$globalVar = 10;
function test() {
global $globalVar;
echo $globalVar;
}
🛠 Frameworks y entornos PHP
- Frameworks: Laravel, Symfony, CodeIgniter, Zend, CakePHP.
- Entornos locales: XAMPP, MAMP, WAMP, LAMP.
📌 Resumen visual
✅ CSS3 → Apariencia y diseño.
✅ HTML5 → Estructura y contenido.
✅ PHP 7.3 → Lógica y procesamiento en servidor.
💡 Combinados, forman la base del desarrollo web moderno.
Anacrolibrum 
Deja un comentario