Bài 1: What is CSS?
What is CSS? CSS là C ascading S tyle S heets CSS mô ta các nhân tố HTML hiển thị như thế nào trên màn hình, giấy, hoặc trong các thiết bị khác. CSS tiết kiệm nhiều công việc. Nó có thể điều khiển giao diện nhiều trang web. Trong tutorial này sẽ chỉ cho các bạn CSS từ cơ bản ...
What is CSS?
- CSS là Cascading Style Sheets
- CSS mô ta các nhân tố HTML hiển thị như thế nào trên màn hình, giấy, hoặc trong các thiết bị khác.
- CSS tiết kiệm nhiều công việc. Nó có thể điều khiển giao diện nhiều trang web.
Trong tutorial này sẽ chỉ cho các bạn CSS từ cơ bản đến nâng cao.
Tại sao sử dụng CSS?
Như bạn biết HTML chỉ chứa đựng các tab và mô tả nội dung, nó không có khả năng định dạng một trang web như là màu sắc, bố cục, và nhiều thứ khác nữa. Do vậy để làm công việc này thì CSS sẽ giúp bạn độ các HTML theo ý muốn.
Cú pháp CSS:
Một CSS bao gồm một bộ quy tắc của một selector (chính là element HTML) và một khối khai báo như hình minh họa bên dưới:
Selector trỏ tới element HTML bạn muốn định dạng, như hình là selector “h1”.
Khối khai báo chứa đựng một hoặc nhiều khai báo giá trị khác nhau và cách nhau dấu chấm phẩy (;).
Mổi khai báo bao gồm một thuộc tính CSS name và value, ngăn nhau dấu hai chấm “:”.
Một khai báo CSS luôn luôn kết thúc với dấu chấm phẩu (;), và khối khai báo được bao quanh cặp ngoặc nhọn.
Trong ví dụ {color:blue; font-size:12px;} được gọi là khối khai báo (declaration block).
Color:font-size gọi là một khai báo (a declaration) nó luôn kết thúc có chấm phẩy.
Trong ví dụ sau chúng ta thử định dạng tất cả element <p> nằm giữa và có màu đỏ:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
</body>
</html>
Kết quả ngoài trình duyệt :
Các nội dung nằm trong thẻ <p> sẽ nằm giữa màn hình và được tô màu đỏ lét.
CSS Selector
CSS selector được sử dụng để tìm (hoặc chọn) HTML element dựa vào tên của element, id, class, thuộc tính và nhiều thứ khác.
Element Selector
Là chọn các element dựa vào tên của nó.
Bạn có thể chọn tất cả element <p> trong trang giống như:
p {
text-align: center;
color: red;
}
Trong trường hợp này thì tất cả element <p> sẽ bị ảnh hưởng bởi css, tức là sẽ được css định dạng nằm giữa và có màu đỏ chót.
Id Selector
Is selector sử dụng thuộc tính id của HTML element để chọn một element chỉ định.
Id của một element là duy nhất trong một trang, vì thế id selector được sử dụng để chọn một element duy nhất.
Để chọn một element với id chỉ định, ta ghi một ký tự (#) theo sau nó là id của element.
Ví dụ dưới sẽ áp dụng tới HTML element có id là para1.
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id=”para1″>Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Kết quả:
Bạn thấy đó chỉ có id là para1 được css định dạng mà thôi.
Lưu ý: một tên id không bắt đầu với 1 con số!
Class Selector
Class selector chọn các element với thuộc tính class xác định.
Để chọn các element với một class chỉ định, ta ghi một ký tự (.), theo sau là tên class.
Trong ví dụ dưới, tất cả element với class = “center” sẽ có màu đỏ và canh giữa.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class=”center”>Red and center-aligned heading</h1>
<p class=”center”>Red and center-aligned paragraph.</p>
</body>
</html>
Thay vì bạn có thể đặt từng id rồi định dạng từng cái, nhưng nếu tất cả các element bạn muốn có chung một định dạng CSS thì bạn hãy đặt nó có cùng class, rồi công việc còn lại đơn giản bạn định dạng cho cái tên class đó ở CSS thì nó sẽ áp dụng hết các element có class name đó.
Bạn cũng có thể chỉ định một element html mà có hiệu lực trong một class.
Trong ví dụ dưới , chỉ element <p> với tên class =”center” là được canh giữa.
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class=”center”>This heading will not be affected</h1>
<p class=”center”>This paragraph will be red and center-aligned.</p>
</body>
</html>
Chúng ta thấy có 2 element có cùng class là center gồm h1 và p,nhưng chúng ta chỉ muốn <p> được định dạng thì ta sẽ đi theo cách từ ngoài vào trong, tức ta gọi tên element trước rồi tới thuộc tính, vì là class nên có dấu chấm, tức là p.center.
p.center {
text-align: center;
color: red;
}
Các HTML element cũng có thể tham chiếu tới nhiều hơn 1 class.
Trong ví dụ dưới, element <p> sẽ được định dạng bởi 2 class là “center” và “large”, cú pháp như sau:
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class=”center”>This heading will not be affected</h1>
<p class=”center”>This paragraph will be red and center-aligned.</p>
<p class=”center large”>This paragraph will be red, center-aligned, and in a large font-size.</p>
</body>
</html>
Kết quả:
Bạn có hiểu kết quả ko?
Chúng ta xem dòng :
<p class=”center large”>This paragraph will be red, center-aligned, and in a large font-size.</p>
Nó sẽ lấy định dạng
p.center {
text-align: center;
color: red;
}
Để tạo ra chữ màu đỏ và nằm vào giữa trang đồng thời lấy luôn
p.large {
font-size: 300%;
}
Để ra cái font chà bá lửa.
Lưu ý : Một class name không bắt đầu tới một số.
Grouping Selector
Nếu bạn có các element có cùng định dạng, giống như cái này :
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
Sẽ tốt hơn nếu ta nhóm chúng lại để code nó ngắn hơn.
Để nhóm các selector, chúng ta ghi chúng cách nhau dấu phẩy (,).
Ta viết lại như sau :
h1, h2, p {
text-align: center;
color: red;
}
CSS Comments
Việc comment giúp chúng ta diễn giải code và có thể giúp khi bạn sữa source code sau này.
Nội dung trong comment thì được trình duyệt làm ngơ nó.
Một CSS comment bắt đầu /* và kết thúc */. Comment cũng có thể ghi trên nhiều dòng trong /*…*/ này.
p {
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
Rồi bài đầu tiên ta khởi động nhẹ nhàng thế thôi. Các bạn chưa cần quan tâm các thuộc tính trong các ví dụ trên, như canh giữa, màu chữ v.v… Nó sẽ được học chi tiết ở những bài tiếp theo.
