>> [MÜZİK OYUN]
>> Doug LLOYD: O zaman bir daha ele alalım Video bir daha dil hakkında konuşmak için.
Biz CSS bahsedeceğiz bu sefer.
Için kısa Yani CSS, Basamaklı Stil Şablonu,
Kullandığımız başka dildir web siteleri oluşturarak zaman.
Böyle düşün.
HTML, biz düzenlemek için kullanabileceğiniz ne varsa Bizim sayfaya koymak istediğiniz içerik,
CSS genellikle kullanımı aracı olduğunu Bizim web siteleri nasıl bakmak özelleştirmek için,
ve nasıl bir kullanıcı deneyimi gerçekten Web sitemizde ile etkileşim vardır.
>> HTML benzer, CSS bir programlama dili.
Bu mantığı yoktur.
Bu değişkenleri yok.
O her türlü yok C yaptığı benzer şeyler akış.
Bu bir stil dil.
Ve kendi sözdizimi güzel Basit ve sadece açıklar
nasıl unsurları bizim sayfa belirli HTML var
elemanlar modifiye edilmelidir.
Bu amaçla, değil varsa Henüz, HTML bizim video izledim
veya bilmediğiniz HTML genellikle, seni
Şuna bir göz atmak isteyebilirsiniz CSS ilk, çünkü bu tartışma
bağlı olacak bazı HTML bilgisi.
>> Yani burada gerçekten Basit CSS stil.
Asla ettik bile önce CSS ile programlanmış,
Eğer anlamaya Ben eminim Bu stil tam olarak ne.
O ne yapar?
Eh, bizim web vücuda uygulanan vücut etiketleri arasında sayfa, her şeyi
Bizim HTML ve setleri mavi o sayfanın arka plan rengi.
Evet, bu çok basit bir stil var.
Aslında çok insan var samimi bir dil, CSS.
Yani, daha önce hiç kullanmadım bile muhtemelen o ne yaptığını tahmin edebilir.
Aslında, eğer biz bir sayfa, yüklenen Bu stil, her nasılsa gömülü
Bizim sayfanın arka plan rengi olur mavi ve standart beyaz olmamak.
>> Peki nasıl stil yaratırım?
Peki ilk, biz var Bir seçici tanımlamak.
Son örnekte, Bu seçici vücut oldu.
Sonra açık var kaşlı ayraç ve biz konum
tanımlamaya başlamak için gidiyoruz Bu seçici için stil.
Kaşlı ayraçlar arasına, biz Sadece anahtar değer çiftleri bir listesi var.
Bir önceki değer çifti oldu arka plan rengi mavi noktalı virgül,
ama biz bunlardan daha yapabilirdi.
Birden şeyler uygulayarak olabilir bu etiketi, o seçici vücuda.
Bunların her biri bir ile ayrılır noktalı virgül, ve biz bunların her biri çağrı
Bir deklarasyon, bir CSS beyanı.
Hepimizin styling biz ile işiniz bittiğinde söz konusu etiketi uygulamak istediğiniz,
biz sadece bir kapanış kıvırcık var stil bitirmek için brace,
ve biz stil tanımlayan bitti söz konusu seçici için.
>> Bazı yaygın CSS özellikleri nelerdir?
Eh, belki koymak istiyorum şey etrafında bir sınır.
Diyebilirsiniz Yani, sınır, Bu anahtar olurdu
ve sonra değerleri olacaktır, Ne tarz, renk ve genişliği
Eğer bunu istiyorum.
Yani stil katı olabilir çizgi, kesikli çizgi, bir kesik çizgi,
dalgalı bir çizgi olacak bir sırt hattı.
Belki bunu istiyorum mavi veya siyah veya yeşil olabilir.
Belki de olmak istiyorum 1 ya da 2 ya da 10 piksel genişliğinde.
Siz bu şeylerin hepsini belirtebilirsiniz.
Belki arka plan ayarlamak istediğiniz Belirli bir şekilde sayfanın rengi.
Biz zaten ayarı gördüm Vücudun arka plan mavi olmak.
>> Sonra bir anahtar kelime kullanabilirsiniz, yani CSS bazı renkleri vardır
bu, bunun içine, yeşil, mavi inşa siyah, bildiğimiz çok basit renkler.
Ama aynı zamanda herhangi belirtebilirsiniz İstediğiniz onaltılık renk.
Renkleri tespit edilebilir Geri Çağırma Üç altıgen sayılar kümesi tarafından
0 ile 255, RG ve b için kırmızı, yeşil ve mavi bileşen.
Ve böylece biz belirtebilirsiniz Biz istediğiniz herhangi bir renk,
Bunun yerine mavi veya yeşil veya siyah kullanarak, sterlin kullanarak ve hex sonra altı basamaklı,
ve bizi verecekti Altı haneli rengi.
Yani arka plan rengi var.
>> Biz de ön planda olması genellikle renk,
sayfanızın metin olacak.
Ve benzer şekilde bunu yapabilir anahtar kelime ve ya altı haneli hex ile.
Yani herhangi bir renk belirtebilirsiniz sen sayfanızın metin için istediğiniz
Belirli bir karşı arka plan rengini, yukarılardan.
Sen de değişir ve başa çıkabilirim yazı tipi ve yol metniyle
sayfasında oluşturulur.
>> Yani yazı boyutunu değiştirebilirsiniz.
Sen böyle ekstra anahtar kelimeler kullanabilirsiniz Ekstra küçük ya da küçük xx, ya da orta,
Büyük ve böyle devam eder.
Sen sabit noktalar kullanabilirsiniz, 10 nokta, 12 nokta, vb.
Sen, yüzdelik,% 80,% 20 kullanabilirsiniz Nerede% 100 varsayılan font
Genellikle gidiyor boyutu 11 ya da 12 sayı gibi bir şey.
Yoksa bile onu temel alabilirsiniz En son yazı boyutu.
Sadece bir şeyler yazdı ve siz biliyorsanız daha küçük olması için ne istiyorsun olduğunu
ama sen bilmiyorsun tam olarak ne boyutta size Olması, iyi, sadece söyleyebiliriz istiyorum
font boyutu küçüktür.
Ve bu, kapalı temel olacak sadece yukarı yukarıdaki, bu yazı tipi boyutu var.
Ve küçük veya büyük olsun.
Yani farklı bir sürü var yolları yazı tipi boyutunu belirlemek için.
>> Ayrıca ne belirtebilirsiniz İstediğiniz yazı ailesi.
Belirli bir varsa isim, bir yolu var CSS--
Biz bu konuda konuşmak için gitmiyoruz burada-- çok özel bir yazı tipi tanımlamak için
ve sayfanıza içine gömün.
Ayrıca genel adları kullanabilirsiniz.
Web güvenli yazı bir çok şey var O CSS önceden tanımlanmıştır.
Ve Microsoft kullanıcı iseniz Son 20 yılda ofis,
muhtemelen aşina Bu web güvenli yazı bir sürü
Zaten, Times New Roman, Arial, Yeni, Gürcistan, Tahoma, Verdana kurye
ve benzeri.
Bunlar tüm web güvenli yazı tipleri kabul edilir.
Ve aslında, bölüm nedeni olmaya geldim
her sayfada web-- yapmak için kullanılacak olan Bu varsayılan erişim yazı batmıştı
Çeşitli serifs ve tüm bu Biz içine almazsınız yazı şeyler,
ancak bu genellikle CSS erişilebilir,
Bunu yapmazsanız bile Aksi takdirde fontları tanımlar.
Son olarak, metin hizalayabilirsiniz, o varlık yerine, varsayılan olarak, hizalanmış
sola, sen-ebil sağa hizalayın,
ya bunu merkezli hizalamak veya olabilir her iki kenar boşluklarını vurmak böylece haklı.
O yüzden kullanabileceğiniz tüm seçenekler Metin neye benzediğini değiştirmek için,
ve sayfanızda nasıl görüntülenen.
>> Sizin seçiciler yok etiketleri yalnızca olmak zorunda.
Biz daha önce bir vücut etiketi gördüm seçici ve etiket seçici
sadece böyle gözüküyor.
Size daha sonra bir etiket adı ve Bu etiket için bir stil tanımlayabilirsiniz.
Ama aynı zamanda bir şeyler yapabiliriz bir kimlik seçici denir.
Bir ID seçici oldukça benzer görünüyor.
Ama şimdi ben kullanıyorum değilim fark Bir HTML etiketi, I, bu durumda, kullanıyorum
#unique, veya benzersiz karma.
Eğer gelen hatırlayacak olursak bizim HTML video, konuştuk
etiketler nitelikleri olabilir nasıl.
>> Ve bir nitelik olduğunu geçerlidir hemen hemen tüm HTML etiketleri,
ama biz bu konuda konuşmadık, Kimlik etiketi denilen şeydir.
Yani bu özel CSS olur Sadece sahip HTML etiketi için geçerlidir
çok özel bir kimlik, adlandırılmış ettik.
Eğer bir yerde var ise kodunuzu bir yere
HTML dosyası, bir etiket ve sana Bu etikete bir nitelik olarak belirtin
Kimlik, bu eşsiz eşittir Özellikle stil
Burada tek arasında geçerli olacak eşsiz kimliği ile bu etiket.
>> Ayrıca bir şey yapabilirsiniz Bir sınıf seçici denir.
Sahip olmanın yanı sıra yüzden ID de yapabilirsiniz, nitelikleri
HTML etiketleri için bir sınıf özniteliğini ekleyin.
Ve bir class özniteliği kullandığınızda, birden fazla etiket tatbik edilebilir.
Yani bazı şeyleri varsa o Belki söylemek benzer istiyorsanız,
açık etiket vesaire, vesaire, vesaire, vesaire, sınıf öğrencilerini eşittir.
Sonra bu belirli stil geçerli olacak
kimin sınıfı her etikete öğrencileridir.
Bu durumda, set olur Sarı arka plan rengi,
ve biz, opacity istiyorum hangi Konuşmamız vermedi etiket olduğunu
ama ne kadar şeffaf ilgilenir şey, bu durumda% 70 vardır.
>> Için iki seçenek var yazma stil.
Onları yazabilirsiniz doğrudan HTML içine
stil yerleştirerek stil etiketleri arasında.
Ve bu tarz etiketler içinde gitmek Web sayfasının baş etiketleri.
Belki de daha çok tercih edilen bir yol yapmak ayrı bir .css dosyası yazmak için,
ve sonra içine bağlamak senin Bağlantı etiketlerini kullanarak belge.
Bağlantı etiketleri, yine vardır köprüler farklı,
Bizim video bir HTML hatırlayacak olursak.
Ve bağlantı etiketleri nasılsınız biz ayrı dosyalarda çekin.
Bu tür eşdeğer gibi web programlama için #include.
>> Öyleyse table.HTML bir göz atalım.
Eğer gelen hatırlayacak olursak bizim HTML Video, ben gösterdi
çok örneği Basit çarpma
hoş görünüyordu tablo çirkin ve belki orada
bir yol ile daha iyi yapmak için CSS, aslında görünmesi için
Bir çarpma gibi daha masa falan
bu sadece birbirine yapışmış değil hiçbir gerçek bölümü ile
satırlar ve sütunlar arasında.
Yani sından izin CS50 IDE ve bir göz atın
CSS, tür, çimdik nasıl ne daha önce başladı,
ve çok daha iyi bir şey yapmak.
>> Bu yüzden CS50 IDE konum Şimdi, yabancı ise,
Bu yukarı çekin edeceğiz masa HTML sayfası olduğunu.
Table.HTML temelde Sadece içeriğini tanımlar
Bir multiple-- bir olması gerekiyordu Dört dört çarpım tablosu.
Oldukça basit değil.
Ve biz o-cekti düşünürdüm Oldukça iyi organize bakmak.
Ama aslında, biz bu sayfayı önizleme yaparken, Biz bu tür çirkin, doğru olduğunu görüyoruz?
Açıkçası biz burada satır ve sütun var.
Orada ayrılık çeşit.
Ama anlamlı bir ayrılık değil.
Biz aslında almıyorum konum Burada çok fazla bilgi.
Ve arasında hiçbir ayrım yoktur cinsinden satır ve sütun
yatay veya dikey kurallar.
Biz muhtemelen bu yapabilirdiniz daha biraz bak.
Öyleyse deneyelim.
Yani buraya bu sekmeyi kapatmak için gidiyorum.
Ve ben, benim table.HTML kapatmak için gidiyorum ve burada başka bir sürümü var
table2.HTML denir.
Bunu açmak gerekir.
Sayfanın organıdır hemen hemen aynı,
ama ben değiştim bir üstünde biraz.
Ve ben burada yukarı olacak.
Ben, bu defa edin Gömülü stil etiketlerini kullanarak.
Ben bir stil etiketi açtım ve şimdi ben sadece içinde bir CSS stil tanımlama
Bunun.
Ben, masa diyor bir stil var.
Bu benim Etiket seçici var.
Ben nokta veya hash kullanarak değilim, Hangi ben ben yapıyor olacak
bir kimliği veya sınıf seçici kullanarak oldu.
Ben bir etiket seçici burada-- tablo var.
Bu tarz gidiyor her tablo etiketi için geçerlidir.
Görünüşe göre bir tane koymak istiyorum Geniş piksel, katı mavi sınır,
Benim tablo içinde.
Böyle muhtemelen olur sesler Doğru, durum yardımcı?
Biz gidiyoruz işler çok daha iyi görünüyorsun.
Yani bu iyi.
Üslup, ben sadece ettik Burada benim stil gömülü.
Kesinlikle bir var bunu yapmak için kabul edilebilir bir yol.
Şimdi bu neye benzediğini görelim.
Yani buraya geri dönün ve edeceğiz Benim table2.HTML önizleme olacak olacak.
Eh, yani ne istediğini çok değil ama biz istedi tam olarak ne olduğunu.
Biz bu tarz olduğunu söyledi bizim masaya uygulamak için gidiyoruz.
Masamıza artık bir pikseli Çevresinde geniş, katı mavi sınır.
Biz aslında almıyorum konum Tablo hücreleri de.
Biz sadece masada alıyoruz.
Yani CSS çalıştı.
Bu uygulanan bir bizim masaya stil.
Ama oldukça yapmadım Ne biz yapmak istedim.
Biz yapmak nasıl alabilirim Ne biz bunu yapmak ister misin?
>> Peki, bir daha bir göz atalım table3.HTML bu sürümü.
Yani sadece bu sekmeleri kapatmak için gidiyorum.
Ben buraya geri gitmek için gidiyorum benim ağaç dosya ve table3.HTML açmak.
Yine, güzel bakmak için gidiyor Burada başında benzer.
Ama haber bu kez, yerine kullanma Orada gömülü bir stil,
Ben bağlantısını gidiyorum Bağlantı etiketi kullanarak stil.
Yani görünüşte bir bağlama ediyorum tables.CSS denilen stil,
ve bu iyi eşittir stil, sadece iyi means--
Bu dosya göreli nedir nedir Ben değilim, bir stil olduğunu doing-- değilim
Benim sayfa için kullanıyor.
Ben gerçekten ne görmek istiyorsanız Yani Ben burada CSS ile yapıyorum
Bunu açık gitmek gerekir table.CSS de dosya.
Yani biz buraya geri gidersiniz Yine bizim dosya ağacına.
Table.CSS var.
Biz bunu açık pop edeceğiz.
Şimdi CSS biraz görüyorsunuz.
Görünüşe göre, bir çift var şeyler oluyor burada.
Ben görünüşte beş koymak istiyorum Geniş piksel, katı kırmızı ötesi,
Benim masa etrafında.
Biz zaten gidiyor biliyor Sadece çevre gitmek.
Biz table2.HTML içinde olduğunu gördüm.
Her satırda, ben görünüşte belirtmek istiyorum
Bu satır yüksekliği 50 piksel yüksek.
Yani her satır için, hatırlıyorum Bu, tr etiketi ne var
Ben 50 piksel yüksek yapıyorum.
>> Son olarak, ben bu yorum var.
Ve bu CSS yorum yapmak nasıl.
Bu blok ele geçirmek için çok benzer Yorumlar sözdizimi çizgi yıldızı.
İstediğiniz tüm metin.
Hiçbir çizgi çizgi CSS olsa var.
Kısa inline yorumlar için elimizde Burada bu özel biçimi kullanmak için.
Ben yapıyorum gibi görünüyor Benim td etiketleri şeyler çok.
Td etiketleri veya masa hatırla gerçekten sadece vardır veriler,
içinde sütunlar Bizim satırlar ve görünüşte
Verilerin her bir parça için benim tabloda, ben istiyorum
arka plan rengini ayarlamak için siyah, renk, beyaz olmak
renk ön plan rengi olduğunu.
Yani bu olacak Benim sayfanın metin.
Büyük yazı tipi, 22 istiyor yazı gelin ve ben istiyorum
o, yazı tipi ailesi Gürcistan olmak.
Yani gitmiyorum varsayılan yazı tipini var.
Ben Gürcistan, belirtmek için gidiyorum hangi Bu web güvenli yazı biridir
Daha önce gördüğüm.
Ben metin hizalanmış olmak istiyorum merkezi bir kutunun ortasına,
Ben bırakılmak istemiyoruz hizalanmış veya sağa hizalanmış.
Ve benim sütun genişliği istiyorum Geniş yanı sıra 50 piksel olmak.
En az bir göz atalım Bu neye benzediğini,
Bu belki de bir gelişme olup olmadığını görmek.
Yani table3.HTML, gitmek için gidiyorum hangi hatırlama, bir bağlantı olarak table.CSS içerir
ve biz önizleme edeceğiz.
Bu doğru, çok daha iyi değil mi?
Bu aslında bir bakmaya başlıyor daha çarpım tablosu gibi çok.
O kırmızı sınır var Benim masa etrafında ama şimdi
Ben de o belirttiğiniz Her satır, 50 piksel genişliğinde
ya da tall-- bahane 50 piksel var Benim, her sütun 50 piksel genişliğinde.
Her bir sütunda veriler ve sadece veri siyah bir arka plan vardır.
Böylece neden bu var beyaz çizgiler vardır.
Uzay çünkü bu hücrelerin tümü arasında,
o bir sınır değil ve kendisi, bu sadece
Ben sadece doldurma ediyorum Hücreler, aslında bu
Tablonun sınırlarını, yapar Görünüşe göre, tüm boyunca onu var mıydı
Sadece ince beyaz çizgiler oldu.
Şimdi görünür konum.
Şimdi ekranda kapalı pop.
Ve böylece bu çok basit Ben uyguladığınız stil,
ve şimdi benim tablo daha çok benziyor dört, dört tarafından çarpım tablosu,
yerine sadece karışık karışıklık, bir her şeyi açıkça satırlar ve sütunlar olduğunu
ama süper iyi organize.
Biz gerçekten sadece yüzeyi çizilmeye ediyoruz Burada CSS ile neler yapabileceğini.
Neyse CSS belgeleri oldukça basittir.
Siz birkaç kullanacağız onun Oldukça sık, bağlıyor.
Konuştuğumuz olanlar Daha önce bu video.
Senin o birkaç vardır muhtemelen tüm kullanmaz.
Ve bu da, sorun değil.
Ama bir var ki, biliyorum Orada belgelerin çok.
Bu yüzden her şeyi kapsayacak etmedi bile, kesinlikle kendi sol değiliz.
Ama CSS gerçekten eğlenceli ile deneme.
Ve ben şiddetle teşvik ediyorum web sayfaları ile oynamak için,
ve bunları nasıl yapabiliriz bakın bakmak ve kullanıcı geliştirmek hissediyorum
sayfanızı ziyaret deneyim.
Ben Doug Lloyd değilim.
Bu CS50 olduğunu.