Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 47 trang
THÔNG TIN TÀI LIỆU
Thông tin cơ bản
Định dạng
Số trang
47
Dung lượng
1,14 MB
Nội dung
Tr ng ĐH Quang Trungườ Khoa: KT-CN L p: K2-101ớ TÌM Hi U V CSSỂ Ề Môn: Thi t K Webế ế GV: Đ Minh Đ cỗ ứ Nhóm 4 : 1. Nguy n Th L iễ ị ạ 2. Tr ng N Thu Hi nươ ữ ề 3. Đ Vũ Quyênỗ Tìm hi u CSS -Th c hi n :Nhóm 4 k2.101ế ự ệ 1 TÌM HI U V CSSỂ Ề CSS là gì? CSS là vi t t t c a ế ắ ủ Casscading style sheets ,dùng đ mô t cách hi n th các ể ả ể ị thành ph n trên web. CSS dùng đ quy đ nh cách trình bày cho các tài li u vi t ầ ể ị ệ ế b ng HTML,xHTML,XML,SVG hay UML,…ằ • Ví d : ụ đ đ nh màu n n cho trang web là xanh nh t(cyan) ta dung đo n mã ể ị ề ạ ạ sau: HTML:< body bgcolor=“#00BFF3”> CSS: body{background-color: #00BFF3;} Cú pháp CSS c b n:ơ ả Selector { property : value;} Tìm hi u CSS -Th c hi n :Nhóm 4 k2.101ế ự ệ 2 H c CSS c n nh ng gì?ọ ầ ữ HTML Trình so n th o đ vi t CSS nh : notepad,wordpad,….ạ ả ể ế ư Phiên b n m i nh t c a trình duy t web .ả ớ ấ ủ ệ Tìm hi u CSS -Th c hi n :Nhóm 4 k2.101ế ự ệ 3 Có 3 cách khác nhau đ nhúng CSS vào m t đo n mã HTML.ể ộ ạ Cách 1: Inline style sheet( N i tuy n)ộ ế đây là ph ng pháp nguyên th y(không c n selecter trong cú pháp)ươ ủ ầ Ví d : ụ <html> <head> <title>vi du</title> </head> <body style=“background-color:#FFF”;> <p style=“color:green”> Welcome to Quy Nhon</p> </body> </html> Tìm hi u CSS -Th c hi n :Nhóm 4 k2.101ế ự ệ 4 V trí đ t CSS trong HTML.ị ặ V trí đ t CSS trong HTMLị ặ Cách 2: Embedding style sheet( Bên trong th style)ẻ ví d :ụ <html> <head> <title> vi du</title> <style type=“text/css”> body{background:#FFF} p{color:#00FF00} </style> </head> <body> <p>Welcome to Quy Nhon </p> </body> </html> L u ý: ư th style nên đ t trong th head. Đ i v i nh ng trình duy t không nh n ra đ c ẻ ặ ẻ ố ớ ữ ệ ậ ượ <style> ta làm nh sau: đ a ư ư <! tr c và ở ướ > sau kh i css.ở ố Ví dụ: <style type=“text/css”> <!- - body{background-color:#FFF} p{color:#00FF00}- -> </style> Tìm hi u CSS -Th c hi n :Nhóm 4 k2.101ế ự ệ 5 V trí đ t CSS trong HTML.ị ặ Cách 3: External style sheet ( liên k t v i m t file CSS bên ngoài )ế ớ ộ T ng t cách 2 nh ng ta đ t mã css vào m t th style và đ a chúng trong m t ươ ụ ư ạ ộ ẻ ư ộ file css(có ph n m r ng .css) bên ngoài và liên k t nó v i trang web b ng thu c ầ ở ộ ế ớ ằ ộ tính href trong th ẻ link .Đây là cách làm đ c khuy n cáo.ượ ế Ví d : ụ Đ u tiên t o m t file vidu.html có n i dung:ầ ạ ộ ộ <html> <head> <title> vi du</title> <link rel=“stylesheet” type=“text/css” href=“style.css”/> </head> <body> <p>Welcome to Quy Nhon </p> </body> </html> Tìm hi u CSS -Th c hi n :Nhóm 4 k2.101ế ự ệ 6 V trí đ t CSS trong HTML.ị ặ Sau đó t o m t file style.css v i n i dung :ạ ộ ớ ộ body{background-color:#FFF} p{color:#00FF00} Đ t hai file vào trong m t th m c ,sau đó m file vidu.html ặ ộ ư ụ ở trên trình duy t web đ xem k t qu .ệ ể ế ả Tìm hi u CSS -Th c hi n :Nhóm 4 k2.101ế ự ệ 7 S u tiên trong CSSự ư Thu c tính thay đ i đ u tiênộ ổ ọ ư : !important Cú pháp: selector{ property :value !important} Ví d : ụ p{width :500px ; text-align:left !important; color:#333 !important} N u cùng ,m t thu c tính cho m t selector mà c 2 thu c tính cùng đ t !ế ộ ộ ộ ả ộ ặ important thì u tiên cho cái sau.ư Tìm hi u CSS -Th c hi n :Nhóm 4 k2.101ế ự ệ 8 Tìm hi u cú ph p c b n CSSể ấ ơ ả Cú pháp CSS c b n:ơ ả Selector { property : value;} Selector : các đ i t ng mà ta s áp d ng các thu c tính trình bày.Nó là các ố ượ ẽ ụ ộ tag HTML,class hay id.ví d : body,h2,h3,p,img,#title,…ụ Ví d : ụ HTML : < input name=“seach” type=“text” value=“key word”> CSS: input [name=“seach”] Ví d : ụ Đ làm cho t t c các ch có trên trang web đ u màu đ .ể ấ ả ử ề ỏ CSS: *{color : red} Trong class th img và “a” đ u có cùng tên visitors nh ng đây là 2 đ i t ng ẻ ề ư ố ượ khác nhau .ta mu n dùng CSS riêng cho ph n nh thì dùng nh sau:ố ầ ả ư img.visitors {width:50} Tìm hi u CSS -Th c hi n :Nhóm 4 k2.101ế ự ệ 9 Tìm hi u cú ph p c b n CSSể ấ ơ ả Property: là thu c tính quy đ nh cách trình bày.ộ ị Ví d : ụ background-color,font-family,color,padding,margin,… N u có nhi u h n 1 thu c tính trong 1 selecter thì ta dung d u “;” đ phân cách và ế ề ơ ộ ấ ể đ c đ t trong d u ngo c nh n sau selecter.ượ ặ ấ ặ ọ Ví d : ụ body{background-color:#FFF;font-size:14px} Đ i 1 trang web có nhi u thành ph n có cùng m t só thu c tính ta có th gom g n ố ề ầ ộ ộ ể ọ l i nh sau:ạ ư h1{color:#0000FF;text-transform:uppercase} /*transform: ch đ in hoa ,in ế ộ th ng ườ uppercase: in hoa*/ h2{color:#0000FF;text-transform:uppercase} h3{color:#0000FF;text-transform:uppercase} => h1,h2,h3{color:#0000FF;text-transform:uppercase} Tìm hi u CSS -Th c hi n :Nhóm 4 k2.101ế ự ệ 10 [...].. .Tìm hiểu cú pháp cơ bản CSS Value: giá trị của thuộc tính Ví dụ: h3{color: #0000FF;font-family:”Times New Roman”;} Ghi chú trong CSS: /* nội dung chú thích*/ Đơn vị CSS: Đơn vị đo chiều dài Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 11 Đơn vị CSS Đơn vị màu sắc: Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 12 1.Thuộc tính brakground Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 13... 50px boder:1px dotted#ff0000} Cấu trúc rút gọn: Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 32 9.Thuộc tính padding Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 33 9.Thuộc tính padding Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 34 10.Box Model Mô tả cách mà css định dạng khối không gian bao quanh một thành phần Mô hình hộp của đối tượng web cụ thể: Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 35 10.Box Model Ví... Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 15 2 Thuộc tính font Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 16 2.Thuộc tính font Ví dụ: body{ font-family:”Times New Roman”,Tohana,San-serif} h1{ font-style: italic; font-variant: small-caps; /*chử... Thiên Huế Trong CSS như sau: li.tp{color:FF0000} li.tinh{color:0000FF} Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 23 5.Class & ID Nhận dạng với phần tử ID: Ví dụ: trong HTML Danh sách các tỉnh ,thành phố của Việt Nam Hà Nội TP.HCM Bình Đinh Khánh Hòa Trong CSS: #hanoi{color: cyan} #hcm{color:##662d91}... tinh{color:#00FF00} Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 24 5.Class & ID Class : dùng để nhóm các đối tượng cùng thuộc tính, do tính chất đó nên nó có thể được sử dụng nhiều lần ID: dùng để nhận dạng một đối tượng đặc trưng ,id có tính duy nhất Lưu ý: không nên đặt tên id,class là các chử số cho kí t ự đ ầu Nó s ẽ không làm việc với firefox Vi dụ: ha noi Tìm hiếu CSS -Thực hiện . v CSS: ơ ị Đ n v đo chi u dài.ơ ị ề Tìm hi u CSS -Th c hi n :Nhóm 4 k2.101ế ự ệ 11 Đ n v CSS ị Đ n v màu s c:ơ ị ắ Tìm hi u CSS -Th c hi n :Nhóm 4 k2.101ế ự ệ 12 1.Thu c tính brakgroundộ Tìm. K2-101ớ TÌM Hi U V CSS Ề Môn: Thi t K Webế ế GV: Đ Minh Đ cỗ ứ Nhóm 4 : 1. Nguy n Th L iễ ị ạ 2. Tr ng N Thu Hi nươ ữ ề 3. Đ Vũ Quyênỗ Tìm hi u CSS -Th c hi n :Nhóm 4 k2.101ế ự ệ 1 TÌM HI U V CSS . kh i css. ở ố Ví dụ: <style type=“text /css > <!- - body{background-color:#FFF} p{color:#00FF00}- -> </style> Tìm hi u CSS -Th c hi n :Nhóm 4 k2.101ế ự ệ 5 V trí đ t CSS trong