CSS là công cụ dùng để định dạng các trang Web, nó được tổ chức tập trung để có thể dễ dàng 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 để việc thực hành 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 dùng của nó.

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

hinh-css-1

Hình 1. CSS Block

Trong đó:

Selector: là thành phần nhận biết thẻ HTML để định dạng. Có 03 cách để định nghĩa Selector: Basic Selector, id và Class.

  • Basic Selector: sử dụng chính thẻ của HTML để mô tả trong CSS. Trong ví dụ trên là định nghĩa cho các thẻ <h1> trong HTML. Điều đó có nghĩa là tất cả các thẻ <h1> 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ể nào đó sẽ được dùng trong html. Thông thường những thành phần định dang id này được 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 id trong CSS

    hinh-css-2

    Định nghĩa các id là main và copyright

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

    hinh-css-3

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

hinh-css-4

  • Sử dụng Class trong HTML

hinh-css-5

Properties: 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.

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

hinh-css-6

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

hinh-css-7

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 Style cùng với trang HTML

hinh-css-8

Style được định nghĩa trong phần head 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 Style 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 file .css. Ví dụ viết đoạn CSS sau và lưu dưới tên file login.css

hinh-css-9

Sau đó chúng ta khai báo sử dụng CSS trong phần head của file html như sau:

<link rel=”stylesheet” href=”login.css”>

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

hinh-css-10

Thực hành ứng dụng CSS

Ví dụ: Thiết kế trang Login như sau:

 

 

hinh-css-11

 

Code trang HTML

hinh-css-12

 

Code file CSS

hinh-css-13

 

Kết luận

Trong khuôn khổ một bài viết chúng ta không thể nói hết các nội dung về CSS, các bạn cần đọc thêm giáo trình HTML5 and 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.

Các bài liên quan:

– Học lập trình Web nên bắt đầu từ đâu?

Làm quen với HTML

Comments



Blog này nhằm mục đích chia sẻ các kiến thức thực tế liên quan đến ngành công nghiệp phần mềm nhằm giúp các bạn trẻ định hướng tốt hơn trong việc chọn lựa nghề nghiệp của mình. Chúng tôi rất mong nhận được sự đóng góp, chia sẽ của các anh chị có kinh nghiệm cũng như các bạn trẻ.

 Học lập trình

Hướng dẫn dành cho người mới học lập trình.

 Hot or Not

Phân tích xu hướng công nghệ lập trình

 Phân tích thiết kế hệ thống

Bàn về mô hình thiết kế phần mềm

 Scrum Methodology

Bàn về mô hình phát triển phần mềm.