HomeCơ bản về CSS (phần 1)
Wednesday, March 27, 2013
CSS là một kỹ thuật trong design web. Nó rất hiệu quả trong việc tạo layout web, tạo các thuộc tính của các phần tử trang (font chữ, kích thước chữ....). CSS phá vỡ các chuẩn mực trong Design bằng html và giúp việc design trở lên linh hoạt hơn nhờ các thẻ ID hay Class trong CSS.
Vậy CSS là gì?
CSS (Cascading Style Sheets) được hiểu một cách đơn giản đó là cách mà chúng ta thêm các kiểu hiển thị (font chữ, kích thước, màu sắc...) cho một tài liệu Web.
Tạm kết thúc bài giới thiệu về CSS cơ bản để mọi người hiểu qua về CSS là gì và cách dùng nó trong thiết kế Web như thế nào. Bài sau mình sẽ đi sau vào các thuộc tính khác. Mọi người nhớ đón đọc nhé.
Vậy CSS là gì?
CSS (Cascading Style Sheets) được hiểu một cách đơn giản đó là cách mà chúng ta thêm các kiểu hiển thị (font chữ, kích thước, màu sắc...) cho một tài liệu Web.
Các tính chất của CSS.
CSS quy định cách hiển thị của các thẻ HTML bằng cách quy định các thuộc tính của các thẻ đó (font chữ, màu sắc). Để cho thuận tiện bạn có thể đặt toàn bộ các thuộc tính của thẻ vào trong một file riêng có phần mở rộng là ".css"
Có thể khai báo CSS bằng nhiều cách khác nhau. Bạn có thể đặt đoạn CSS của bạn phía trong thẻ <head>...</head>, hoặc ghi nó ra file riêng với phần mở rộng ".css", ngoài ra bạn còn có thể đặt chúng trong từng thẻ HTML riêng biệt
Tuy nhiên tùy từng cách đặt khác nhau mà độ ưu tiên của nó cũng khác nhau. Mức độ ưu tiên của CSS sẽ theo thứ tự sau.
Style đặt trong từng thẻ HTML riêng biệt
Style đặt trong phần <head>
Style đặt trong file mở rộng .css
Style mặc định của trình duyệtMức độ ưu tiên sẽ giảm dần từ trên xuống dưới.
CSS có tính kế thừa: giả sử rằng bạn có một thẻ <div id="vidu"> đã được khai báo ở đầu file css với các thuộc tính như sau: #vidu { width: 200px; height: 300px; }
Ở một chỗ nào đó trong file css bạn lại khai báo một lần nữa thẻ <div id="vidu"> với các thuộc tính.#vidu { width: 400px; background-color: #CC0000; }
Sau đoạn khai báo này thì thẻ <div id="vidu"> sẽ có thuộc tính:#vidu { width: 400px; /* Đè lên khai báo cũ */ height: 300px; background-color: #CC0000; }
Tạo các CSS
CSS quy định cách hiển thị của các thẻ HTML bằng cách quy định các thuộc tính của các thẻ đó (font chữ, màu sắc). Để cho thuận tiện bạn có thể đặt toàn bộ các thuộc tính của thẻ vào trong một file riêng có phần mở rộng là ".css"
Có thể khai báo CSS bằng nhiều cách khác nhau. Bạn có thể đặt đoạn CSS của bạn phía trong thẻ <head>...</head>, hoặc ghi nó ra file riêng với phần mở rộng ".css", ngoài ra bạn còn có thể đặt chúng trong từng thẻ HTML riêng biệt
Tuy nhiên tùy từng cách đặt khác nhau mà độ ưu tiên của nó cũng khác nhau. Mức độ ưu tiên của CSS sẽ theo thứ tự sau.
Style đặt trong từng thẻ HTML riêng biệt
Style đặt trong phần <head>
Style đặt trong file mở rộng .css
Style mặc định của trình duyệtMức độ ưu tiên sẽ giảm dần từ trên xuống dưới.
CSS có tính kế thừa: giả sử rằng bạn có một thẻ <div id="vidu"> đã được khai báo ở đầu file css với các thuộc tính như sau: #vidu { width: 200px; height: 300px; }
Ở một chỗ nào đó trong file css bạn lại khai báo một lần nữa thẻ <div id="vidu"> với các thuộc tính.#vidu { width: 400px; background-color: #CC0000; }
Sau đoạn khai báo này thì thẻ <div id="vidu"> sẽ có thuộc tính:#vidu { width: 400px; /* Đè lên khai báo cũ */ height: 300px; background-color: #CC0000; }
Tạo các CSS
Ví dụ để tạo một chữ đậm, có kích cỡ font là 12px, font màu là trắng, được đặt trong một box có mầu #FD9E4D và động rộng là 70px; độ cao là khoảng 30px.
Với một yêu cầu như vậy ta sẽ có những cách thể hiện như sau:
<html>
<head>
<title>Cơ bản về CSS </title>
<!--Style CSS -->
<style type="text/css">
h1
{
font-size: 11px;
}
.cach-1
{
font-weight: bold;
font-size: 12px;
color: white;
background: #FD9E4D;
width: 70px;
height: 30px;
}
#cach-2
{
font-weight: bold;
font-size: 12px;
color: white;
background: #FD9E4D;
width: 70px;
height: 30px;
}
</style>
</head>
<body>
<!--Thể hiện thuộc tính CSS trong html-->
<!-- Phá bỏ thuộc tính html mặc định với thẻ h1-->
<h1>
Kích cỡ font h1 đã bị thay đổi</h1>
<!--Với class bắt đầu bằng dấu "." và Id bắt đầu bằng "#" .2 kiểu đặt thuộc tính CSS này là giống nhau.-->
<div class="cach-1">
Thuộc tính CSS class</div>
<br>
<div id="cach-2">
Thuộc tính CSS id</div>
<!--Ta cũng có thể trực tiếp add CSS mà không cần đăng thuộc tính trong <style type="text/css">...</style> bằng cách 3 -->
<br>
<div style="font-weight: bold; font-size: 12px; color: white; background: #FD9E4D;
width: 70px; height: 30px">
Thuộc tính Style trực tiếp</div>
</body>
</html>
Trong ví dụ trên vẫn là để thể hiện một chữ đậm, có kích cỡ font là 12px, font màu là trắng, được đặt trong một box có mầu #FD9E4D và động rộng là 70px; độ cao là khoảng 30px. Nhưng ta có thể dùng tới 3 cách khác nhau. Với 3 cách này, thứ tự ưu tiên thể hiện sẽ thuộc về style > id > class.
Để gọn gàng, và dễ dàng chỉnh sửa CSS, ta sẽ thu gọn code CSS vào một file *.CSS riêng. Ví dụ trên ta copy toàn bộ CSS trong <style type="text/css">...</style> và cho vào một file chẳng hạn là demo.css thì code trên sẽ thu gọn như sau:
<html>
<head>
<title>Cơ bản về CSS </title>
<!--Style CSS -->
<link href="demo.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<!--Thể hiện thuộc tính CSS trong html-->
<!-- Phá bỏ thuộc tính html mặc định với thẻ h1-->
<h1>
Kích cỡ font h1 đã bị thay đổi</h1>
<!--Với class bắt đầu bằng dấu "." và Id bắt đầu bằng "#" .2 kiểu đặt thuộc tính CSS này là giống nhau.-->
<div class="cach-1">
Thuộc tính CSS class</div>
<br>
<div id="cach-2">
Thuộc tính CSS id</div>
<!--Ta cũng có thể trực tiếp add CSS mà không cần đăng thuộc tính trong <style type="text/css">...</style> bằng cách 3 -->
<br>
<div style="font-weight: bold; font-size: 12px; color: white; background: #FD9E4D;
width: 70px; height: 30px">
Thuộc tính Style trực tiếp</div>
</body>
</html>
Bài liên quan
.jpg)
.jpg)
.jpg)
