Cách đặt hình nền trong CSS

Cách đặt hình nền trong CSS

Tạo một trang web là một cách tuyệt vời để thể hiện bản thân. Mặc dù có rất nhiều công cụ xây dựng trang web, nhưng việc tự viết nó là một cách thú vị để tìm hiểu thêm về cách các trang web hoạt động đằng sau hậu trường. Một dự án tốt dành cho người mới bắt đầu là tạo một trang web và thêm hình nền bằng CSS. Dự án này sẽ giúp bạn thiết lập và chạy với cả HTML và CSS.





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 cho các ngôn ngữ đánh dấu. Một trong những ngôn ngữ đánh dấu như vậy là HTML hoặc Ngôn ngữ đánh dấu siêu văn bản. HTML được sử dụng để tạo trang web. Mặc dù bạn có thể kiểm soát một số phong cách 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ữ tạo kiểu, để sử dụng nó, trước tiên chúng ta cần một thứ gì đó để tạo kiểu. Một trang web rất cơ bản sẽ đủ để chúng ta bắt đầu chơi với CSS. Trang của chúng tôi sẽ hiển thị 'Hello World.'









Hello World



Trong trường hợp bạn không quen với HTML, hãy nhanh chóng xem xét tất cả các phần tử làm gì. Như đã đề cập, HTML là một ngôn ngữ đánh dấu, có nghĩa là nó sử dụng các thẻ để đá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 nó 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 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 cách sử dụng. Văn bản trong một phần cũng nhằm mục đích làm cho sự phân biệt này dễ nhìn hơn.



Trong ví dụ của chúng tôi, chúng tôi có bốn thẻ. Các html thẻ cho biết phần tử nào là một phần của trang web. Các cái đầu thẻ 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ơ thể người các thẻ. Chúng tôi chỉ có một phần tử được hiển thị, P nhãn. Nó cho trình duyệt web biết rằng văn bản là một đoạn văn.

Có liên quan: 10 ví dụ về mã CSS đơn giản mà bạn có thể học trong 10 phút



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 kiểu bằng CSS. Trang của chúng tôi hiện khá đơn giản và chúng tôi không thể làm 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 tôi nổi bật để chúng tôi có thể phân biệt nó với nền bằng cách thêm một đường viền.





Hello World






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 trong CSS vào thẻ đoạn văn của chúng tôi đã cho trang web biết cách tạo kiểu cho đoạn văn. Chúng tôi 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 văn bản của chúng ta.





Hello World




Trang web của chúng tôi trông đẹp hơn, nhưng HTML của chúng tôi 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 tôi có thể chuyển thông tin này vào tiêu đề của chúng tôi. Tiêu đề của chúng tôi dành cho thông tin mà chúng tôi cần để hiển thị trang web một cách chính xác.




p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}



Hello World



Bây giờ HTML của chúng tôi dễ đọc hơn. Bạn sẽ nhận thấy rằng chúng tôi đã phải thay đổi một số thứ xung quanh. Thẻ style cho biết thông tin về kiểu của trình duyệt web, cũng như những gì cần tạo kiểu. Trong ví dụ của chúng tôi, chúng tôi đã sử dụng hai cách khác nhau để cho nó biết những gì để tạo kiểu. Các P trong thẻ kiểu đang yêu cầu trình duyệt web áp dụng kiểu đó cho tất cả các thẻ đoạn. Các #ourParagraph phần yêu cầu nó chỉ các phần tử kiểu với id ourParagraph . Thông báo rằng Tôi thông tin đã được thêm vào thẻ p trong cơ thể của chúng tôi.

cách ghi âm cuộc gọi đến trên iphone mà không cần ứng dụng

Nhập tệp CSS vào trang web của bạn

Thêm thông tin kiểu vào tiêu đề làm cho mã của chúng tôi dễ đọc hơn nhiều. Tuy nhiên, nếu chúng ta muốn tạo kiểu 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 nhiều công việc, bạn có thể sao chép và dán nó, nhưng nó sẽ tạo ra rất nhiều công việc nếu bạn muốn thay đổi một phần tử sau này.

Thay vào đó, chúng tôi sẽ giữ thông tin CSS trong một tệp riêng biệt và nhập tệp để tạo kiểu cho trang. Sao chép và dán thông tin giữa các thẻ kiểu 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.






Hello World



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ẽ là một miếng bánh. Đầu tiên, xác định yếu tố bạn muốn cung cấp cho hình nền. Trong ví dụ của chúng tôi, chúng tôi sẽ thêm nền cho toàn bộ trang. Điều này có nghĩa là chúng tôi muốn thay đổi phong cách của cơ thể người . 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 kiểu nội dung trong CSS, trước tiên hãy sử dụng cơ thể người từ khóa. Sau đó, thêm dấu ngoặc nhọn như chúng ta đã làm trước đó {}. Tất cả thông tin kiểu 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 tôi muốn thay đổi là hình nền . Có nhiều thuộc tính phong cách. Đừng mong đợi để ghi nhớ tất cả chúng. Đánh dấu trang một bảng gian lận thuộc tính CSS với các thuộc tính mà bạn muốn ghi nhớ.

Có liên quan: 8 hiệu ứng HTML tuyệt vời mà bất kỳ ai cũng có thể thêm vào trang web của họ

làm thế nào để ngăn máy tính xách tay khỏi quá nóng

Sau thuộc tính, hãy sử dụng dấu hai chấm để cho biết cách bạn sẽ thay đổi thuộc tính. Để nhập một hình ảnh, hãy sử dụng url () . nó chỉ ra rằng bạn đang sử dụng một liên kết để 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 tôi 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 kiểu 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 điều đó, hãy thêm Bối cảnh Lặp lại:không lặp lại; 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 thành kích thước của màn hình với kích thước nền: 100% 100%; , nhưng điều này sẽ làm giãn 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 thay đổi tỷ lệ của hình ảnh, bạn cũng có thể đặt kích thước nền thành che . Bìa 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

Hãy thay đổi một điều cuối cùng. Bây giờ chúng tôi đã có nền tảng, đoạn văn của chúng tôi 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. # Chỉ ra rằng 'ourParagraph' là một tên id. Tiếp theo, chúng tôi muốn đặt màu nền thuộc tính màu trắng.

body{
background-image: url('sky.jpg');
}
p {
text-align: center
}
#ourParagraph {
background-color: white;
border-style: solid;
padding: 30px;
}

Tốt hơn nhiều.

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 kiểu của các phần tử HTML khác nhau, bầu trời là giới hạn! 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à chơi với các thuộc tính khác nhau. Hãy thử thách bản thân để thay đổi màu văn bản của bạn tiếp theo.

Đăng lại Đăng lại tiếng riu ríu E-mail 8 trang web tốt nhất cho ví dụ về mã hóa HTML chất lượng

Bạn muốn học HTML để viết mã các trang web và ứng dụng của riêng mình? Sử dụng các ví dụ trang web này và mã nguồn để tự học HTML và CSS.

Đọc tiếp Chủ đề liên quan
  • Lập trình
  • HTML
  • Thiết kế web
  • CSS
Giới thiệu về tác giả Jennifer Seaton(21 bài báo đã xuất bản)

J. Seaton là một nhà văn khoa học chuyên nghiên cứu về các chủ đề phức tạp. Cô có bằng Tiến sĩ tại Đại học Saskatchewan; nghiên cứu của cô tập trung vào việc sử dụng học tập dựa trên trò chơi để tăng mức độ tương tác trực tuyến của sinh viên. Khi cô ấy không làm việc, bạn sẽ thấy cô ấy đang đọc sách, chơi trò chơi điện tử hoặc làm vườn.

Xem thêm từ Jennifer Seaton

Theo dõi bản tin của chúng tôi

Tham gia bản tin của chúng tôi để biết các mẹo công nghệ, đánh giá, sách điện tử miễn phí và các ưu đãi độc quyền!

Bấm vào đây để đăng ký