Menu
GIỚI THIỆU
  • Bài học này chúng ta học về cách tùy chỉnh giao diện HTML đơn giản với CSS. Với các ví dụ code css html dễ hiểu sẽ giúp các bạn học nhanh hơn ở serie css cơ bản

Bài 08: Tùy chỉnh giao diện HTML đơn giản với CSS

Với giao diện website được tạo bố cục với các thẻ HTML thì giao diện website của bạn sẽ rất là thô và không giống như trong mẫu bởi các bạn thiết kế website trên photoshop. Chính vì điều đó chúng ta cần sử dụng CSS để điều chỉnh hiển thị mặc định của HTML.

1.Tạo kiểu HTML với CSS

CSS là viết tắt của Cascading Style Sheets.

CSS mô tả các phần tử HTML được hiển thị như thế nào trên màn hình, giấy hoặc trong các phương tiện khác .

CSS tiết kiệm rất nhiều công việc . Nó có thể kiểm soát bố cục của nhiều trang web cùng một lúc.

CSS có thể được thêm vào các phần tử HTML theo 3 cách:

  • Inline - bằng cách sử dụng thuộc tính style trong các phần tử HTML
  • Nội bộ - bằng cách sử dụng một phần tử <style> trong phần <head>
  • Bên ngoài - bằng cách sử dụng tệp CSS bên ngoài

Cách phổ biến nhất để thêm CSS là giữ các kiểu trong các tệp CSS riêng biệt. Tuy nhiên, ở đây chúng tôi sẽ sử dụng kiểu nội tuyến và nội tuyến, bởi vì điều này là dễ dàng hơn để chứng minh, và dễ dàng hơn cho bạn để thử nó cho mình.

Xem thêm: Bạn có thể tìm hiểu thêm về CSS trong học css cơ bản của chúng tôi .

Inline CSS

CSS nội tuyến được sử dụng để áp dụng một phong cách độc đáo cho một phần tử HTML duy nhất.

CSS nội tuyến sử dụng thuộc tính style của một phần tử HTML.

Ví dụ này đặt màu văn bản của phần tử <h1> thành màu xanh:

<h1 style="color:blue;">Nội dung màu xanh</h1>

CSS nội bộ

CSS bên trong được sử dụng để xác định kiểu cho một trang HTML.

CSS nội bộ được định nghĩa trong phần <head> của một trang HTML, bên trong một phần tử <style>:

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>Học lập trình HTML & CSS</h1>
<p>Lớp học miễn phí</p>

</body>
</html>

CSS gọi từ bên ngoài

Một trang tính bên ngoài được sử dụng để xác định phong cách cho nhiều trang HTML.

Với một phong cách bên ngoài, bạn có thể thay đổi giao diện của toàn bộ trang web, bằng cách thay đổi một tập tin!

Để sử dụng một trang tính ngoài, thêm liên kết vào nó trong phần <head> của trang HTML:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>Lớp học lập trình HTML & CSS cơ bản</h1>

</body>
</html>

Một tờ kiểu dáng bên ngoài có thể được viết bằng bất kỳ trình soạn thảo văn bản nào. Tệp không được chứa bất kỳ mã HTML nào và phải được lưu với một phần mở rộng .css.

Đây là cách "styles.css" trông:

body {
    background-color: powderblue;
}
h1 {
    color: blue;
}
p {
    color: red;
}

2.Tóm lược bài học

  • Sử dụng thuộc tính HTML style cho kiểu dáng nội tuyến
  • Sử dụng phần tử HTML <style> để xác định nội bộ CSS
  • Sử dụng phần tử HTML <link> để tham khảo một tệp CSS bên ngoài
  • Sử dụng phần tử HTML <head> để lưu trữ các phần tử <style> và <link>
  • Sử dụng thuộc tính CSS color cho màu văn bản

Như vậy bạn đã hiểu được ý nghĩa của CSS là gì và cách viết CSS đơn giản. Tuy nhiên đó không phải là tất cả nên mình khuyên bạn nên đọc qua serie Css căn bản này để hiểu rõ hơn.

Ghi nguồn hoicode.com khi đăng tải lại bài viết này.
Link: Bài 08: Tùy chỉnh giao diện HTML đơn giản với CSS

Chia sẻ liên kết

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Facebook để được hỗ trợ nhanh nhất.
  1. avatar-logo-hoicode

    Tài liệu C#

    Thân gởi các bạn tài liệu và lập trình C#.Net,+ Lập trình C# trong 5 tuần - Cơ bản - Nâng cao.C# cơ bản: https://drive.google.com/drive/folders/0Bx1m9Z1LzO9wNHk4YXRTUXljc0UC# nâng cao: https://drive.google.com/drive/u/0/folders/0Bx1m9Z1LzO9wcVdwNVVuRDlLdTg+ Tài liệu về lập trình C# do mình sưu tầm.Link download: https://drive.google.com/drive/folders/0Bw8SCvQO3zptUWZKNDhxbzZycnc+ phần mềm convert C# sang C++ và ngược lại.Link download: https://drive.google.com/file/d/0B9od1ArkKiTGT1NjN29sM3BYcGc/view+ Web để luyện skills lập trình Có C++, C#, C, Java, Javascript, …https://www.codingame.com/Chúc các bạn học tập tốt và luôn đam mê với nghề lập trình.09. C# Cơ bản - Google Drivedrive.google.comChia sẻ codeTrong Group này có rất nhiều tài liệu cho các bạn, nhấn tham gia để nhận được nhiều hơn nhé!https://www.facebook.com/groups/781964028637993/

  2. avatar-logo-hoicode

    Dũng Béo

    Học php tại địa chỉ này: học php free

  3. Email của bạn sẽ được sử dụng với mục đích thông báo tin tuyển dụng mới hoặc các bài viết mới.

    captcha