Chia sẻ kinh nghiệm tự học CSS [NEW]

Chia sẻ kinh nghiệm tự học CSS [NEW]Cách đây không lâu, mình có mở chuyên mục Phát triển web trên blog để viết các bài liên quan về phát triển web, trước hết mình sẽ tập trung nhiều vào CSS vì dù bạn phát triển hay thiết kế website trên nền tảng nào. Bất kể nền tảng nào, CSS vẫn là thứ quan trọng nhất. HTML cũng quan trọng nhưng mình nghĩ nếu bạn chịu khó “cày” thì khoảng 2 tuần sau bạn sẽ tiếp thu tốt vì nó cũng khá dễ học, nhưng đối với CSS thì khác. Học CSS là một quá trình không bao giờ kết thúc mà bạn có thể sẽ học từ ngày này qua ngày khác, bởi vì nó không phải là khó, mà là có khá nhiều thủ thuật bạn có thể học khi đọc các blog chuyên về CSS.

Nhưng có một vấn đề mà tôi quan sát thấy, có vẻ như nhiều người ở đây vẫn chưa thực sự hiểu về CSS cơ bản, đó là tôi nói thật. Có rất nhiều tài liệu CSS cơ bản trên internet Sau đó, có lẽ tôi sẽ không viết tiếp trên blog của mình vì nếu bạn chưa xem hoặc không xem được những tài liệu đó thì dù có đăng bài báo gì đi chăng nữa thì cũng vô ích. Nhưng trong bài viết này, tôi sẽ chia sẻ nó với bạn trải nghiệm tự học CSS rất hữu ích và thú vị mà mình đã sử dụng, nhờ trải nghiệm này mà mình đã phần nào nắm được CSS mặc dù mình chưa từng đọc sách nào về CSS, vì mình cũng giống bạn – lười quá! :nhìn xuống:

Cần chuẩn bị những gì trước khi học CSS?

[alert color=”orange” type=”alert-message-background” title=”Đã có serie học CSS cơ bản” size=”small”]ThachPham.Com có ​​chuỗi học CSS cơ bản trên văn bản và video rất đầy đủ. Bạn có thể xem nó ở đây.[/alert]

Trên thực tế, vì CSS là một trong những ngôn ngữ thiết kế web cơ bản nhất nên không cần nhiều kiến ​​thức nền tảng để học nó. Bạn chỉ cần nắm bắt Kiến thức HTML cơ bảnnếu bạn có thể đọc tiếng Anh (nên luyện đọc nếu cần), bạn có thể xem Hướng dẫn HTML tại W3School.

Và một số nữa mà bạn cũng cần chuẩn bị như sau:

  • Google Chrome đã cài đặt tiện ích mở rộng Nhà phát triển web.
  • Đọc sơ qua về khái niệm, như CSS là gì, nó có ăn được không.
  • Một IDE hỗ trợ viết HTML và CSS tốt nhất – Newbie nên sử dụng Notepad ++.
  • Lưu Color Hex Color vào thanh dấu trang để lấy mã màu khi cần.
  • Cài đặt thêm Firefox, Safari, IE trên máy tính nếu bạn muốn. Vì cơ bản đến lúc đổi gió cho vui nhưng mới bắt đầu thì quên sửa code cho phù hợp với từng trình duyệt cũ.

Đó là tất cả bây giờ, cuối bài viết tôi sẽ đính kèm một số trang web khác rất hữu ích khi học CSS. Bây giờ chúng ta hãy bắt đầu với phần chính.

1. Cách nhúng CSS vào trang web

Nếu đang sử dụng WordPress, cách đơn giản nhất là bạn có thể ghi thêm CSS vào tệp style.css trong thư mục theme hoặc bạn có thể thực hiện theo cách thông thường có thể áp dụng ở mọi nơi là tạo tệp .css. (ví dụ: hoc_css.css) và nhúng nó vào trang web của bạn bằng cách chèn đoạn này vào giữa các cặp thẻ trong trang web của bạn.

[html][/html]

2. Tìm hiểu khái niệm lựa chọn CSS

Trong CSS, điều quan trọng đầu tiên là bạn cần hiểu khái niệm về vùng chọn để có thể viết đúng mã cho một đối tượng trên website. Điều quan trọng là hầu như khi viết CSS, bạn cần viết vùng chọn cho nó từng dòng, nên mình xin nói sơ qua ở đây để các bạn dễ hiểu rồi đi sâu vào tìm hiểu các thuộc tính của nó. sau.

Khi bạn viết CSS, nó thường sẽ giống như sau:


vùng_chọn { //Mở đầu một đoạn CSS
thuộc_tính_1: giá trị;
thuộc_tính_2 (nếu có): giá trị;
thuộc_tính_n (nếu có): giá trị;
} //Kết thúc một đoạn CSS

Như một ví dụ thực tế, bây giờ tôi có một tài liệu HTML như sau.

[CodePen height=350 show=html href=Ciuvq user=thachpham92 ]

Lời khuyên: Bạn có thể nhấp vào thẻ Kết quả và CSS để xem rõ ràng hơn.

Nếu tôi muốn thay đổi màu sắc và độ đậm của các liên kết trong trang web, có một CSS đơn giản như sau:


a {
font-weight: bold; //Thuộc tính in đậm chữ
color: red; //thuộc tính thêm màu chữ
}

Bây giờ bạn sẽ thấy, tất cả các liên kết trong trang web đều được in đậm và chuyển sang màu đỏ.

Nhưng bây giờ tôi muốn liên kết mà Kênh 14, Google có màu xanh lam, vậy thì sao? Đừng nói với tôi rằng bạn viết một thẻ HTML như trong đó. Bạn cũng có thể làm điều đó, nhưng vì tôi đang giải thích về CSS trong bài đăng này, tôi sẽ sử dụng CSS.

Bạn nhấp qua phần HTML của đoạn mã nhúng trên, bạn sẽ thấy mình chia liên kết thành một thẻ p riêng biệt với một lớp gọi là lien_ket. Như vậy, chúng ta có thể hiểu phần Link này là một vùng chọn riêng biệt, muốn viết CSS cho nó mà không ảnh hưởng đến các phần tử khác trong trang thì chúng ta phải khai báo vùng chọn của nó. để trình duyệt có thể hiểu đối tượng mà chúng tôi đang hướng tới. Trong phần liên kết, chúng ta có một lớp tên là lien_ket, vì vậy để chuyển các liên kết trong lớp lien_ket này thành màu xanh lá cây, chúng ta có thể viết CSS dưới dạng


.lien_ket a {
color: blue;
}

Và kết quả bây giờ sẽ như thế này

[CodePen height=300 show=result href=Ciuvq user=thachpham92 ]

Vậy đó, đơn giản vậy thôi. Thực ra phần chọn không chỉ có nhiều thế này mà tôi chỉ là gợi ý cho các bạn mới tìm hiểu nên tôi sẽ không nói rõ ở đây, các bạn có thể tìm hiểu thêm về lựa chọn CSS tại CSS Selector – W3Schools.

Tự học CSS với trình duyệt Google Chrome

Với mình, trước đây mình chưa biết gì về CSS nên nhảy vào thực hành mà không cần đọc qua lý thuyết, vì học công nghệ, đặc biệt là lập trình, đọc lý thuyết không còn nhàm chán nữa dù nó rất quan trọng. quan trọng là phải có một nền tảng vững chắc. Nhưng thay vì chỉ đọc, tại sao chúng ta không bắt đầu mò mẫm trước và nếu chúng ta không hiểu hoặc muốn hiểu nguyên nhân tại sao nó có thể làm được như vậy, thì chúng ta có thể tìm đến các tài liệu lý thuyết? Thực tế, tôi đã học theo cách đó và thấy rất hiệu quả. Không cần nhiều công cụ, chỉ cần một Google Chrome là đủ.

Vậy bạn học như thế nào?

Sau khi bạn hiểu vùng chọn là gì trong CSS, bạn có thể bắt đầu áp dụng cách này ngay lập tức. Ví dụ, bạn thấy tiêu đề bài viết trên blog của mình có hiệu ứng đổ bóng rất đẹp nhưng không biết viết CSS như thế nào để nó trông như vậy thì bôi đen tiêu đề blog của bạn và nhấp chuột phải -> Kiểm tra các phần tử. Bây giờ một bảng điều khiển khác sẽ xuất hiện như thế này

Cách tự học CSSBạn sẽ thấy ở cột bên trái là cấu trúc HTML của web và ở bên phải là các thuộc tính CSS được sử dụng cho vị trí bạn đang đánh dấu bằng màu xanh lam ở phía bên trái. Bạn thử thay đổi vị trí lựa chọn, bạn sẽ thấy nội dung bên tay phải bị thay đổi.

Quay trở lại tiêu đề, bạn có thể thấy rằng ở bên phải bạn đã viết nhiều vùng chọn khác nhau trong một đoạn CSS, nó hiển thị đậm, thì vùng chọn đó đang hoạt động. Bây giờ, hãy tò mò một chút, nhấp theo cách thủ công vào các giá trị ở phía bên tay phải và thay đổi nó. Bạn sẽ thấy đối tượng bạn đã chọn trên trang web sẽ bắt đầu thay đổi và có thể nhảy xung quanh: sad :. Ví dụ: nếu bạn giảm giá trị của thuộc tính font-size, bạn sẽ thấy văn bản thu nhỏ ngay lập tức hoặc bạn có thể thử với bất kỳ thuộc tính nào mà bạn thấy nó được hiển thị.

Lúc này, các tài liệu CSS trực tuyến sẽ khá giá trị cho bạn. Ví dụ: bạn thấy thuộc tính text-shadow nếu bạn không biết nó là gì, chỉ cần Google nó bằng TIẾNG ANH như “bóng văn bản css”Chẳng hạn, bây giờ sẽ có các tài liệu được hiển thị và bạn có thể đọc nó để hiểu ý nghĩa của nó. Tôi đảm bảo với bạn rằng, nếu bạn chăm chỉ học theo phong cách này, bạn sẽ sớm nhớ được rất nhiều thuộc tính CSS, đặc biệt là các thuộc tính quan trọng nhất vì bạn nhìn thấy chúng lặp đi lặp lại.

Thực hành – Cách duy trì kỹ năng

Có một sự thật không thay đổi khi học bất kỳ môn học nào trong Công nghệ thông tin đó là thực hành chính là cách học chuyên ngành này. Ngoài việc đọc lý thuyết và tự học thuộc tính CSS như tôi đã trình bày, bạn cũng nên dành vài ngày trong tuần để thực hành dựa trên kiến ​​thức đã học hoặc làm theo hướng dẫn của các bài hướng dẫn trên mạng.

Tải xuống phần mềm ngay bây giờ Notepad ++ để hỗ trợ bạn viết CSS hoặc HTML vì ưu điểm của công cụ này là dung lượng nhẹ, dễ sử dụng và miễn phí. Nhưng nếu bạn có điều kiện hoặc không ngại rắc rối thì có thể sử dụng phần mềm PHPDesigner, tuy mang thương hiệu PHP nhưng ngoài PHP ra nó còn hỗ trợ bạn viết nhiều ngôn ngữ khác, kể cả CSS và CSS3.

Có một việc đơn giản nhưng khá quan trọng để bạn đỡ phải lười mỗi khi luyện tập CSS, đó là chuẩn bị sẵn một số (hoặc chỉ một) file HTML ví dụ để bạn có thể thực hành nhanh chóng, bạn có thể tham khảo thêm. Tham khảo Ví dụ HTML này.

Ngoài ra, đọc các hướng dẫn và mẹo / thủ thuật CSS cũng là một cách hay để cập nhật các thủ thuật CSS hay và các kỹ thuật thực tế. Một số blog / website chuyên về CSS mà bạn có thể tham khảo và theo dõi là:

  • Thủ thuật CSS
  • Sniplr
  • Thiết kế web Tutplus
  • Stubbornella
  • SmashingMagazine
  • Blog 1stWebDesigner

Một số tài nguyên quan trọng cho CSS

  • CSSPop – Một thư viện các đoạn mã cho CSS.
  • CSS Dochub – Ý nghĩa của các thuộc tính CSS.
  • Thuộc tính CSS – Giải thích các loại giá trị trong thuộc tính CSS.
  • CSS Easy – Mẫu bố cục web đơn giản. Cách sử dụng là chọn bố cục để sử dụng và View Source để lấy mã.
  • CSS3 Clickchart – Giải thích ý nghĩa của các thuộc tính trong CSS3, với các ví dụ cụ thể.
  • Color Hex – Thư viện mã hóa màu.
  • CSS3 Selector Explained – Giải thích cách sử dụng các quy tắc lựa chọn trong CSS3.
  • Ultimate CSS3 Gradient – Trình tạo nền CSS3 gradient đáng sử dụng.
  • CSS3 Marker – Tạo mã CSS3 của riêng bạn một cách nhanh chóng.
  • Top 11 trình soạn thảo CSS tốt nhất – Danh sách các công cụ viết CSS tốt nhất.

Tài liệu học CSS tiếng Việt

  • Tạo Giao diện Cơ bản với CSS – Tôi nghĩ bạn sẽ học được nhiều điều trong video này.

Phần kết

Nếu bạn đang tìm kiếm một bài hướng dẫn CSS cơ bản, bạn có thể sẽ thất vọng sau khi đọc bài viết này, nếu bạn mắng tôi, tôi sẽ chấp nhận. Nhưng thay vì tôi lặp lại những lý thuyết đã được rất nhiều người viết trên mạng, nó giống nhau, chẳng ích gì, nếu bạn đã học nó, bạn sẽ không phải đến đây. Vì vậy, tôi chỉ chia sẻ với các bạn cách học hiệu quả nhất mà tôi đã và vẫn đang áp dụng hàng ngày, vì chỉ có như vậy, sau này bạn mới có thể tiếp thu được những kiến ​​thức có nền tảng vững chắc. Nếu có CSS4, CSS5 thì không cần lo lắng vì tất cả các phiên bản CSS tiếp theo chỉ là thêm và cập nhật các thuộc tính CSS.

Hy vọng bạn có thể tìm được cách học CSS hiệu quả sau khi đọc bài viết này.

5/5 – (1 phiếu bầu)