Lịch sử và nguồn gốc của CSS và tác dụng của nó trong thiết kế giao diện website
CSS – Cascading Style Sheet là ngôn ngữ dùng để tìm và định dạng các thẻ HTML được tạo ra với thiết kế đơn giản và sẽ sử dụng. Mục đích khi tạo ra CSS nhắm tới đó trình là đơn giản hóa việc thiết kế website từ đó định hình phong cách cho trang web và đa dạng hóa nội dung truyền tải tới người dùng.
I. Nguồn gốc phát triển CSS
CSS được phát triển bởi World Wide Web Consortium viết tắt là W3C họ là một nhóm tổng hợp và phát triển các đặc tính, kỹ thuật cho CSS.
CSS được ra đời với mục đích rất đơn giản đó là định hình cho website thông qua các yếu tố như màu sắc văn bản hay khoảng cách từng phần hoặc kiểu font, hình ảnh, bố cục, màu nền… đều có thể thay đổi một cách đơn giản với sự hỗ trợ của CSS.
II. Tìm hiểu đôi nét về CSS
- Ngôn ngữ lập trình CSS
CSS là công cụ hỗ trợ vô cùng hữu ích và cần thiết cho việc thiết kế website sao cho sinh động và thân thiện với người dùng. Những việc mà HTML khó hay không thể xử lý được thì có thể làm đơn giản với CSS. Bởi lý do đó mà nó thường được kết hợp với HTML hay XHTML.
Có rất nhiều CSS được sử dụng hiện nay nhưng cơ bản thì được phân chia thành các loại thông dụng như sau:
● CSS tùy chỉnh hình nền – Background
● CSS tùy chỉnh 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
● CSS điều chỉnh khoảng cách padding, margin, border
- Cú pháp CSS
Là một ngôn ngữ lập trình nên khi định hình nó cho HTML chúng ta cũng cần có một quy tắc như ví dụ định hình một số phong cách cho thẻ h2 dưới đây.
h2{
font-size:25px;
color: blue;
background-color: red;
border: 1px solid black;
font-family: corbel;
text-decoration: underline;
font-weight: bold;
text-align: center;
}
Như ví dụ minh họa ở trên thì nhờ sự kết hợp của thẻ HTML h2 và CSS định hình mà chúng ta có được giao diện như ở cột bên phải. Và để có thể đưa yếu tố nào là yếu tố mạnh cần được ưu tiên hơn các yếu tố khác thì chúng ta chỉ cần sử dụng !important vào thuộc tính đó.
h2{
font-size:25px;
color: blue;
font-family: corbel;
text-decoration: line-through !important;
text-decoration: underline;
font-weight: bold;
text-align: center;
}
- Các cách sử dụng CSS
Có rất nhiều cách sử dụng CSS để kết hợp với HTML và như ở ví dụ ở trên chúng tôi đã minh họa một cách sử dụng đó chính là đưa đoạn mã CSS vào trong khối thẻ <style> </style> và thường sẽ được chèn ở trong khối thẻ <head> </head>.
Còn một cách nữa để có thể liên kết và sử dụng CSS đó chính là liên kết tệp CSS vào trong thẻ HTML. Đầu tiên bạn lưu các mã lệnh CSS thành một tệp riêng biệt có đuôi là .css và tiếp đến bạn có thể nhúng chúng bằng thẻ <link> ví dụ:
<link type="text/css" rel="stylesheet" href="style-light-1.css"/>
Trong thực tế khi bạn thiết kế website thì những thành phần như HTML, CSS, JavaScript là các thành phần không thể thiếu để khiến cho website của bạn hài hòa và đẹp mắt hơn. Và tại LIGHT cũng đã đặt các yếu tố này là yếu tố bắt buộc phải có trong quá trình thiết kế website.
- Lợi ích của CSS
● Nhờ việc sử dụng CSS mà bạn có thể tiết kiệm thời gian bằng việc chúng ta có thể sử dụng lại định dạng trong nhiều trang HTML cho một hay nhiều website tùy ý.
● Thay vì việc sử dụng từng thẻ HTML và phải viết từng định dạng cho chúng thì chỉ cần bạn viết quy tắc một lần và định dạng đó sẽ xuất hiện ở mỗi nơi có thẻ HTML đó xuất hiện. Việc này giảm thiểu được số lượng mã cần phải viết nhưng vẫn đảm bảo được hiệu quả từ đó giúp trang web của bạn tải nhanh hơn.
● Việc điều chỉnh hay sửa chữa website cũng trở nên đơn giản hơn chỉ nhờ việc thay đổi yếu tố và quy tắc cho các thẻ định dạng gốc và từ đó các định dạng khác trong HTML cũng được điều chỉnh theo.
● Sử dụng CSS giúp hỗ trợ HTML có thể đa dạng hóa hiển thị cho nhiều thiết bị và màn hình một cách đẹp mắt và thân thiện trên các thiết bị cầm tay như Ipad hay điện thoại smartphone…. Và đây cũng là một yếu tố phục vụ việc SEO trên các nền tảng tìm kiếm.
- Phiên bản CSS
CSS là ngôn ngữ lập trình sinh ra với mục đích cho phép chúng ta có thể điều chỉnh website theo như ý muốn. Bắt đầu từ cuối năm 1996 CSS đã được phát hành chính thức và được khuyến nghị là ngôn ngữ lập trình nên được sử dụng. Tính cho đến nay đã có 4 phiên bản của CSS ký hiệu là CSS 1, CSS 2, CSS 3, CSS 4.
CSS 1
CSS cấp độ 1 được phát hành vào khoảng tháng 12 năm 1996 gồm các thuộc tính để định dạng cho thẻ HTML như font chữ, kiểu chữ, màu nhấn mạnh của chữ, màu nền và các thành phần khác như khoảng cách giữa các từ hay chữ dòng của văn bản. Tuy nhiên ở thời điểm này các trình duyệt web đi kèm trên các máy tính vẫn chưa hỗ trợ nhiều nên CSS 1 không được phổ biến quá rộng rãi.
CSS 2
CSS cấp độ 2 được phát hành vào năm 1998 ngoài các thành phần thuộc tính hiện có thì còn được bổ sung thêm các yếu tố giúp thay đổi bố cục của trang, định hình phong cách cho các loại hình nội dung đa phương tiện phức tạp hơn.
CSS 3
CSS cấp độ 3 là bản CSS được phát hành vào năm 1999 và được sử dụng phổ biến cho đến nay bởi khả năng tương thích tốt với các trình duyệt và giúp chia các trang web thành các module giúp chúng hoạt động ổn định và có thể hiện các hình thái khác nhau trên trang.
III. Ảnh hưởng của CSS tới việc thiết kế website.
Với việc xuất hiện của CSS và HTML thì việc thiết kế website theo yêu cầu của người dùng đã trở nên dễ dàng hơn. Nếu như bạn có cho mình giao diện đẹp mắt và ấn tượng thì việc thu hút khách hàng sẽ không hề khó từ đó còn giúp nâng cao doanh thu của doanh nghiệp bạn.
Bởi yếu tố đó mà thiết kế website đẹp và ấn tượng đã trở thành điều cần thiết và mỗi doanh nghiệp đều cần trang bị cho mình một website để tránh bị thụt lùi so với xu thế như hiện nay.
Kiến thức quan trọng
Kiến thức hay
