CSS là gì?
- CSS: Cascading Style Sheet: Đây là những mẫu để quy định cách thức thể hiện các thẻ HTML. Bạn có thể xem ví dụ về cách thức thể hiện các thẻ này ở CSS in Action
- CSS có 3 cách sử dụng:
+ Sử dụng trực tiếp kèm với các thẻ HTML (Inline Style Sheet)
+ Định nghĩa trong 1 trang web (Internal Style Sheet)
+ Định nghĩa thành 1 file CSS riêng (External Style Sheet)
- Style được đưa vào HTML 4.0 để giải quyết một số vấn đề.
- CSS giúp bạn tiết kiệm được rất nhiều thời gian và công sức cho việc thiết kế web.
- Bạn có thể định nghĩa nhiều style vào một thẻ HTML
Style (mẫu định dạng) giải quyết một số vấn đề chung:
- Ta biết rằng các thẻ HTML chuẩn được thiết kế để định nghĩa nội dung của một văn bản. Đầu tiên các thẻ HTML hỗ trợ cách viết "Đây là tiêu đề", "Đây là đoạn", "Đây là bảng".... bằng cách sử dụng các thẻ <H1>, <P>, <TABLE>... Cách bố trí văn bản này được qui định bởi trình duyệt web và không có bất cứ một thẻ nào để định dạng văn bản.
- Đến các trình duyệt thế hệ sau đặc biệt là Nescape và Internet Explorer tiếp tục đưa thêm vào các thẻ HTML mới cùng các thuộc tính định dạng riêng của mình (như các thẻ <FONT> và thuộc tính Color...). Do đó ngày càng khó để tạo ra được một web site khi mà nội dung của nó bị tách rời khỏi cách bố trí.
- Để giải quyết vấn đề này World Wide Web Consortium (W3C) đã tạo ra STYLE để đưa thêm vào trong HTML 4.0
- Cả hai trình duyệt lớn là Nescape Và Internet Explorer đều hỗ trợ CSS.
CSS giúp bạn tiết kiệm được rất nhiều thời gian và công sức cho việc thiết kế web.
- Style trong phiên bản HTML 4.0 (phiên bản chúng ta đang dùng) qui định cách thức thể hiện các thẻ HTML tương tự như thẻ <FONT> hay thuộc tính COLOR trong HTML 3.2. Style thường được lưu trong các file nằm ngoài trang web. Chúng giúp bạn có thể thay đổi cách thức định dạng và cách bố trí các trang web chỉ bằng cách thay đổi riêng file CSS. Chỉ khi bạn muốn thay đổi lại toàn bộ màu sắc, cách định dạng của các tiêu đề, nội dung bạn mới hiểu rõ tác dụng thực sự của CSS.
- CSS cho phép chúng ta điều khiển cách định dạng và cách bố trí của cùng lúc nhiều trang web với chỉ duy nhất 1 lần thay đổi tại một vị trí. Là một người thiết kế web, bạn có thể định nghĩa 1 file CSS cho các thẻ HTML và áp dụng nó vào nhiều trang web mà bạn muốn. Để thay đổi tổng thể các trang web này bạn chỉ đơn giản là thay đổi file CSS và tất cả các trang đã áp dụng sẽ được thay đổi một cách tự động.
Bạn có thể định nghĩa nhiều style vào một thẻ HTML
CSS cho phép bạn đưa các thông tin định nghĩa thẻ thông qua nhiều con đường khác nhau. Style có thể được qui định ở trong chỉ một thẻ HTML, được qui định trong 1 trang web hoặc ở trong một file CSS bên ngoài.
Thứ tự áp dụng các định dạng
Như trên đã nói, ta có thể sử dụng nhiều cách khác nhau để làm CSS. Điều gì sẽ xảy ra nếu bạn áp dụng nhiều cách định dạng cho 1 thẻ HTML?
Theo một cách chung nhất ra có thể nói các style của bạn sẽ được "xếp tầng" (cascade). Việc xếp tầng này tuân theo thứ tự sau: (Số 1 là ưu tiên nhất, số 4 là kém ưu tiên nhất).
1. Inline Style (Style được qui định trong 1 thẻ HTML cụ thể)
2. Internal Style (Style được qui định trong phần <HEAD> của 1 trang HTML )
3. External Style (style được qui định trong file CSS ngoài)
4. Browser Default (thiết lập mặc định của trình duyệt)
Như vậy ta thấy các thiết lập trong 1 thẻ HTML có mức ưu tiên cao nhất, Những gì được định nghĩa ở đây sẽ bị bỏ qua tất cả các định nghĩa khác (như trong thẻ <HEAD>, File CSS ngoài,...)
Cú pháp của CSS
Cú pháp của CSS được tạo nên bởi 3 thành phần:
- Thành phần lựa chọn (thường là một thẻ HTML) (Selector)
- Thuộc tính (Property)
- Giá trị (Value)
Cú pháp của CSS được thể hiện như sau:
HTML Code:
Selector {
Property1: Value1;
Property2: Value2;
}
. Hai cặp thuộc tính-giá trị được phân cách nhau bởi dấu chấm phảy (. Toàn bộ các cặp thuộc tính-giá trị của một thẻ HTML được đặt trong cặp dấu ngoặc nhọn ({})Ví dụ
HTML Code:
body{color: black} /*Phần chữ trong thẻ body sẽ có màu đen*/
hay:
p {text-align: center} /*tất cả các thẻ <P> trong trang HTML sẽ được canh giữa.*/
hay định nghĩa nhiều thuộc tính:
p
{
text-align: center;
color: red;
font-family: arial
}Trong trường hợp bạn muốn định nghĩa nhiều thẻ giống nhau bạn có thể nhóm các thẻ lại. Ví dụ dưới đây sẽ nhóm tất cả các thẻ Header lại và định nghĩa chúng sẽ có màu xanh:
HTML Code:
h1,h2,h3,h4,h5,h6
{
color: green
}Bằng việc tạo ra các lớp, bạn có thể định nghĩa nhiều kiểu thể hiện khác nhau cho cùng một thẻ HTML và áp dụng mỗi lớp vào một vị trí cần thiết trên trang web.
Các lớp gắn với 1 thẻ cụ thể
Ví dụ: Trên trang web của bạn có 3 loại đoạn văn: Đoạn văn canh lề trái, đoạn văn canh lề giữa và đoạn văn canh lề phải. Khi đó bạn có thể định nghĩa 3 lớp riêng biệt cho 3 loại đoạn văn này như sau:
HTML Code:
p.trai {text-align: left}
p.phai {text-align: right}
p.giua {text-align: center}HTML Code:
<p class="trai">Đoạn văn này được canh lề trái.</p> <p class="phai">Đoạn văn này được canh lề phải.</p> <p class="giua">Đoạn văn này được canh lề giữa.</p>
- CSS phân biệt chữ hoa và chữ thường giống như C++ do đó khi viết bạn cần phải cẩn thận trong việc sử dụng chữ hoa, chữ thường.
- Trong trang HTML, bạn chỉ được phép khai báo 1 thẻ thuộc duy nhất một lớp. Trái điều này mặc dù trình duyệt không báo lỗi nhưng các lớp sẽ không hoạt động được.
Ví dụ về sử dụng lớp sai:
HTML Code:
<p class="trai" class="phai">Đây là đoạn định nghĩa sai</p>
HTML Code:
<td class="trai">Ví dụ này không hoạt động</td>
Rất đơn giản, bạn có thể tạo ra một lớp mà lớp đó có thể gắn vào hầu như bất cứ thẻ nào trên trang web bằng cách bỏ tên thẻ ở đầu đi nhưng nhớ giữ lại dấu chấm (.)
Ví dụ:
Định nghĩa một lớp "giua" có thể gắn với bất cứ thẻ nào
HTML Code:
.giua{text-align="center"}HTML Code:
<p class="giua">Đoạn văn này được canh lề giữa.</p> <td class="giua">Câu này cũng được canh lề giữa.</p>
Tương tự như các lớp, các định danh cũng cho phép chúng ta chia các thẻ thành nhiều loại khác nhau. Tuy nhiên trên thực tế thì Định danh khác với lớp!!! Một lớp có thể áp dụng nhiều lần ở nhiều vị trí trên trang web, tuy nhiên 1 định danh chỉ có thể áp dụng được duy nhất cho 1 thẻ và tên của định danh phải là duy nhất trên 1 trang web.
Các ví dụ:
1. Đoạn mã dưới đây có thể áp dụng cho thẻ <P> có ID là para1
HTML Code:
p#para1
{
text-align: center;
color: red
}HTML Code:
<P id="para1">Đoạn văn bản</p>
HTML Code:
*#xyz {color: green}HTML Code:
<p id="xyz">Đoạn văn bản</P>
HTML Code:
p#wer345 {color: green}HTML Code:
<p id="wer345">Đoạn văn bản</p>
HTML Code:
<h1 id="wer345">Đoạn văn bản không được áp dụng</p>
Bạn có thể bổ xung các chú thích cho đoạn mã của mình trong CSS. Các đoạn chú thích sẽ được trình duyệt bỏ qua. Đoạn chú thích được tạo ra tương tự như trong C++ (đặt bắt đầu bởi /* và kết thúc bởi */)
Ví dụ:
HTML Code:
/* Đây là đoạn chú thích*/
p
{
text-align: center;
/* Và đây là một đoạn chú thích khác */
color: black;
font-family: arial
}Ví dụ 1: CSS Example
Ví dụ 2: CSS Example
hai bài trên đã giới thiệu với bạn cách viết các mã định dạng CSS. Bài này sẽ hướng dẫn bạn cách sử dụng các mã đã được tạo ra.
Làm thế nào để chèn một đoạn mã CSS vào trang web
- Khi trình duyệt web đọc trang web của bạn nó sẽ định dạng trang web theo cách CSS đã qui định cho nó.
- Theo như bài đầu tiên đã đề cập, chúng ta có tất cả 3 loại CSS dó đó chúng ta cũng sẽ có 3 cách để chèn CSS vào trang web của mình.
Với External Style Sheet ( Sử dụng file CSS được định nghĩa thành 1 file riêng)
Sử dụng External Style Sheet là một cách lý tưởng khi ta cần phải định dạng nhiều trang web theo một mẫu thống nhất. Với external Style Sheet chúng ta có thể thay đổi dáng vẻ của một trang web chỉ với việc thay đổi duy nhất 1 file. Mỗi trang web sử dụng file CSS ngoài này đều phải sử dụng thẻ <LINK>. Thẻ <LINK> được đặt bên trong thẻ <HEAD>
Ví dụ:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
Nếu một trang web có đoạn mã trên thì khi hiển thị trang web trình duyệt sẽ đọc các style được định nghĩa trong file mystyle.css và định dạng văn bản theo nó. Nếu tên file của bạn không phải là mystyle.css thì bạn chỉ cần đổi tên của file thành tên file của bạn.
Một file CSS có thể được viết ra từ bất kì trình soạn thảo văn bản nào. Trong file CSS chỉ chứa các định dạng, không bao gồm các thẻ HTML. Một tệp CSS nên ghi với phần mở rộng là .CSS Ví dụ dưới đây thể hiện toàn bộ nội dung của một file CSS.
HTML Code:
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("http://sinhvienit.net/@forum/images/back40.gif")}Với Internal Style Sheet (Định nghĩa các style sheet ngay trong trang web)
Trong trường hợp mỗi trang web của bạn sử dụng các định dạng khác nhau, bạn hãy dùng Internal Style Sheet. Để định nghĩa Internal Style Sheet bạn sử dụng thẻ <STYLE> đặt bên trong thẻ <HEAD>.
Ví dụ:
HTML Code:
<head> <style type="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image: url("http://sinhvienit.net/@forum/images/back40.gif")} </style> </head>
- Thông thường trình duyệt sẽ bỏ qua đoạn mã mà nó không thể hiểu nổi. Điều đó có nghĩa là với các trình duyệt cũ chúng sẽ bỏ qua thẻ <STYLE>. Tuy nhiên nó không bỏ qua nội dung bên trong thẻ này. Điều đó có nghĩa là phần thông tin định nghĩa style của bạn sẽ bị "phơi" hết lên trang web. Do đó để giải quyết vấn đề này bạn hãy sử dụng chú thích của HTML để bao quanh các mã định nghĩa CSS. Đoạn mã trên được sửa lại thành như sau:
HTML Code:
<head> <style type="text/css"> <!-- hr {color: sienna} p {margin-left: 20px} body {background-image: url("http://sinhvienit.net/@forum/images/back40.gif")} --> </style> </head>
Khi sử dụng Internal Style Sheet là bạn đã đánh mất đi những tác dụng to lớn của CSS với việc trộn lẫn mã định dạng với nội dung trang. Bạn chỉ nên sử dụng phương pháp này trong một số trường hợp rất đặc biệt mà cách định dạng thẻ chỉ áp dụng duy nhất 1 lần trong 1 trang web.
Sử dụng phương pháp này bạn đưa ngay những mã định dạng vào thẻ HTML cần thiết. Các mã định dạng này có thể bao gồm mọi thứ có thể dùng trong Internal Style Sheet và External Style Sheet.
Đoạn mã dưới đây sẽ thay đổi màu sắc và lề của một đoạn trong trang web.
HTML Code:
<p style="color: sienna; margin-left: 20px"> This is a paragraph </p>
Nếu cùng một thẻ được định nghĩa ở nhiều nơi thì thẻ này sẽ kế thừa tất cả các thuộc tính đã được định nghĩa ở tất cả các vị trí. Nếu như các thuộc tính định nghĩa xung đột nhau chúng sẽ được lấy theo thứ tự ưu tiên đã đề cập đến ở bài 1.
Ví dụ:
Một file style sheet ngoài được định nghĩa thẻ <H3> như sau:
HTML Code:
h3
{
color: red;
text-align: left;
font-size: 8pt
}
Sau đó một trang web sử dụng file CSS ở trên trong nó lại có phần định nghĩa cho thẻ <H3> như sau:
h3
{
text-align: right;
font-size: 20pt
}HTML Code:
color: red; text-align: right; font-size: 20pt
Áp dụng CSS với nền của trang web
Thuộc tính Background cho phép chúng ta điều khiển nền của một thành phần nào đó trên trang web. Thành phần này có thể là nền trang, nền nút, nền ô textbox,...
Bạn thử tưởng tượng, chúng ta có thể đặt được những thuộc tính gì cho nền? CSS cho phép bạn lựa chọn những thuộc tính sau:
Nền là màu đồng nhất hay là một bức ảnh?
+ Trong trường hợp là màu đồng nhất thì đó là màu gì? Xanh, đỏ,...
+ Trong trường hợp đó là ảnh:
- Ảnh đó là ảnh nào?
- Ảnh đó được sắp xếp thế nào
Các lựa chọn như vậy CSS cho phép qui định như sau:
* Thuộc tính background-color:
- Ý nghĩa: Cho phép đặt màu nền là một màu đồng nhất nào đó.
- Các giá trị:
+ Bộ màu RGB (RGB(255,0,0): Màu đỏ; RGB(0,255,0): Màu xanh lá cây,...)
+ Màu được qui định bởi những con số HEX (#FF0000: Màu đỏ; #00FF00: Màu xanh lá cây,...)
+ Màu cơ bản được đặt tên bằng từ tiếng Anh (red: đỏ; green: xanh lá cây,...)
+ transparent: Trong suốt (có thể nhìn xuyên qua đối tượng có màu nền trong suốt được)
Ví dụ: tạo một lớp nếu áp dụng nó thì đối tượng sẽ có màu nền đỏ.
HTML Code:
.MauNenDo {background-color: #FF0000}- Các giá trị:
+ url(địa chỉ): lấy ảnh được chỉ định trong "địa chỉ" làm nền.
+ none: Không có ảnh nền.
0 nhận xét:
Đăng nhận xét
Lưu ý: Chỉ thành viên của blog này mới được đăng nhận xét.