Hướng dẫn install css - cài đặt css

Dẫn nhập

Ở bài trước chúng ta đã cùng làm quen với WIREFRAME & TẠO FOLDERS CHO PROJECT.

Trong bài học ngày hôm nay, chúng ta sẽ cùng nhau Setup file CSS và HTML.Setup file CSS và HTML.

Nội dung

Để đọc hiểu bài này tốt nhất, bạn nên xem qua các nội dung: 

• TỔNG QUAN HTML CƠ BẢN
• TỔNG QUAN CSS CƠ BẢN
• CẤU TRÚC MODEL BOX TRONG CSS

Trong bài này, Kteam sẽ cùng bạn tìm hiểu các nội dung: 

• Chọn màu cho website.
• Setup file HTML và CSS
• Giới thiệu về các yếu tố chính trong responsive, giới thiệu grid.css

Lưu ý: Bài viết nhằm tóm tắt nội dung thực hiện project & giúp bạn nắm bắt các phần được hướng dẫn một cách đơn giản nhất. Tuy nhiên, hãy theo dõi video để học hỏi các kiến thức và kỹ thuật chi tiết nhất từ tác giả. Bài viết nhằm tóm tắt nội dung thực hiện project & giúp bạn nắm bắt các phần được hướng dẫn một cách đơn giản nhất. Tuy nhiên, hãy theo dõi video để học hỏi các kiến thức và kỹ thuật chi tiết nhất từ tác giả.

Chọn màu cho website

Do mình chọn tông màu chính của website là xanh (blue) nên mình google Blue color scheme để có được các màu phù hợp để sử dụngxanh (blue) nên mình google Blue color scheme để có được các màu phù hợp để sử dụng

Và đây sẽ là các màu chính mà chúng ta sẽ sử dụng trong thiết kế project.

Setup File HTML

Setup bình thường như ở các bài trước.

Thêm các đường link của font chữ (font Lato) và fontawesome( font giúp bạn tạo icons 1 cách dễ dàng) và file styles.css.font chữ (font Lato) và fontawesome( font giúp bạn tạo icons 1 cách dễ dàng) và file styles.css.

Giới thiệu font awesome

Là font chữ mà bạn có thể chỉnh như kiểu chữ text bình thường, giúp tạo icon hoặc label dễ dàng cho website, được sử dụng rất phổ biến.

Ví dụ thực tế sử dụng fontawesome

Setup File CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background-color: #ffffff;
    color: #5a5a5a;
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    text-rendering: optimizeLegibility;
}

Giới thiệu về các yếu tố chính trong responsive, giới thiệu grid.css

Lưu ý: Bài viết nhằm tóm tắt nội dung thực hiện project & giúp bạn nắm bắt các phần được hướng dẫn một cách đơn giản nhất. Tuy nhiên, hãy theo dõi video để học hỏi các kiến thức và kỹ thuật chi tiết nhất từ tác giả.

• Chọn màu cho website
• Do mình chọn tông màu chính của website là xanh (blue) nên mình google Blue color scheme để có được các màu phù hợp để sử dụng
• Và đây sẽ là các màu chính mà chúng ta sẽ sử dụng trong thiết kế project.

Setup File HTMLgrid.css

Setup bình thường như ở các bài trước. http://www.responsivegridsystem.com

Thêm các đường link của font chữ (font Lato) và fontawesome( font giúp bạn tạo icons 1 cách dễ dàng) và file styles.css.

Giới thiệu font awesome

Là font chữ mà bạn có thể chỉnh như kiểu chữ text bình thường, giúp tạo icon hoặc label dễ dàng cho website, được sử dụng rất phổ biến.

Ví dụ thực tế sử dụng fontawesome grid.css đã để sẵn trên phần mô tả bài học này trên trang HowKteam

Setup File CSS

Có 3 yếu tố chính tạo nên responsive:PROJECT THAM KHẢO ở link bên dưới! 

Grid, hay hệ thống lưới

Hình ảnh scale theo màn hình

Media queries

Giới thiệu về grid.cssLuyện tập – Thử thách– Không ngại khó”.

Link tìm hiểu: http://www.responsivegridsystem.com

Ví dụ:Kteam hỗ trợ tính năng lưu trữ nội dung bài học Setup file CSS & HTML dưới dạng file PDF trong link bên dưới.

Cài grid.css

Các bạn có thể download trực tiếp trên trang chủ của nólike hoặc +1 Google để ủng hộ Kteam và tác giả nhé! 

Hoặc có thể sự dụng file grid.css đã để sẵn trên phần mô tả bài học này trên trang HowKteam

Project tham khảo 

Hoặc có thể sự dụng file grid.css đã để sẵn trên phần mô tả bài học này trên trang HowKteam

Project tham khảo