[Música tocando] 

Doug LLOYD: Entón, imos dar unha vídeo para falar máis dun idioma. Esta vez imos falar sobre CSS. Entón, CSS, que é curto para CSS, é outra linguaxe que usan na construción de sitios web. Pense nisso como este. O HTML é o que usan para organizar o contido que quere poñer na nosa páxina, CSS é a ferramenta que xeralmente usan para personalizar o xeito no que os nosos sitios ollar, e como a experiencia do usuario realmente é, interactuando con o noso sitio. 

Semellante ao HTML, CSS é non unha linguaxe de programación. Non ten lóxica. Non ten variables. Non ten ningún tipo de que fluír as cousas relacionadas que fai C. É unha linguaxe de estilo. E a súa sintaxe é moi simple, e só describe como os elementos do noso A páxina está seguro de HTML elementos debe ser modificado. Para iso, se non ten Aínda non asistir o noso vídeo en HTML, ou non está familiarizado con HTML xeralmente, Pode querer dar un ollo ao que en primeiro lugar, porque esta discusión sobre CSS dependerá de algún coñecemento de HTML. 

Entón aquí está o realmente simple folla de estilo CSS. Mesmo se nunca programado con CSS antes, Estou seguro que pode descubrir o que este estilo fai. O que fai? Ben, aplicados ao corpo do noso sitio páxina, todo entre as etiquetas do corpo na nosa HTML, e define o cor de fondo da páxina para azul. Ben, é un estilo moi sinxelo. De feito, é moi humano linguaxe agradable, CSS. Así, mesmo se nunca usou antes, probablemente podería adiviñar o que fixo. En realidade, se nós cargados unha páxina onde este estilo foi incorporado dalgunha forma, a cor da nosa páxina de fondo faría ser azul, e non o estándar branco. 

Entón, como imos construír follas de estilo? Ben, primeiro temos que identificar un selector. No último exemplo, selector que era o corpo. Entón temos un diálogo aberto chaveta, e estamos comezará a definir o folla de estilo para ese selector. En entre as chaves, nós só ten unha lista de pares de valores clave. O par valor anterior era cor azul do fondo punto e coma, pero podemos facer máis e máis destes. Pode ter varias cousas aplicando a esa marca, que o corpo selector. Cada un deles é separado por un punto e coma, e chamamos a cada un deles unha declaración, unha declaración CSS. Cando acabarmos con toda a nós styling quere aplicar a esa marca particular, só temos unha de peche prepare para acabar coa folla de estilo, e estamos a facer definindo a folla de estilo para que selector particular. 

Cales son algunhas das propiedades CSS comúns? Ben, quizais quere poñer un borde ao redor de algo. Entón pode dicir, beira, que sería a súa chave, e, a continuación, os seus valores serían, o estilo, cor e ancho quere que sexa. Así, o modelo pode ser un sólido liña, unha liña de puntos, unha liña tracejada, unha liña do cumio, o que sería liña ondulada. Quizais sexa telo ser azul ou negro ou verde. Que quere que sexa 1 ou 2 ou 10 píxeles de ancho. Pode especificar todas estas cousas. Pode utilizar definir o fondo cor da súa páxina de forma particular. Xa vimos que, definindo a fondo do corpo a ser azul. 

Logo, pode usar a palabra clave, así CSS ten certas cores que son construídos para el, azul, verde, Black, unhas cores moi simple que coñecemos. Pero tamén pode especificar calquera hex cor que desexa. Lembre que as cores poden ser identificados por un conxunto de tres números hexadecimais de 0 a 255, RG e b, o compoñente vermello, verde e azul. E así podemos especificar calquera cor que queremos por, en vez de usar azul ou verde ou negro, usando libres e, a continuación, seis díxitos do hex, e que nos daría cor de seis díxitos. Entón esta é a cor de fondo. 

Temos tamén o primeiro plano cor, que é xeralmente será o texto da súa páxina. E podería facelo de forma semellante con contrasinal e ou seis díxitos hex. Entón podes especificar calquera cor que tanto para o texto da súa páxina contra unha determinada cor de fondo, alí enriba. Tamén pode cambiar e tratar coa pia batismal, ea forma de texto é procesado na páxina. 

Para que poida cambiar o tamaño da fonte. Podes usar palabras clave, como extra, pequeno extra, ou xx pequeno ou medio, gran, e así por diante. Podes usar puntos fixos, 10 punto, punto 12, e así por diante. Pode utilizar porcentaxes, o 80%, 20%, onde 100% é a fonte estándar o tamaño, o cal é xeralmente vai ser algo así como 11 ou 12 puntos. Ou tamén se pode basear-lo do tamaño da fonte máis recente. Se acaba de escribir algo e sabe o que quere é para ser menor, pero non sabe o tamaño que exactamente quere que sexa, ben, pode simplemente dicir, tamaño de fonte máis pequena. E vai basear fóra do, só por riba, é o tamaño do tipo de letra. E pode obter menor ou maior. Polo tanto, hai unha morea de diferentes formas de especificar o tamaño do tipo de letra. 

Tamén pode especificar o que familia de fonte desexado. Se tes un especial nome, hai un xeito en CSS-- nós non imos falar sobre iso aqui-- para definir un tipo de letra moi específico e incorpora-lo na súa páxina. Tamén pode usar nomes xenéricos. Hai unha morea de sitios fontes de confianza que son predefinidos no CSS. E se vostede é un usuario de Microsoft Oficina nos últimos 20 anos, probablemente está familiarizado con moitas destas fontes de confianza web xa, Times New Roman, Arial, Courier New, Georgia, Tahoma, Verdana, etcétera. Aqueles son todos considerados web fontes de confianza. E, de feito, parte do razón pola que eles viñeron a ser estaba a ser usado para facer web-- cada páxina tiña acceso a este estándar definido de tipos de letra con varios serifas, e todo isto material de fonte non imos entrar, pero estes son xeralmente accesibles no seu CSS, mesmo se non fai iso se non establecer as fontes. Para rematar, pode aliñar o seu texto, en vez de ser, por defecto, aliñado á esquerda, podería aliñar-lo á dereita, ou pode aliñar-lo centrado, ou xustificados para que bateu ambas marxes. Polo tanto, estas son todas as opcións que pode usar para cambiar o seu texto parece, e como aparece na súa páxina. 

Os seus selectores non facer ten que ser só as etiquetas. Xa vimos un tag body selector, e selector de etiquetas parece só como aquel. Vostede nomea un tag, e entón definir unha folla de estilo para esa marca. Pero tamén se pode facer algo chamado un selector de ID. Un selector ID parece moi similar. Pero teña en conta que agora non está a usar unha etiqueta HTML, eu estou usando, neste caso, #unique, ou hash exclusivo. Se se lembrar do noso vídeo HTML, falamos sobre como as etiquetas poden ter atributos. 

E un atributo que se aplica para practicamente todas as etiquetas HTML, pero nós non falamos sobre iso, é algo chamado unha etiqueta de identificación. Entón, iso sería especial CSS unicamente a etiqueta HTML que ten unha identificación moi específico, que teña nomeado. Entón se ten algún lugar no seu código, en algún lugar no seu ficheiro HTML, unha marca e especificar como un atributo a esa marca, ID iguala orixinal, este especial de estilo aquí só se aplica entre esa marca coa identificación do orixinal. 

Tamén pode facer algo chamado un selector de clase. Así, ademais de teren Atributos ID, tamén se pode engadir un atributo de clase de etiquetas HTML. E cando usa un atributo de clase, pode ser aplicado a varias marcas. Entón se ten moitas cousas que son semellantes, que quere dicir, tag aberta blah, blah, blah, blah, clase iguala alumnos. E entón este particular stylesheet se aplicaría para cada etiqueta cuxa clase é alumnos. Neste caso, nós axustar o cor de fondo para amarelo, e nós establecer a opacidade, que é unha etiqueta que non falar, pero só trata como transparente algo é, para 70%, neste caso. 

Hai dúas opcións para follas de estilo de escritura. Pode gravala-los baixa directamente ao HTML poñendo as follas de estilo entre as etiquetas de estilo. E esas marcas de estilo ir dentro as etiquetas de cabeceira da súa páxina web. O xeito máis preferida quizais facer é escribir un arquivo CSS separado, e despois vincula-lo no seu documento usando ligazóns etiquetas. Etiquetas de enlace, unha vez máis, son diferente de ligazóns, se se lembra do noso vídeo dun HTML. E enlace tags son coma nós tire en arquivos separados. É máis ou menos como o equivalente a o # include para programación web. 

Entón, imos dar un ollo table.HTML. Se se lembrar do noso Vídeo HTML, mostre un exemplo dunha moi multiplicación simple táboa que parecía bastante feo, e quizais haxa un xeito de facelo mellor con CSS, para facela realmente ollar máis como unha multiplicación mesa, ou algo así que non está só preso conxunto con ningunha división real entre as liñas e columnas. Entón imos cabeza para CS50 IDE, e bótalle un ollo o xeito no que o CSS pode, de certo xeito, tweak o que comezamos antes, e facelo algo moito mellor. 

Entón, nós estamos en CS50 IDE agora, e se non familiar, imos puxar arriba neste táboa que páxina HTML. Table.HTML basicamente só define o contido dun multiple-- que era quere que sexa unha mesa de catro por catro multiplicación. É moi sinxelo. E pensamos que sería ollar moi ben organizado. Pero, en realidade, cando vexa esta páxina, vemos que é unha especie de feo, non? É evidente que temos liñas e columnas aquí. Hai algún tipo de separación. Pero non é unha separación significativa. Non estamos realmente a recibir demasiada información aquí. E non hai ningunha separación entre as liñas e columnas en termos das normas horizontais ou verticais. Nós probablemente podería facelo mirar un pouco mellor. Entón, imos tratar. Entón eu vou para pechar esta guía aquí enriba. E eu vou pechar miña table.HTML, e eu teño outra versión aquí chamado table2.HTML. Nós imos abrir iso. O corpo da páxina é practicamente o mesmo, pero eu mudei un pouco na parte superior. E eu vou rolar para arriba aquí. Teña en conta que, esta vez, son usando tags de estilo incorporadas. Abrín unha marca de estilo, e eu estou agora a definición dunha folla de estilo CSS só no interior do mesmo. Eu teño un estilo que di: mesa. Ese é o meu selector de etiquetas. Non está a usar punto ou de hash, que eu estaría facendo si estaba usando un ID ou un selector de clase. Eu teño un selector de etiqueta táboa aqui--. Este estilo vai se aplican a cada marca de táboa. Aparentemente quero poñer un pixel de ancho, bordo azul sólida, dentro da miña mesa. Isto soa como sería probablemente axudar a situación, non? Nós imos ter as cousas parecen moito mellor. Entón, iso é gran. Estilisticamente, eu teño só incorporado meu estilo aquí. É certamente un forma aceptable para facelo. Imos ver o que iso parece. Entón, eu vou volver aquí en baixo, e Vou ha ver meu table2.HTML. Ben, iso non é así o que eu quería, pero é o que pedimos para. Nós dixemos que este estilo é indo para aplicar para a nosa mesa. Nosa mesa ten agora un un pixel ampla, sólida bordo azul en torno a el. Non estamos realmente a recibir nas células da táboa. Estamos só comezando na mesa. Entón CSS traballou. Aplicou unha folla de estilo para a nosa mesa. Pero non chegou a facer o que queriamos facer. Como é que imos comezar a facer o que quere que faga? 

Ben, imos dar un ollo a un versión deste en table3.HTML. Entón, eu estou indo só para pechar estas guías. Eu vou volver aquí para o meu árbore de ficheiros, e abrir table3.HTML. Unha vez máis, que vai estar fermosa semellante aquí no inicio. Pero aviso, esta vez, en vez de usar unha folla de estilo incrustada alí, Vou chamar nun folla de estilo usando a etiqueta ligazón. Entón, eu estou conectando aparentemente nun estilo chamado tables.CSS, e esta é igual a ben stylesheet só means-- ben, o que é o ficheiro en relación ao que Estou doing-- é unha folla de estilo que eu son usando a miña páxina. Entón, se eu realmente quero ver o que Estou facendo o CSS aquí, Necesito ir aberto que table.CSS arquivo tamén. Entón, nós imos voltar aquí de novo para a nosa árbore de ficheiros. Hai table.CSS. Imos poñer-la aberta. Agora estamos a ver un pouco da CSS. Ao parecer, eu teño un par de cousas a suceder aquí. Eu parecer quere poñer un cinco pixel de ancho, bordo vermella sólida, en torno a miña mesa. Xa sabemos que o que está a suceder ir só no perímetro. Vimos que en table2.HTML. Con cada liña, I aparentemente quere especificar que o canto da liña é de 50 píxeles de altura. Así, para cada liña, Lembre iso é o que a etiqueta tr fai, Eu estou facendo iso 50 píxeles de altura. 

Para rematar, eu teño ese comentario. E é así que nós facemos comentarios en CSS. É moi semellante a aproveitar bloque Comentarios estrela barra sintaxe. Todo o texto que quere. Non hai ningunha barra barra aínda en CSS. Para comentarios in liña curtos, temos para usar o formato particular aquí. Parece que eu estou facendo un chea de cousas na miña tags td. Teña en conta que as etiquetas td, ou mesa datos, o que realmente son só as columnas no interior nosas liñas e, ao parecer, para cada peza de datos na miña mesa, quero para definir a cor de fondo para ser negro, cor a ser branca, cor é cor de primeiro plano. Polo tanto, esta será o texto da miña páxina. Quero unha pía bautismal grande, 22 apuntar fonte, e quero que sexa do tipo de letra, Xeorxia. Entón eu non vou ten a fonte predeterminado. Eu estou indo a especificar a Xeorxia, que é unha desas fontes de confianza web que xa vimos antes. Quero o meu texto a ser aliñado central, no medio da caixa, Non quero que sexa deixado aliñado ou aliñado á dereita. E quero a miña ancho da columna para ser de 50 píxeles de ancho ben. Imos dar un ollo o que iso parece, para ver se esta é quizais unha mellora. Entón, eu estou indo a ir a table3.HTML, que recall, inclúe table.CSS como un enlace, e imos velo. Isto é moito mellor, non? Este é realmente empezando a mirar un moito máis como unha táboa de multiplicación. Teño que bordo vermella en torno a miña mesa, pero agora Eu tamén especificou que cada liña é de 50 píxeles de ancho, ou é 50 píxeles tall-- escusa me-- cada columna é de 50 píxeles de ancho. Os datos en cada columna, e só os datos, ten un fondo negro. É por iso que os liñas brancas están alí. Xa que o espazo na entre todas as células, non é unha fronteira en e de si mesmo, é só Eu só estou cubrindo o As células, que en realidade fai que os bordos da táboa, o que aparentemente, existía o tempo, el era só liñas brancas finas. Agora están visibles. Agora saltan da pantalla. E polo que esta é unha forma moi simple folla de estilo que eu apliquei, e agora a miña mesa parece moito máis como unha mesa de catro por catro multiplicación, no canto de só unha desorde confusa, onde todo o que é claramente liñas e columnas, pero non super ben organizado. Nós realmente estamos só raiar a superficie de que pode facer con CSS aquí. Afortunadamente, a documentación CSS é moi sinxelo. Vai empregar varios dos seus atributos, con bastante frecuencia. Os que falamos neste video. Hai varios que probablemente non vai utilizar todos. E iso é bo, tamén. Pero só sei que hai unha gran cantidade de documentación por aí. Así, mesmo se non cubrir todo, certamente non é deixar no seu propio país. Pero CSS é realmente divertido para probar. E gustaríame moito animamos para xogar coas súas páxinas web, e mira como pode tornalos ollar e sentir para mellorar o usuario experiencia de visitar a súa páxina. Eu son Doug Lloyd. Este é CS50.