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

Thêm vào BST

Báo xấu

86
lượt xem 9
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ủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: 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
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
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