Học CSS cơ bản là việc cần thiết nếu bạn muốn tự mình chỉnh sửa giao diện website bởi CSS đóng vai trò vô cùng quan trọng đối với website, nó giúp website trở nên hoàn thiện với đầy đủ màu sắc , được chia cột rõ ràng… Dù bạn là người thiết kế web chuyên nghiệp hay không chuyên thì việc thành thạo CSS và HTML là điều bắt buộc.
Bạn có thể xem: Hướng dẫn chi tiết học HTML để thành thạo trong việc sử dụng HTML trong thiết kế website.
Trong serie học CSS cơ bản, tôi sẽ nói về các vấn đề quan trọng trong CSS như cấu trúc CSS cơ bản, làm việc với vùng chọn (Selector), nắm bắt được khái niệm position, phân biệt margin và padding, hiểu được inline với block, các kỹ thuật xây dựng layout website.
Ngoài ra trọng serie này, tôi sẽ giới thiệu qua các khái niệm về CSS3 bao gồm hiệu ứng box shadows, text shadows, border radius, media query,… để giúp website của bạn trở nên bắt mắt hơn.
CSS là gì? Vai trò của nó đối với website
CSS là một ngôn ngữ được dùng để tìm và định dạng lại các phần tử được tạo ra bởi ngôn ngữ đánh dấu. Đơn giản hơn, bạn có thể hiểu rằng HTML có vai trò định dạng các phần tử trên website như tạo nên đoạn văn bản, tiêu đề, bẳng,… thì CSS giúp các phần tử HTML đó thêm màu sắc trang, đổi màu chữ, thay đổi cấu trúc,…
CSS hoạt động theo phương thức vùng chọn, vùng chọn có thể là tên thẻ HTML, tên một class, một ID hay kiểu khác. Sau đó CSS sẽ áp dụng các thuộc tính cần thay đổi lên vùng chọn.
Cấu trúc một đoạn CSS
Cấu trúc một đoạn CSS sẽ bao gồm 4 phần:
vùng chọn {
thuộc tính : giá trị;
thuộc tính: giá trị;
.....
}Tức là CSS sẽ được khai báo bằng vùng chọn, thuộc tính và giá trị nằm trong cặp dấu ngoặc {}. Mỗi thuộc tính có giá trị riêng, giá trị có thể là số hoặc tên giá trị nằm trong danh sách có sẵn của CSS. Thuộc tính và giá trị được cách nhau bởi dấu hai chấm và cuối mỗi dòng khai báo thuộc tính sẽ có dấu chấm phẩy.
Bạn có thể xem thêm danh sách thuộc tính của CSS tại đây.
Nhúng CSS lên website
Nhúng CSS vào website là việc bạn cần làm trước khi bắt đầu viết CSS và giúp CSS có thể thực thi trên website hoặc tài liệu HTML. Có 2 cách để nhúng CSS lên website:
Inline Styles: Nhúng CSS trực tiếp vào tài liệu HTML thông qua cặp thẻ <style></style>.
External Styles: Tạo tập tin .css và nhúng nó vào tài liệu HTML thông qua cặp thẻ <link>.
Inline Styles
- Phù hợp với việc chèn một sốđoạn CSS ngắn.
- Trình duyệt không cần tốn thời gian tải tập tin CSS.
External Styles
- Phù hợp với việc chèn nhiều đoạn CSS thuận tiện cho việc quản lý.
- Trình duyệt phải mất thêm thời gian để tải tập tin CSS.
Nhúng CSS kiểu Inline Styles
Để nhúng CSS lên website theo kiểu Inline Styles, bạn sử dụng cặp thẻ <style> và khai bảo nó tại bất kỳ vị trí nào trên website. Ví dụ:
<style type="text/css"> </style>
Bạn có thể viết CSS ở trong cặp thẻ <style>. Ví dụ:
Nhúng CSS kiểu External Styles
Nếu nhúng CSS kiểu External Styles thì bạn cần tạo ra tập tin .css với tên bất kỳ. Ví dụ:
p {
color: red;
font-family: Time Newroman;
}Sau đó, bạn chèn tập tin css vào tập tin HTML bằng thẻ <link> và thẻ này phải đặt trong cặp thẻ <head>. Ví dụ:
<link rel="stylesheet" href="me.css" />
Trong đó, thuộc tính rel dùng để khai báo loại tập tin nhúng href là đường dẫn khai báo tên tập tin .css muốn nhúng.
Cách nhúng tập tin CSS vào trong một tập tin CSS
Ví dụ bạn có nhiều tập tin CSS mà không muốn thêm tất cả vào website mà chỉ muốn thêm một tập tin CSS vào thôi thì có thể sử dụng cách nhúng tập tin CSS vào trong một tập tin CSS với từ khóa @import và từ khóa này được đặt ở đầu tập tin .css.
VÍ dụ: Nhúng tập tin me.css vào trong tập tin style.css.
@import "me.css";
Vùng chọn cơ bản (Selector)
Tiếp tục với serie học CSS cơ bản, trong phần này tôi sẽ giúp bạn hiểu được vùng chọn là gì và các loại vùng chọn cơ bản trong CSS.
Khái niệm vùng chọn
Vùng chọn trong CSS là khu vực mà bạn muốn nó được áp dụng quy tắc CSS. Vùng chọn có thể là tên thẻ HTML hoặc thuộc tính của HTML.
Các loại vùng chọn cơ bản
Vùng chọn dựa vào tên thẻ
Loại vùng chọn này sẽ chọn toàn bộ các phần tử trên tập tin HTML dựa vào tên thẻ trong tập tin để áp dụng CSS. Ví dụ tôi muốn thay đổi style cho thẻ h1 thì sẽ có đoạn CSS với vùng chọn h1.
Với kiểu vùng chọn này thì bạn không thể viết CSS cho một khu vực độc lập mà chỉ có thể viết CSS cho toàn bộ các thẻ HTML trong website.
Vùng chọn dựa vào ID
Kiểu vùng chọn này tức là bạn có thể chọn một phần tử cụ thể dựa trên giá trị của thuộc tính id trong thẻ HTML bởi mỗi phần tử đều mang một id riêng biệt.
Id được thiết lập dựa theo thuộc tính id trong thẻ HTML và bạn có thể sử dụng id cho bất kỳ thẻ nào. Lưu ý khi viết tên id vào CSS phải có dấu thăng (#tên-id) đặt trước tên id.
Ví dụ:
Trong ví dụ trên tôi có hai thẻ h1 nhưng chỉ muốn viết CSS cho một thẻ h1 thì tôi sẽ đặt id riêng cho phần tử cần viết CSS.
Chú ý: một thẻ có thể chứa nhiều id khác nhau và mỗi tên id sẽ cách nhau bởi khoảng trắng. Ví dụ:
<h1 id="post-title sticky">Xin chào </h1>
Vùng chọn dựa vào Class
Kiểu vùng chọn này khá giống với kiểu vùng chọn dựa vào id nhưng điểm khác biệt là một class có thể sử dụng cho nhiều phần tử trên một trang tài liệu HTML, còn kiểu id chỉ áp dụng được cho một phần tử.
Class được khai báo trong một phần tử HTML bởi thuộc tính class <h1 class=”tên-class”>. Khi khai báo vùng chọn class, tên class phải được đặt sau dấu chấm (.tên-class). Ví dụ:
Vùng chọn theo thứ cấp
Với kiểu vùng chọn này bạn có thể chọn một phần tử con trong một phần tử mẹ nào đó.
Ví dụ:
<ul id="level"> <li> Level 1</li> <li> Level 2</li> <li> Level 3</li> </ul> <ul id="social"> <li>Pinterest</li> <li>Instagram</li> <li>Google+</li> </ul>
Trong ví dụ này, tôi có 2 danh sách với thẻ <ul> có id khác nhau. Để viết CSS cho các thẻ <li> trong danh sách #level, tôi viết vùng chọn là #level li tức là CSS hiểu rằng bạn muốn chọn tất cả các thẻ <li> nằm trong phần tử #level.
Vùng chọn theo thứ cấp liền nhau
Kiểu này cũng thuộc kiểu vùng dọn dựa theo thứ cấp nhưng nó chỉ cho phép bạn chọn các phần tử nằm bên trong một phần tử nào đấy và nằm dưới phần tử đó một bật. Ví dụ:
<nav id="level"> <ul> <li>Level 1 <ul> <li>Level 1.a</li> <li>Level 1.b</li> </ul> </li> <li>Level 2</li> <li>Level 3</li> </ul> </nav>
Nếu muốn viết CSS cho các thẻ <li> của Level 1.a, Level 1.b thì đặt vùng chọn là #level ul ul>li. Có nghĩa là nó sẽ chọn thẻ <li> nằm trong thẻ <ul> ở bật thứ 2 và thẻ <ul> nằm trong id#level. Ví dụ:
Cách viết CSS này thường áp dụng khi tạo menu đổ xuống trong website.
Tìm hiểu về các đơn vị px, pt, percentages, em, rem
Có 2 loại đơn vị thường được dùng trong CSS là Absolute (đơn vị tuyệt đối) và Relative Units (đơn vị tương đối). Trong serie học CSS cơ bản, tôi sẽ giới thiệu tới các bạn 2 loại đơn vị này.
Đơn vị tuyệt đối
Đơn vị tuyệt đối là các đơn vị vật lý được định nghĩa sẵn, nó đặc trưng cho các đơn vị đo lường vật lý và không bị thay đổi.
Các đơn vị tuyệt đối trong CSS bao gồm:
px: là đơn vị được dùng trên màn hình hiển thị, một px tương đương một điểm ảnh trên màn hình hiển thị và chất lượng của điểm ảnh sẽ khác nhau trên các thiết bị khác nhau.
pt: đơn vị point, 1 ich= 72pt
Đơn vị tương đối
Đơn vị tương đối là đơn vị đo lường được dùng ở mức tương đối và có thể được thay đổi bởi các thành phần khác. Các đơn vị tương đối trong CSS bao gồm:
% (percentages): Là đơn vị tham chiếu tỷ lệ so với phần tử mẹ của nó dựa trên kích thước. Ví dụ bạn có khung với kích thước là 800px và khung bên trong có kích thước là 50% thì kích thước sẽ là 400px. Nếu bạn dùng đơn vị % để gán kích thước cho thẻ <html> trên website thì nó sẽ thay đổi theo kích thước màn hình hoặc cửa sổ website.
Ví dụ:
em: Là đơn vị tham chiếu tỷ lệ so với phần tử mẹ của nó dựa trên giá trị của thuộc tính font-size. Ví dụ phần tử mẹ có font-size là 38px, nếu bạn dùng em trong khu vực của phần tử đó thì 2em=38px.
rem: Là đơn vị tham chiếu tỷ lệ so với phần tử gốc của website dựa trên thuộc tính font-size, tức là nó sẽ thay đổi tùy theo giá trị của thuộc tính font-size trong thẻ <html>. Nếu giá trị font-size trong thẻ <html> là 16px thì 1rem=16px.
đơn vị rem giống với đơn vị em chỉ khác là nó phụ thuộc vào font-size của phần tử <html>.
Các thuộc tính cho văn bản
Loại thuộc tính mà tôi đề cập tới trong phần này của serie học CSS cơ bản là Text Styles, loại thuộc tính đơn giản nhất nhưng lại được sử dụng rất nhiều để thay đổi cách hiển thị văn bản.
Các loại thuộc tính Text Styles thường dùng trong CSS bao gồm:
- text-align: Căn lề văn bản.
- text-decoration: Trang trí văn bản.
- text-indent: Chèn khoảng trống trước văn bản theo chiều ngang từ trái qua phải.
- text-shadow: Thêm bóng cho văn bản.
- text-transform: Tùy chỉnh hiển thị chữ in hoa.
Text-algin
thuộc tính text=align giúp bạn tùy chỉnh căn lềcho văn bản trên website. Thuộc tính này bao gồm các giá trị sau:
text-align: left; // Căn lề bên trái text-align: right; // Căn lề bên phải text-align: center; // Căn lề chính giữa text-align: justify; // Căn lề đều hai bên
Text-decoration
Thuộc tính text-decoration giúp bạn trang trí văn bản và hiển thị tài liệu theo một vài kiểu nhất định.
text-decoration: overline | underline | line-through| none
- overline: gạch trên chữ
- underline: gạch dưới chữ
- line-through: gạch ngang chữ
- none: không gạch
Ví dụ:
Ngoài thuộc tính này còn có thêm một vài thuộc tính con của nó như text-decoration-color, text-decoration-line, text-decoration-style.
Text-indent
Thuộc tính này sẽ giúp bạn thêm một khoảng trắng bên trái của văn bản, giá trị của nó là số và kèm theo đơn vị đo lường. Ví dụ:
p {
text-indent: 20px;
text-indent: 20%;
text-indent: 2pt;
}
Text-shadow
Thuộc tính giúp bạn thêm bóng cho văn bản.
Cấu trúc như sau:
text-shadow: [màu sắc] [tọa độ x y] [độ mờ];
Ở đây, tọa độ x-y là giá trị kiểu đo lường, số đứng trước là x và đứng sau là y, độ mờ nếu không khai báo sẽ mặc định là 0 và giá trị của độ mờ đứng sau giá trị của tọa độ.
Ví dụ:
#sticky {
text-shadow: red 3px 5px 4px;
}Trong ví dụ này, văn bản có id #sticky được đổ bóng màu đỏ có tọa x là 3px, tọa độ y là 5px, độ mờ là 4px.
Text-transform
Thuộc tính này giúp bạn tùy chỉnh việc hiển thị chữ in hoa hay in thường trong văn bản mà không cần viết thủ công.
Các giá trị của thuộc tính này bao gồm: capitalize (in hoa chữ cái đầu của mỗi từ), uppercase (in hoa cả đoạn văn bản), lowercase (viết thường cả đoạn văn bản), none (không có gì).
Ví dụ:
Trang trí font chữ cho văn bản
Để trang trí font chữ cho văn bản thì các thuộc tính thiết lập font chữ thường được sử dụng như font-family (chọn kiểu font chữ), font-weight (độ dày của chữ), color (màu chữ).
Thiết lập font chữ với font-family
Bạn sử dụng thuộc tính font-family để thiết lập font chữ cho văn bản và giá trị là tên các loại font chữ muốn sử dụng.
Cú pháp: font-family: tên-font, tên-font-backup, …;
Ở đây, sẽ ưu tiên hiển thị tên font đầu tiên, nếu máy tính của bạn không có font đó thì nó sẽ dùng font backup tiếp theo và cứ tiếp tục như vậy.
Thông thường các font chữ được thiết lập trong CSS là các font chữ có trên máy tính. Đồng nghĩa nếu bạn thiết lập một font mà máy tính của bạn không có thì nó sẽ không hiển thị.
Khi thiết lập font chữ bạn cần biết 2 giá trị là serif và sans-serif, serif là giá trị font kiểu có chân còn sans-serif là giá trị font kiểu không có chân. Ví dụ:
Các font chữ cơ bản
Các font chữ cơ bản trên máy tính bao gồm:
Serif
- Time New Roman
- Palatino
- Georgia
Sans Serif
- Arial
- Verdana
- Tahoma
- Helvetica
Font-style
Thuộc tính font-style giúp bạn thiết lập chữ viết hiển thị dạng in nghiêng hoặc bình thường và giá trị của thuộc tính này bao gồm normal (bình thường), italic (in nghiêng), oblique (in nghiêng).
In đậm chữ với font-weight
Thuộc tính font-weight giúp tùy chỉnh việc in đậm chữ viết. Giá trị từ 100,200,…,900, số càng lớn thì chữ càng dày hơn hoặc bạn có thể dùng các giá trị kiểu chữ là normal, bold. Nếu phần tử mẹ đã thiết lập font-weight thì bạn có thể sử dụng giá trị lighter và bolder để thiết lập độ đậm tương đối.
Tùy chỉnh màu chữ với thuộc tính color
Bạn sử dụng thuộc tính color để thiết lập màu chữ và hỗ trợ 3 kiểu giá trị biểu diễn màu sắc là kiểu tên, kiểu HEX, kiểu RBG. Bạn có thể tra cứu tên hay mã màu tại đây.
body {
color: #FF0000;
}Tùy chỉnh kích thước chữ với font-size
Bạn dùng thuộc tính font-size để tùy chỉnh kích thước chữ và nó chỉ có giá trị duy nhất là số đi kèm với đơn vị đo lường. Ví dụ:
p {
font-size: 25px;
}Lời kết
Kết thúc serie học CSS cơ bản phần 1, các bạn đã hiểu được CSS là gì? Vai trò của nó đối với website, các khái niệm cơ bản liên quan đến CSS, đơn vị đo lường trong CSS và các thuộc tính trang trí cho văn bản. Trong phần tiếp theo của serie học CSS cơ bản, tôi sẽ giúp các bạn tạo nên một website hoàn chỉnh.
Tham gia cùng 67,322 người đăng ký
Nhận thông tin khi có bài viết đặc biệt, hướng dẫn chuyên sâu và cập nhật mới.
Mọi thông tin đều được mã hóa và bảo mật.
