intTypePromotion=1
ADSENSE

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

Chia sẻ: Cxzvscv Cxzvscv | Ngày: | Loại File: PDF | Số trang:45

80
lượt xem
7
download
 
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

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.

Chủ đề:
Lưu

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

  1. Cascading Style Sheets ThS Nguyễn Minh Vi BM Tin học – ĐH An Giang
  2. 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
  3. Giới thiệu HTML CSS + HTML
  4. Cú pháp Selector {properties:value;}  Ví dụ: hr {color:blue;} p {margin-left:20px;} body {background-color:lavender;}
  5. Cú pháp
  6. 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 đó
  7. Chèn style sheet  External:  Internal: /*...*/  Inline: This is a paragraph.
  8. Độ ư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
  9. Cascading Style Sheets BỘ CHỌN (SELECTORS) ThS Nguyễn Minh Vi BM Tin học – ĐH An Giang
  10. 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;}
  11. 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;}
  12. 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;}
  13. 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; }
  14. Cascading Style Sheets CÁC THUỘC TÍNH CƠ BẢN ThS Nguyễn Minh Vi BM Tin học – ĐH An Giang
  15. 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
  16. Background  Ví dụ body{ background-image: url('hinh.jpg'); background-position: center; background-repeat: repeat-x; }
  17. 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
  18. 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
  19. Text Thuộc tính Ý nghĩa Giá trị text-shadow bóng chữ normal letter-spacing khoảng cách giữa các ký tự length normal word-spacing khoảng cách giữa các từ length length text-indent lề dòng đầu của khối text % none capitalize text-transform chữ hoa thường uppercase lowercase normal white-space cách xử lý white-space pre nowrap
  20. font, text  Ví dụ .specialtext { font-family: Verdana; font-size: 48px; font-weight: 900; color: #FF0000; text-decoration: underline overline line-through; text-transform: capitalize; letter-spacing: 20; } web
ADSENSE

CÓ THỂ BẠN MUỐN DOWNLOAD

 

Đồng bộ tài khoản
2=>2