Hướng dẫn dùng uplinkcss trong PHP

• Trang chủ
• Hướng dẫn học
• Hướng dẫn học CSS
• Sử dụng CSS

Kết nối file CSS vào file HTML

Trước khi học cách kết nối file CSS vào HTML như thế nào, chúng ta hãy xét cấu trúc thư mục chứa các file như sau:

• Html

  • index.html

  • css

    • style.css

Click vào dấu [+] để xem cấu trúc.

Nội fung file index.html

Tiêu đề trang web

...Phần thân viết ở đây...

Nội fung file style.css

Nếu không có nội dung thì file CSS có thể là file rỗng, hoặc chứa dòng khai báo charset, ở đây ta tạm thời sử dụng file rỗng:

Kết nối file CSS vào file HTML

Chúng ta kết nối file CSS vào file HTML thông qua thẻ , cách sử dụng thẻ này như thế nào các bạn có thể xem bên phần tham khảo.

Tiêu đề trang web

...Phần thân viết ở đây...

Thuộc tính href ta phân tích như sau:

• style.css là một file có tên là style với định dạng file là .css
• css là folder chứa file style.css

Như vậy css/style.css sẽ dẫn đường dẫn tới file style.css trong thư mục css.

Cách viết một nội dung CSS

Viết nội dung CSS theo cấu trúc như sau:

Bộ chọn { thuộc tính: giá trị; }

Chúng ta có thể viết nhiều cặp thuộc tính và giá trị cho bộ chọn, mỗi cặp thuộc tính và giá trị có thể viết cách nhau bởi dấu chấm phẩy.

p { color: red; float: left; padding-left: 10px; }

Đoạn code trên tương tự như đoạn code sau:

p {
    color: red;
    float: left;
    padding-left: 10px;
}

Cách viết bộ chọn CSS

Giả sử ta có file HTML như sau:

Tiêu đề trang web

Bộ chọn theo tên id

tag#tênid { thuộc tính: giá trị; }

• Bắt buộc phải có ký tự dấu "#" và tênid

div#content { width: 600px; }

Bộ chọn theo tên class

tag.tênclass { thuộc tính: giá trị; }

• Bắt buộc phải có ký tự dấu "." và tênclass

div.navi { background: #333333; }

Bộ chọn theo cấp bậc

[tag cha] [tag con] [tag cháu] { thuộc tính: giá trị; }

• Cấu trúc này không bắt buộc, tuy nhiên cấu trúc này sẽ thuận tiện trong việc điều chỉnh các thành phần con bên trong, và cũng để xác định thứ tự ưu tiên trong CSS.
• Trong file HTML bên trên, trong phần content và navi đều có tồn tại thành phần

  nếu sử dụng cách chọn tag { thuộc tính: giá trị;} thì ta sẽ không thể nào chọn được đâu là thành phần thuộc content, đâu là thành phần thuộc navi, tuy nhiên sử dụng cách chọn theo cấp bậc thì việc này lại rất dễ dàng:

div#content p { color: #333333; } /* Chon thanh phan p theo content*/

div.navi p { background: #333333; } /* Chon thanh phan p theo navi*/

div#content ul li { display: inline; } /* Chon thanh phan li theo content*/

Chúng ta có thể xem thêm các bộ chọn khác tại phần tham khảo.

Cách viết một comment trong file CSS

Comment là một dạng ghi chú, giúp người viết code giải thích nghĩa cho từng đoạn code, cách viết một comment trong CSS như sau:

/* Đây là dòng comment */

CSS là một ngôn ngữ chuyên dùng để trình bày hình thức thể hiện của văn bản HTML cho người dùng, như văn bản đó được định dạng ra sao [cơ chữ, font chữ, màu sắc ...], bố cục, dàn trang thế nào ...

Nội dung chính

• Tại sao cần dùng CSS?
• Nhúng CSS vào HTML
• Nhúng CSS dạng inline - thuộc tính style
• Nhúng CSS dạng Internal - CSS viết cùng HTML với thẻ
• Nhúng CSS dạng External, thẻ nạp file CSS vào HTML
• Bài xem nhiều

Nội dung chính

• Tại sao cần dùng CSS?
• Nhúng CSS vào HTML
• Nhúng CSS dạng inline - thuộc tính style
• Nhúng CSS dạng Internal - CSS viết cùng HTML với thẻ
• Nhúng CSS dạng External, thẻ nạp file CSS vào HTML

CSS viết tắt của cụm từ Cascading Style Sheets, về ngữ nghĩa thì có thể hiểu: Cascading là cách làm việc của CSS, các CSS tác dụng vào phần tử HTML có thể bị đè [định nghĩa lại] bởi CSS khác hoặc kết hợp cùng với CSS khác. Còn Style Sheets điều khiển cách hiện thị nội dung trang web.

Ví dụ, CSS định nghĩa màu chữ đỏ cho phần tử

đặt ở một file css, thì ở file css khác nó có thể định nghĩa lại thành màu xanh, hoặc cho thêm thuộc tính là chữ đậm, kết quả cuối cùng là sự kết hợp của 2 định nghĩa CSS [thuộc tính trước định nghĩa chỗ này có thể ghi đè hoặc bổ xung bởi thuộc tính định nghĩa ở chỗ khác]. Đó là ý nghĩa của từ Cascading. Khi làm việc với CSS bạn sẽ dần lĩnh hội được khái niệm này.

CSS và HTML luôn đi cùng nhau: HTML tạo ra cấu trúc, nội dung các phần tử trong trang, CSS quy định cách hiện thị phần tử trên trang.

Để học về CSS trước tiên phải hiểu cơ bản về HTML, rồi mới có thể thực hành css trong html.

Tại sao cần dùng CSS?

CSS cho phép bạn định nghĩa kiểu, cách hiện thị cho các phần tử HTML. Thêm css vào html giúp bạn phân tách giữa nội dung trang và cách trình bày trang. Nếu chỉ sử dụng HTML thì định dạng phần tử, kiểu phần tử phải ở cùng một vị trí với phần tử trong văn bản, điều này rất khó để bảo trì khi trang web phức tạp nên. Khi sử dụng CSS thì các định đạng được loại bỏ khỏi văn bản HTML, định dạng được lưu vào một file CSS.

Nhúng CSS vào HTML

Để áp dụng CSS tác dụng vào các phần HTML có ba cách nhúng CSS: Inline, Internal và External

• Inline: mã CSS viết tại thuộc tính style của phần tử HTML
• Internal: mã CSS trong chính văn bản HTML, nằm trong khối thẻ
• External: mã CSS ở một file riêng biệt [thường có phần mở rộng .css] sau đó nạp vào HTML bằng phần tử html [liên kết css với html]

Kiểu inline và Internal thì chèn css vào html trực tiếp trong văn bản HTML.

Nhúng CSS dạng inline - thuộc tính style

Cách này là đặt mã CSS vào thẳng thuộc tính style của phần tử. Mã CSS chỉ tác động nên chính phần tử đó.

Ví dụ đoạn mã CSS sau đặt màu chữ phần tử là trắng, màu nền phần tử là đỏ

color:white; background-color:red;

Giờ gán đoạn CSS đó cho một phần tử [ví dụ ≶p>] trong HTML, ở dạng inline thì thực hiện như sau:

Bạn có thể thử thay các màu khác để kiểm tra như: blue, green, navy, orange ...

Nhúng CSS dạng Internal - CSS viết cùng HTML với thẻ

Cách này bạn sẽ dùng thẻ , tạo ra khu vực để viết CSS, bạn có thể để bất kỳ đâu trong HTML, nhưng nên đặt trong thẻ . Như ví dụ sau, trong khối nó sẽ định nghĩa kiểu cho mọi phần tử

, đều có màu trắng, nền đỏ.

Nhúng CSS dạng External, thẻ nạp file CSS vào HTML

Cách link css vào html này các mã CSS bạn viết tập trung vào các file độc lập với file HTML [thường đặt phần mở rộng là css] sau đó dùng thẻ đặt ở phần để nạp vào HTML theo cú pháp, ví dụ file ngoài là demo.css

    
      
   
   
      
Đoạn văn 1. 
      
Đoạn văn 2. 
   

Trong file demo.css bạn viết nội dung CSS [không có thẻ style], ví dụ:

p {
   color:white;
   background-color:red;
}

Kết quả sẽ tương tự như ví dụ trên, chỉ có điều mã CSS đã đặt ra một file độc lập. Thuộc tính href trỏ đến địa chỉ URL của file CSS, ở ví dụ trên là địa chỉ dạng tương đối vì file CSS và HTML cùng thư mục.

Ví dụ nữa, thử tích hợp các CSS định nghĩa bởi Framework Bootstrap, ở đường dẫn: //stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css

Sau khi tích hợp thì sẽ có các lớp CSS sử dụng ngay như display-1, text-success ...

Danh sách các bài viết trong chuyên mục Design Pattern, đây là những bài viết mới nhất được cập nhật trong mục Design Pattern.

Trong chuyên đề học PHP nâng cao mình đã trình bày rất chi tiết về lập trình hướng đối tượng PHP, nhưng biết bấy nhiêu đó là chưa đủ mà bạn phải học thêm các cách thiết kế hướng đối tượng, nghĩa là sẽ vạch ra môt hình hoạt động của các đối tượng. Vấn đề này ta gọi là Design Pattern.

Trong các PHP Frameworks họ sử dụng các mẫu Design Pattern để xây dựng cấu trúc hoạt động cho Framework đó. Chúng ta có tổng cộng hơn 20 loại Design Pattern và mỗi loại sẽ có những ưu điểm và tác dụng trong một trường hợp cụ thể. Đương nhiên la thực tế ta không thể sử dụng hết các mẫu Pattern đó được. Thường ta hay sử dụng nhất là mẫu Adapter và Singleton.

Trong chuyên đề này mình sẽ giới thiệu với các bạn lần lượt từng bài một và mỗi bài sẽ nói về một mẫu Design pattern PHP, sẽ có phần lý thuyết và ví dụ minh họa cụ thể. Thực tế mà nói thì mình cũng đang nghiên cứu và ôn lại kiến thức này nên sẵn viết lại để chia sẻ với các bạn và làm tài liệu cho cá nhân, vì vậy nếu có gì sai sót mong các bạn thông cảm.

Nếu bạn đang mê lập trình thì chắc chắn bạn sẽ không thể bỏ qua chuyên Design Pattern trong PHP đề này được, mình tin là như vậy :D

Bài xem nhiều