CSS Note 1
1. Đơn vị đo
Đơn vị tuyệt đối
Là các đơn vị vật lý đã được định nghĩa sẵn và đại diện cho các đơn vị đo lường vật lý. Các đơn vị này không bị phụ thuộc và không hề thay đổi bởi bất cứ tác động nào. Ví dụ như đơn vị mét, xen-ti-mét,..là các đơn vị tuyệt đối.
Các đơn vị tuyệt đối sử dụng trong CSS gồm có:
px: Đây là một đơn vị được sử dụng trên màn hình hiển thị, một px sẽ tương đương với một điểm ảnh trên màn hình hiển thị. Chất lượng của điểm ảnh sẽ hoàn toàn khác nhau trên một số thiết bị, ví dụ như một điểm ảnh trên các thiết bị in ấn sẽ khác với một điểm ảnh trên các thiết bị màn hình độ phân giải thấp.
Đơn vị tương đối
Là các đơn vị đo lường được sử dụng trong CSS ở mức tương đối, nghĩa là nó có thể sẽ được thay đổi bởi các thành phần khác ví dụ như thay đổi phụ thuộc vào kích thước màn hình.
Các đơn vị tương đối được sử dụng trong CSS gồm có:
%(percentages): Là đơn vị tham chiếu tỷ lệ so với một phần tử mẹ của nó dựa vào kích thước. Ví dụ bạn có một cái khung với kích thước là 500px và khung bên trong có kích thước là 50% thì nó sẽ là 250px. Nếu bạn sử dụng đơn vị phần trăm này để gán kích thước cho thẻ<html>trên website thì nó sẽ thay đổi theo kích thước màn hình hoặc/cửa sổ website.em: Là đơn vị tham chiếu tỷ lệ so với phần tử mẹ của nó dựa vào giá trị của thuộc tínhfont-size. Ví dụ bạn đặt cho font-size cho phần tử mẹ của nó là 19px thì nếu bạn sử dụng em trong khu vực phần tử đó thì 1em = 19px.rem: Là đơn vị tham chiếu tỷ lệ so với phần tử gốc của một website dựa vào thuộc tính font-size, nghĩa là sẽ biến đổi tùy theo giá trị của thuộc tính font-size trong thẻ <html>. Cũng như rem, nếu bạn khai báo font-size cho thẻ<html>là 16px thì 1rem = 16px.
2. Các thuộc tính văn bản.
Text Styles trong CSS hiện tại có khoảng 13 thuộc tính được sử dụng bao gồm căn lề văn bản, trang trí văn bản, định hướng văn bản,….Cụ thể là có các thuộc tính thường dùng sau:
text-align: Căn lề văn bản. (left, right, centre, justify - đều 2 bên)text-decoration: Trang trí văn bản.overline: gạch trên chữunderline: gạch dưới chữline-through: gạch ngang chữnone: không có gạch gì cảtext-indent: Thêm khoảng trống trước văn bản theo chiều ngang từ trái sang phải, giá trị của nó là số kèm theo đơn vị đo lường.text-indent:15px;text-shadow: Thêm bóng cho văn bản.text-shadow: [màu sắc] [tọa độ x y] [độ mờ];text-shadow:blue2px3px4px;text-shadow:red2px-1px3px,blue-2px1px2px; Có bóng đổ đỏ, xanhtext-transform: Tùy chỉnh việc hiển thị chữ in hoa.text-transform:uppercase;
3. Trang trí phông chữ.
Font-family:
Cú pháp:
font-family: tên-font, tên-font-backup, tên-font-backup,...;
Các font chữ được thiết lập trong CSS theo cách thông thường thì nó sẽ lấy font chữ trên máy tính ra để hiển thị. Điều này có nghĩa là nếu bạn thiết lập một font mà trên máy của người dùng không có thì nó sẽ không hiển thị được.
Khi thiết lập font chữ, bạn cần biết trước tiên là hai giá trị serif và sans-serif. Trong đó, serif là giá trị font kiểu có chân và sans-serif là giá trị kiểu font không chân và các font này sẽ lấy dựa theo font chữ cơ bản trên máy tính.
Các font cơ bản trên máy tính
Một lời khuyên khi sử dụng font chữ trên website là nên ưu tiên việc sử dụng các font cơ bản trên máy tính mà đại đa số người dùng máy tính đều có. Các font cơ bản trên máy tính bao gồm:
Serif
- Palatino
- Time New Roman
- Georgia
Sans Serif
- Arial
- Helvetica
- Verdana
- Tahoma
Bạn có thể dùng một tập hợp font stack các font chữ cơ bản trên máy tính để dự phòng. Ví dụ:
font-family: Helvetica, Arial, Tahoma, sans-serif;
Tra cứu font stack
font-style
Thuộc tính font-style là để bạn thiết lập chữ viết được hiển thị dưới dạng in nghiêng hoặc bình thường. Thuộc tính này có 3 giá trị là normal (bình thường), italic (in nghiêng), oblique (cũng là nghiêng).
Việc tùy chỉnh in đậm chữ viết có hẳn một thuộc tính riêng đó là font-weight. Giá trị của nó là là từ100,200, 300,….900, số càng lớn thì chữ càng đậm và “mập” ra.
Ngoài ra nếu bạn không thích dùng số thì bạn có thể dùng các giá trị kiểu chữ lànormal,bold. Nếu phần tử mẹ của nó đã được thiết lập font-weight thì có thể dùng giá trị lighter và bolder để thiết lập độ đậm tương đối.
color
Để thiết lập màu chữ, bạn sẽ dùng thuộc tính color và thuộc tính này hiện tại hỗ trợ chính thức 3 kiểu giá trị biểu diễn màu sắc cần sử dụng đó là kiểu tên, kiểu HEX và kiểu RBG.
Font-size:
Để đổi kích thước của chữ, bạn có thể sử dụng thuộc tính font-size và thuộc tính này chỉ có một giá trị duy nhất là số kèm đơn vị đo lường.
4. Phần tử khối Block và phần tử nội dòng In line.
CSS Layout là thuật ngữ chỉ chung về việc dựng bố cục cho website dựa trên việc sử dụng và tùy biến các khối, phần tử.
Block là gì?
Phần tử khối (Block Elements) là thuật ngữ chỉ chung các thẻ HTML có chức năng tạo một khu vực hay nói dễ nghe xíu là một khối. Khối này có nghĩa là một thẻ khi mà bạn khai báo thì nó sẽ được hiển thị ở mỗi dòng riêng biệt bao gồm các nội dung nằm bên trong. Ở các bài học HTML cơ bản bạn có thể đã biết qua một số thẻ block cơ bản như <p>, <ul>, <ol>, <h1>,…
Và khi bạn học tới CSS, bạn sẽ dùng một thẻ rất quan trọng nữa đó là <div> và đây là một thẻ được dùng để tạo các block hay một khu vực nào đó để dễ dàng viết CSS sau này.
Inline là gì?
Phần tử nội dòng (Inline Elements) là thuật ngữ chỉ chung các thẻ HTML khi mà khai báo vào nội dung thì nó vẫn sẽ nằm chung một dòng với các văn bản khác. Một số thẻ inline rất hay dùng đó là <b>, <strong>, <i>, <u>,…và đặc biệt là <span> nếu bạn cần gộp nhóm các phần tử nào đó mà không ảnh hưởng đến các văn bản chung một hàng, thẻ <span> này có ý nghĩa và cách sử dụng giống như <div> nhưng nó được dùng trong inline.
Tại sao việc hiểu Block và Inline lại quan trọng?
Khi sử dụng CSS để dựng bố cục website mà bạn chưa hiểu rõ về Block và Inline thì có thể sẽ gặp một số khó khăn nếu đụng tới một số phần khó. Chẳng hạn như bạn sẽ không biết sử dụng <div> và <span> thế nào cho hợp lý, không thể sửa kiểu hiển thị một số phần tử theo ý muốn,…và đây là vấn đề khá quan trọng sau này mà chỉ khi tiến hành thực hành nhiều với CSS bạn mới thấy được.
5. Thẻ DIV và tạo bố cục website.
Ý nghĩa của thẻ <div>?
Thẻ
<div> là gì? Đây là cái thẻ mà nó là chữ viết tắt của division (nghĩa là khu trong tiếng Việt theo từ điển kỹ thuật chung) được sử dụng để tạo ra một khu vực kiểu block nào đó trên một website, hay bạn có thể hiểu là gom nhóm tập hợp các phần tử trên website vào một khu vực với thẻ <div>.
Tạo khu vực với thẻ <div>
Ví dụ thường thì một website sẽ có 4 phần chính là header (hiển thị banner, logo), content (hiển thị nội dung), sidebar (cột bên cạnh nội dung) và footer (khu vực chân website). Vậy thì bây giờ mình có thể tạo ra 4 thẻ
<div> với 4 id khác nhau nhằm chia khu vực ra. Trong mỗi khu vực mình có thể thêm nội dung riêng cho nó 6. Box Model và các thuộc tính
Box Model là một kỹ thuật cơ bản nhất trong CSS Layout và được sử dụng để bạn mô tả về khoảng cách mà mỗi phần tử trên website được sở hữu, hay nói cách khác là kỹ thuật tinh chỉnh khoảng cách hiển thị cho mỗi phần tử trên website.
Kỹ thuật Box Model trong CSS bao gồm 4 phần quan trọng đó là:
- Margin: Khoảng cách tính từ bên ngoài của phần tử.
- Border: Đường viền của phần tử.
- Padding: Khoảng cách tính từ bên trong của phần tử.
- Content: Nội dung trong phần tử.
4 phần này chúng ta có cái hình ảnh (mượn từ W3Scools) như sau:
Và trong 4 thành phần trên thì phần content chúng ta sẽ không có thuộc tính CSS nào đại diện cả vì nó là nội dung trong phần tử.
margin: top right bottom left;border: top right bottom left;padding: top right bottom left;
Padding nghĩa là chúng ta sẽ thiết lập khoảng cách được tính từ phần Content trở ra viền của phần tử, đơn giản vậy thôi. Padding được khai báo trong CSS bởi thuộc tính
padding với giá trị theo tuần tự top right bottom left (trên > phải > dưới > trái) và giá trị là số kèm theo đơn vị đo lường.
Ví dụ ở dưới mình có một cái thẻ
<div> và mình sẽ sử dụng padding để tạo khoảng cách cho top và bottom là 20px, còn left và right là 15px.
Tuy nhiên, nếu bạn muốn thiết lập padding cho top và bottom cùng giá trị, left và right cùng giá trị thì có thể viết giá trị theo cách ngắn gọn là
20px 10px, tức là top và bottom sẽ có 20px và left và right sẽ có 10px.
Còn nếu bạn nhập một giá trị duy nhất thì nó sẽ căn đều cho 4 mặt với giá trị đó, ví dụ như bạn chỉ nhập 20px thì nó sẽ tạo khoảng cách cho 4 mặt đều là 20px.
Ngoài thuộc tính padding thì thuộc tính này còn có 4 thuộc tính con khác đó là
padding-top, padding-bottom, padding-left và padding-right và mỗi thuộc tính là để thiết lập giá trị cho từng mặt cụ thể.Border
Border nghĩa là thuộc tính để bạn tạo viền cho phần tử và nó sẽ được khai báo bằng thuộc tính
border trong CSS.border: [size] [type] [color];border: 1px solid red;Trong border có hỗ trợ một số type nhưsolid,dotted, double,groove,ridge, inset vàoutset.Giống như các thẻ trong Box Model khác, border cũng có các thẻ con là border-top, border-right, border-bottom và border-left.Margin
Trong khi Padding có nhiệm vụ tạo khoảng cách giữa phần Content với Border thì Margin sẽ có tác dụng tạo khoảng cách từ Border trở ra ngoài, nói dễ hiểu thì nó sẽ giúp bạn tinh chỉnh khoảng cách giữa các phần tử với nhau. Để dễ hiểu hơn thì các bạn hãy xem ví dụ bên dưới.
Bạn thấy
#box1 và #box2 có một khoảng trắng chứ? Đó là margin, bạn hãy ấn qua tab CSS xem thì sẽ thấy ở #box2 mình có gắn thêm margin: 32px 0 0 0, tức là nó sẽ tạo ra một khoảng trắng ở trên đầu của #box2 và các mặt khác thì không tạo ra, cách viết tương tự như padding là 4 giá trị sẽ sắp xếp theo top right bottom left.
Và nó cũng có một số thuộc tính con là
margin-top, margin-right, margin-bottom và margin-left.Kiểm tra Box Model với Developer Tools
Trên trình duyệt Google Chrome và Firefox có tích hợp sẵn một bộ công cụ dành cho các nhà phát triển website mang tên Developer Tools. Công cụ này có rất nhiều chức năng nhưng ở bài này mình chỉ bày cho bạn cách sử dụng nó để kiểm tra Box Model thôi.
Để bật nó, bạn ấn phím F12 trên bàn phím, sau đó ấn vào tab Computed (Google Chrome) hoặc Box Model (Firefox) bên tay phải..
Trong khung đó bạn sẽ thấy nó mô tả rõ ràng, vùng màu xanh là Content, xanh lá cây là Padding, cam là Border và màu da là Margin.
Để xem thông tin của phần tử bạn muốn thì ấn vào nút tìm kiếm phần tử bên tay trái (Firefox và Google Chrome đều cùng vị trí).
Bây giờ bạn có thể rê con chuột vào một phần tử nào đó trên website và nhấp vào để xem Box Model bên tay phải, bạn có thể thử nhấp vào từng ô giá trị bên khung Box Model và thay đổi giá trị để xem sự thay đổi của nó (sẽ mất sau khi bạn refresh trình duyệt).
7. Thuộc tính tùy chỉnh kích thước
| Tên thuộc tính | Mô tả | Các kiểu giá trị |
|---|---|---|
| height | Thiết lập chiều cao của một phần tử. | auto length %inherit |
| max-height | Thiết lập chiều cao tối đa của một phần tử. | none length %inherit |
| max-width | Thiết lập chiều rộng tối đa của một phần tử. | none length %inherit |
| min-height | Thiết lập chiều cao tối thiểu của một phần tử. | length %inherit |
| min-width | Thiết lập chiều rộng tối thiểu của một phần tử. | length %inherit |
| width | Thiết lập chiều rộng của phần tử. | auto length %inherit |
Ở cột các kiểu giá trị,
length nghĩa là kiểu giá trị kèm đơn vị nhưpx,pt,em, rem và %, none là bỏ thiết lập, auto là tự động tính dựa theo chiều còn lại và inherit là thừa kế giá trị đã thiết lập trước đó cho thuộc tính này.
Và xin lưu ý thêm là bạn chỉ có thể thiết lập kích thước với các phần tử Block, Table và các đối tượng (hình ảnh, video, flash,…) chứ không thể thiết lập cho các phần tử Inline.
Đối với các thuộc tính dạng
min-*, max-* thì nghĩa là nó sẽ căn độ dài của phần tử dựa vào các nội dung bên trong nhưng sẽ có kích thước tối thiểu/tối đa được phép sử dụng. Ví dụ bạn có phần #content, bên trong #content bạn có phần #post và thiết lập chiều rộng cho #post là 500px. Thì nếu bạn đặt thuộc tính max-width cho #content là 400px thì cái thằng #post nó cũng chỉ giãn được tối đa là 400px chứ không thể hơn.8. Box Sizing
Khi các bạn học qua Box Model trong CSS thì sẽ thấy có một đặc điểm khi sử dụng Padding và Border thì cái khung phần tử của bạn sẽ bị biến đổi kích thước nếu bạn có đặt thêm thuộc tính
width và height để thiết lập kích thước cho nó. Ví dụ cái box của bạn có width là 500px và height là 500px (500×500 px)nhưng nếu bạn đặt thêm padding là 15px nữa thì cái khung của bạn sẽ có kích thước là 530×530 px. Bởi vì nếu cộng thêm pading là 15px nữa thì cái khung của bạn sẽ tự động cộng thêm 30px (15px cho top và và 15px cho bottom, tương tự với left và right), tương tự vớiborder.
Vậy thì nếu bây giờ bạn muốn làm cho phần tử của mình phải giữ nguyên kích thước mặc dù có cộng thêm padding và border thì sẽ cần phải dùng đến thuộc tính box-sizing. box-sizing là một thuộc tính sẽ giúp bạn có thể tính toán và làm chủ được kích thước của một phần tử dựa vào thuộc tính width và height đã được thiết lập bên trong. Hay nói cách khác, là bạn sẽ muốn thuộc tính
width và height là kích thước đã bao gồm border và padding.
box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
Các giá trị của box-sizing
Hiện tại
box-sizing có hỗ trợ một số giá trị như sau:content-box: Giá trị mặc định, nghĩa là giá trị width và height chỉ áp dụng cho khu vực nội dung bên trong, không bao gồm padding, border và margin.border-box: Khi thiết lập giá trị này, thì width và heigh sẽ bao gồm cho cả phần nội dung, padding và border nhưng không bao gồm margin.padding-box: Với giá trị này thì width và height chỉ bao gồm cho phần nội dung và padding, không bao gồm border và margin.
Lưu ý:
padding-box chỉ có tác dụng với trình duyệt Firefox.
Như vậy với ba giá trị này, mình khuyến khích các bạn chỉ nên sử dụng giá trị
border-box vì nó rất đầy đủ, dễ tính toán cho website.
Theo kinh nghiệm của mình thì khi viết CSS cho website, bạn hãy sử dụng
box-sizing với giá trị là border-box cho toàn bộ các phần tử trong website để các phần tử có kích thước chính xác khi bạn khai báo, tránh việc cộng thêm các phần border và padding sẽ gây ra rắc rối nếu bạn dùng hai cái này thường xuyên.
Để thiết lập
</p>box-sizing: content-box cho toàn bộ phần tử, chúng ta sẽ sử dụng vùng chọn là *, nghĩa là bao gồm mọi phần tử.<p>* {<br />
box-sizing: border-box;<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
}</p>
<p>
9. Màu nền và ảnh nền
Màu nền với background-color
Nếu bạn muốn thiết lập màu nền bằng CSS thì có thể sử dụng thuộc tính
background-color và giá trị của nó là tên màu, hoặc mã màu HEX/RBG, mình thì thường dùng nhất là mã màu Hex vì nó đa dạng và dễ dùng hơn.Ảnh nền với background-image
Đối với thuộc tính thêm ảnh nền thì chúng ta sẽ sử dụng
background-image và nó còn có thêm khá nhiều thuộc tính khác nữa kèm theo mà mình sẽ nói bên dưới. Dưới đây là ví dụ lấy một tấm ảnh sử dụng làm ảnh nền.
Nhớ là đối với các giá trị loại URL thì bạn phải có một cái hàm
url() để bọc cái đường dẫn của URL lại nhé.
Ngoài ra, bạn có thể thêm nhiều ảnh nền khác nhau trên cùng một block bằng cách sử dụng nhiều giá trị
url() và các giá trị phải được cách nhau bởi dấu phẩy. Ví dụ:background-image: url('ảnh 1'), url('ảnh 2');Tùy chỉnh lặp lại ảnh nền với background-repeat
Mặc định khi sử dụng ảnh nền, thì hình ảnh sẽ được lặp đi lặp lại theo cả chiều ngang và chiều dọc cho đến khi ảnh nền lấp toàn bộ phần tử. Nhưng bạn cũng có thể tùy chỉnh lại việc lặp ảnh nền thông qua thuộc tính
background-repeat, nó hỗ trợ các giá trị như sau:no-repeat: Không lặp.repeat-x: Lặp theo chiều ngang.repeat-y: Lặp theo chiều dọc.space: Lặp đều theo chiều ngang và chiều dọc, ảnh nền sẽ cách nhau bằng khoảng trắng.round: Chưa hiểu lắm nên không giải thích.repeat: Mặc định.
Đổi vị trí ảnh nền với background-position
Đối với các tấm ảnh nền cỡ nhỏ hoặc dùng background-size để sửa lại kích thước thì có thể bạn sẽ cần thay đổi vị trí hiển thị của ảnh nền đó, và bạn có thể dùng thuộc tính background-position này. Nó có một số giá trị như sau:
top: hiển thị ở trên đầu phần tử.bottom: hiển thị bên dưới phần tử.left: hiển thị bên trái phần tử.right: hiển thị bên phải phần tử.center: hiển thị chính giữa phần tử.y-x: tùy biến vị trí hiển thị theo tọa độ, giá trị đứng trước là y và đứng sau là x. Ví dụ:15px 10px
Đối với thuộc tính này thì bạn có thể viết tối đa cùng lúc hai giá trị. Ví dụ bạn muốn ảnh của bạn sẽ nằm bên phải phía trên phần tử thì sẽ có giá trị là
left top. Bạn cũng có thể thiết lập giá trị cho nhiều ảnh nền cùng lúc kiểu left top, top center.
Ngoài ra còn có thêm một vài thuộc tính dành riêng cho việc tùy biến ảnh nền nữa nhưng bạn có thể tham khảo thêm tại CSS Reference nhé.
10. Chia cột với Float và Clear Float
Chia cột trong CSS là thế nào?
Việc chia cột trong CSS là việc bạn thiết lập những phần tử con trong một phần tử mẹ nằm trên cùng một hàng. Ví dụ, mình muốn phần nội dung website của mình có hai cột thì mình sẽ tạo ra 3 cái
<div>, một cái <div> mình gọi nó là container hoặc phần tử mẹ, hai cái <div> còn lại mình gọi là column (cột).Các bước chia cột trong CSS
Khi chia cột trong CSS, bạn nên làm tuần tự đầy đủ các bước sau để chia cột được chính xác:
- Các cột phải luôn có một container, tức là phần tử mẹ bao bọc nó.
- Thiết lập chiều rộng cho container.
- Thiết lập chiều rộng cho hai cột, tổng chiều rộng trong hai cột phải luôn bằng hoặc ít hơn chiều rộng của container.
- Nên sử dụng
box-sizing: border-boxđể tính toán kích thước chính xác. - Sử dụng thuộc tính
floatvới giá trịleftvàrightđể đẩy phần tử về sang trái hoặc phải. - Tiến hành clear float.
container, nên thêm một cái border để tí nữa bạn sẽ hiểu clear float là thế nào:</p><p>/*==Thiết lập container==*/</p><p>.container {<br /> width: 960px;<br /> border: 1px solid #333;<br /> padding: 10px;<br />}</p><p>
Tiếp tục, chúng ta thiết lập chiều rộng của #post và mình sẽ muốn cột #post sẽ chiếm 660px, đồng thời thêm màu sắc cho hai thằng này để dễ nhìn một xíu.
</p><p>/*==cột #post==*/<br />#post {<br /> width: 660px;<br /> height: 150px;<br /> background: #e8e8e8;<br />}</p><p>
Tương tự với
#sidebar nhưng ta muốn cột #sidebar chỉ 300px mà thôi.</p><p>/*==cột #sidebar==*/<br />#sidebar {<br /> width: 300px;<br /> height: 150px;<br /> background: #b1b1b1;<br />}</p><p>
Giờ ta đã có được như thế này:
Okay, bây giờ mình muốn cái
#post nó sẽ nằm bên trái của #sidebar, nên mình sẽ gắn thêm cho #post một thuộc tính float với giá trị làleft.float: left;
Đồng thời, mình muốn thằng #sidebar sẽ nhảy qua bên phải nên mình sẽ có thuộc tính float cho nó với giá trị làright.
float: right;
Kết quả:
Cách 2. Sử dụng overflow
Cách này thì gọn lẹ hơn, không cần sửa HTML mà chỉ cần viết thêm overflow: auto; cho container là được.
Kết quả y hệt ở trên.
Nhận xét
Đăng nhận xét