CSS là gì?
CSS là viết tắt của Cascading Style Sheet. Nó là một ngôn ngữ lập trình cho phép bạn tạo kiểu (style) cho các ngôn ngữ đánh dấu (markup languages). Một trong những ngôn ngữ đánh dấu như vậy là HTML (HyperText Markup Language). HTML được sử dụng để tạo các trang web. Mặc dù bạn có thể kiểm soát một phần style của trang web bằng cách sử dụng HTML, CSS cung cấp nhiều tùy chọn kiểm soát và thiết kế hơn.
Tạo một trang web cơ bản với HTML
Vì CSS chỉ là một ngôn ngữ để style, để sử dụng nó, trước tiên chúng ta cần một trang web cơ bản. Trong ví dụ này, trang của chúng ta sẽ hiển thị “Hello World.”
<html> <head> </head> <body> <p>Hello World</p> </body></html>Trong trường hợp bạn không quen với HTML, hãy cùng tìm hiểu về các phần tử (element). Như đã nói, HTML là một ngôn ngữ đánh dấu, có nghĩa là nó sử dụng các thẻ (tag) để đánh dấu văn bản là gì. Bất cứ khi nào bạn nhìn thấy một từ được bao quanh bởi <> thì đó là một thẻ. Có hai loại thẻ, một thẻ đánh dấu sự bắt đầu của một phần (section) bằng cách sử dụng <> và một thẻ đánh dấu sự kết thúc của một phần bằng </>.
Trong ví dụ của chúng ta, chúng ta có bốn thẻ. Thẻ html cho biết phần tử nào là một phần của trang web. Thẻ head chứa thông tin tiêu đề không được hiển thị trên trang nhưng cần thiết để tạo trang. Tất cả các phần tử được hiển thị đều nằm giữa các thẻ body. Chúng tôi chỉ có một phần tử được hiển thị, thẻ p. Nó cho trình duyệt web biết rằng các chữ này là một đoạn văn.
Thêm CSS vào HTML
Bây giờ chúng ta đã có một trang đơn giản, chúng ta có thể tùy chỉnh style bằng CSS. Trang của chúng ta hiện tại khá đơn giản và chúng ta không thể làm được gì nhiều, nhưng hãy bắt đầu bằng cách làm cho đoạn văn của chúng ta nổi bật để có thể phân biệt nó với nền bằng cách thêm một đường viền.
<html> <head> </head> <body> <p style="border-style: solid;" >Hello World</p> </body></html>Bây giờ, đoạn văn của chúng ta sẽ được bao quanh bởi một đường viền màu đen. Việc thêm mô tả kiểu (style description) trong CSS vào thẻ đoạn văn đã cho trang web biết cách style cho đoạn văn. Chúng ta có thể thêm nhiều mô tả hơn. Hãy tăng khoảng trắng hoặc khoảng đệm xung quanh đoạn văn của chúng ta và căn giữa chúng.
<html> <head> </head> <body> <p style="border-style: solid; padding: 30px; text-align: center" >Hello World</p> </body></html>Trang web trông đẹp hơn, nhưng HTML của chúng ta bắt đầu trông lộn xộn với tất cả các mô tả đó trong thẻ đoạn văn. Chúng ta có thể chuyển thông tin này vào tiêu đề (header). Tiêu đề dành cho thông tin mà chúng ta cần để hiển thị trang web một cách chính xác.
<html> <head> <style> p { text-align: center } #ourParagraph { border-style: solid; padding: 30px; } </style> </head> <body> <p id="ourParagraph" >Hello World</p> </body></html>
Giờ thì HTML của chúng ta dễ đọc hơn. Thẻ style cho biết thông tin về style của trình duyệt web, nhưng cũng cho nó biết cần style cái gì. Trong ví dụ này, chúng ta đã sử dụng hai cách khác nhau để cho nó biết. Thẻ p trong thẻ style yêu cầu trình duyệt web áp dụng style đó cho tất cả các thẻ đoạn văn. Phần #ourParagraph cho trình duyệt biết chỉ style phần tử với id ourParagraph. Lưu ý rằng thông tin id đã được thêm vào thẻ p trong phần thân (body).
Nhập tệp CSS vào trang web
Thêm thông tin style vào tiêu đề làm cho code của chúng tôi dễ đọc hơn nhiều. Tuy nhiên, nếu chúng ta muốn style cho nhiều trang khác nhau theo cùng một cách, chúng ta phải thêm văn bản đó vào đầu mỗi trang. Điều đó có vẻ không quá nặng nhọc, bạn chỉ cần copy và paste nó, nhưng rất phiền nếu sau này bạn muốn thay đổi một phần tử.
Thay vào đó, chúng ta sẽ giữ thông tin CSS trong một tệp riêng biệt và nhập tệp để style cho trang. Copy và paste thông tin giữa các thẻ style vào một tệp CSS mới ourCSSfile.css.
p { text-align: center}#ourParagraph { border-style: solid; padding: 30px;}Sau đó, nhập tệp vào tệp HTML.
<html> <head> <link rel="stylesheet" href="ourCSSfile.css"> </head> <body> <p id="ourParagraph" >Hello World</p> </body></html>Thêm hình nền bằng CSS
Bây giờ bạn đã có một nền tảng vững chắc về HTML và CSS, việc thêm hình nền sẽ rất dễ dàng. Đầu tiên, xác định yếu tố bạn muốn cung cấp cho hình nền. Trong ví dụ này, chúng ta sẽ thêm nền cho toàn bộ trang. Điều này có nghĩa là chúng ta muốn thay đổi style của body. Hãy nhớ rằng, các thẻ body chứa tất cả các phần tử có thể nhìn thấy được.
body{ background-image: url("sky.jpg");}p { text-align: center}#ourParagraph { border-style: solid; padding: 30px;}Để thay đổi style nội dung trong CSS, trước tiên hãy sử dụng từ khóa body. Sau đó, thêm dấu ngoặc nhọn như chúng ta đã làm trước đây {}. Tất cả thông tin style cho phần thân phải nằm giữa dấu ngoặc nhọn. Thuộc tính style mà chúng ta muốn thay đổi là background-image.
Sau thuộc tính, hãy sử dụng dấu hai chấm để cho biết bạn sẽ thay đổi thuộc tính như thế nào. Để nhập hình ảnh, hãy sử dụng url(). Nó cho biết bạn đang sử dụng một đường link để trỏ đến hình ảnh. Đặt vị trí tệp trong dấu ngoặc vuông giữa dấu ngoặc kép. Cuối cùng, kết thúc dòng bằng dấu chấm phẩy. Mặc dù khoảng trắng không có ý nghĩa trong CSS, nhưng hãy sử dụng thụt lề để làm cho CSS dễ đọc hơn.
Ví dụ của chúng ta trông như thế này:
Nếu hình ảnh của bạn không hiển thị chính xác do kích thước của hình ảnh, bạn có thể thay đổi hình ảnh trực tiếp. Tuy nhiên, có các thuộc tính để style nền trong CSS mà bạn có thể sử dụng để thay đổi nền. Hình ảnh nhỏ hơn nền sẽ tự động được lặp lại trong nền. Để tắt tính năng đó, hãy thêm background-repeat: no-repeat; cho phần tử của bạn.
Ngoài ra còn có hai cách để làm cho một hình ảnh bao phủ toàn bộ nền. Đầu tiên, bạn có thể đặt kích thước nền bằng kích thước của màn hình với background-size: 100% 100%; nhưng điều này sẽ kéo dài hình ảnh và có thể làm biến dạng hình ảnh quá nhiều. Nếu bạn không muốn tỷ lệ của hình ảnh bị thay đổi, bạn cũng có thể đặt kích thước nền để cover. Cover sẽ làm cho hình nền bao phủ nền, nhưng không làm hình ảnh bị biến dạng.
Thay đổi màu nền
Bây giờ chúng ta đã có nền, nhưng đoạn văn của chúng ta rất khó đọc. Hãy làm cho nền của nó có màu trắng. Quá trình này cũng tương tự. Phần tử chúng tôi muốn sửa đổi là #ourParagraph. Ký hiệu # chỉ ra rằng “ourParagraph” là một tên id. Tiếp theo, chúng ta muốn đặt thuộc tính background-color thành màu trắng.
body{ background-image: url("sky.jpg");}p { text-align: center}#ourParagraph { background-color: white; border-style: solid; padding: 30px;}
Tiếp tục thiết kế trang web của bạn bằng CSS
Bây giờ bạn đã biết cách thay đổi style của các phần tử HTML khác nhau! Phương pháp cơ bản để thay đổi các thuộc tính kiểu là giống nhau. Xác định phần tử bạn muốn thay đổi và mô tả cách thay đổi thuộc tính. Cách tốt nhất để tìm hiểu thêm là thử thay đổi các thuộc tính khác nhau.
Vân Nguyễn
Dịch từ: https://www.makeuseof.com/set-background-image-css/
Bình luận (0
)