Tin tức

Học thiết kế website bằng Joomla - CSS cơ bản

18/06/2012

Học thiết kế web bằng Joomla

Bài viết này nằm trong Series hướng dẫn học thiết kế website với Joomla, một trong những công cụ mã nguồn mở giúp dễ dàng thiết kế website nhất hiện này. Nội dung phần này sẽ hướng dẫn các bạn một số yếu tố căn bản trong CSS.

1. Học thiết kế website bằng Joomla - Giới thiệu CSS

  • CSS là tập hợp các kiểu (style) định nghĩa cách hiển thị của các phần tử HTML
  • Các Style toàn cục có thể sử dụng nhiều lần và được lưu trong các file CSS

2. Hoc thiet ke web bằng Joomla - Cú pháp

Cú pháp: .tên_style {thuộc_tính_1: giá_trị_1;thuộc_tính_2: giá_trị_2; …}

Ví dụ: Định nghĩa style cho các chuỗi thông báo:

màu chữ đỏ và in đậm
.thong_bao{color:#FF0000; fontweight:bold}

3. Học thiết kế web bằng Joomla - Sử dụng CSS

Đưa CSS vào trang
<link href="đường dẫn tập tin css" rel="stylesheet" type="text/css"/>
Để sử dụng style cho các thẻ HTML : <the class="ten_style" …

Ví dụ: <div class="thong_bao">nội dung thông báo</div>

4. Hoc thiet ke web bằng Joomla - Một số thuộc tính CSS thường dùng

  • font-size : khổ chữ
  • font-weight : nét chữ ( đậm hoặc chọn kích thước)
  • color : màu chữ
  • background-color : màu nền
  • text-align : canh lề
  • text-decoration : gạch dưới, gạch trên, gạch bỏ
  • width : chiều rộng
  • height : chiều cao
  • border : khung
  • padding : khoảng cách từ chữ đến khung
  • margin : khoảng cách từ khung này đến khung khác

Như vậy qua bài hướng dẫn hoc thiet ke web bằng Joomla này, chúng ta đã được biết qua một số thành phần quan trọng trong kỹ thuật chỉnh sửa CSS, từ đó giúp  chỉnh sửa thay đổi một số thành phần trong giao diện một cách dễ dàng.

ESVN công ty thiết kế webDịch vụ SEO - Đăng ký tên miền

Thiet ke web mien phiHoc thiet ke web

Nơi hội tụ giải pháp

Hiennv