El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Dreamweaver CC 2017 esencial

Creación de reglas y propiedades CSS con Dreamweaver CC 2017

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Ahora que conocemos el diseñador de CSS y que hemos añadido un archivo CSS a nuestro sitio y a nuestra página, vamos a crear selectores CSS que modifiquen las propiedades de aspecto de las etiquetas HTML.

Transcripción

(hombre) Tengo ya estilos CSS asociados sobre mi página, pero esta página en realidad no tiene ninguna propiedad asociada a ningún selector asociado a ningún elemento, necesito añadirlos. ¿Cómo añadir selectores? Es muy fácil, selecciono un elemento, pulso en el botón de 'Más', de selectores y lo tengo. Hay veces que es muy fácil seleccionar un elemento, por ejemplo, esta imagen, al seleccionarla vemos que me pone que es la etiqueta imagen y la asociaría directamente, pero hay veces que no es tan fácil. Supongamos que yo quiero trabajar sobre el "header" y luego sobre lo que es la parte que va colocada a la derecha y otra a la izquierda, ¿Cómo lo consigo? Es muy cómodo, utilizar el Dom, dentro del Dom veo que tengo el "header" y que dentro de él tengo el "header left" y el "header righ". Selecciono ese "header", me vuelvo de nuevo al diseñador CSS haciendo doble clic, pulso en "Más", y esto me añade un poco de código. Al hacer clic, me acepta ese selector. Este código es interesante y es interesante pararme un poco a verlo, porque me ha añadido una almohadilla y un nombre y por otro lado, otro nombre. Los nombres que no llevan ni almohadilla ni punto, los que vienen así sin más, hacen referencia a etiqueta, eso significa, que cualquier "header" que se encuentre, va a recibir las propiedades que yo añada. Cuando tienen delante esta etiqueta, eso significa, voy volverme a la vista de código, a elementos que tienen un identificador concreto. Así que yo, cuando utilizo un identificador que tiene que ser único, por cierto, siempre son únicos, eso me va a servir para que me recupere solo un objeto en concreto. En mi caso en realidad no necesito tanto, yo simplemente, con hacer que todas las etiquetas header funcionen igual, ya me podría valer. Volviendo de nuevo a este diseñador, ya tengo este "header", este selector, pero quiero añadir propiedades. Hay muchos tipos de propiedades, y para evitar que sea complicado, se han dividido visualmente en tipos, entonces tengo propiedades de diseño, propiedades de texto, propiedades de borde, propiedades de fondo y luego algunas otras propiedades. En mi caso son propiedades de diseño, y en concreto lo que quiero es elegir cómo se va a posicionar ese elemento en la pantalla. Aquí tengo la propiedad posición, que tiene un desplegable que me permite elegir si quiero que sea una posición 'Estática', para que aparezca colocado fijo, 'Absoluta', para que vaya independiente de elementos que aparecen en el HTML, 'Fija', también que es muy parecido a estático, o relativa, que va a servirme para que luego haya otros elementos que se coloquen de manera absoluta, pero sobre este "header", Así que voy a pedir que tenga posicionamiento 'Relativo', por ejemplo, pues además, puedo pedirle otras propiedades que tengan que ver con el diseño, por ejemplo, como decía, el alto, puedo poner que tenga el número de píxeles y que tenga 125 píxeles. Pulso en 'Intro'. Y vemos que se va generanto el código automáticamente. Puedo añadirle más cosas, por ejemplo, que tenga un "padding", que tenga un color de fondo, que tenga un ancho determinado, de momento lo voy a dejar así. El siguiente paso, quiero trabajar sobre los elementos sueltos que hay dentro. Para ello puedo volver al dom y dentro del dom, seleccionar el "header left", son los elementos que tienen que aparecer colocados a la izquierda. Pues siguiendo con las mismas propiedades, necesito añadir un selector para ese "header". Pulso en más y aquí vemos el selector que está creando. Es interesante porque se ve que utiliza de nuevo la almohadilla para "wrapper", utiliza la etiqueta "header", pero también utiliza la clase "header left". Y sé que es una clase, porque viene precedida por este punto. Los puntos sirven para clases. Y sirven básicamente para que yo pueda aplicar estilos a muchos elementos distintos. Dicho de otro modo, el selector que tiene que ver con el identificador, es único, para un solo elemento. El identificador de etiqueta es para todas las etiquetas. El identificador de clases sirve para que haya varios elementos distintos que al tener la misma clase, tengan ciertas características similares. Voy a eliminar el trozo que me sobra, voy a dejar solamente la clase, y ahora sobre esa clase, le voy a pedir que tenga posicionamiento, pero en este caso, 'Absoluto'. Y en vez de añadirlo desde diseño, tengo también la opción de pulsar en más y aquí, empezar a escribir. Según empiezo a escribir, me deja ver esa posición y me deja elegir el valor que quiero que tenga, posicionamiento absoluto. Vuelvo a pulsar debajo y en este caso, ¿qué es lo que quiero? que aparezca colocado a la izquierda. Vamos a utilizar "left", aquí lo vemos y también me permite elegir dónde, a la izquierda, con poner un cero, me vale. Y puedo volver a hacer clic y pedir que el valor "bottom", la parte inferior, también sea con valor cero. Y aquí vemos como se ha colocado de tal manera que ha quedado en la esquina inferior izquierda de ese "header" que le contiene. Para acabar de rematarlo y hacerlo de manera un poco distinta, puedo seleccionar el "header right", volver de nuevo al diseñador CSS y ahora voy a trabajar de una manera distinta. Voy a poner 'Mostrar conjunto'. Aquí me muestra las propiedades para un selector concreto, de todas formas yo tengo seleccionado el "header right", no el "left". Si yo pulso en 'Más' y me añade un nuevo selector, en realidad hay que pararse a pensar que yo lo que tengo seleccionado, este objeto que tengo seleccionado, "header right", no es y esto es muy importante, el objeto sobre el que estoy aplicando las propiedades. Para saber sobre qué objeto estoy aplicando las propiedades, me tengo que mover un poco más arriba y ver que selector tengo seleccionado, que no es "header right", es "header left'. Para entonces, añadir propiedades a ese nuevo objeto, tengo que añadir un nuevo selector, siguiendo el proceso exactamente igual que había hecho antes. Elimino, ya tengo selector, y ahora si pulso en "Mostrar conjunto", me muestra solo las propiedades que ya tiene aplicadas, y si pulso en "Añadir una nueva propiedad", puedo pedir que tenga un posicionamiento absoluto, como vemos, se puede hacer bastante rápido y en este caso hacer que esté colocado sobre la parte derecha, le he dado más de lo que debía... vale, he seleccionado el que no era, bien, aquí lo tengo, "Posicionamiento absoluto". Que se coloque sobre la parte derecha, pulso 'Intro' y que se coloque sobre la parte inferior, pero en vez de ser justo al borde, pues esté colocado a 20 píxeles de distancia. Como se puede observar, ya se han empezado a ordenar los elementos. Resumiendo, aplicando selectores a etiquetas, clases y también podríamos aplicarlos sobre identificadores, y luego las clases las vamos añadiendo dentro de este panel propiedades.

Dreamweaver CC 2017 esencial

Crea sitios web gracias al software de Adobe, Dreamweaver CC 2017. Con este repaso esencial a sus fundamentos podrás crear páginas responsive y mostrar tus contenidos a la última.

6:11 horas (78 Videos)
Actualmente no hay comentarios.
 

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.