Đang tải... (xem toàn văn)
Bài giảng Lập trình mạng: Chương 6.2 - Cascading Style Sheets (CSS) trình bày về cú pháp CSS, cách đưa CSS vào HTML và một số nội dung khác. Mời các bạn tham khảo bài giảng để bổ sung thêm kiến thức về lập trình mạng nói chung và Công nghệ thông tin nói riêng.
Cascading Style Sheets (CSS) CSS Dùng để trình bày phần tử HTML trình duyệt CSS đặt văn HTML hay file khác Cách dùng phổ biến có file CSS riêng để dùng cho nhiều văn HTML Nếu văn dùng nhiều file CSS khác nhau, hệ thống dùng định dạng file file http://www.w3schools.com/css/default.asp Cú Pháp CSS (1) Cú pháp CSS gồm phần Selector (phần tử hiển thị) Property (thuộc tính) Value (giá trị) selector {property: value} Ví dụ: body {color: black} p {font-family: "sans serif"} Cú Pháp CSS (2) Có thể sử dụng định dạng chung cho nhóm phần tử Ví dụ: h1,h2,h3,h4,h5,h6 { color: green } Định dạng class p.right {text-align: right} p.center {text-align: center} Cú Pháp CSS (3) Một class dùng cho nhiều tag khác center {text-align: center} Cú Pháp CSS (4) Sử dụng id #green {color: green} Chú thích Đưa CSS vào HTML (1) Dùng file CSS bên Dùng bên file HTML Đưa CSS vào HTML (2) Dùng CSS tag file HTML (inline) Có số trình duyệt khơng hổ trợ CSS, để tránh trường hợp mã CSS bị hiển thị, dùng cách sau: Background (1) Background (2) 10 Background: Ví dụ 11 Text (1) Dùng để điều chỉnh hiển thị text HTML 12 Text (2) 13 Font (1) 14 Font (2) 15 Font (3) 16 Font: Ví dụ Chọn font chữ 17 Margin 18 Dimension (1) Xác định chiều dài rộng phần tử Ví dụ: chiều dài rộng ảnh, chiều cao đoạn văn bản, v.v 19 Dimension (2) 20 Position (1) Xác định vị trí phần tử 21 Position (2) Xác định vị trí phần tử 22 Position: Ví dụ 23 ... {font-family: "sans serif"} Cú Pháp CSS (2) Có thể sử dụng định dạng chung cho nhóm phần tử Ví dụ: h1,h2,h3,h4,h5,h6 { color: green } Định dạng class p.right {text-align: right} p.center {text-align:...CSS Dùng để trình bày phần tử HTML trình duyệt CSS đặt văn HTML hay file khác Cách dùng phổ biến có file CSS riêng để dùng... right} p.center {text-align: center} Cú Pháp CSS (3) Một class dùng cho nhiều tag khác center {text-align: center} Cú Pháp CSS (4) Sử dụng id #green {color: green} Chú thích Đưa CSS vào HTML (1)