SPEAKER: Nó chá» ra rằng HTML không phải là ngôn ngữ duy nhất mà bạn có thá» sá» dụng bên trong của má»t trang web. Bạn có thá» sá» dụng má»t cái gì Äó gá»i là CSS, hoặc Cascading Style Sheets, là tá»t. CSS cho phép bạn chá» Äá»nh nhiá»u hÆ¡n nữa chÃnh xác tÃnh thẩm mỹ của má»t trang web trang, bao gá»m bá» trà và kÃch cỡ và mà u sắc và phông chữ và nhiá»u hÆ¡n nữa. Và dụ, chúng ta hãy tạo ra má»t trang web Äây gá»i là CSS0 Äại diá»n cho má»t trang chủ cho, nói, John Harvard.
Trên trang nà y, chúng tôi sẽ có John Harvard tên, bên dÆ°á»i sẽ Äược má»t thông Äiá»p tá»t Äẹp cho du khách của mình, bên dÆ°á»i Äó sẽ là má»t chân, vá»i nói, má»t sá» thông tin bản quyá»n. Äá» là m Äiá»u nà y, hãy xác Äá»nh ba ÄÆ¡n vá» cho trang sá» dụng má»t thẻ gá»i là div. Má» khung div, John Harvard, gần khung div, má»t khung div má», và bây giá» chúng tôi sẽ chá» Äá»nh má»t cái gì Äó nhÆ°, chà o mừng bạn Äến trang chủ của tôi! Và chúng ta hãy Äóng div nà y, là tá»t.
Và bây giá» là má»t thứ ba và cuá»i cùng div, bản quyá»n. Chá» Äược Æ°a thÃch, cho tôi sá» dụng bây giá» là má»t HTML thá»±c thá», má»t biá»u tượng Äại diá»n cho má»t nhân váºt mà bạn có thá» không nếu không gõ trên bà n phÃm của bạn. Trong Äó, tôi sẽ là m ký hiá»u, bảng Anh, 169, dấu chấm phẩy. Hóa ra Äó là mã sá» cho các biá»u tượng bản quyá»n. Sau Äó, chúng ta hãy chá» Äá»nh John Harvard Äây á» phÃa dÆ°á»i. Chúng ta hãy Äóng div và lÆ°u các táºp tin.
Bây giá», thẻ div nà y là gì? Thẻ div chá» ÄÆ¡n giản là Äá»nh nghÄ©a má»t bá» pháºn của trang, mà chủ yếu là má»t khu vá»±c hình chữ nháºt. Vì váºy, tại thá»i Äiá»m nà y trong thá»i gian, tôi có ba khu vá»±c hình chữ nháºt, má»t trong những ngà y Äầu của ngÆ°á»i khác. Vì váºy, hiá»n nay, hiá»u quả là gần nhÆ° là mặc dù tôi Äã có ba Äoạn. NhÆ°ng chúng ta sẽ không nhìn thấy khá nhiá»u không gian mà u trắng á» giữa chúng.
Hãy lÆ°u táºp tin nà y, thay Äá»i của nó quyá»n, và có má»t cái nhìn cho má»t thá»i Äiá»m trong Chrome. Chmod a + r CSS0.html. Hãy bây giá» má» Chrome và truy cáºp http://localhost.CSS0.html. Tháºt váºy, Äây là má»t trang chủ John Harvard. Bây giá» chúng ta phong cách hóa nó nhiá»u hÆ¡n má»t chút chÃnh xác sá» dụng má»t sá» CSS.
Trá» lại trong gedit, chúng ta hãy Äi và o nà y thẻ div Äầu tiên và thêm má»t phong cách thuá»c tÃnh xác Äá»nh rằng tôi muá»n má»t cỡ chữ, nói rằng, 36 Äiá»m ảnh, hoặc px. Và tôi muá»n trá»ng lượng của phông chữ nà y Äược in Äáºm thay vì mặc Äá»nh, Äó là bình thÆ°á»ng. Cho div thứ hai, chúng ta hãy xác Äá»nh má»t thuá»c tÃnh phong cách mà có má»t cỡ chữ 24 pixel, vì váºy má»t chút nhá» hÆ¡n. Äóng dấu ngoặc kép sau dấu chấm phẩy.
Cuá»i cùng, trong div thứ ba nà y, chúng ta hãy là m phong cách bằng kÃch thÆ°á»c giá, phông chữ, và chúng ta hãy nói 12 pixels thá»i gian nà y. Gần quote sau dấu chấm phẩy. Chú ý rằng sau Äó tôi dÆ°á»ng nhÆ° có quy Äá»nh má»t chút cách Äiá»u cho má»i ba divs sá» dụng, Hóa ra, CSS. Trong thá»±c tế, cú pháp mà bạn nhìn thấy trong giữa các dấu ngoặc kép là CSS, Äặc biá»t CSS tÃnh vá»i các giá trá». Và cho rằng thẻ Äầu tiên, nÆ¡i mà tôi Äã hai tà i sản Äó, cỡ chữ và trá»ng lượng font chữ, tôi chá» ÄÆ¡n giản là tách ra chúng vá»i má»t dấu chấm phẩy.
Bây giá», chá» vì phong cách, tôi cÅ©ng bao gá»m dấu chấm phẩy á» cuá»i má»i dòng. NhÆ°ng há» không thá»±c sá»± cần thiết, Äặc biá»t là khi bạn chá» có má»t tà i sản quy Äá»nh. Bây giá» hãy lÆ°u các táºp tin và tải lại trong Chrome, và xem những gì ảnh hÆ°á»ng thá»±c là . Trá» lại trong Chrome Äây, hãy nhấn Reload.
Bây giá» chúng tôi có má»t thú vá» hÆ¡n má»t chút trang chủ cho John Harvard, theo Äó dòng Äầu tiên vá»i tên của mình, Äó là bên trong Äó div Äầu tiên, cao 36 pixel và cÅ©ng Äáºm, trong Äó dòng thứ hai, mà là Ỡchá» div thứ hai, là 24 pixel cao, nhÆ°ng không Äáºm. Và theo Äó dòng thứ ba trong thứ ba div là cao 12 pixel và cÅ©ng không in Äáºm. NhÆ°ng giả sá» bây giá» tôi muá»n chuyá»n tất cả các vÄn bản nà y trên nhÆ° váºy mà nó là m trung tâm.
Tôi có thá» sắp xếp má»i cá nhân divs nhÆ° Äược là m trung tâm. NhÆ°ng dá»
dà ng hÆ¡n, tôi có thá» bá»c những ba divs bên trong của má»t div thứ tÆ°, má»t div cha mẹ, váºy Äá» nói chuyá»n, và chá» Äá»nh rằng div và tất cả của nó con cháu nên vÄn bản liên kết trung tâm? Chúng ta hãy có má»t cái nhìn.
Bên trong gedit, chúng ta hãy quay trá» lại của tôi cÆ¡ thá» và thêm má»t div má»i lên hà ng Äầu vá»i div, phong cách bằng quote unquote trung tâm cÄn chá»nh vÄn bản, gần giá sau dấu chấm phẩy. Và bây giá», chúng ta hãy Äi trÆ°á»c và thụt tất cả của các dòng chúng tôi gõ trÆ°á»c. Và dÆ°á»i Äây là div thứ ba, chúng ta hãy Äóng div má»i nà y.
Nói cách khác, bá»i vì những ba divs ban Äầu bây giá» là trẻ em, do Äó, Äá» nói, trong má»t div cha mẹ má»i và tôi Äã xác Äá»nh rằng tôi muá»n sắp xếp các vÄn bản Äó div cha mẹ trong trung tâm trang, bất Äá»ng sản sẽ Äược kế thừa tất cả những trẻ em. Tháºt váºy, chúng ta hãy lÆ°u các táºp tin và Hãy xem trong má»t trình duyá»t. Hãy tải lại trong Chrome. Và chúng tôi Äã có nó, má»t tháºm chà Äẹp hÆ¡n trang chủ cho John Harvard.