Bài giảng CSS (Cascading Style Sheet) - Đại học Đà Lạt

CSS(Cascading Style sheet) Giới thiệu CSS viết tắt của Cacasding Style Sheet. Chỉ định cách hiển thị của các phần tử HTML. CSS là một sự đột phá trong thiết kế web bởi vì: Nó cho phép người phát triển ứng dụng web kiểm soát được kiểu và cách bố trí ở nhiều trang web một lúc. Định nghĩa một lần và áp dụng cho tất cả các trang khác. Sửa một lần và tất cả các trang tự động cập nhật thay đổi Cú pháp CSS selector {property: value} Trong đó: selector là tên thẻ hay phần tử muốn định nghĩa. Property là thuộc tính bạn muốn thay đổi. Value: là giá trị thuộc tính. Nếu giá trị có nhiều từ thì phải đặt trong dấu nháy kép Ví dụ: body {color: black} p {font-family: "sans serif"} Cú pháp CSS Nếu có nhiều thuộc tính muốn định nghĩa thì phải phân cách nhau bằng dấu ; 	Ví dụ: p {text-align:center;color:red} Để định nghĩa dễ đọc có thể đặt các thuộc tính định nghĩa ở các dòng khác nhau 	Ví dụ: 	P 	{ 	text-align: center; 	color: black; 	font-family: arial 	} Cú pháp CSS Chúng ta có thể định nghĩa một nhóm các phần tử và phân cách giữa các phần tử bằng dấu, 	Ví dụ: 	h1,h2,h3,h4,h5,h6 	{ 	color: green 	} Định nghĩa lớp: dùng để định nghĩa kiểu khác nhau cho cùng một thẻ 	Ví dụ: 	p.right {text-align: right} 	p.center {text-align: center} 	Trong tài liệu HTML sử dụng thuộc tính như sau: 	This paragraph will be right-aligned. 	This paragraph will be center-aligned. Cú pháp CSS Ta có thể áp dụng một hoặc nhiều lớp vào trong một phần tử 	Ví dụ: 	 	This is a paragraph. 	  lớp center và lớp bold cùng được áp dụng cho phần tử p Chúng ta cũng có thể định nghĩa lớp dùng cho mọi phần tử Cú pháp: .tenlop {các định nghĩa} Ví dụ: 	.center {text-align: center} 	áp dụng lớp center vào cho các thẻ, ví dụ 	 	This heading will be center-aligned 	 	 	This paragraph will also be center-aligned. 	 Cú pháp CSS Có thể áp dụng kiểu cho phần tử có giá trị thuộc tính thỏa một giá trị cụ thể nào đó. 	Ví dụ: 	Input[type="text"] {background-color: blue} 	ví dụ trên áp dụng kiểu cho phần tử Input với giá trị thuộc tính type phải bằng “text” Có thể định nghĩa kiểu cho phần tử bằng định danh 	ví dụ: 	#green {color: green} 	p#para1{text-align: center;color: red} Cú pháp CSS Chú thích: dùng dấu /* và */ để chú thích trong CSS. 	/* This is a comment */ 	p 	{ 	text-align: center; 	/* This is another comment */ 	color: black; 	font-family: arial 	} Sử dụng CSS như thế nào? Ví dụ1: 	 	 	 	 	 	This header is 36 pt 	This header is blue 	This paragraph has a left margin of 50 pixels 	 	 Sử dụng CSS như thế nào? Ví dụ 1(tt): file ex1.css 	body { background-color: yellow } 	h1	{ font-size: 36pt } 	h2 	{ color: blue } 	p { margin-left: 50px } Hiển thị: Sử dụng CSS như thế nào Ví dụ 2 (tt): 	 	 	 	 	 	This is a header 1 	 	You can see that the style sheet formats the text 	 	This is a link 	 	 	 Sử dụng CSS như thế nào? Ví dụ 2 (tt): file ex2.css 	body {background-color: tan} 	h1 {color:maroon; font-size:20pt} 	hr {color:navy} 	p {font-size:11pt; margin-left: 15px} 	a:link {color:green} 	a:visited {color:yellow} 	a:hover {color:black} 	a:active {color:blue} Hiển thị: Sử dụng CSS như thế nào? Khi trình duyệt đọc một sheet style, nó sẽ định dạng tài liệu theo style sheet đó. Có 3 cách để đưa style sheet vào tài liệu: Style sheet ngoại: dùng khi muốn áp dụng kiểu cho nhiều trang. Mỗi trang muốn link đến style sheet thì phải dùng thẻ 	Ví dụ: 	 	 	 Sử dụng CSS như thế nào? Style sheet nội: nên sử dụng khi chỉ kiểu chỉ dùng cho một trang riêng. Định nghĩa style sheet nội trong thẻ 	Ví dụ: 	 	 	hr {color: sienna} 	p {margin-left: 20px} 	body {background-image: url("images/back40.gif")} 	 	 Sử dụng CSS như thế nào? Inline style: dùng inline style sẽ mất một số lợi ích của style sheet bởi vì nó kết hợp nội dung với trình diễn. 	This is a paragraph Multiple style sheet: có một vài thuộc tính được đặt cùng tên nhưng khác style sheet, giá trị sẽ kế thừa từ nhiều style sheet chỉ định. 	style sheet ngoại định nghĩa h3 như sau: 	h3 	{ 	color: red;	 	text-align: left; 	font-size: 8pt 	} 	và style sheet nội định nghĩa h3 như sau: 	h3 	{ 	text-align: right; 	font-size: 20pt 	} 	Khi đó trang có style sheet nội trên nếu dùng style sheet ngoại thì kết quả là 	color: red; 	text-align: right; 	font-size: 20pt CSS Background Thuộc tính CSS backgound cho phép bạn điều chỉnh được màu nền của một phần tử, cho phép đặt hình làm nền, đặt lặp lại nhiều lần hình theo chiều ngang hay dọc để làm nền, đặt vị trí của hình trong trang. CSS BackGround CSS Text CSS Text định nghĩa cho sự xuất hiện của Text CSS Text cho phép bạn điều khiển sự xuất hiện của text, đặt màu, tăng giảm khoảng cách giữa các kí tự, căn lề, … CSS Text CSS Font CSS Font định dạng font cho text CSS Font CSS Font CSS Border CSS Border: định nghĩa đường viền xung quanh phần tử. Các thuộc tính trong CSS Border cho phép định nghĩa kiểu và màu của đường viền bao quanh phần tử. CSS Border CSS Borber CSS Border CSS Margin CSS Margin định nghĩa khoảng cách (lề) xung quanh phần tử CSS Margin CSS Padding CSS Padding: định nghĩa khoảng cách giữa border và nội dung. CSS List CSS List: cho phép đặt một danh sách, thay một danh sách khác, đặt hình cho danh sách CSS List