CSS là công cụ được sử dụng để định dạng các trang Web, nó được tổ chức tập trung để có thể dễ dàng sử dụng lại cũng như tạo nên sự đồng nhất cho trang Web của bạn. Bạn nên học CSS song song với HTML để thực hiện việc thiết kế một trang Web được thuận lợi hơn. Bài này trình bày các kiến ​​thức cơ bản về CSS và cách sử dụng nó

Cấu trúc cơ bản của một thành phần CSS

Hình 1. Khối CSS

in which

Bộ chọn. is into known HTML tag to format. Có 03 cách để định nghĩa Selector. Bộ chọn cơ bản, id và Class

• Bộ chọn cơ bản. sử dụng thẻ chính của HTML để mô tả trong CSS. Trong ví dụ trên là định nghĩa cho các thẻ trong HTML. Điều đó có nghĩa là tất cả các thẻ trong tài liệu HTML sẽ được chuyển sang màu xanh đậm (nany)
• ID. được sử dụng để đặt tên cho một định dạng cụ thể định dạng nào sẽ được sử dụng trong html. Thông thường, những thành phần định danh này được sử dụng cho một đối tượng hoặc một nhóm đối tượng cụ thể trong trang HTML

  Định nghĩa các id là chính và bản quyền

  • Cách sử dụng id trong HTML

• Lớp. được định nghĩa cho các khối định dạng chung được sử dụng nhiều lần ở nhiều nơi
  • Định nghĩa Lớp trong CSS (bắt đầu bằng dấu chấm)

Tính chất. là các thuộc tính của thẻ HTML, phần này bạn đã được giới thiệu trong phần HTML

Giá trị. là giá trị của thuộc tính, quyết định rằng nó sẽ được thể hiện như thế nào

Ví dụ về đoạn CSS đã sử dụng ở trên

Cách sử dụng CSS để định dạng cho trang Web

Ở trên chúng ta đã tìm hiểu cơ bản về cách viết CSS, bây giờ chúng ta sẽ tìm hiểu cách sử dụng chúng để định nghĩa vào trang HTML. Có 03 cách sử dụng CSS vào trang HTML

Cách 1. Viết trực tiếp vào thẻ HTML

Cách này thường được sử dụng khi chúng ta cần định nghĩa cho một vài thẻ riêng lẻ trong trang HTML

cách 2. Định nghĩa Kiểu giống với trang HTML

Kiểu được định nghĩa trong phần đầu của trang HTML, sau đó ở bên dưới chúng ta sử dụng như bình thường

Cách này được sử dụng khi bạn xây dựng Kiểu cho từng trang riêng lẻ

Cách 3. Viết Style ra một trang riêng

Theo cách này, bạn viết Style ra một trang riêng và lưu dưới tệp. css. Ví dụ viết đoạn CSS sau và lưu bên dưới tên tệp đăng nhập. css

Sau đó chúng ta khai báo sử dụng CSS trong phần đầu của tệp html như sau

Cách đặt và sử dụng css vào trang HTML như sau

CSS thực thi ứng dụng

Ví dụ. Design page Login as after

Mã trang HTML

Tệp mã CSS

Kết luận

Trong khuôn khổ một bài viết chúng ta không thể nói hết nội dung về CSS, các bạn cần đọc thêm giáo trình HTML5 và CSS3 của Murach  và tham khảo thêm trang Web  www. w3school. com cũng như thực hiện nhiều bài tâp để hiểu và thuần thục hơn

CSS mô tả cách các phần tử HTML sẽ được hiển thị trên màn hình, trang hoặc trong các phương tiện tiện ích khác

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

Có thể thêm CSS vào phần tử HTML bằng 3 cách

Nội tuyến (Nội tuyến) – by way used property style in HTML HTML section

Internal (Nội bộ) – bằng cách sử dụng phần tử < kiểu > trong phần < head . >.

Bên ngoài (Từ 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 được giữ nguyên các mẫu trong các tệp CSS riêng biệt (Bên ngoài). Tuy nhiên, ở đây chúng ta sử dụng kiểu nội tuyến và nội bộ, vì chúng biểu thị và giúp bạn thực hiện dễ dàng hơn

CSS nội tuyến (inline)

Một CSS nội tuyến được sử dụng để áp dụng một kiểu duy nhất cho một phần tử HTML đơn

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

Ví dụ sau đặt màu chữ cho phần tử < h1 > to color xanh dương.

Ví dụ

This is a Blue Heading

CSS internal type (nội bộ)

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

CSS nội bộ được xác định trong phần của trang HTML, bên trong phần tử

This is a heading

This is a paragraph.

CSS từ bên ngoài (bên ngoài)

Một CSS từ bên ngoài có thể được sử dụng để định kiểu cho nhiều trang HTML

Với CSS bên ngoài, bạn có thể thay đổi giao diện của toàn bộ trang web bằng cách chỉnh sửa một tệp duy nhất

Để sử dụng CSS từ bên ngoài, ta thêm một đường dẫn tới tệp CSS ở phần < head > của trang HTML.

Ví dụ

  



This is a heading
This is a paragraph.

Một tệp CSS bên ngoài có thể được viết bởi mọi trình soạn thảo. Tệp này không chứa bất kỳ đoạn mã HTML nào, và phải được lưu lại với đuôi “. css”

tập tin “phong cách. css” trông giống như sau

body {

    background-color: white;

}

h1 {

    color: mediumseagreen;

}

p {

    color: tomato;

}

Phông chữ CSS

Thuộc tính CSS color giúp xác định màu chữ được sử dụng.

Thuộc tính CSS họ phông chữ giúp xác định kiểu phông chữ được sử dụng.

Thuộc tính font-size Giúp xác định cỡ chữ được sử dụng.

Ví dụ

This is a heading
This is a paragraph.

Đường viền (đường viền)

Thuộc tính đường viền giúp xác định đường bao quanh phần tử HTML.

Ví dụ

p {
  border: 1px solid powderblue;
}

Ví dụ trên 1px là đường viền dày, solid là kiểu của đường viền, powderblue là màu của đường viền

Đệm CSS

Thuộc tính padding giúp xác định khoảng đệm (khoảng trống) giữa văn bản và đường viền.

Ví dụ

p {
  border: 1px solid powderblue;
  padding: 30px;
}

Lề

Thuộc tính lề giúp xác định một khoảng lề bên ngoài đường viền.

Ví dụ

p {
  border: 1px solid powderblue;
  margin: 50px;
}

Ví dụ ở hình trên, phần màu cam là lề, phần màu xanh lá là phần đệm và phần viền ở giữa lề và phần đệm chính là viền. Đây là 2 thuộc tính thông thường được sử dụng để thiết lập phần tử và bố cục trang web

Để dễ nhớ, các bạn có thể hiểu margin là bên ngoài, dùng để điều chỉnh khoảng cách với các phần tử khác. Và phần đệm là lề trong để điều chỉnh khoảng cách giữa nội dung và phần tử

Thuộc tính id

Để xác định một kiểu riêng cho một phần tử đặc biệt, vui lòng thêm thuộc tính id cho phần tử

<p id="p01"><I am different</p>

Sau that style for that element with the id can

Ví dụ

#p01 {
  màu .  màu xanh da trời;
}

Ghi chú. id của một phần tử nên là duy nhất trong một trang web, để bộ chọn id có thể chỉ ra chính xác phần tử đó

Thuộc tính class

Để xác định kiểu cho các loại phần tử đặc biệt, vui lòng thêm thuộc tính lớp cho phần tử

<p lớp="lỗi"><I am different</p>

Sau đó style cho các phần tử đó với tên lớp vừa đặt

Ví dụ

p. lỗi {
  màu .  đỏ;
}

Tham chiếu đến tệp CSS bên ngoài

Tệp CSS bên ngoài có thể được tham chiếu với đường dẫn tuyệt đối hoặc đường dẫn tương đối tới trang web hiện tại