CSS là gì? Những thông tin thú vị về CSS

CSS là thuật ngữ vô cùng quen thuộc với lập trình viên, những người đang tìm hiểu về website...Nhưng không phải ai cũng định nghĩa được CSS là gì. Tìm hiểu CSS là gì và những thông tin cơ bản cần phải biết về CSS trong bài viết dưới đây các bạn nhé!

Trương Thu Trà
Trà TT
15:00 04/11/19 trong Thuật ngữ website
CSS là thuật ngữ vô cùng quen thuộc với lập trình viên, những người đang tìm hiểu về website...Nhưng không phải ai cũng định nghĩa được CSS là gì. Tìm hiểu CSS là gì và những thông tin cơ bản cần phải biết về CSS trong bài viết dưới đây các bạn nhé!

CSS là gì?

CSS là gì
 
CSS là từ viết tắt của Cascading Style Sheets (Định dạng kiểu xếp tầng), là một loại ngôn ngữ website, được gọi là ngôn ngữ biểu định kiểu chuẩn hóa bố cục trong toàn bộ trang web. Nó được sử dụng để mô tả cách các phần tử HTML hiển thị trong các chế độ xem khác nhau từ bố cục, màu sắc cho đến phông chữ...CSS thường được sử dụng để định dạng các kiểu trang web viết bằng HTML hoặc XHTML.

CSS bao gồm selector và declaration:
  • Selector (Bộ chọn): phần tử HTML được chọn để tạo kiểu 

  • Declaration (Khai báo): Nằm trong cặp dấu ngoặc nhọn {}, kết hợp giữa thuộc tính và giá trị của nó (phân tách bằng dấu hai chấm ":"). Mỗi khối khai báo có 1 hoặc nhiều khai báo, được phân tách với nhau bằng dấu chấm phẩy ";".

Cú pháp

h1 {color:green; text-align:center;}

Trong đó:
  • h1 là selector, câu lệnh CSS đó được sử dụng để tạo kiểu cho thẻ H1
  • {color:green; text-align:center;} là declaration, cho biết thẻ H1 sẽ có màu xanh lá cây và căn giữa.

Phân loại

CSS là gì 1
 
Có ba loại CSS:
  • External CSS (Định kiểu bên ngoài)

  • Internal CSS (CSS nội bộ)

  • Inline CSS (CSS nội tuyến)

Inline CSS

Mọi nội dung style đều nằm trong phần tử HTML. Loại CSS này thường được sử dụng cho một yêu cầu rất nhỏ bởi nó chỉ ảnh hưởng đến yếu tố duy nhất. Nếu style phức tạp hơn và được sử dụng cho phần HTML rộng hơn, loại CSS này không được khuyên dùng vì nó rất tốn thời gian và khó quản lý.

Ví dụ về Inline CSS:

<h3 style="color:white; background: red;"> Đây là ví dụ về Inline CSS </h3>

Internal CSS

Internal CSS được chỉ định trong phần <head>, nó sẽ ảnh hưởng đến tất cả các yếu tố trong phần <body>. CSS nội bộ được sử dụng trong điều kiện lập trình viên muốn sử dụng style đó trong phần thân HTML hoàn chỉnh.

Ví dụ về Internal CSS:

<!DOCTYPE html>
<html>
<head>
    <title>Ví dụ Internal CSS</title>
    <style>
    p  {color:pink; text-align:justify;}
    h2 {color:orange; text-align:center; font-size:120%;}
    </style>
</head>
<body>
    <h2>CSS Internal</h2>
    <p>Đoạn văn màu hồng, căn đều 2 bên</p>
</body>
</html>

External CSS (Định kiểu bên ngoài)

Lập trình viên sẽ tạo tệp .css, trong đó là các yêu cầu về style của các thành phần HTML. Tệp này sẽ được nối với trang HTML theo yêu cầu.
Nói chung External CSS được sử dụng bất cứ khi nào lập trình viên có nhiều thuộc tính HTML và sử dụng chúng theo yêu cầu cho các trang HTML hoàn chính khác nhau. Người lập trình sẽ không phải viết lại style CSS nhiều lần trong một thân hoàn chỉnh của HTML kế thừa thuộc tính của tệp CSS.

Lập trình viên sẽ viết mã CSS trong Notepad và lưu dưới dạng tệp .css. Hoặc họ có thể trực tiếp thêm trong Solution Explorer và Visual Studio để sử dụng nó trên trang HTML. Để có hiệu suất tốt hơn và bảo trì dễ dàng hơn, External CSS được ưu tiên hơn các loại CSS còn lại.

Ví dụ về External CSS
  • File style.css
body {background-color: orange; font-family:arial;}
h1 {color: white;}
div {font-size: 20px; color: white;}
  • Trang HTML
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="style.css">
<body>

<h1>Ví dụ về External CSS</h1>
<div>This is a div</div>

</body>
</html>
  • Mức độ ưu tiên

Ưu tiên 1: Kiểu CSS nội tuyến

Ưu tiên 2: Kiểu Internal CSS và External CSS

Ưu tiên 3: Mặc định của trình duyệt

Nếu các style khác nhau được xác định trên cùng một mức ưu tiên, style cuối cùng sẽ có mức ưu tiên cao nhất.

Tại sao nên sử dụng CSS và những ưu điểm chính

CSS là gì 2

Sử dụng CSS chủ yếu cho phép tách nội dung tài liệu, tập trung vào định dạng và sự xuất hiện. Việc tách nội dung có thể cải thiện khả năng tiếp cận nội dung, cung cấp linh hoạt hơn và có thể kiểm soát các đặc điểm trình bày cho phù hợp với các yêu cầu cụ thể.

CSS cũng có chức năng bố trí của một trang web, nó có thể giảm kích thước, sự lộn xộn và thời gian tải trang. Thêm bào đó, nó cho phép nhiều trang chia sẻ định dạng, làm giảm độ phức tạp và lặp đi lặp lại trong nội dung cấu trúc.

Ngoài ra, không có CSS, một trang web có thể trở nên đông đúc với các bản được lồng bên trong các bảng khác, khiến tốc độ của trang web bị chậm. Do đó, sử dụng CSS cũng có thể cải thiện tốc độ của trang web.

CSS cũng ngăn chặn sự lộn xộn. Nó tổ chức web code, khiến web code trở nên đơn giản và dễ hiểu. Điều này giúp trang web tải nhanh hơn và thuận tiện trong quá trình bảo trì & phát triển sau này.

CSS cũng được hỗ trợ tốt bởi hầu hết các trình duyệt hiện đại.

Lịch sử CSS

CSS là gì 3

Lịch sử phát triển của website được lấp đầy bởi những cốt mốc và ngã rẽ quan trọng. Với vai trò không thể thiếu trong sự hoàn thiện của website hiện nay, CSS cũng có lịch sử phát triển của riêng nó.

Trong những ngày đầu của website, không có gì gọi là CSS, tất cả chỉ là HTML. Điều này cho phép tạo ra các website có cấu trúc, nhưng về thiết kế và kiểu dáng thì lại rất ít. Có rất nhiều các giải pháp đã được đề xuất để thiết kế website đẹp, nhưng chỉ có Cascading Style Sheets (CSS), được phát triển bởi Håkon Wium Lie vào năm 1994 là được công nhận và sử dụng rộng rãi.

Vào năm 1997, CSS đã trở thành một khuyến nghị chính thức của W3C và bắt đầu xâm nhập vào Netscape Navigator và Internet Explorer 4 - các trình duyệt thống trị thời đó. Nhưng vấn đề là, các trang web nhìn trên IE có thể trông hoàn toàn khác so với Netscape Navigator bởi sự không nhất quán.

Trong khoảng thời gian đó, dự án Tiêu chuẩn Web (WaSP) được thành lập để thúc đẩy các tiêu chuẩn web, tính nhất quán và khả năng tương tác giữa các trình duyệt. Một vài thành viên đã tạo ra một nhánh của WaSP, được gọi là Ủy ban hành động CSS hay  CSS Samurai. Họ đăng báo cáo về các vấn đề CSS trong trình duyệt và bắt đầu truyền bá chúng.

Dần dần, CSS trở nên được hỗ trợ rộng rãi và nhất quán trong các trình duyệt. Trong những năm sau đó, CSS đã trở thành một công cụ đáng tin cậy cho các nhà phát triển web để tạo ra các thiết kế độc đáo, đầy màu sắc và mạnh mẽ.

Trên đây là chia sẻ của thiết kế website Tất Thành về CSS. Hy vọng rằng những thông tin được chia sẻ trên đây đã giúp bạn hiểu CSS là gì và những thông tin thú vị xung quanh CSS.


Tất Thành: Gắn kết và giữ chân nhân tài

Tất Thành không chỉ là nơi để làm việc, đây còn là bệ đỡ để mỗi người phát huy thế mạnh, phấn đấu cho mục đích của riêng mình và gắn kết để cùng thực hiện mục tiêu lớn của cả tập thể.

17:41 12/11/19 1.129 lượt xem
Tất Thành - Hành hương về thăm quê Bác | Hành trình hướng về cội nguồn hè 2019

Nghệ An quê Bác -Vùng đất địa linh nhân kiệt chứa đầy khí phách ngút trời của các bậc cao nhân tiền bối có truyền thống yêu nước, văn hóa, cách mạng. Chuyến đi hành hương, hướng về cội nguồn đầy ý nghĩa mà Tất Thành ấp ủ bấy lâu đã được thực hiện hè 2019. Cùng chúng tôi đi và khám phá mảnh đất miền Trung đầy nắng gió và hào hùng này nhé!

17:41 27/06/19 812 lượt xem
Câu chuyện về Tất Thành và xu hướng văn phòng "mở"

Tất Thành không lựa chọn đi theo xu hướng văn phòng "mở" dù 68% nhân viên trên thế giới hiện nay đã và đang làm việc trong những văn phòng kiểu này. Và cũng không phải tự nhiên mà chúng tôi quyết định như vậy.

10:29 11/11/19 1.831 lượt xem
Tất Thành du lịch bốn mùa

Ngoài công việc thì tập thể Tất Thành sẽ có những giây phút cùng nhau vui vẻ trải nghiệm, trò chuyện tâm sự để hiểu nhau hơn qua những buổi du lịch trong bốn mùa: Xuân, Hạ, Thu, Đông.

10:32 11/11/19 630 lượt xem
Khen Thưởng Nhân Viên Xuất Sắc Tháng 10

Khen thưởng những thành viên XUẤT SẮC NHẤT THÁNG 10 của Tất Thành - Những người đã nỗ lực hết mình để hoàn thành xuất sắc công việc trong tháng.

17:03 30/10/18 2.423 lượt xem
Tháng 10/2018 nhẹ nhàng sắc thu là sinh nhật những thành viên nào tại Tất Thành?

Tại Tất Thành tháng 10 chào đón sinh nhật của 3 thành viên: Nguyễn Thị Thủy (2/10/1992); Đỗ Thị Linh (12/10/1991); Đỗ Quang Ninh (15/10/1991)

17:05 02/10/18 2.389 lượt xem
Review cơ số quán ăn gần công ty các bạn nhé! :)

Khu Hoàng Đạo Thúy - Trung Hòa - Trần Duy Hưng nơi "đóng đại bản doanh" của Tất Thành là một thiên đường ăn uống. Có đủ các loại từ bình dân, văn phòng đến trung cao cấp, thỏa mãn mọi nhu cầu về ẩm thực và mục đích của mọi người. Giúp mọi người thuận tiện hơn cho cả công việc và cuộc sống của mình.

10:39 11/11/19 2.367 lượt xem
Câu chuyện về Tất Thành và xu hướng văn phòng "mở"

Tất Thành không lựa chọn đi theo xu hướng văn phòng "mở" dù 68% nhân viên trên thế giới hiện nay đã và đang làm việc trong những văn phòng kiểu này. Và cũng không phải tự nhiên mà chúng tôi quyết định như vậy.

10:29 11/11/19 1.831 lượt xem
Quan Lạn Summer Trip 2018 - Tất Thành

Tháng 7 về, những con đường nung mình trong ánh nắng và cái nóng hầm hập của mùa hè. Nhưng cái nóng của mùa hè không tác động đến không khí mát lạnh của Tất Thành trong chuyến du lịch hè 3 ngày 2 đêm trên hòn đảo Quan Lạn xinh đẹp.

10:37 01/07/18 1.281 lượt xem
Hỗ trợ khách hàng
Các chuyên viên tư vấn của Tất Thành luôn sẵn sàng giúp bạn. Hãy liên hệ ngay nếu bạn còn có câu hỏi trong đầu :)
Trần Minh Thắng
Trần Minh Thắng
Trần Minh Thắng
Gửi yêu cầu
Hãy cho Tất Thành biết mong muốn của bạn. Chúng tôi sẽ liên hệ lại cho bạn ngay lập tức.
Gửi thông tin liên hệ
Đăng ký dịch vụ