Khi bạn mới học thiết kế website, ngoài khái niệm html thì css là cái thứ hai bạn sẽ gặp phải, vậy thì css là gì và chức năng của nó để làm gì?
Css là viết tắt của cụm từ cascading style sheet, nó là một ngôn ngữ quy định cách trình bày của các thẻ html trên trang web. Là ngôn ngữ đang được sử dụng rất nhiều trong lập trình web
Css là viết tắt của cụm từ cascading style sheet, nó là một ngôn ngữ quy định cách trình bày của các thẻ html trên trang web. Là ngôn ngữ đang được sử dụng rất nhiều trong lập trình web
Nói nôm na thì css được dùng để xây dựng bố cục giao diện của trang web, trình bày cho các thẻ html như tô màu chữ, chữ in đậm in nghiêng, qui định chiều dài chiều rộng cho thẻ html ...
1. Cú pháp của css
Để bắt đầu một tài liệu css, chúng ta sử dụng cặp thẻ <style></style>.
Ví dụ :
<style type="text/css">
selector{
- Thuộc tính 1
- Thuộc tính 2
- Thuộc tính 3
.....................
- Thuộc tính n
}
</style>
Trong đó :
- Selector là đối tượng lựa chọn, có thể là thẻ html hoặc là các class và id
- Thuộc tính css là các thuộc tính quy định cho thẻ html, ví dụ như width quy định chiều dài, height quy định chiều cao cho thẻ html... chúng ta có rât nhiều các thuộc tính này
2. Các cách nhúng css vào html
Có 3 cách nhúng css vào thẻ html như sau :
a. Chèn vào phần head của website, cụ thể là trong cặp thẻ <head></head>
<head>
<style type="text/css">
selector{
- Thuộc tính 1
- Thuộc tính 2
- Thuộc tính 3
.....................
- Thuộc tính n
}
</style>
<head>
b. Nhúng css vào một file css riêng sau đó nhúng vào website
Cú pháp :
<link href="Đường dẫn đến file css" rel="stylesheet" type="text/css" />
Ví dụ : <link href="styles/style.css" rel="stylesheet" type="text/css" />
c. Chèn trực tiếp vào thẻ html
Ví dụ : <p style="color:red;text-decoration:underline">Đây là thẻ P, có màu chữ đỏ và chữ gạch chân</p>
- Các thuộc tinh cách nhau bằng dấu chấm phảy ( ; ) như cách viết bình thường
d. Chúng ta có thể chèn css vào đâu ?
Chúng ta có thể chèn css vào phần head của website (trong cặp thẻ <head></head>) hoặc trong body của website
3. Class và ID trong cssClass và ID trong css là các selector trong css, khi chúng ta chọn các thẻ html để quy định các thuộc tính cho nó thì class và ID được dùng để chọn các thẻ html này một cách dễ dàng hơn.
a. Class trong css là gì
Class trong css được ký hiệu bằng dấu chấm ( . ), tiếp theo là tên của class
Vi dụ :
<style type="text/css">
.tenclass{
width:400px; // Chiều dài là 400px
height:60px; // Chiều cao là 60px
background:#000; // Màu nền là màu đen
color:#FFF; // Màu chữ trắng
}
</style>
- Sử dụng : <div class="tenclass">Đây là thẻ div có chiều dài x rộng là 400px * 60px, màu nền là màu đen và màu chữ trắng</div>
b. ID trong css là gì
Cũng giống như class, ID trong css được ký hiệu bằng dấu thăng ( # ), tiếp theo là tên của ID. Class khác ID ở chỗ là ID chỉ được sử dụng một lần duy nhất trong một trang web còn class được sử dụng nhiều lần. Và một yếu tô quan trọng hơn là ID sẽ được ưu tiên hiên class
Vi dụ :
<style type="text/css">
#tenid{
width:400px; // Chiều dài là 400px
height:60px; // Chiều cao là 60px
background:#000; // Màu nền là màu đen
color:#FFF; // Màu chữ trắng
}
</style>
- Sử dụng : <div id="tenid">Đây là thẻ div có chiều dài x rộng là 400px * 60px, màu nền là màu đen và màu chữ trắng</div>
4. Các thuộc tính hay sử dụng trong css
Có rất nhiều các thuộc tính quy đinh chiều dài, chiều rộng, màu chữ, màu nền cho một đối tượng html. Chúng ta sẽ tìm hiều một số thuộc tính hay dùng trong bài tiếp theo nhé
1. Cú pháp của css
Để bắt đầu một tài liệu css, chúng ta sử dụng cặp thẻ <style></style>.
Ví dụ :
<style type="text/css">
selector{
- Thuộc tính 1
- Thuộc tính 2
- Thuộc tính 3
.....................
- Thuộc tính n
}
</style>
Trong đó :
- Selector là đối tượng lựa chọn, có thể là thẻ html hoặc là các class và id
- Thuộc tính css là các thuộc tính quy định cho thẻ html, ví dụ như width quy định chiều dài, height quy định chiều cao cho thẻ html... chúng ta có rât nhiều các thuộc tính này
2. Các cách nhúng css vào html
Có 3 cách nhúng css vào thẻ html như sau :
a. Chèn vào phần head của website, cụ thể là trong cặp thẻ <head></head>
<head>
<style type="text/css">
selector{
- Thuộc tính 1
- Thuộc tính 2
- Thuộc tính 3
.....................
- Thuộc tính n
}
</style>
<head>
b. Nhúng css vào một file css riêng sau đó nhúng vào website
Cú pháp :
<link href="Đường dẫn đến file css" rel="stylesheet" type="text/css" />
Ví dụ : <link href="styles/style.css" rel="stylesheet" type="text/css" />
c. Chèn trực tiếp vào thẻ html
Ví dụ : <p style="color:red;text-decoration:underline">Đây là thẻ P, có màu chữ đỏ và chữ gạch chân</p>
- Các thuộc tinh cách nhau bằng dấu chấm phảy ( ; ) như cách viết bình thường
d. Chúng ta có thể chèn css vào đâu ?
Chúng ta có thể chèn css vào phần head của website (trong cặp thẻ <head></head>) hoặc trong body của website
3. Class và ID trong cssClass và ID trong css là các selector trong css, khi chúng ta chọn các thẻ html để quy định các thuộc tính cho nó thì class và ID được dùng để chọn các thẻ html này một cách dễ dàng hơn.
a. Class trong css là gì
Class trong css được ký hiệu bằng dấu chấm ( . ), tiếp theo là tên của class
Vi dụ :
<style type="text/css">
.tenclass{
width:400px; // Chiều dài là 400px
height:60px; // Chiều cao là 60px
background:#000; // Màu nền là màu đen
color:#FFF; // Màu chữ trắng
}
</style>
- Sử dụng : <div class="tenclass">Đây là thẻ div có chiều dài x rộng là 400px * 60px, màu nền là màu đen và màu chữ trắng</div>
b. ID trong css là gì
Cũng giống như class, ID trong css được ký hiệu bằng dấu thăng ( # ), tiếp theo là tên của ID. Class khác ID ở chỗ là ID chỉ được sử dụng một lần duy nhất trong một trang web còn class được sử dụng nhiều lần. Và một yếu tô quan trọng hơn là ID sẽ được ưu tiên hiên class
Vi dụ :
<style type="text/css">
#tenid{
width:400px; // Chiều dài là 400px
height:60px; // Chiều cao là 60px
background:#000; // Màu nền là màu đen
color:#FFF; // Màu chữ trắng
}
</style>
- Sử dụng : <div id="tenid">Đây là thẻ div có chiều dài x rộng là 400px * 60px, màu nền là màu đen và màu chữ trắng</div>
4. Các thuộc tính hay sử dụng trong css
Có rất nhiều các thuộc tính quy đinh chiều dài, chiều rộng, màu chữ, màu nền cho một đối tượng html. Chúng ta sẽ tìm hiều một số thuộc tính hay dùng trong bài tiếp theo nhé
EmoticonEmoticon