Tiếp tục loạt bài viết về lập trình web hôm nay DNMedia sẽ giới thiệu tới bạn ngôn ngữ CSS. Một ngôn ngữ làm đẹp trang web không thể thiếu được. Để tìm hiểu rõ hơn về CSS là gì, cách thức hoạt động và nhúng CSS vào HTML để sử dụng như thế nào hãy đọc bài viết sau đây.
Mục Lục
CSS là gì?
CSS là viết tắt của Cascading Style Sheets, có vai trò định dạng hiển thị phần tử HTML trên trình duyệt. Khi viết HTML thông thường các phần tử sẽ hiển thị một các lộn xộn không theo trật tự nào cả. Nhưng khi có CSS mọi thứ trở nên ngăn nắp và đẹp mắt hơn.
Nó tương tự như lớp sơn tường trong ngôi nhà của bạn. HTML là tường, các cột bê tông. Khi lớp sơn được phủ lên tường sẽ bóng bẩy đẹp mắt hơn.
Các ưu điểm của CSS là gì?
Một trang web nếu chỉ viết mình HTML đơn thuần thì trông rất đơn điệu và nhàm chán. Chỉ với một tập tin CSS website sẽ được định dạng về màu sắc, font chữ, canh chỉnh vị trí… dễ dàng.
Hiện nay CSS đã được cập nhật lên phiên bản mới nhất là CSS3 với nhiều hiệu ứng đẹp. Một số hiệu ứng như tạo background, chữ động đều có thể làm được với CSS.
Cách thức hoạt động của ngôn ngữ CSS
Trong ngôn ngữ HTML sẽ có các thẻ khác nhau. Khi viết CSS sẽ đánh dấu bằng class, id hoặc một thẻ nào đó. Chẳng hạn như mã HTML <div class=”vanban”>Văn bản</div> thì khi viết CSS sẽ là .vanban {color: #000}. Khi định dạng phong cách với đoạn mã trình duyệt sẽ hiểu được là chữ “Văn bản” sẽ hiển thị màu đen.
Cấu trúc chương trình CSS
Chương trình CSS sẽ được viết như sau:
bộ_chọn {
thuộc_tính: giá_trị;
[thuộc_tính_khác: giá_trị;]
}
Ví dụ:
.header {
background: #ffffff;
font-size: 16px;
}
Mọi chương trình CSS đều bắt đầu bằng Class hoặc ID. Class sẽ bắt đầu bằng dấu chấm “.” hoặc ID bằng dấu “#”.
Và phải mở đầu bằng dấu “{” kết thúc bằng dấu “}”. Khi kết thức một dòng lệnh bắt buộc phải có dấu “;”.
Một số thẻ không cần thêm dấu “.” hoặc “#” như body, img, div…
Có 3 cách nhúng CSS vào trong HTML
Để CSS hoạt động được thì phải nhúng nó vào HTML. Dưới đây là 3 cách chèn CSS vào trong tài liệu HTML:
– Thêm css vào HTML bằng cách trực tiếp:
Ví dụ:
<div style="color:#555555;font-size:16px">Đoạn văn bản</div>
– Nhúng trong thẻ <head>…</head>:
Chương trình CSS sẽ được đặt bên trong cặp thẻ <head>
Ví dụ:
<head>
<style>
body {
background: #000000;
color: #ffffff;
}
</style>
</head>
– Cách viết CSS trong html bằng cách gọi file CSS từ bên ngoài:
Đây là cách được sử dụng trong lập trình web, trong tài liệu HTML sẽ có một dòng lệnh gọi file CSS từ bên ngoài vào.
Đoạn lệnh sẽ được đặt trong cặp thẻ <head>
Ví dụ:
<head>
<link rel="stylesheet" href="style.css">
</head>
Hướng dẫn chèn css vào php
Trong PHP để chèn CSS vào cũng khá đơn giản
<?php echo '<div style="color: red;">Đây là văn bản</div>'; ?>
Hoặc sự dụng một class
<html>
<head>
<style type="text/css">
.text {color: blue}
</style>
</head>
<body>
<?php
echo '<div class="text">Đây là văn bản</div>';
?>
</body>
</html>
Kết luận: Bài viết này bạn đã biết được CSS là gì và cách chèn CSS vào HTML thông qua Internal, External và Inline CSS Styles. CSS là ngôn ngữ tương đối dễ học, tuy nhiên nó sẽ theo bạn trong suốt con đường lập trình web sau này. Có rất nhiều kiến thức về ngôn ngữ này, để học bạn có thể ghé thăm https://www.w3schools.com/css/ tại đây có những bài học về CSS cơ bản tới nâng cao khá tốt.
>> Tham khảo thêm tại: https://developer.mozilla.org/vi/docs/Learn/Getting_started_with_the_web/CSS_basics
