Kiến thức thiết kế web

Tin tức hoạt động và xu hướng sử dụng phần mềm, tính năng phần mềm được Bắc Việt cập nhật liên tục

CSS là gì? Cách viết CSS trong HTML

CSS là gì? Cách viết CSS trong HTML

04/02/2023 | 946

CSS là một trong ba yếu tố quan trọng trong lập trình web cùng với HTML và JavaScript. Các kiến thức về nền tảng này sẽ giải thích lý do về sự quan trọng của CSS trong thiết kế website. Qua bài viết này, BẮC VIỆT sẽ chia sẻ CSS là gì, cũng như cách viết nó trong HTML. 

CSS (Cascading Style Sheet)​

Bảng mục lục

CSS là gì?

CSS (Cascading Style Sheet) là một ngôn ngữ lập trình được thiết kế vô cùng đơn giản, dễ sử dụng. Với CSS hướng tới mục tiêu chính là giúp đơn giản hóa được quá trình tạo ra các website.

Nhiệm vụ chính của CSS là thực hiện việc xử lý giao diện của một trang web cụ thể. Đó là những yếu tố như màu sắc văn bản, hay khoảng cách giữa các đoạn, hoặc kiểu font chữ, hình ảnh, bố cục, màu nền, các biến thể hiển thị cho các thiết bị và kích thước màn hình khác nhau… đều có thể thay đổi, chỉnh sửa theo ý muốn với hỗ trợ của CSS. Các tài liệu này thường là tệp văn bản được cấu trúc bằng ngôn ngữ đánh dấu (SGV, XML,...). Theo đó, ngôn ngữ đánh dấu cơ bản và phổ biến nhất là HTML.

Sử dụng CSS chính là một công cụ hỗ trợ hữu ích và cần thiết cho quá trình phát triển, thiết kế website. Những công việc mà HTML không xử lý được sẽ được giải quyết tốt với CSS. Nhờ có CSS giúp mang lại khả năng kiểm soát mạnh mẽ, hiệu quả với quá trình trình bày một tài liệu HTML cụ thể. Bởi thế mà nó là công cụ thường được kết hợp với các ngôn ngữ như HTML hay XHTML.

Tham khảo thêm bài viết: Công nghệ HTML5 & CSS3 là gì?

Đối với CSS hiện nay có nhiều kiểu khác nhau được đưa vào sử dụng. Song xét một cách cơ bản nhất thì nó được phân chia thành các loại thông dụng là:

  • CSS tùy chỉnh hình nền – Background
  • CSS tùy chỉnh cách hiển thị đoạn text – Text
  • CSS tùy chỉnh kiểu chữ và kích thước – Font
  • CSS tùy chỉnh bảng – Table
  • CSS tùy chỉnh danh sách – Link
  • Mô hình box model có kết hợp với padding, margin, border – Box model

Cách thức hoạt động của CSS

Phương thức hoạt động của CSS là tìm các vùng chọn (tên thẻ HTML, ID, class,…), sau đó sẽ áp dụng các thuộc tính cần thay đổi lên vùng chọn đó. Bộ quy tắc CSS được sử dụng bằng cấu trúc tiếng Anh. Cú pháp (Synax) trong CSS khá đơn giản khi có một phần block chọn và block khai báo.

Selector sẽ trỏ về yếu tố HTML mà chúng ta muốn tạo phong cách. Block khai báo sẽ bao gồm một hay nhiều khai báo cách nhau bởi dấu chấm phẩy.

Mỗi khai báo một tên CSS và giá trị, dấu hai chấm sẽ cách giữa chúng. Khai báo CSS luôn kết thúc bằng dấu chấm phẩy ở cuối.

Nói một cách dễ hiểu, trong khi HTML quyết định và ảnh hưởng phần lớn đến nội dung văn bản thì CSS xác định cấu trúc, bố cục và tính thẩm mỹ trực quan của website. CSS mô tả cách các phần tử HTML được hiển thị trên màn hình hoặc các phương tiện khác.

Ví dụ chúng ta muốn một đoạn cụ thể trên website xuất hiện với màu xanh và đậm để người xem trang dễ dàng nhìn thấy nó một cách ấn tượng chúng ta cần nhập mã CSS là:

p{màu: xanh; font-weight: in đậm;}

Ở ví dụ này thì <p> chính là đoạn văn được coi là bộ chọn của một bộ điều chỉnh trong công cụ CSS. Bên cạnh đó thì một bộ chọn sẽ được ghi ở bên trái của dấu ngoặc nhọn { đầu tiên. Đối với những thông tin nằm ở giữa các dấu ngoặc nhọn sẽ là khai báo và trong đó có chứa đầy đủ các thuộc tính, các giá trị được áp dụng cho một bộ chọn.

Ngoài ra, chúng ta có nhiều cách được áp dụng để tiến hành nhúng CSS vào website. Cụ thể có thể cân nhắc các giải pháp là:

  • Cách 1: Tiến hành chèn vào trong thẻ <style></style>
  • Cách 2: Thực hiện chèn thuộc tính style của phần tử HTML.
  • Cách 3: Thực hiện bằng cách chèn file.css thông qua thẻ <link> vào trong thẻ <head> với tài liệu HTML.

Cấu trúc của CSS

Cấu trúc của CSS gồm bốn phần chính như sau:

1. Bộ chọn (Selector):

Cho phép người sử dụng có thể lựa chọn các phần tử HTML mà không làm ảnh hưởng đến xung quanh.

Là phần mẫu được lựa chọn để lấy những phần tử HTML mà người sử dụng muốn dùng để định nghĩa các phong cách. Bộ chọn (selector) được áp dụng vào các trường hợp sau:

  • Toàn bộ phần tử theo một dạng cụ thể nào đó, ví dụ phần tử tiêu đề h1.
  • Thuộc tính id và class của những phần tử.
  • Các phần tử dựa vào sự liên quan với các phần tử khác trong cây phân cấp tài liệu.

2. Khai báo (Declaration):

Chức năng của khai báo nhằm xác định thuộc tính của một phần tử bất kỳ trong chương trình.

Là dạng khối khai báo gồm một hoặc nhiều khai báo, chúng được phân tách với nhau bằng ký hiệu là dấu chấm phẩy (;). Trong mỗi một khai báo sẽ bao gồm giá trị đặc tính và tên của CSS, chúng tách nhau bằng dấu phẩy(,). Khai báo của CSS luôn kết thúc bằng dấu chấm phẩy (;), khối khai báo thì sẽ nằm trong các dấu ngoặc móc ({}).

3. Thuộc tính (Properties):

Properties hỗ trợ tạo kiểu cho thuộc tính mong muốn tác động. Thuộc tính của CSS qui định về màu sắc, bố cục,…

Các cách để có thể tạo kiểu cho phần tử HTML. Đối với CSS thì chúng ta chỉ cần chọn lựa thuộc tính mà chính chúng ta muốn tác động vào trong các quy tắc của mình.

4. Giá trị thuộc tính:

Là thứ mà ta có được cũng như sở hữu trong việc chọn lựa có thể xuất hiện nhiều lần để mang đến một thuộc tính cụ thể nào đó.

Trong mỗi câu lệnh, thuộc tính và giá trị được phân chia bởi dấu hai chấm “:”. Giá trị thuộc tính nằm bên phải dấu “:” chỉ ra giá trị của thuộc tính đó. Sau khi kết thúc một lần khai báo sẽ dùng dấu chấm phẩy “;” để chuyển sang khai báo tiếp theo.

Đánh giá về ưu điểm và nhược điểm của CSS

Ưu điểm của CSS

Đánh giá về CSS giúp chúng ta thấy được những ưu và hạn chế của ngôn ngữ, công cụ này khi đưa vào sử dụng. Lúc đó việc cân nhắc ứng dụng một cách hợp lý và hiệu quả nhất. Cụ thể những ưu điểm chính là:

Khả năng tiết kiệm thời gian

CSS khi sử dụng có thể viết lần đầu, đồng thời sử dụng lại trong các trang HTML tiếp theo. KHông chỉ vậy, chúng ta hoàn toàn có thể xác định được một kiểu cho từng thành phần HTML và cũng áp dụng được cho nhiều trang web khác khi cần thiết.

CSS giúp khả năng tải trang nhanh chóng

Đặc trưng của CSS khi sử dụng là ít mã hơn. Bởi thế mà thời gian tải xuống nhanh chóng, giúp tiết kiệm thời gian đáng kể. Khi viết được một quy tắc CSS của một thẻ cụ thể và lúc này chúng ta có thể áp dụng nó cho mọi lần xuất hiện tiếp theo của thẻ đó, đồng thời hoàn toàn không cần tiến hành thay đổi thuộc tính của thẻ HTML.

Dễ dàng khi thực hiện bảo trì

Khi cần chúng ta chỉ cần thay đổi một kiểu và mọi thành phần trong tất cả những website thì lúc này CSS sẽ hỗ trợ cập nhật hoàn toàn tự động.

CSS sở hữu thuộc tính rộng

CSS được đánh giá cao nhờ sở hữu những thuộc tính rộng hơn nếu đánh giá và so sánh với HTML.

Khả năng tương thích tốt

Khả năng tương thích với nhiều thiết bị cũng là ưu điểm của CSS. Cùng sử dụng một tài liệu HTML song với nhiều phiên bản website khác nhau được trình bày ở từng thiết bị di động đều được hỗ trợ tốt, có độ tương thích cao.

Nhược điểm của CSS

Cùng với những ưu điểm thì CSS khi đưa vào sử dụng còn tồn tại những hạn chế nhất định. Trước khi ứng dụng đòi hỏi chúng ta phải tìm hiểu một cách đầy đủ và chi tiết. Trong đó những hạn chế chính là:

CSS hoạt động khác biệt cho từng trình duyệt

Với những thay đổi ban đầu của CSS trên một website rất dễ dàng. Tuy nhiên, khi thay đổi đã được thực hiện đòi hỏi chúng ta phải xác nhận được tính tương thích khi CSS hiển thị hiệu ứng thay đổi tương tự cho từng trình duyệt. Điều này xuất hiện do CSS sẽ hoạt động khác biệt cho từng trình duyệt cụ thể.

Khá khó khăn cho người mới

Ngôn ngữ lập trình phát triển đa dạng và vô cùng phúc tạp, đặc biệt là khó khăn với những người mới bắt đầu. Bởi thế, với nhiều cấp độ của CSS thì việc tìm hiểu, có thể nắm bắt để sử dụng càng trở nên khó khăn hơn.

Định dạng của web có khả năng gặp rủi ro

CSS là hệ thống dựa trên văn bản mở nên việc truy cập khá dễ dàng. Điều này khiến định dạng toàn bộ của web hoàn toàn có thể chịu tổn thương, gặp gián đoạn khi có hành động, hoặc tai nạn nào xảy ra với tệp. Lúc này nó sẽ yêu cầu truy cập đọc hoặc ghi vào web dự định để có thể ghi đè lên được các thay đổi.

Cách giúp phân biệt giữa CSS và HTML

HTML – Hypertext Markup Language được biết tới là ngôn ngữ đánh dấu siêu văn bản với chức năng giúp xác định được cấu trúc của nội dung hiệu quả và nhanh chóng như hình ảnh, tiêu đề, phân đoạn ở mỗi website được thực hiện. Bởi thế mà HTML sẽ được sử dụng với mục đích chính là thêm nội dung, hay mô tả ý nghĩa cho từng đoạn nội dung cụ thể. Bởi thế nó sẽ sử dụng các thẻ nhưng lại không quy định một cách cụ thể và chi tiết cách thức hiển thị của những nội dung trên website.

Trong khi đó thì CSS không được dùng để thêm nội dung, hay mô tả hoặc ý nghĩa của nội dung từng trang web. Với CSS được sử dụng chủ yếu giúp việc thiết lập cách trình bày, hay cách hiển thị nội dung của website được thực hiện theo ý muốn của chủ sở hữu trang web đó, được các lập trình viên thực hiện chuẩn xác.

Cách viết CSS trong HTML

Để ngôn ngữ CSS có thể nói chuyện được với HTML, người dùng phải thực hiện tham chiếu tệp tin CSS trong HTML. Cách tham chiếu CSS tốt nhất là gồm toàn bộ kiểu trong một style sheet, và tham chiếu từ bên trong phần <head> của file HTML. Cách này cho phép người dùng có thể sử dụng cùng kiểu trang trí cho tất cả trang web. Đồng thời, nó cũng giúp tiết kiệm thời gian thực hiện thay đổi.

Có 3 cách viết CSS trong HTML:

  • Trực tiếp: Bạn dùng thuộc tính style trong thẻ HTML.
  • Nội bộ: Bạn dùng thuộc tính <style> trong phần <head> của trang HTML.
  • CSS ngoài: Bạn dùng một hay một số tập tin CSS bên ngoài. 

Hiện nay, cách dùng phổ biến là chia CSS thành những tập tin riêng biệt (CSS ngoài) rồi gọi chúng vào trang HTML. Chi tiết từng kiểu viết:

- Kiểu viết CSS trực tiếp (còn được gọi là Inline CSS)

Kiểu viết này chỉ hữu dụng trong trường hợp bạn trang trí một kiểu cho một thành thẻ của trang HTML. 

Inline CSS được viết qua thuộc tính style.

Ví dụ: Để đổi màu chữ của đề mục, bạn viết đoạn CSS có mã như sau: 

<!DOCTYPE html>

<html>

<body>

<h1 style="color:red">Đây là đề mục đỏ</h1>

</body>

</html>

- Kiểu viết CSS nội bộ (hay còn được gọi là Internal CSS)

Kiểu viết này dùng để trang trí cho toàn bộ thành phần có trong HTML.

Ví dụ: Cách viết CSS nội bộ như sau.

<!DOCTYPE html>

<html>

<head>

<style>

body {background-color: grey}

h1 {color:red}

p {color:blue}

</style>

</head>

<body>

<h1>Đây là đề mục</h1>

<p> Đoạn văn bản.</p>

</body>

</html>

- CSS ngoài (hay còn gọi là External CSS)

Nếu có nhiều trang HTML cùng một phong cách trang trí, bạn chỉ nên sử dụng cách viết CSS bên ngoài rồi gọi chúng vào trang HTML. Bởi nếu dùng CSS trực tiếp hay nội bộ thì bạn bắt buộc phải lặp lại chúng ở mỗi trang. Ngoài ra, khi muốn thay đổi bất kỳ thành phần trang trí nào, bạn cũng thực hiện sửa ở tất cả các trang.

Cách viết CSS ngoài rất hữu ích khi bạn trang trí nhiều trang. Đồng thời, nếu cần thay đổi chi tiết trang trí, bạn chỉ việc điều chỉnh trên một tệp tin CSS và các trang HTML sẽ được thay đổi theo.

Viết CSS ngoài vào tệp tin .css, sau đó thông qua <head> để gọi vào trang HTML:

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="/uploads/2022/12/demo_style.css">

</head>

<body>

<h1>Đây là đề mục</h1>

<p> Đoạn văn bản.</p>

</body>

</html>

  • Kiểu chữ trong CSS là gì?

Liên quan đến kiểu chữ, CSS có các thuộc tính sau:

- Color: Quy định màu chữ dùng cho các thành phần có trong trang HTML.

- Font-family: Quy định kiểu chữ của các thành phần có trong trang HTML. 

- Font-size : Quy định kích cỡ chữ cho các thành phần có trong HTML.

Ví dụ: Một đoạn mã CSS quy định về kiểu chữ 

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

color:blue;

font-family:Tahoma;

font-size:200%; 

}

p  {

color:red;

font-family:Arial;

font-size:120%;

}

</style>

</head>

<body>

<h1>Đây là đề mục</h1>

<p> Đoạn văn bản.</p>

</body>

</html>

  • Định dạng kiểu đường viền trong CSS

Mặc dù có thể bạn không nhìn thấy nhưng từng thành phần trong HTML luôn có một khung bao xung quanh. Còn trong CSS có thuộc tính border quy định về định dạng hiển thị của đường viền này.

Ví dụ: Đoạn mã về hình thức hiển thị của đường viền có dạng như sau.

<!DOCTYPE html>

<html>

<head>

<style>

p {

border:2px solid grey;

}

</style>

</head>

<body> 

<h1>Đây là đề mục</h1> 

<p> Đoạn văn bản.</p>

<p> Đoạn văn bản.</p>

<p> Đoạn văn bản.</p> 

</body>

</html>

Trong CSS cũng có thêm thuộc tính padding đóng vai trò quy định khoảng cách từ đường viền đến những thành phần có trong trang HTML.

Ví dụ: Đoạn mã về thuộc tính padding có dạng:

<!DOCTYPE html>

<html>

<head>

<style>

p {

border:2px solid grey;

padding:6px;

}

</style>

</head>

<body> 

<h1>Đây là đề mục</h1> 

<p> Đoạn văn bản.</p>

<p> Đoạn văn bản.</p>

<p> Đoạn văn bản.</p> 

</body>

</html>

Trái ngược với padding, thuộc tính margin lại quy định khoảng cách giữa đường viền đến thành phần bên ngoài.

Ví dụ: Đoạn mã về thuộc tính margin có dạng:

<!DOCTYPE html>

<html>

<head>

<style>

p {

border:2px solid grey;

padding:6px;

margin:12px;

}

</style>

</head>

<body> 

<h1>Đây là đề mục</h1> 

<p> Đoạn văn bản.</p>

<p> Đoạn văn bản.</p>

<p> Đoạn văn bản.</p> 

</body>

</html>

  • Thuộc tính id

Đây là thuộc tính được dùng khi bạn muốn trang trí một thành phần đặc biệt của trang HTML. Cách thực hiện khá đơn giản, trước tiên, bạn thêm id vào thành phần cần trang trí, đoạn code có dạng:

<p id="element1">Đoạn văn bản có thuộc tính id</p>

Kế đến, bạn định nghĩa kiểu trang trí. 

<!DOCTYPE html>

<html>

<head>

<style>

p#element1 {

color: red;

}

</style>

</head>

<body> 

<p>Đoạn văn bản.</p>

<p>Đoạn văn bản.</p>

<p>Đoạn văn bản.</p>

<p id="element1">Đoạn văn bản có thuộc tính id</p> 

</body>

</html>

  • Thuộc tính class

Đây là thuộc tính được dùng để trang trí cho một nhóm thành phần đặc biệt. Cách thực hiện cũng tương tự như thuộc tính id. Đó là, bạn thêm thuộc tính class vào thành phần muốn trang trí:

<p class="classname">Đoạn văn bản có thuộc tính class</p>

Sau đó, bạn định nghĩa cho kiểu trang trí của các thành phần cùng thuộc tính class:

<!DOCTYPE html>

<html>

<head>

<style>

p.classname {

color:blue;

}

</style>

</head>

<body> 

<p>Đoạn văn bản.</p>

<p> Đoạn văn bản.</p> 

<p class="classname"> Đoạn văn bản có thuộc tính class.</p>

<p>Đây là đoạn văn bản.</p>

<p class="classname"> Đoạn văn bản có thuộc tính class cùng tên.</p> 

</body>

</html>

Có nên thiết kế website bằng CSS không?

CSS được biết tới là một công cụ mạnh nhất mà lập trình viên thiết kế web có thể học hỏi và tìm hiểu để áp dụng. Với CSS khi sử dụng nó có thể tác động với ảnh hưởng trực tiếp tới toàn bộ diện mạo của một trang web cụ thể. Từ các tính năng cơ bản được cập nhật nhanh chóng, hay việc thay đổi thứ tự ưu tiên trên màn hình,… đều được thực hiện với CSS. Chính điều này càng khẳng định mạnh mẽ hơn nữa giá trị, tính tập trung vào trải nghiệm của người dùng mà CSS mang lại, hoàn toàn không cần phải tiến hành thay đổi gì để hoàn thành đánh dấu HTML cơ bản.

Với phương thức hoạt động cơ bản của công cụ CSS chính là dựa vào những vùng chọn dưới dạng tên một thẻ HTML, hay tên 1 ID, hoặc dưới nhiều kiểu khác và chỉ cần áp dụng những thuộc tính cần thay đổi lên vùng chọn đó là yêu cầu được hoàn thành.

Cùng với đó, việc sử dụng CSS còn mang tới khả năng giúp thẻ HTML được hiển thị với màu sắc đẹp, rực rỡ hơn. Không chỉ vậy, khả năng giúp tiết kiệm được nhiều công sức trong hoàn thành giao diện khi chỉ cần dùng một đoạn mã nhỏ song giúp website trở nên bắt mắt, ấn tượng và chuyên nghiệp hơn thì dùng CSS trong thiết kế trang web là công cụ hỗ trợ vô cùng lý tưởng, hữu ích.

Lưu ý để học CSS hiệu quả cho người mới

Đối với những người mới khi bắt đầu việc học CSS đòi hỏi chúng ta phải chuẩn bị đầy đủ. Với một kiến thức cơ bản song vô cùng quan trọng như CSS với thiết kế website thì chuẩn bị đầy đủ giúp quá trình học tập, tìm hiểu đạt hiệu quả cao:

  • Google Chrome yêu cầu cần sử dụng extension Web Developer.
  • Tìm hiểu một cách cơ bản nhất những thông tin, khái niệm về CSS.
  • Chuẩn bị một IDE giúp hỗ trợ viết HTML và CSS đảm bảo tốt nhất. Lời khuyên cho những người mới là nên sử dụng Notepad++.
  • Tiến hành lưu Color Hex Color đầy đủ vào vị trí thanh Boolmark để có thể lấy mã màu nhanh chóng khi cần dùng.
  • Thực hiện cài đặt thêm đầy đủ các trình duyệt như Firefox, Safari, IE vào thiết bị sử dụng.

Có nhiều cách học CSS khác nhau mà chúng ta có thể tham khảo. Trong đó phải kể tới một số cách thông dụng, được nhiều người áp dụng và đánh giá cao như:

  • Trước tiên tìm hiểu về lý thuyết sau đó tới thực hành thông qua những ví dụ cụ thể và trực quan nhất. Từ lý thuyết tìm đọc được thì lúc này chúng ta sẽ tiến hành thực hành theo từng bước một cách tuần tự, đúng quy trình.
  • Chủ động tìm hiểu về Box model với đầy đủ những kiến thức cần thiết liên quan như margin, hay padding,…
  • Các thuộc tính là float, clear của CSS cần tìm hiểu và nắm bắt rõ ràng, đồng thời kết hợp với việc tìm hiểu về thẻ DIV giúp hỗ trợ cho quá trình tạo layout đơn giản có thể tiến hành.
  • Cập nhật các thông tin, kiến thức về cách xây dựng một menu dạng đa cấp ngang và dọc.
  • Tìm hiểu mọi thông tin liên quan tới thuộc tính Position.
  • Tiến hành tổng hợp lại đầy đủ toàn bộ các kiến thức đã tìm hiểu một cách hoàn chỉnh, có hệ thống.
  • Tham khảo thêm thông tin trên các diễn đàn lập trình, hay các forum để bổ sung thêm cho bản thân những kiến thức hữu ích về CSS.

Lời kết

Hiểu CSS là gì, cũng như những thông tin cơ bản cần thiết giúp mỗi người có được cái nhìn tổng quan, cơ bản nhất về ngôn ngữ lập trình này.

Nhìn chung, bên cạnh những ưu điểm mà CSS mang đến cho wesite, các lập trình viên hoặc các bạn tìm hiểu về CSS cần một số lưu ý cần tránh khi thực hiện chẳng hạn đặt tên ID hoặc Class dựa theo thuộc tính của nó, không sử dụng những nhận xét có phần khác nhau của CSS.

Hy vọng chia sẻ trên của BẮC VIỆT hữu ích đối với bạn!

Tags:

Phản hồi bài viết

(5 stars)
Bạn cần nhập nội dung vào khung màu đỏ có bắt buộc (*)
wait image
Gửi đi

Khách hàng mới Cám ơi Quý khách hàng đã tin tưởng và chọn Thiết kế Website tại Bắc Việt. Chúng tôi sẽ luôn đồng hành và hỗ trợ kỹ thuật miễn phí cho sản phẩm của mình đảm bảo thông suốt trong quá trình Quý khách sử dụng dịch vụ.

Đối tác Cám ơi Quý Đối tác đã đồng hành cùng Bắc Việt. Các dịch vụ của chúng tôi thành công cũng nhờ công đóng góp không nhỏ từ các Quý Đối Tác.