Trung Tâm Đào Tạo Các Ngành Nghề Kỹ Thuật Cao

Khoa CNTT - Trường TCN KTCN Hùng Vương - 161 Nguyễn Chí Thanh - P12 - Q5 - TpHCM


  • Khóa học Thương mại điện ...

    Khóa học Thương mại điện tử
  • E-Learning - Hệ thống ...

    E-Learning - Hệ thống học trực tuyến thế kỷ 21
  • Thương mại điện tử - ...

    Thương mại điện tử  - Các hình thức thanh toán điện tử
  • Kiếm tiền online từ ...

    Kiếm tiền online từ Google, Youtube, Adsense
  • Khóa học - Lập trình ...

    Khóa học - Lập trình Android chuyên sâu
  • Phi tin bất phú

    Phi tin bất phú
  • Chiến lược SEO hiệu quả

    Chiến lược SEO hiệu quả
  • Khóa học Lập trình ...

    Khóa học Lập trình website chuyên sâu
  • Khóa học SEO - Khai thác ...

    Khóa học SEO - Khai thác tài nguyên INTERNET
  • Khóa học thiết kế ...

    Khóa học thiết kế website chuyên nghiệp
  • Khóa học Thiết kế và Lập ...

    Khóa học Thiết kế và Lập trình website - WorldSkills
Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1

TOPIC: Làm quen CSS

Làm quen CSS 2 years 4 months ago #2449

  • tranducthanh
  • tranducthanh's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 14
  • Thank you received: 1
  • Karma: 0
Làm quen với CSS

Nếu HTML được xem như là bộ xương của một website thì CSS chính là da thịt được đắp lên bộ xương đó, mục đích đơn giản là cho website trông đẹp đẽ và chuyên nghiệp hơn.

CSS là từ viết tắt của Cascade Style Sheet, là ngôn ngữ giúp trình duyệt hiểu được các thiết lập định dạng và bố cục cho trang web. CSS cho phép bạn điều khiển thiết kế của nhiều thành phần HTML chỉ với duy nhất 1 vùng chọn CSS. Điều này giúp giảm thiểu thời gian thiết kế và chỉnh sửa, khi bạn có thể tách biệt được cấu trúc (HTML) và định dạng (CSS).

CSS cho phép bạn đưa các thông tin định nghĩa thẻ thông qua nhiều con đường khác nhau. Style có thể được quy định ở trong chỉ một thẻ HTML, được quy định trong 1 trang web hoặc ở trong một file CSS bên ngoài.
Cú pháp cơ bản của CSS

Cú pháp cơ bản của CSS bao gồm 3 phần: vùng chọn (selector), thuộc tính (property) và giá trị (value).
01 VÙNG-CHỌN {
02 Thuộc-tính-1: giá-trị-1;
03 Thuộc-tính-2: giá-trị-2;
04 }

Vùng chọn: là cách xác định các thẻ HTML dựa trên cấu trúc phân cấp của HTML. Vùng chọn có thể được tạo nên dựa trên nhiều yếu tố như định danh (id), tên lớp (class), quan hệ cha – con – hậu duệ…
Thuộc tính: là yếu tố bạn muốn thay đổi ở các thẻ HTML thuộc vùng chọn.
Giá trị: mỗi thuộc tính sẽ yêu cầu một giá trị khác nhau. Đó có thể là 1 từ khóa định sẵn (none, block), một tên màu hay mã màu (black, white, #000, #FFFFFF), hay một giá trị kích thước tính bằng px, em, rem, %.

Các vùng chọn CSS (selector) cần biết cho blogger

+ #ID
Dấu # được sử dụng để chọn một thẻ HTML có định danh cụ thể (ID). Do đó, bản chất của việc sử dụng ID không thể tái sử dụng. Hãy chắc chắn rằng việc gán ID cho thẻ HTML và chọn thẻ này bằng ID này là cách duy nhất bạn có thể định dạng cho nó.

01 <div id="vi-du">
02 <h2>Thạch Phạm Blog</h2>
03 <p>Cạch. WordPress blog lớn nhất Việt Nam.</p>
04 <div>
05 <p class="grand-child">Yêu màu tím. Sống nội tâm. Hay khóc thầm. Nhưng không gay.</p>
06 </div>
07 </div>
+ Class
Dấu “.” đại diện cho tên lớp. Nhiều thẻ HTML có thể có cùng tên lớp. Do đó, sự khác nhau giữa ID và Class là: ID chỉ cho phép chọn 1 phần tử, còn Class cho phép bạn chọn nhiều thẻ HTML cùng lúc.

01 <div id="vi-du">
02 <h2>Thạch Phạm Blog</h2>
03 <p>Cạch. WordPress blog lớn nhất Việt Nam.</p>
04 <div>
05 <p class="grand-child">Yêu màu tím. Sống nội tâm. Hay khóc thầm. Nhưng không gay.</p>
06 </div>
07 </div>

+ A.Class
Vùng chọn này giúp xác định tất cả các thẻ HTML cùng thuộc một lớp.

01 <div id="vi-du">
02 <h2>Thạch Phạm Blog</h2>
03 <p>Cạch. WordPress blog lớn nhất Việt Nam.</p>
04 <div>
05 <p class="grand-child">Yêu màu tím. Sống nội tâm. Hay khóc thầm. Nhưng không gay.</p>
06 </div>
07 </div>

+ A B
Vùng chọn này còn được gọi là vùng chọn hậu duệ (descendant). Vùng chọn này sẽ xác định tất cả các thẻ B nằm bên trong thẻ A, không kể phân cấp, ngôi thứ như là con, là cháu, là chắt chút chít gì đó.

01 <div id="vi-du">
02 <h2>Thạch Phạm Blog</h2>
03 <p>Cạch. WordPress blog lớn nhất Việt Nam.</p>
04 <div>
05 <p class="grand-child">Yêu màu tím. Sống nội tâm. Hay khóc thầm. Nhưng không gay.</p>
06 </div>
07 </div>
+ A > B
Vùng chọn này còn được gọi là vùng chọn con (child), và có nét tương đồng với vùng chọn hậu duệ. Tuy nhiên, vùng chọn này chỉ xác định tất cả các thẻ B là con trực tiếp của thẻ A, chứ không nằm bên trong thẻ nào khác.

01 <div id="vi-du">
02 <h2>Thạch Phạm Blog</h2>
03 <p>Cạch. WordPress blog lớn nhất Việt Nam.</p>
04 <div>
05 <p class="grand-child">Yêu màu tím. Sống nội tâm. Hay khóc thầm. Nhưng không gay.</p>
06 </div>
07 </div>

Các từ khóa có liên quan: thiet ke website, lap trinh css, lap trinh html, lap trinh website, thiet ke web bang joomla, lap trinh PHP, HTML la gi, thiet ke layout web, thiet ke web bang wordpress, lap trinh jquery

Các bài viết có liên quan:
Những điều cần để thiết kế website
Thiết kế website đơn giản
Thiết kế website trên thiết bị di động
Làm quen CSS
lập trình web với CSS
Lập trình CSS là gì ?
Lập trình HTML cơ bản
Ngôn ngữ lập trình HTML
Khái niệm về lập trình website
Lập trình & Thiết kế web khác nhau như thế nào
Thiết kế website bằng Joomla - Front và Back End
Thiết kế website bằng với Joomla - Quản lý Mail
Thiết kế website bằng Joomla - CSS cơ bản
Học lập trình php
10 mẹo nhỏ khi học lập trình php
Cú pháp cơ bản trong lập trình php
HTML
HTML là gì
Những điều cần biết khi thiết kế layout web
Quy trình thiết kế layout website
Thiết kế website bằng wordpress
10 lý do nên thiết kế website bằng WordPress
Các loại website được thiết kế bằng WordPress
Lập trình jquery là gì?
Các chức năng chính trong lập trình jquery
Lập trình jquery căn bản
Last Edit: 2 years 4 months ago by tranducthanh.
The administrator has disabled public write access.
  • Page:
  • 1
Moderators: admin
Time to create page: 0.275 seconds

Tin kiếm Google

Website Trường Dạy Nghề.NET là nơi qui tụ 1 đội ngũ các chuyên gia bao gồm các giảng viên chuyên ngành về các lĩnh vực như Công nghệ thông tin, Điện tử, Cơ khí, Ô tô, Điện, Cơ Điện Tử, Điện Lạnh....đang công tác giảng dạy và nghiên cứu tại trường Hungvuongtech địa chỉ 161-165 Nguyễn Chí Thanh, P12, Q5 TpHCM. Hungvuongtech là trường đao tạo các ngành nghề kỹ thuật cao, là 1 trong 45 trường trọng điểm quốc gia.