Introducción a CSS

Clase 38 de 67 • Curso de HTML5 y CSS3 2015

Resumen

Material de la clase:
Repositorio del Curso
Descarga directa del Material

Enlaces recomendados:
https://github.com/Wakkos/CSS-Guidelines
https://developer.mozilla.org/es/docs/Web/HTML/Atributos
http://codepen.io/Wakkos/pen/xAhdq
https://github.com/daylerees/colour-schemes
http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Julian Osorio

student•

No sabia que se llamaban Selectores, muy buena la clase va añadiendo muy buenos conocimientos.

David Del Toro Rojas

student•

Esta clase y la anterior en lo particular me parece difícil comprender puesto que no se explican bien las etiquetas HTML, solo se van agregando.

Pero seguimos avanzando.

John Alexander Agudelo Galeano

student•

el selector universal afecta todos los componentes

Emerson Cedeño

student•

amigos una consulta, veo que al momento que el instructor salva el archivo .CSS, sin refrescar en el navegador los cambios se reflejan de una vez, me podrían confirmar cómo se logra esto? es un paquete que hay que instalar en el sublime?

Fabian Enrique Rocha Bustos

student•

Hola amigo, esto se llama Automatic Browserrefresh-sublime. Como instalarlo guíate por....

Jhon Carlos Colorado Angulo

student•

Muy buena la introducción de selectores.

John Rios

student•

En caso tal de que quieran identar su código de una manera sencilla para hacer el código mas legible les recomiendo: http://stackoverflow.com/questions/9495007/indenting-code-in-sublime-text-2

Cesar David Ramírez Dimaté

student•

Excelente aporte, en otras palabras... En Sublime Text -> Preferences - > Key Bindings -> User y colocar:

[  
    { "keys": ["f12"], "command": "reindent"}  
]

Y para los que tienen Windows y quieren cambiar alguno de los comandos (por ejemplo comentarear el código fuente)... En Sublime Text -> Preferences - > Key Bindings -> Default y buscar la palabra comment y cambiar ctrl+/ por el comando de teclas que ustedes deseen.

Enna Rosaldo

student•

/*Selector UNiversal*/  
/*  
* {  
color:red;  
}  
*/  
h2 {font-family: Arial, Helvetica, sans-serif color: green;  
}  
.article-header{  
  
font-family: Arial, Helvetica, sans-serif color: yellow;  
  
}

DAVID PAUL PORRAS CORDOVA

student•

En el minuto 8:21 se menciona que podemos usar varios H1 en la web, sin embargo la recomendación es que no se puede usar más de uno.

DAVID PAUL PORRAS CORDOVA

student•

Claro que me refiero por página.

Cesar David Ramírez Dimaté

student•

El dice "cómo van a ser todos los h1 de mi web" no que podemos utilizar varios... hace referencia a cómo un selector de elemento definido en el CSS es afectado en todo el html. Lo que tu dices es verdad, utilizar un único h1 por página.

David Del Toro Rojas

student•

Selector universal:

*   
{  
  
}

Selector de elemento:

.class  
{  
  
}

David Del Toro Rojas

student•

No. error.
El selector de elemento es:

h1  
{  
}

El selector de clase es:

.class  
{  
}

Alex Fernandez

student•

como haces ese asterico, yo l tengo asi *

Alex Fernandez

student•

no me cambian los colores

Viridiana Hernández

student•

Estimado,
Recuerda que si estás utilizando Sublime Text 2, requieres darle formato a tu proyecto o página de código al iniciar uno nuevo. Es decir para un proyecto .HTML requieres ir al menú file-->Save with encoding-->UTF-8 y en el menú-->View-->Syntax--> seleccionas HTML y para un archivo de formato CSS seleccionas la opción CSS.
Saludos,

Cristian Vega

student•

El * remplazaría lo mismo que el body{} ??

Miguel Martinez Martinez

student•

no, el selector de asterisco *{} aplica los estilos a absolutamente todos los elementos del documento;por otro lado el selector de etiqueta body{} aplica los estilos unicamente a la etiqueta body y los hijos "heredan" las propiedades que sean heredables y que esten definidos en body{}. espero que me hayas entendido...

Diego Javier Linares Villegas

student•

Interesantisima la clase yo soy desarrollador de java pero estoy entrando en este mundo de js y HTML5 super bien todo como lo explican.

David Rosillo Ricardo

student•

Hola, ¿me podrían recomendar un buen reset de CSS? Conozco el de Eric Meyer pero quisiera saber si hay algún otro más "pro".

Blanca Cruz

student•

Espero te sirva http://cssreset.com/

Juan Diego Brocca

student•

Normalize.css

Roberto Gassó

student•

Clases de selectoreshttp://librosweb.es/libro/css/capitulo_2/selectores_basicos.html

Blanca Cruz

student•

Encontre esto, espero te sirva http://cssreset.com/

Camilo Torres Mosquera

student•

Buenos días, tengo una curiosidad sobre css, al generar muchas lineas de estilos y como estos se ejecutan en cascada hacen mas lento mi pagina?
Como es la respuesta de la web si en vez de generar un estilo con muchas lineas de código genero varios estilos con pocas?

Cesar David Ramírez Dimaté

student•

Eso depende. Si tienes un archivo CSS que cubre todo lo que tu portal necesita no es necesario crear varios archivos con estilos puntuales. Ahora, ponte a pensar lo siguiente... si tienes más archivos el navegador tiene que hacer más peticiones (request) al servidor lo cual ya por ese lado sería más lento si son archivos independientes. De igual manera, lo que se demora en ese proceso para ambos casos es muy poco, sería que hicieras la prueba con un servidor o conexión limitada, para notar la diferencia como tal. Saludos.

Duban Alexei Suarez Mejia Alexei Suárez Mejia

student•

holas... revisando el enlace mencionan algo de clases multiples, pero con DIV, entiendo la aplicabilidad en CSS pero no en HTML. :)

Choi Javier

student•

Dentro de un mismo Div se le pueden asignar varias clases de modo simultaneo. Esto se hace separando las diferentes clases por medio de un espacio.

En el HTML...  
<div class="estilo1 estilo2 estilo3">  .... </div>  
  
En el CSS...  
.estilo1 {  
   background: red;  
}  
.estilo2 {  
   font-size: 4em;  
}  
.estilo3 {  
   color: yellow;  
}  
EN CONCLUSION  
El div en cuestion va a adoptar el estilo combinado de las 3 clases asignadas. Es decir que tendra un fondo de color rojo, un texto de tamaño de 4em y de color amarillo.

michael rodriguez otalora

student•

a la hora de guardar el archivo styles.css no me va haciendo los cambios alguien sabe por que lo guarde en la misma carpeta donde esta el html

Alejandro Guevara

student•

Hola, verifica en tu index.html que este la etiqueta para jalar el css (tiene que estar igual de escrito que tu archivo)

Introducción a CSS

Bienvenidos

Materiales

Descarga el código del proyecto

Introducción a HTML5 y CSS3

Preguntas antes de la clase

Diferencias entre Backend y Front-end

¿Qué es un Frontend?

¿Qué es HTML y CSS?

Semántica en HTML5

Metodología BEM