Hướng dẫn css cơ bản
Serie hướng dẫn người mới làm quen với CSS để biết cách trang trí một website hoặc thiết kế bố cục website bằng CSS. Show Serie học CSS và CSS3 cơ bản miễn phí có video tiếng Việt kèm theo,serie nay các bạn sẽ học được các kỹ thuật về CSS cơ bản và cách dựng một layout website. Bài đầu tiên của serie học CSS cơ bản tại Thachpham.com. Giới thiệu sơ lược về CSS như CSS là gì, vai trò của nó trên một website và CSS hoạt động như thế nào. Cách nhúng CSS vào website với hai kiểu đó là Inline Styles và External Styles. Học CSS căn bản và làm quen với 5 kiểu tạo vùng chọn CSS cơ bản bao gồm vùng chọn dựa theo tên thẻ, vùng chọn dựa theo ID, vùng chọn class và vùng chọn thứ cấp. Tìm hiểu ý nghĩa các đơn vị đo lường thường được sử dụng trong CSS bao gồm px, %, pt, em và rem. Các thuộc tính định dạng văn bản cho website với CSS như căn lề văn bản, tạo văn bản đổ bóng, tùy chỉnh in hoa văn bản,… Tìm hiểu các thuộc tính CSS thường dùng để trang trí font chữ cho văn bản là font-family, font-weight và color. Tìm hiểu về phần tử Block và Inline trong HTML để dễ dàng xử lý khi học CSS cho việc xây dựng bố cục website. Thẻ div là gì và cách sử dụng thẻ div để phân khu vực trong website cho mục đích dàn trang với CSS. Box Model là thuật ngữ chỉ các thuộc tính margin, padding và border trong CSS để căn chỉnh khoảng cách cho các phần tử. Tìm hiểu các thuộc tính tùy chỉnh kích thước các phần tử trong CSS như width, height, min-width, max-width, min-height, max-height. box-sizing sẽ giúp bạn tùy chỉnh lại kích thước một phần tử đã bao gồm phần padding và border hoặc không bao gồm phần padding và border.
Học CSSCSS là ngôn ngữ dùng để định dạng cho các thẻ HTML, định dạng có thể sẽ là: chỉnh vị trí, chiều rộng, độ cao, màu sắc, font chữ, màu nền, hình nền, ..., có thể xem là công việc trang trí, làm cho trang web đẹp hơn, dễ nhìn hơn. CSS có hơn 20 bộ chọn và 50 thuộc tính khác nhau, nhưng sẽ có những bộ chọn và thuộc tính được sử dụng rất nhiều lần, nội dung bài học sẽ để cập tới những thuộc tính thường dùng, các bộ chọn và thuộc tính khác, các bạn có thể xem thể tại phần tham khảo CSS. Để tiện hình dung về CSS, chúng ta chia thuộc tính làm 3 nhóm:
Bạn có thể tham khảo nhiều thuộc tính hơn tại CSS. Bài tập CSS & CSS3Bài tập layout mẫuNội dung bài viết
Sau series HTML cơ bản dành cho người mới thì bây giờ mình lại tiếp tục tới một series cơ bản khác đó chính là CSS cơ bản. Sau khi học HTML cơ bản thì các bạn đã biết dùng tới các thẻ như thế nào rồi, mỗi thẻ được tạo ra với mục đích là gì, khác nhau giữa inline và block như thế nào… Sau khi chúng ta tạo được sườn của trang web với HTML thì việc tiếp theo là làm sao cho nó đẹp lên, trang trí cho nó như thế nào, tùy biến các kiểu ra sao… thì đây chính là công việc của CSS. Vậy trong CSS có những thuộc tính gì và nó hoạt động ra sao thì hãy cùng mình tìm hiểu dưới đây nha Chèn CSS vào HTML cơ bảnĐể viết được CSS thì việc đầu tiên các bạn cần làm là tạo một file có đuôi mở rộng là .css là được ví dụ như mình ở đây sẽ là main.css, sau đó chúng ta sẽ chèn nó vào HTML như thế này. Việc tạo file HTML rất là đơn giản nhé, tạo file main.html rồi gõ ! thì vscode emmet sẽ gợi ý ra cấu trúc chuẩn cho các bạn Chèn file main.css vào file main.htmlSau khi chèn CSS vào được file HTML rồi thì việc tiếp theo chúng ta cần làm đó chính là tìm hiểu về cấu trúc của một đoạn code CSS cơ bản là như thế nào nhé Selectors cơ bản cần nắmCấu trúc CSSNhư hình thì các bạn sẽ thấy cấu trúc mình ghi rõ ràng. Trong đó:
Thuộc tính ColorThuộc tính này dùng để đổi màu chữ cho trang web, chỗ nào các bạn dùng chữ thì có thể đổi màu được, và giá trị của nó là các mã màu, mã màu ở đây có thể là name(red, orange, blue…), hexa(#ffa400), rgb(255,255,255), hsl(39, 100%, 50%) tùy vào mục đích mà chúng ta sử dụng sao đó cho nó hợp lý Nếu các bạn muốn có màu chữ trong suốt thì nên dùng rgb hoặc hsl. Ví dụ với rgb thì các bạn có thể viết như thế này Thuộc tính background-colorCái này thì tương tự cho cái trên nên mình không có giải thích lại, chỉ khác cái là Thuộc tính text-alignThuộc tính này thì có 4 giá trị hay dùng, trong đó giá trị mặc định là Thuộc tính line-heightThuộc tính này sẽ làm tăng
hoặc giảm chiều cao của dòng chữ, ví dụ các bạn có đoạn chữ có font-size là Giá trị Thuộc tính letter-spacingỞ trên thì là khoảng cách giữa các dòng, vậy thì khoảng cách giữa các kí tự trong chữ thì sao nhỉ ? Chúng ta sẽ dùng Thuộc tính word-spacingNếu có khoảng cách giữa các kí tự thì
cũng sẽ có khoảng cách giữa các từ, tương tự như trên nhưng là thuộc tính khác Thuộc tính work-breakSau này khi các bạn đã có kiến thức và đi làm, đôi khi các bạn sẽ làm với những giao diện mà nội dung được người dùng nhập vào, và họ cố ý nhập các chữ dính nhau và làm giao diện chúng ta bị bể, như dưới này, cái khối màu xám mình chỉ cho độ rộng là Để giải quyết nó thì
chúng ta sẽ dùng thuộc tính Thuộc tính text-overflowTuy nhiên có một vài trường hợp theo giao diện thiết kế thì chữ nó phải nằm trên một hàng, và nếu dài quá cho phép thì ẩn đi và hiển thị dấu 3 chấm thì phải làm sao ? Đừng lo lắng việc đầu tiên chúng ta cần làm đó chính là làm sao để hiển thị một hàng cái đã. Để hiển thị chữ trên một hàng thì chúng ta sẽ dùng thuộc tính Tuy nhiên nó lại quay lại vấn đề khi trước là chữ bị tràn ra ngoài khối làm giao diện bị bể, để giải quyết nó chúng ta sẽ kết hợp thêm 2 thuộc tính là Mình tạm kết phần 1 ở đây, ở phần này thì các bạn cũng đã có hiểu biết chút chút về CSS là gì rồi cũng như biết cách chèn vào file HTML như thế nào, các selectors ra sao, cấu trúc của CSS, và học được khá nhiều thuộc tính cơ bản liên quan tới chữ. Hi vọng những kiến thức mình chia sẻ sẽ có ích cho các bạn khi bắt đầu học CSS nhen. Hẹn gặp lại các bạn ở phần 2. |