Làm quen với CSS

Lục Đức Thành

Bài này tôi đặt tên là “Làm quen với CSS” để giúp những bạn mới học Web Design hiểu và nắm được những thứ cơ bản nhất về CSS nên nội dung hết sức đơn giản. Nếu bạn đã khá thành thạo với CSS và đang tìm kiếm những thứ hay ho thì đây không phải là bài viết dành cho bạn!

1. CSS là gì?

CSS là viết tắt của Cascading Style Sheet, tạm dịch là “Định dạng kiểu xếp chồng“, dùng để tạo ra giao diện, dáng vẻ đẹp xấu cho trang web. Nghe hơi mông lung và không hiểu gì đúng không? Yên tâm, dần dần rồi bạn sẽ hiểu!

2. Vai trò, đặc điểm của CSS?

  • Thay thế cách tạo định dạng cũ trong HTML
  • Bổ sung những hiệu ứng mà HTML không có, như viền, bo góc, bóng đổ chẳng hạn
  • Gọn gàng, khoa học, tiết kiệm rất nhiều thời gian vì có những cơ chế lưu trữ và áp dụng định dạng thông minh hơn HTML (Dựa vào cái gọi là các Selector, sẽ tìm hiểu kỹ hơn ở bên dưới)
  • Tách nội dung và định dạng ra thành 2 phần riêng biệt, dễ quản lý, sửa chữa, bảo trì, phát triển web
  • Có khả năng tái sử dụng các định dạng lặp lại, đây là điều không thể làm được với HTML
  • Tương thích với nhiều trình duyệt khác nhau (Cross Browsers)

Hiện tại, phiên bản mới nhất của CSS là phiên bản CSS3, có rất nhiều tính năng hấp dẫn nhưng chưa phải là bản hoàn thiện cuối cùng, nhiều đặc điểm vẫn còn đang trong quá trình phát triển.

Taxonomy and status of CSS3 - Phân loại và hiện trạng của bản CSS3

Taxonomy and status of CSS3 – Phân loại và hiện trạng của bản CSS3

3. Các cách lưu trữ CSS

Có 3 cách lưu trữ CSS khác nhau.

3.1. CSS nhúng hay CSS bên trong – Internal Style Sheet

CSS nhúng là những đoạn CSS được lưu trong cùng tài liệu HTML chứa nội dung của trang web. Chúng được lưu trong thẻ <style> nằm bên trong thẻ <head> của trang web.

Cú pháp:

HTML Code:
1
2
3
4
5

<head>
  <style>
    Các Selector (Chứa các đặc tả về định dạng)
  </style>
</head>

Ví dụ:

HTML Code:
1
2
3
4
5
6

<head>
  <style>
    body {background: #000; color: #fff; font-size: 12px;}
    p {color: blue; padding: 3px;}
  </style>
</head>

3.2. CSS bên ngoài – External StyleSheet

CSS bên ngoài hay External StyleSheet là những đoạn code CSS được lưu trữ riêng trong một file .css

Những lợi ích của việc dùng CSS bên ngoài:

  • Làm cho code HTML trong phần <head> sạch sẽ, gọn gàng
  • Có tính tái sử dụng cao vì một file .css có thể dùng chung trong cả một project cho nhiều file .html khác nhau

Trong thực tế ta thường dùng cách này.

Cú pháp:

HTML Code:
1
2
3

<head>
  <link rel="stylesheet" href="xxx.css">
</head>

Trong đó xxx.css chính là file .css chúng ta muốn sử dụng cho tài liệu HTML

3.3. Inline Style

Inline Style cho phép các bạn áp dụng Style trực tiếp lên một phần tử. Không khuyến khích dùng cách này nhưng chúng ta vẫn dùng cách này trong một số tình huống sau:

  • Làm thử nhanh một số hiệu ứng cho phần tử, hoặc những style nhỏ không đáng kể
  • Làm đẹp bài viết trên các diễn đàn cho phép gõ HTML + CSS

Cú pháp:

<tag style="các đặc tả về định dạng (các cặp thuộc tính - giá trị)">...</tag>

Ví dụ:

<p style="text-align: center; color: red;">This is a paragraph</p>

sẽ tạo ra hiệu ứng căn giữa và chữ đỏ cho thẻ p.

4. Khái niệm Selector, các kiểu Selector

CSS Selectors cho phép bạn lựa chọn và điều khiển các phần tử khác nhau trong HTML.

Ta có thể lựa chọn các phần tử dựa và id (định danh của phần tử), class (lớp thuộc tính), type (kiểu phần tử), attribute (thuộc tính của phần tử) và dựa vào nhiều thông tin khác, nhưng id và class là 2 thông tin được sử dụng nhiều và phổ biến nhất.

Cú pháp của một Selector:

CSS Code:
1
2
3
4
5

selector-name {
  thuộc-tính-1: giá-trị-1;
  thuộc-tính-2: giá-trị-2;
  ...
}

Dưới đây ta sẽ nói về các kiểu Selector khác nhau, tức là cách mà định dạng sẽ áp dụng vào các phần tử như thế nào.

The element Selector (The tag Selector)

Những đặc tả về định dạng cho một phần tử nào đó sẽ được áp dụng một cách tự động lên các phần tử ấy trong HTML.

Ví dụ:

CSS Code:
1
2
3

p {
  color: red;
}

Đoạn code trên sẽ làm cho chữ của tất cả các thẻ <p> trong tài liệu HTML sẽ có màu đỏ, một cách tự động!

Chúng ta thường dùng cách này để tạo style mặc định cho các phần tử web khi mới bắt đầu một dự án mới, ví dụ tạo style mặc định cho các thẻ <body>, <h1>, <h2>, <h3>, <p>, <table>, <ul>, <ol>, <li>, <a>, <img>,…

The class Selector

Tạo ra các lớp thuộc tính (class) và áp dụng vào đâu đó trong tài liệu HTML.

Cú pháp CSS:

CSS Code:
1
2
3
4
5

.class-name {
  thuộc-tính-1: giá-trị-1;
  thuộc-tính-2: giá-trị-2;
  ...
}

class-name là tên lớp do bạn tự nghĩ ra, nó chứa tập các thuộc tính về định dạng mà chúng ta sẽ sử dụng cho các phần tử trong tài liệu HTML.

Lưu ý: Đằng trước class-name bắt buộc phải có một dấu chấm!

Áp dụng vào HTML:

<tag class="class-name">...</tag>

Ví dụ:

<a class="xxx" href="#">Click me!</a>

với xxx là tên class muốn sử dụng.

Một class có thể được sử dụng cho nhiều phần tử, và ngược lại, một phần tử có thể sử dụng nhiều class khác nhau, mỗi class cách nhau bởi một dấu cách:

<tag class="class1 class2...">...</tag>

The id Selector

Tạo ra các định dạng dùng để áp dụng cho một phần tử HTML có id tương ứng.

Cú pháp CSS:

CSS Code:
1
2
3
4
5

#id-name {
  thuộc-tính-1: giá-trị-1;
  thuộc-tính-2: giá-trị-2;
  ...
}

id-name là id của phần tử HTML mà ta muốn tác động.

Lưu ý: Đằng trước id-name bắt buộc phải có một dấu thăng!

Áp dụng vào HTML:

<tag id="id-name">...</tag>

5. Ví dụ cụ thể để làm quen với CSS

Bước 1) Khởi động Sublime Text (hoặc bất kỳ phần mềm nào tương tự, Notepad++ hoặc Dreamweaver chẳng hạn)

Bước 2) Tạo thư mục web để làm việc, tạo file index.html

Bước 3) Gõ vào các đoạn code như dưới đây:

HTML Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<body>
	<h1>CSS Basic Demo</h1>
 
	<p>Lorem <span class="cute">ipsum dolor</span> sit amet, consectetur adipisicing elit. Nisi, enim.</p>
	<p>Lorem <span class="cute">ipsum dolor</span> sit amet, consectetur adipisicing elit. Nisi, enim.</p>
	<p>Lorem <span class="cute">ipsum dolor</span> sit amet, consectetur adipisicing elit. Nisi, enim.</p>
	<p>Lorem <span class="cute">ipsum dolor</span> sit amet, consectetur adipisicing elit. Nisi, enim.</p>
	<p>Lorem <span class="cute">ipsum dolor</span> sit amet, consectetur adipisicing elit. Nisi, enim.</p>
	<p>Lorem <span class="cute">ipsum dolor</span> sit amet, consectetur adipisicing elit. Nisi, enim.</p>
	<p>Lorem <span class="cute">ipsum dolor</span> sit amet, consectetur adipisicing elit. Nisi, enim.</p>
	<p>Lorem <span class="cute">ipsum dolor</span> sit amet, consectetur adipisicing elit. Nisi, enim.</p>
	<p>Lorem <span class="cute">ipsum dolor</span> sit amet, consectetur adipisicing elit. Nisi, enim.</p>
	<p>Lorem <span class="cute">ipsum dolor</span> sit amet, consectetur adipisicing elit. Nisi, enim.</p>
 
	<a href="#">Home</a>
	<a href="#">About</a>
	<a href="#">Contact</a>
</body>

Mở trang web trên trình duyệt để xem kết quả.

Bước 4) Tạo thư mục css, tạo file style.css bên trong thư mục css vừa tạo

Bước 5) Gõ vào các đoạn code CSS như sau:

CSS Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

body {
	background: #D6E0EB url(../images/bg.png);
	color: #1A334C;
}
a, a:link, a:visited, a:active {
	font-size: 2em;
	color: #336699;
	text-decoration: none;
}
a:hover {
	color: #24476B;
	background: url(../images/hearts.gif);
}
.cute {
	border: solid 1px #1A334C;
	padding: 4px;
	border-radius: 4px;
	cursor: cell;
	display: inline-block;
	transition: all .5s;
}
.cute:hover {
	transform: rotate(30deg);
}

Bước 6) Vào thẻ <head> của file index.html, gõ thêm đoạn code sau:

HTML Code:
1
2
3

<head>
	<link rel="stylesheet" href="css/style.css">
</head>

Lưu các tài liệu lại và mở trang web trên trình duyệt để xem kết quả.

Bạn có thể xem ví dụ và tải mã nguồn về xem bằng các link dưới đây:

View Demo   Download Files

Các hình ảnh được sử dụng trong ví dụ này:

Xem hướng dẫn bằng Video (21:48):

6. Kết luận

CSS là một trong “Bộ 3 quyền lực” của Web Design, bộ ba này bao gồm: HTML (Xây dựng cấu trúc thẻ, tạo nội dung cho trang web, giống xây thô một ngôi nhà) + CSS (Giao diện, cách trình bày của một trang web. Trang web đẹp hay xấu do CSS quyết định, giống như công đoạn hoàn thiện, làm đẹp ngôi nhà) + JavaScript (Các tính năng tương tác của web như Slider, Light Box, Tooltip, Scroller,…, giống như sự tiện nghi của một ngôi nhà).

Việc hiểu và vận dụng thuần thục CSS là một điều kiện bắt buộc đối với các Web Designer. Hi vọng qua bài hướng dẫn nhỏ này, bạn sẽ tự tin và hào hứng hơn với nghề thiết kế web. Bước đầu là làm quen với CSS cho đỡ bỡ ngỡ, biết đâu sau đấy bạn sẽ sáng tạo ra nhiều thứ vô cùng hay ho, hấp dẫn thì sao! Tất cả đang ở phía trước, chúc bạn thành công!

Cheers,

The following two tabs change content below.
My Twitter profileMy Facebook profileMy Google+ profileMy YouTube channel

Lục Đức Thành

Giáo viên at FPT Arena
Tôi là kỹ sư Cơ khí, kỹ sư CNTT trường ĐH Bách Khoa Hà Nội. Tôi hoạt động trong lĩnh vực CNTT, bao gồm Software Development, Web Design, Web Development, Interactive Multimedia and Mobile App, Mobile Game Development. Tôi rất yêu công nghệ và tôi lập ra trang web này để chia sẻ kiến thức về công nghệ với mọi người.

Các bài viết tương tự:

  1. News Ticker, tạo khối cuộn tin tự động bằng jQuery
  2. JQuery Advanced News Ticker, tạo khối cuộn tin tự động
  3. Xmas Light Effect Tutorial with Notepad++, CSS, JavaScript
  4. Image Map Rollover Effect Tutorial with Dreamweaver, CSS3 and jQuery
  5. CSS Notification Boxes – Tạo các hộp thông báo đẹp mắt bằng CSS
  6. Hướng dẫn tự cắt web, PSD to HTML, CSS #01 – Special Offers Layout
  7. CSS Units – Các đơn vị trong CSS
  8. Tìm hiểu thuộc tính white-space và cách sửa lỗi chữ trong menu bị bẻ xuống dòng

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*
Website