Bài giảng Cascading Style Sheets (CSS)

ThS Nguyễn Minh Vi BM Tin học – ĐH An Giang Cascading Style Sheets 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: <link rel="stylesheet" type="text/css" href="tên_file.css" />  Internal: /*...*/  Inline: <p style="color:sienna;margin- left:20px">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 ThS Nguyễn Minh Vi BM Tin học – ĐH An Giang Cascading Style Sheets BỘ CHỌN (SELECTORS) 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; } ThS Nguyễn Minh Vi BM Tin học – ĐH An Giang Cascading Style Sheets CÁC THUỘC TÍNH CƠ BẢN Background Thuộc tính Ý nghĩa Giá trị background thiết lập tất cả thuộc tính nền trong cùng một khai báo background-attachment ảnh nền cố định hoặc cuộn theo nội dung fixed scroll background-color màu nền màu (tên hoặc chỉ số) transparent background-image ảnh nền url(‘ ‘) background-position vị trí bắt đầu của ảnh nền top left/center/right center left/center/right bottom left/center/right x% y% / xpos ypos background-repeat cách lặp ảnh nền no-repeat 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ị font thiết lập tất cả thuộc tính font trong cùng một khai báo font-family font chữ tên font font-size kích thước (xx-/x-)small / smaller medium (xx-/x-)large / larger length / % font-style kiểu chữ normal italic oblique font-variant hiển thị theo dạng bình thường hoặc small-caps normal small-caps font-weight độ đậm nhạt normal bold / bolder lighter 100  900 Text Thuộc tính Ý nghĩa Giá trị color màu chữ direction hướng chữ ltr rtl text-align canh lề theo chiều ngang left right center justify vertical-align canh lề theo chiều đứng top middle bottom text-decoration cách trang trí (các kiểu gạch) none underline overline line-through blink Text Thuộc tính Ý nghĩa Giá trị text-shadow bóng chữ letter-spacing khoảng cách giữa các ký tự normal length word-spacing khoảng cách giữa các từ normal length text-indent lề dòng đầu của khối text length % text-transform chữ hoa thường none capitalize uppercase lowercase white-space cách xử lý white-space normal 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 List Thuộc tính Ý nghĩa Giá trị list-style thiết lập tất cả thuộc tính danh sách trong cùng một khai báo list-style-image ảnh của list-item none url(‘ ’) list-style-position vị trí của list-item inside outside list-style-type kiểu của list-item disc/circle/square decimal/ decimal-leading-zero lower-roman/upper-roman lower-alpha/upper-alpha List  Ví dụ .bullet{ list-style-position: inside; list-style-image: url(‘smiley.gif’); } HTML CSS Javascript Table Thuộc tính Ý nghĩa Giá trị border-collapse kiểu đường viền bảng collapse separate border-spacing khoảng cách giữa các đường viền của các ô (kiểu separate) length caption-side vị trí tiêu đề so với bảng top bottom left right empty-cells hiện hoặc ẩn đường viền các ô trống (kiểu separate) show hide table-layout kiểu layout bảng auto fixed Table  Ví dụ table, td, th{ border:1px solid blue; text-align: center; } table{ border-collapse: separate; empty-cells: hide; border-spacing: 5px; } th{ background-color:blue; color:white; } Nội dungSố tiết LTSố tiết TH HTML1010 CSS35 Javascript710 PHP+MySQL510 Ôn tập5 Link  Liên kết có các trạng thái  link: bình thường, chưa được chọn  visited: đã được chọn  hover: đang được lướt chuột lên  active: đang được chọn  Có thể áp dụng các thuộc tính màu chữ, nền, hiệu ứng chữ cho các trạng thái của liên kết Link  Ví dụ a:link { background-color: #AAAAFF; text-decoration: none; } a:visited { background-color: #DDDDDD; text-decoration: none; } a:hover { background-color: #FF704D; text-decoration: overline; } a:active { background-color: #FF0000; text-decoration: none; } Trang chủ AGU | Thư điện tử | Báo sinh viên | Lớp học ảo ThS Nguyễn Minh Vi BM Tin học – ĐH An Giang Cascading Style Sheets CÁC THUỘC TÍNH VIỀN, LỀ, … Box model Margin Thuộc tính Ý nghĩa Giá trị margin thiết lập lề margin-top margin-bottom margin-left margin-right lề trên, dưới, trái, phải auto pixel % Border Thuộc tính Ý nghĩa Giá trị border border-color border-width border-style thiết lập các thuộc tính đường viền cho nhiều cạnh border-top-width border-left-width border-right-width border-bottom-width độ dày đường viền của các cạnh thin medium thick giá trị cụ thể border-top-color border-left-color border-right-color border-bottom-color màu đường viền của các cạnh border-top-style border-left-style border-right-style border-bottom-style kiểu đường viền của các cạnh none / solid /double dotted / dashed groove / ridge inset / outset Border .box { height: 150px; width: 150px; position: absolute; left: 200px; top: 200px; background-color: #99CCFF; border-width: thick; border-style: dotted; border-top-color: #990000; border-right-color: #0000FF; border-bottom-color: #FF9900; border-left-color: #00FF00; }  Ví dụ Padding Thuộc tính Ý nghĩa Giá trị padding thiết lập khoảng cách từ đường viền đến nội dung padding-top padding-bottom padding-left padding-right khoảng cách trên, dưới, trái, phải pixel % Outline Thuộc tính Ý nghĩa Giá trị outline thiết lập thuộc tính outline outline-color màu màu invert outline-style kiểu none / solid /double dotted / dashed groove / ridge inset / outset outline-width độ dày thin medium thick giá trị cụ thể ThS Nguyễn Minh Vi BM Tin học – ĐH An Giang Cascading Style Sheets CÁC THUỘC TÍNH VỊ TRÍ Positioning Thuộc tính Ý nghĩa Giá trị position kiểu vị trí đặt phần tử static fixed relative absolute top bottom left right khoảng cách trên, dưới, trái, phải so với phần tử chứa nó pixel % float vị trí phần tử được đẩy sang trái hoặc phải left right display hiển thị phần tử theo khối (riêng dòng), trên dòng, hoặc ẩn block inline none z-index thứ tự của phần tử (khi có nhiều phần tử chồng lên nhau) auto số thứ tự Positioning Thuộc tính Ý nghĩa Giá trị clip hình dạng xén phần tử auto shape overflow thiết lập khi nội dung vượt quá phần của nó auto / scroll visible / hidden vertical-align canh lề theo chiều đứng baseline / sub / super top / middle / bottom Positioning p.fix{ position: fixed; top: 10px; left: 10px; color: red; } Đoạn văn có đặt thuộc tính position Đoạn văn bình thường Đoạn văn bình thường Đoạn văn bình thường Đoạn văn bình thường  Ví dụ thuộc tính position Positioning img{ float: right; width: 100; height: 50; border: 1px solid silver; }  Ví dụ thuộc tính float Positioning a{ display: block; width: 150px; border-bottom: thin solid white; background-color: silver; padding: 5px; } HTML CSS Javascript PHP-MySQL  Ví dụ thuộc tính display ThS Nguyễn Minh Vi BM Tin học – ĐH An Giang Cascading Style Sheets MỘT SỐ THUỘC TÍNH NÂNG CAO Border  Bo tròn góc: border-radius div { border:2px solid; border-radius:25px; }  Bóng viền: box-shadow div { box-shadow: 10px 10px 5px #888888; } Image  Độ trong suốt của ảnh: opacity (0.0 – 1.0) img { opacity:0.4; filter:alpha(opacity=40); /* IE8 về trước */ }  Kích thước ảnh nền: background-size div { background:url('hinh.jpg'); background-size:600px 600px; background-repeat:no-repeat; } Text  Bóng chữ: text-shadow h1 { text-shadow: 5px 5px 5px #FF0000; /* bóng ngang - bóng dọc – độ mờ - màu */ } Bộ chọn thuộc tính  Định dạng phần tử kiểu text input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; }  Định dạng phần tử kiểu button input[type="button"] { width:120px; margin-left:35px; display:block; }  Ẩn phần tử:  display:none; /* Ẩn phần tử nhưng không chiếm không gian */  visibility:hidden; /* Ẩn phần tử nhưng vẫn chiếm không gian */