CSS cơ bản cho người mới bắt đầu

Để học HTML và CSS không khó. Theo hướng dẫn CSS cơ bản cho người mới bắt đầu. Bạn sẽ nhanh chóng thành thạo kỹ năng phát triển web và có thể tự xây dựng trang web đầu tiên của mình sau vài phút.

HTML là gì?

+ HTML là viết tắt của Hypertext Markup Language, ngôn ngữ để mô tả cấu trúc trang web.

+ Cấu trúc của HTML bao gồm hai phần:

  • Phần header => Phần header mô tả thông tin theo yêu cầu của trình duyệt.
  • Phần body => Phần body chứa nội dung cụ thể cần được mô tả.

Ví dụ: Cách viết

<!DOCTYPE html>
<html lang="vi">

<head>

</head>

<body>
<p>Nội dung</p>
</body> </html>

CSS là gì?

+ CSS là viết tắt của Cascading Style Sheets, ngôn ngữ để mô tả việc trình bày trang web.

+ Công nghệ CSS được sử dụng trong việc xây dựng trang web. Nhằm để kiểm soát chính xác hơn về bố cục trang, phông chữ, màu sắc, nền và các hiệu ứng khác. Làm cho trang web trở nên đẹp và năng động hơn.

Bài 1.Cách nhúng CSS vào website

Trước khi tiến hành viết CSS và để CSS có thể thực thi trên website hoặc tài liệu HTML của bạn thì bạn phải tiến hành nhúng CSS vào website. Nói về nhúng CSS vào website thì chúng ta có hai cách là:

  • Inline Styles – Nhúng trực tiếp vào tài liệu HTML thông qua cặp thẻ <style> </style>.
  • External Styles – Tạo một tập tin .css riêng và nhúng vào tài liệu HTML thông qua cặp thẻ <link>.

Mỗi cách nhúng đều có ưu và nhược điểm khác nhau. Cũng như tùy theo trường hợp mà ta sử dụng nó.

Inline Styles

  • Thích hợp với việc chèn một vài đoạn CSS ngắn.
  • Trình duyệt không mất thời gian tải tập tin CSS.

External Styles

  • Thích hợp với việc chèn nhiều đoạn CSS, dễ quản lý.
  • Nhưng trình duyệt sẽ mất thêm thời gian để tải tập tin CSS.

Và trong các bài học CSS, Tòn sẽ hướng dẫn cả 2 cách. Bạn có thể sử dụng kiểu nào mà bạn thích.

Cách nhúng CSS với Inline Styles

Để nhúng CSS vào website thông qua kiểu Inline Styles. Bạn sẽ khai báo cặp thẻ <style> vào vị trí bất kỳ của website (tốt nhất là bên trong cặp thẻ <head>) như sau:

<!DOCTYPE html> 
<html lang="vi">
<head>

<style>
p{color:red;}
</style>

</head>
<body>
   <p>Nội dung</p>
</body>
</html>

Cách nhúng CSS với External Styles

Khi sử dụng cách này, việc đầu tiên là bạn cần tạo ra một tập tin .css với tên bất kỳ. Bạn có thể dùng bất cứ chương trình soạn thảo văn bản nào để tạo. Sau đó dán một đoạn CSS đơn giản vào như thế này dưới đây.

Ví dụ: Toàn tạo 1 tệp tin style.css có nội dung như sau:

p {
color: red;
font-family: Arial;
}

Và cuối cùng là chèn vào tập tin HTML bằng câu lệnh <link> và thẻ này phải đặt bên trong cặp thẻ <head>.

Ví dụ:

<!DOCTYPE html>
<html lang="vi">
<head>

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

</head>

<body> 

 <p>Nội dung</p>

</body>
</html>

Bài 2.Vùng chọn CSS thông dụng

Vùng chọn trong CSS đóng vai trò rất quan trọng khi viết CSS. Bởi vì nếu bạn sử dụng vùng chọn sai. Thì điều đó có nghĩa là các quy tắc CSS của bạn sẽ không thể thực thi. Hoặc thực thi không đúng chỗ mà bạn muốn.

Vùng chọn là gì?

Trong CSS, vùng chọn là khu vực mà bạn muốn nó sẽ được áp dụng các quy tắc CSS mà bạn muốn chỉ định cho nó. Ví dụ bạn muốn tăng kích thước font chữ của các thẻ h1 thì vùng chọn của bạn sẽ là h1.

Các vùng chọn CSS cơ bản

1.Vùng chọn dựa vào tên thẻ

Kiểu vùng chọn này là đơn giản nhất. Đó là nó sẽ chọn toàn bộ các phần tử trên tài liệu HTML dựa vào tên thẻ có trong tài liệu rồi áp dụng CSS.

Ví dụ: Tòn muốn thay đối màu cho toàn bộ thẻ p trong website thì sẽ có đoạn CSS sau với vùng chọn p.

p{color:red}

2.Vùng chọn dựa vào ID

Vùng chọn dựa vào ID (tên định danh) nghĩa là bạn có thể chọn một phần tử cụ thể. Dựa vào giá trị của thuộc tính id trong thẻ HTML. Sở dĩ vùng chọn id được sử dụng để chọn một phần tử cụ thể. Là vì trên một trang tài liệu HTML thì mỗi phần tử phải mang một id riêng biệt không trùng nhau.

Id được thiết lập dựa vào thuộc tính id trong thẻ HTML. Và bất cứ thẻ nào cũng có thể sử dụng id. Khi viết tên id vào CSS thì nó phải có dấu thăng (#tên-id) đặt trước tên id để phân biệt với các loại vùng chọn khác.

Ví dụ: <div id=”noi-dung”> Nội dung</div> Tòn muốn thay đổi màu thì cách gọi vùng như sau

#noi-dung{color:red}

3.Vùng chọn dựa vào Class

Class (lớp) cũng rất được sử dụng phổ biến như id. Nhưng một điểm khác biệt của class là một class có thể được sử dụng cho nhiều phần tử trên một trang tài liệu HTML. Còn id thì chỉ được sử dụng một lần duy nhất 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 như <h1 class=’tên-class’>. Khi khai báo vùng chọn class trong CSS. Thì tên class phải được đặt sau dấu chấm (.tên-class)

Ví dụ: <div class=”noi-dung”>Nội dung</div> Tòn muốn thay đổi màu thì cách gọi như sau

.noi-dung{color:red}

Bài 3.Tìm hiểu đơn vị px, pt, em

Trong CSS có hai loại đơn vị là Absolute Units (đơn vị tuyệt đối) và Relative Units (đơn vị tương đối). Trong đó:

Đơn vị tuyệt đối

Là các đơn vị vật lý đã được định nghĩa sẵn và đại diện cho các đơn vị đo lường vật lý. Các đơn vị này không bị phụ thuộc. Và không hề thay đổi bởi bất cứ tác động nào.

Ví dụ: như đơn vị mét, xen-ti-mét,..là các đơn vị tuyệt đối.

Các đơn vị tuyệt đối sử dụng trong CSS gồm có:

  • px: Đây là một đơn vị được sử dụng trên màn hình hiển thị. Một px sẽ tương đương với một điểm ảnh trên màn hình hiển thị. Chất lượng của điểm ảnh sẽ hoàn toàn khác nhau trên một số thiết bị.
  • pt: Đơn vị point và cứ 1 ich = 72pt.

Đơn vị tương đối

Là các đơn vị đo lường được sử dụng trong CSS ở mức tương đối. Nghĩa là nó có thể sẽ được thay đổi bởi các thành phần khác.

Ví dụ: như thay đổi phụ thuộc vào kích thước màn hình.

Các đơn vị tương đối được sử dụng trong CSS gồm có:

  • % (percentages): Là đơn vị tham chiếu tỷ lệ so với một phần tử mẹ của nó dựa vào kích thước.
  • em: Là đơn vị tham chiếu tỷ lệ so với phần tử mẹ của nó dựa vào giá trị của thuộc tính font-size. Ví dụ bạn đặt cho font-size cho phần tử mẹ của nó là 19px thì nếu bạn sử dụng em trong khu vực phần tử đó thì 1em = 19px.
  • rem: Là đơn vị tham chiếu tỷ lệ so với phần tử gốc của một website dựa vào thuộc tính font-size. Nghĩa là sẽ biến đổi tùy theo giá trị của thuộc tính font-size trong thẻ <html>. Cũng như rem, nếu bạn khai báo font-size cho thẻ <html> là 16px thì 1rem = 16px

Bài 4.Các thuộc tính văn bản

  • text-align: Căn lề văn bản.

Ví dụ:

text-align: left; // Căn lề văn bản từ bên trái
 
text-align: right; // Căn lề văn bản từ bên phải
 
text-align: center; // Căn lề văn bản từ chính giữa
 
text-align: justify; // Căn lề văn bản đều hai bên
  • text-decoration: Trang trí văn bản.

Ví dụ:

overline: gạch trên chữ
underline: gạch dưới chữ
line-through: gạch ngang chữ
none: không có gạch gì cả
  • text-shadow: Thêm bóng cho văn bản.

Cách viết: text-shadow: [màu sắc] [tọa độ x y] [độ mờ];

Ví dụ:

#title {
   text-shadow: blue 2px 3px 4px;
}
  • text-transform: Tùy chỉnh việc hiển thị chữ in hoa.

Bài 5.Tìm hiểu Box Model

Box Model là một kỹ thuật cơ bản nhất trong CSS Layout. Và được sử dụng để bạn mô tả về khoảng cách mà mỗi phần tử trên website được sở hữu. Hay nói cách khác là kỹ thuật tinh chỉnh khoảng cách hiển thị cho mỗi phần tử trên website.

Kỹ thuật Box Model trong CSS bao gồm 4 phần quan trọng đó là:

  • Margin: Khoảng cách tính từ bên ngoài của phần tử.
  • Border: Đường viền của phần tử.
  • Padding: Khoảng cách tính từ bên trong của phần tử.
  • Content: Nội dung trong phần tử.

Lời kết

Trên đây là những kiến thức CSS cơ bản cho người mới bắt đầu. Chúc các bạn thành công!

Xem chi tiết