Cơ bản về Cascading Style Sheet là bài hướng dẫn cách tạo style css để định dạng trang web, giải thích các thuộc tính css, vị trí đặt style.
A. Cascading Style Sheet là gì
Cascading Style sheet – viết tắt là CSS – là 1 kỹ thuật dùng để định dạng trang web. nói chính xác là định dạng các tag trong trang .
Để định dạng, bạn tạo các style, mỗi style có một tên và chứa nhiều đặc điểm định dạng bạn mong muốn. Như màu chữ, màn nền, cách canh chữ, tạo bóng… Mỗi style như vậy còn gọi là selector, tức 1 sự lưa chọn phần tử trong trang để dđịnh dạng. Trong ví dụ dưới, p là tên style, bên trong style này có 2 đặc điểm định dạng là màu chữ và cỡ chữ.
p {
color: red;
font-size: 20px;
}
Các style có thể khai báo trực tiếp trong trang web hoặc ở file riêng bên ngoài. Nếu đặt trong trang thì các style đặt trong tag <style>. Nếu các style được đặt ở file bên ngoài thì dùng tag link đề nhúng vào trang web.
B. Tạo style css
Trong CSS có rất nhiều cách tạo style css, sau đây là một số cách phổ quát
1. Tạo style để định dạng 1 tag trong toàn trang (HTML selector)
Để định dạng cho một tag trong toàn trang (như tag p , tag a …) bạn tạo style giống tên của tag muốn định dạng. Ví dụ bạn có trang với code html sau:
<a href="#"> <h1> NGHỆ THUẬT SỐNG </h1> </a> <p> Mười bí quyết cho hạnh phúc </p> <p> Hạnh phúc là gì ? </p> <p> Bữa cơm nghèo trong cơn sốt gạo </p>
Cụ thể muốn định dạng cho tag p thì tạo style tên là p
<style>
p { font-size:20px; text-align:justify; }
a {
color: red;
text-decoration: none;
}
</style>
2. Tạo style để định dạng cho 1 tag cụ thể có tên riêng (ID Selector)
Với 1 tag có tên riêng (với thuộc tính id), bạn có thể tạo style css định dạng đặc biệt cho nó. Tên style để định dạng cho tag có tên riêng sẽ bắt đầu là dấu #
Giả sử bạn có tag sau trong trang:
<p id="loaihoa"> Các loài hoa Việt Nam</p> <p>Hoa sen</p> <p>Hoa đào</p> <div id="thohay">Các trường thơ tuyệt đỉnh</div> <p>Lục vân Tiên </p> <p>Cung oán ngâm khúc</p>
Vậy khi muốn định dạng cho tag p có id là loaihoa, hay định dạng cho thohay thì bạn tạo style như sau:
<style> #loaihoa { text-transform: uppercase; font-weight:bold ; color: red; } #thohay { font-weight: 900; font-size: 24px; color: blue; letter-spacing: 2px; } </style>
3. Tạo style dạng class để định dạng (Class Selector)
Tên style bắt đầu với dấu . sẽ được gọi là 1 class. bạn tạo class để định dạng cho những tag nào có gắn với class đã tạo. Thường những tag trong trang nằm rời rạc nhau, mà bạn muốn định dạng giống nhau thì dùng class Trong ví dụ dưới, chúng ta tạo ra 2 class. Giả sự bạn có các tag html như sau:
<p class="tieude">Thông tin user</p> <p>Tên đăng nhập : teonv </p> <p>Email: meomeo@gmail.com</p> <h4 class="tieude">Liên hệ chúng tôi</h4> <p>Điện thoại: 0918123456</p> <p>Địa chỉ: 123 Tp Trăng Vàng</p>
Muốn định dạng cho 2 tag h4 và p có cùng class tieude ở trên, bạn tạo style như sau:
<style>
.tieude {
color: green;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: 600;
}
</style>
Thuộc tính class trong các tag là thuộc tính để chỉ định class css mà tag sẽ được định dạng. Bạn cũng có thể ấn định nhiều class cho 1 tag cũng được, tên các class cách nhau bở khoảng trắng. Ví dụ:
<li class="active menu"> <a href=#>Trang chủ</a> </li>
Nhắc lại: Thường chúng ta dùng class để định dạng cho những tag nằm rời rạc (xa nhau) nhưng muốn định dạng giống nhau.
4. Tạo style để định dạng cho tag bên trong 1 vùng (selector phân vùng)
Bạn có thể tạo style để định dạng cho tag trong 1 tag cha nào đó chứ không nhất thiết định dạng cho tag trong toàn tag.
Ví dụ: cần định dạng cho các tag p trong cột trái thôi. Hay muốn định dạng những tag a trong thanh menu thì làm sao? Rất đơn giản chỉ việc tạo style theo cú pháp sau:
TagCha TagCon hoặc #TênTagCha TagCon hoặc .TênClass TagCon
Ví dụ giả sử trang của bạn có code html như sau:
<span>TRANG TIN SỐNG ĐẸP</span> <div id="cottrai"> <h2>TIN XEM NHIỀU</h2> <p> <a href="#"> Ba điều tâm niệm giúp bạn cải thiện cuộc sống </a> </p> <p> <a href="#"> Đâu cần tìm thủ phạm</a> </p> <p> <a href="#"> Khi lương thiện là một sự lựa chọn </a> </p> <span>Ngày cập nhật: 30/5/2021</span> </div> <div id="cotphai"> <h2>TIN MỚI NHẤT</h2> <p> <a href="#"> Phép màu của khoan dung </a> </p> <p> <a href="#"> Tiết kiệm không phải để cho mình </a> </p> <span>Cập nhật: Nguyễn Văn Tèo</span> </div>
Việc định dạng tag a trong vùng #cottrai, dịnh dạng tag a trong vùng #cotphai, và định dạng tag span bên trong div thực hiện như sau:
<style>
#cottrai a { color: red; text-decoration: none; font-size: 22px; }
#cotphai a { color: green; text-decoration: none; font-size: 22px; }
div span { color: blue; font-style:italic }
</style>
C. Vị trí của style định dạng css
1. Đặt style css trong trang web
Mục B ở trên đã hướng dẫn cơ bản về Cascading Style Sheet để bạn hình dung về cách định dạng trang web. Cách tạo các style trong tag <style> như vậy cũng tốt, dễ làm. Nhưng nhược điểm là các style ấy chĩ giúp định dạng các tag trong trang web hiện tại mà thôi.
Vậy muốn tạo các style để định dạng nhiều trang web trong wesite được không? Câu trả lời là Được. Mời xxem bên dưới
2. Đặt các style ở bên ngoài trang web
Các style css có thể đặt ở 1 file bên ngoài trang web. File phải có tên mở rộng là .css nhé, sau đó bạn nhúng vào trang web với tag <link>. Khi đó để nhúng file .css vào bao nhiêu trang web cũng được. Cú pháp nhúng file .css vào trang như sau:
<link rel="stylesheet" href=”DuongDan/TenFile.css" />
Ví dụ bạn có 2 trang html như sau:
/* dinhdang.css */
#cottrai a { color: red; text-decoration: none; font-size: 22px; }
#cotphai a { color: green; text-decoration: none; font-size: 22px; }
#menu a { font-family: Arial; }
div span { color: blue; font-style:italic }
Các trang html nhúng file css vào sẽ có định dạng giống nhau
<!-- songdep.html-->
<link rel="stylesheet" href="dinhdang.css"/>
<span>TRANG TIN SỐNG ĐẸP</span>
<div id="cottrai">
<h2>TIN XEM NHIỀU</h2>
<p> <a href="#"> Ba điều tâm niệm giúp bạn cải thiện cuộc sống </a> </p>
<p> <a href="#"> Đâu cần tìm thủ phạm</a> </p>
<p> <a href="#"> Khi lương thiện là một sự lựa chọn </a> </p>
<span>Ngày cập nhật: 30/5/2021</span>
</div>
<div id="cotphai">
<h2>TIN MỚI NHẤT</h2>
<p> <a href="#"> Phép màu của khoan dung </a> </p>
<p> <a href="#"> Tiết kiệm không phải để cho mình </a> </p>
<span>Cập nhật: Nguyễn Văn Tèo</span>
</div>
<!-- tgweb.html--> <link rel="stylesheet" href="dinhdang.css"> <span>THẾ GIỚI WEB </span> <div id="cottrai"> <h2>TIN XEM NHIỀU</h2> <p> <a href="#"> Các giải pháp tăng tốc website</a> </p> <p> <a href="#"> Bảo mật web cho developer</a> </p> <p> <a href="#"> Lập trình MVC trong NodeJS </a> </p> <span>Ngày cập nhật: 28/5/2021</span> </div> <div id="cotphai"> <h2>TIN MỚI NHẤT</h2> <p> <a href="#"> Làm quen với Laravel framework </a> </p> <p> <a href="#"> Bắt đầu với wordpress </a> </p> <span>Cập nhật: Nguyễn Văn Tý</span> </div>
3 Định dạng css trực tiếp trong tag html
Cách thứ 3 để bạn định dạng css là dùng thuộc tính style của tag đó. Xem ví dụ sau:
<span style="color:deeppink; text-decoration: underline;">THẾ GIỚI WEB </span>
D. Định dạng liên kết
Tag a (liên kết) là tag rất đặt biệt trong trang, nó giúp đưa người dùng đến các trang web khác trong website. Cho nên thường người ta định dạng đặc biệt cho nó với các trạng thái khác nhau. Mỗi tag a có nhiều trạng thái: chưa nhắp, đã nhắp, đang đưa chuột vào…Sau đây là cách tạo style để định dạng cho từng trạng thái của tag a.
| Tên style | Ý nghĩa |
| A:link | định dạng cho tag a có trạng thái link (chưa nhắp vào) |
| A:visited | định dạng cho tag a có trạng thái visited (đã nhắp vào) |
| A:hover | định dạng cho tag a có trạng thái hover (đang được đưa chuột vào) |
| A | định dạng cho tất cả trạng thái của tag a |
E. Các thuộc tính CSS
1. Các thuộc tính css định dạng chữ
- font- family: Font chữ. Mỗi lần 3 font để dự phòng máy user không có font.
- font-size : Cỡ chữ. Có thể dùng các đơn vị px, em
- font-weight : độ đậm của chữ. Thường dùng Normal và Bold.
- font-style: chữ nghiêng hay không. Thường dùng italic
- text-transform: Biến đổi thành chữ hoa/chữ thường. Thường dùng Uppercase, lowercase, capitalize
- line-height: độ cao của 1 hàng chữ trong paragraph. (>100% là giãn ra, <100% là co lại)
- text-decoration: cách gạch ngang chữ. Thường dùng none, underline
- color: màu chữ.
2. Các thuộc tính css định dạng background
- background-color: màu nền.
- background-image:url(DiachiHình) : ảnh nền
- background-repeat: cách lặp lại ảnh nền (repeat-x, repeat-y, repeat: 2 chiều)
- background-attachment: (fixed, scroll) ảnh nền sẽ cuộn theo chữ hay cố định. Mặc định là scroll.
- background-position: vị trí ảnh nền theo chiều ngang/dọc.
3. Các thuộc tính css định dạng cho khối chữ
- word-spacing: Khoảng cách giữa các từ.
- letter-spacing: Khoảng cách giữa các ký tự
- text-align: (left, right, center, justify) cách canh chữ
- white-space: (normal/pre/nowrap) bình thường/ giữ nguyên định dạng/không cuộn chữ xuống hàng
- display: (block, none, inline, table): cách hiển thị 1 tag
- block: quy định tag sẽ là 1 khối tách biệt với những cái khác ở trên và dưới nó. Giống paragraph. Có thể apply cho link để toàn chiều rộng có thể click thay vì user chỉ click vào text của link
- inline: các tag được định dạng display:inline sẽ nằm cùng 1 hàng. Vd: các li cùng 1 hàng, để làm menu ngang.
- none: tag bị ẩn, không xuất hiện trong trang web.
4. Các thuộc tính css để định dạng 1 khối
- width: độ rộng. Có thể dùng đơn vị px hoặc %.
- height: độ cao. Có thể dùng đơn vị px hoặc %.
- float: (left, right) Cho đối tượng trôi qua trái hoặc qua phải.
- clear: (left, right, both). Thuộc tính bỏ qua float của tag phía trên tag đang định dạng.
- padding: : Khoảng cách từ lề của đối tượng với nội dung bên trong
- margin: Khoảng cách từ lề của đối tượng với những đối tượng bên ngoài
5. Các thuộc tính css định dạng đường viền
- border-style: (solid, dash, dotted, double) kiểu đường viền.
- border-width: độ dày. Có thể dùng thick, medium, thin hoặc 1 con số
- border-color: Màu đường viền.
- border: đường viền, tổng hơp cả 2 thuộc tính trên
6. Các thuộc tính định dạng vị trí
Các thuộc tính liên quan đến vị trí, kích thước đối tượng …
- position: (static, relative, absolute, fixed): cách đặt đối tượng theo tọa độ top, left,,right, bottom
- top: tọa độ dọc của cạnh trên
- left: tọa độ trái
- bottom: tọa độ cạnh dưới
- right: tọa độ cạnh phải
- z-Index: để cho tag được định dạng nằm trên hoặc dưới so với những tag khác (tag nào có giá trị i_index cao hơn sẽ nằm trên)
7. Các thuộc tính css định dạng list
- list-type: (disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha) Kiểu bullet của danh sách
- list-type-image:url(DiaChiHinh) hình dùng thay thế ký tự bullet
- list-type-position: (inside, outside) vị trí của ký hiệu bullet (ở ngoài hay bên trong lề trái của các item)
Trên đây là một số hướng dẫn Cơ bản về Cascading Style Sheet giúp các bạn biết cách định dạng cho trang web. Bạn cần biết căn bản về html mới đọc bài này nhé.
