1 00:00:05,040 --> 00:00:21,260 Buenos días a todos. Tras algunos conceptos de formularios, vamos a ver un ejemplo de un formulario de contacto. 2 00:00:21,260 --> 00:00:30,699 Aquí tengo el código de ese formulario de contacto y tengo tanto la parte CSS, el archivo CSS, como el archivo HTML. 3 00:00:31,579 --> 00:00:41,799 Iremos viendo cada una de las partes, cómo la hemos realizado para que salga el formulario, como vamos a ver a continuación. 4 00:00:41,799 --> 00:00:54,950 El formulario sería este de aquí y sería con este aspecto. Entonces, vamos a ver cada una de las partes para poder llegar a realizar este formulario. 5 00:00:54,950 --> 00:01:06,030 Lo primero que quiero que veamos sería un repaso en cuanto a lo que es DIP y en cuanto a lo que es lo básico de CSS. 6 00:01:06,030 --> 00:01:30,019 En cuanto a CSS, en el aula virtual hice un repaso de CSS, pero voy a volverlo a hacer para poder ver cómo ejecutar o cómo introducir un fichero .css en nuestro formulario, en nuestra página HTML. 7 00:01:30,019 --> 00:01:49,439 Aquí vemos que para poder introducir CSS en la misma se podía hacer de tres maneras. Una era una declaración en línea, una declaración interna o una declaración externa. En cuanto a la declaración en línea, no era nada más que en la propia etiqueta se metía la palabra style con la propiedad y el valor. 8 00:01:49,439 --> 00:02:09,039 Cuando queríamos una declaración interna, lo que se hacía es que se metía dentro del head la línea de style barra style y dentro se metían cada una de las propiedades, relación propia de valor, separados por dos puntos y franqueados por dos llaves. 9 00:02:09,039 --> 00:02:16,520 se metía cada una de las propiedades de valor para cada uno de los selectores, cada uno de los selectores de la propia página. 10 00:02:17,439 --> 00:02:21,620 Eso se tenía que poner dentro de style y barra style. 11 00:02:22,180 --> 00:02:30,400 En cuanto a la tercera declaración, era a través de un archivo externo, que era el llamar a un archivo externo a través de link, 12 00:02:30,400 --> 00:02:34,460 en el que le hacíamos referencia a una hoja de estilo 13 00:02:34,460 --> 00:02:38,879 con un fichero de tipo text barra css 14 00:02:38,879 --> 00:02:41,340 y con la referencia a ese fichero 15 00:02:41,340 --> 00:02:43,740 que había que poner en la misma ruta donde estaba 16 00:02:43,740 --> 00:02:47,240 la propia página html 17 00:02:47,240 --> 00:02:50,139 y llamábamos a ese fichero que aquí por ejemplo 18 00:02:50,139 --> 00:02:51,979 se llama ruta archivo punto css 19 00:02:51,979 --> 00:02:53,759 también se podía hacer a través de la palabra 20 00:02:53,759 --> 00:02:56,759 con las palabras style 21 00:02:56,759 --> 00:03:02,580 pero poniendo un import a través de import. 22 00:03:03,099 --> 00:03:09,719 Una vez que hemos visto en cuanto a cómo meter una hoja de estilo 23 00:03:09,719 --> 00:03:14,960 o hacer referencia a algún estilo a través de una página HTML, 24 00:03:15,639 --> 00:03:22,680 vamos a ver también o repasar cómo era la sintaxis de las reglas de estilo. 25 00:03:22,680 --> 00:03:38,879 Era un selector, una llave de apertura, luego la propiedad, dos puntos y lo que era el valor. Punto y coma y se cerraba la llave. Esto está indicando que creemos que para este párrafo, que sería el selector P, tendríamos que tener un color de color azul. 26 00:03:38,879 --> 00:03:57,539 En cuanto a selectores, pues había muchos selectores, tantos como componentes en una página HTML y tenemos que uno en el que seleccionaba todos, lo que era el selector universal, pues era a través del asterisco y luego se ponía la propiedad con el valor. 27 00:03:57,539 --> 00:04:13,460 Luego, también hablar de los selectores de clase. El selector de clase era cuando metíamos la palabra class dentro de una etiqueta. Por ejemplo, en párrafo metíamos class y decíamos que a esta clase la llamábamos párrafo centrado. 28 00:04:13,460 --> 00:04:30,240 De tal manera que luego podríamos hacer referencia a ese párrafo exclusivamente y no a todos los de la página HTML. Aquellos párrafos que tenían la palabra class igual a párrafo centrado serán afectados por las reglas de estilo que le pongamos. 29 00:04:30,240 --> 00:04:32,839 veis aquí como se hace referencia al mismo 30 00:04:32,839 --> 00:04:34,240 se puede hacer referencia de dos maneras 31 00:04:34,240 --> 00:04:37,139 p.y el nombre 32 00:04:37,139 --> 00:04:39,240 de esa clase y luego dentro la propiedad 33 00:04:39,240 --> 00:04:41,120 de manera que solo afectará a aquellos 34 00:04:41,120 --> 00:04:42,019 párrafos que tengan 35 00:04:42,019 --> 00:04:45,319 como nombre de clase 36 00:04:45,319 --> 00:04:47,319 párrafo centrado, aquellos párrafos 37 00:04:47,319 --> 00:04:49,160 restantes en el que no tengan 38 00:04:49,160 --> 00:04:50,620 esa clase 39 00:04:50,620 --> 00:04:53,360 con ese nombre, pues no se verán 40 00:04:53,360 --> 00:04:55,300 afectados por estas reglas, la otra manera 41 00:04:55,300 --> 00:04:57,439 será poniendo punto párrafo 42 00:04:57,439 --> 00:05:02,000 centrado, veis aquí 43 00:05:02,000 --> 00:05:21,860 tenemos un ejemplo en el que se le ha añadido al párrafo, veis aquí hay tres tipos de 44 00:05:21,860 --> 00:05:27,779 párrafos, uno P con la clase clase azul, otro con la clase clase roja y otro sin clase. 45 00:05:28,240 --> 00:05:34,579 Entonces cuando pongamos P.clase roja afectará solo a este de aquí, que será el que tenga 46 00:05:34,579 --> 00:05:38,819 el nombre de la clase para clase roja. En cambio, estos dos no se verán afectados por 47 00:05:38,819 --> 00:05:43,220 todas estas reglas de selección. En cuanto ponemos punto clase azul, solo se afectará 48 00:05:43,220 --> 00:05:47,560 a este párrafo que pone clase azul. Pero no solo a este párrafo, al poner el punto 49 00:05:47,560 --> 00:05:54,839 y no indicar el selector, también afectará a este encabezado, puesto que su clase también 50 00:05:54,839 --> 00:06:04,329 se llama clase azul. Tan solo nos quedan los IDs. También podemos poner al párrafo 51 00:06:04,329 --> 00:06:09,949 en vez de class ponerle un nombre al id, id igual al nombre que queramos único y luego hacerle...