Bài giảng Lập trình web‎: Chương 2 - ThS. Nguyễn Minh Vi

Mục tiêu chính của chương 2 Cascading Style Sheets nằm trong bài giảng lập trình web nhằm giới thiệu về CSS (Cascading Style Sheets), vai trò của CSS như hỗ trợ các kiểu định dạng phong phú, đa dạng, tách nội dung và định dạng, dễ đọc mã, tạo phong cách thống nhất cho nhiều trang một cách nhanh chóng.
Nội dung trích xuất từ tài liệu:
Bài giảng Lập trình web‎: Chương 2 - ThS. Nguyễn Minh Vi Cascading Style Sheets ThS Nguyễn Minh Vi BM Tin học – ĐH An Giang Giới thiệu CSS (Cascading Style Sheets):  Hỗ trợ các kiểu định dạng phong phú, đa dạng  Tách nội dung và định dạng, dễ đọc mã  Tạo phong cách thống nhất cho nhiều trang một cách nhanh chóng  Tái sử dụng được, chỉ cần thiết kế một lần thật tốt Giới thiệu HTML CSS + HTML Cú pháp Selector {properties:value;}  Ví dụ: hr {color:blue;} p {margin-left:20px;} body {background-color:lavender;} Cú pháp Chèn style sheet  External: dùng thẻ liên kết file css bên ngoài  Có thể áp dụng cho nhiều tài liệu khác nhau  Internal: dùng thẻ đặt trong phần head  Có hiệu lực trong tài liệu chứa nó  Inline: dùng thuộc tính style trong thẻ  Chỉ có hiệu lực trong chính thẻ HTML đó Chèn style sheet  External:  Internal: /*...*/  Inline: This is a paragraph. Độ ưu tiên  Khi có nhiều kiểu cùng áp dụng lên một phần tử, thì độ ưu tiên sẽ tăng dần theo thứ tự External < Internal < Inline External CSS Internal CSS Inline CSS Cascading Style Sheets BỘ CHỌN (SELECTORS) ThS Nguyễn Minh Vi BM Tin học – ĐH An Giang Selectors  Html selector: tên thẻ html được dùng làm tên của selector  áp dụng kiểu cho một thẻ html h1 {text-align:center;}  hoặc áp dụng kiểu cho nhiều thẻ html h1, h2 {text-align:center;} Selectors  Id selector: bắt đầu bằng dấu #, theo sau là tên selector  chỉ áp dụng kiểu cho phần tử đơn lẻ, thông qua thuộc tính id (phần tử có thuộc tính id là tên của id selector) #id1 {text-align:center;} Selectors  Class selector: bắt đầu bằng dấu . và theo sau là tên selector  dùng cho nhóm phần tử thuộc cùng class (thông qua thuộc tính class) .center {text-align:center;}  hoặc cho phần tử HTML mà thuộc class này (kết hợp giữa html selector và class selector) p.center {text-align:center;} Pseudo class  Cú pháp: selector:pseudo-class {property:value;} selector.class:pseudo-class {property:value;}  VD:  trạng thái của liên kết: a:link {color:#FF0000;} a:visited {color:#00FF00;} a:hover {color:#FF00FF;} a:active {color:#0000FF;}  định dạng ký tự đầu đoạn: p:first-letter { color:#ff0000; font-size:xx-large; } Cascading Style Sheets CÁC THUỘC TÍNH CƠ BẢN ThS Nguyễn Minh Vi BM Tin học – ĐH An Giang Background Thuộc tính Ý nghĩa Giá trị thiết lập tất cả thuộc background tính nền trong cùng một khai báo ảnh nền cố định hoặc fixed background-attachment cuộn theo nội dung scroll màu (tên hoặc chỉ số) background-color màu nền transparent background-image ảnh nền url(‘ ‘) top left/center/right vị trí bắt đầu của ảnh center left/center/right background-position nền bottom left/center/right x% y% / xpos ypos no-repeat background-repeat cách lặp ảnh nền repeat-x repeat-y Background  Ví dụ body{ background-image: url('hinh.jpg'); background-position: center; background-repeat: repeat-x; } Fonts Thuộc tính Ý nghĩa Giá trị thiết lập tất cả thuộc tính font font trong cùng một khai báo font-family font chữ tên font (xx-/x-)small / smaller medium font-size kích thước (xx-/x-)large / larger length / % normal font-style kiểu chữ italic oblique hiển thị theo dạng bình thường normal font-variant hoặc small-caps small-caps normal bold / bolder font-weight độ đậm nhạt lighter 100  900 Text Thuộc tính Ý nghĩa Giá trị color màu chữ ltr direction hướng chữ rtl left right text-align canh lề theo chiều ngang center justify top vertical-align canh lề theo chiều đứng middle bottom none underline text-decoration cách trang trí (các kiểu gạch) overline line-through blink ...