Lập trình Front End cơ bản với website L...

Lập trình Front End cơ bản với website Landing Page

Tìm hiểu về CSS và các cú pháp cơ bản của CSS Tìm hiểu về CSS và các cú pháp cơ bản của CSS Tìm hiểu về CSS và các cú pháp cơ bản của CSS Tìm hiểu về CSS và các cú pháp cơ bản của CSS Tìm hiểu về CSS và các cú pháp cơ bản của CSS 0/5 (4 reviews)

Tìm hiểu về CSS và các cú pháp cơ bản của CSS

Đã đăng 2018-11-01 16:19:13 bởi Kteam
0 bình luận 729 lượt xem
Tìm hiểu về CSS và các cú pháp cơ bản của CSS 0 /5 stars (0 reviews)
 

Dẫn nhập

Ở bài trước mình đã giới thiệu đến các bạn TỔNG QUAN VỀ HTML và các cú pháp cơ bản của HTML. 

Trong bài này chúng ta sẽ cùng tìm hiểu về Tổng quan CSS và các cú pháp cơ bản của CSS.


Nội dung

Để theo dõi bài viết này tốt nhất, bạn nên có kiến thức về

Trong bài hướng dẫn này, chúng ta sẽ cùng tìm hiểu về các vấn đề

  • Giới thiệu về CSS
  • Cài đặt extension Live Server
  • Cách chèn CSS vào website
  • Giới thiệu về block element, inline element (sử dụng display: block)
  • Thêm font chữ, font size cho bài blog, sử dụng google font

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ả.


Giới thiệu về CSS

CSS là viết tắt của Cascading Style Sheet,  nó giúp tạo nên màu sắc hình ảnh, kiểu dáng, … cho trang HTML. Việc sử dụng CSS thay cho định dạng trực tiếp trên file HTML giúp bạn tiết kiệm rất nhiều công sức và có thể kiểm soát bố cục, hiệu ứng của nhiều phần tử, trang web cùng lúc một cách hiệu quả.


Cài đặt extension Live Server

Để việc thao tác của bạn được dễ dàng hơn, Kteam khuyến khích bạn cài đặt Extension Live Server – giúp bạn tạo ngay một web server bên trong VSCode, hỗ trợ live reload. Rất tiện khi tạo layout HTML và tiết kiệm thời gian khi bạn code.

Bạn chọn nút Extension trên Visual code > tìm kiếm “live server” như trong hình:

Chọn Extension Live Server hiển thị trong danh sách & chọn Install

 


Cách chèn CSS vào trang HTML

Có 3 cách chèn CSS vào trang HTML

Cách 1: Chèn trong cặp thẻ đóng mở <style></style>

<head>
    <title>HTML cơ bản</title>
    <style>
    h1{
        color:red;
    }
    </style>
</head>

Cách 2: Chèn CSS ngay trong các dòng HTML bằng thuộc tính style=””

<h1 style="color: red;">HOWKTEAM BLOG</h1>

Cách 3: Chèn CSS bằng file .css 

Chèn link file style.css vào file index.html được đặt bên trong thẻ <head></head>:

<link rel="stylesheet" href="/redirect?Id=80VoWYnoTgzTzlhQu43y7A%3d%3d">

Thuộc tính trong file style.css như sau:

h1{

    color: red;

}

Ta được kết quả như sau: 

            


Giới thiệu về block element, inline element

Block chiếm toàn bộ khoảng trắng mà nó có thể chiếm theo bề ngang (các thể h1, h2, thẻ p, … có mặc định là block element)

Còn inline thì có thể cho các phần tử hiển thị trên cùng 1 dòng ngang (các thẻ img, thẻ input, textarea, …. Có mặc định là inline element )

Tiếp mình sẽ chỉnh thuộc tính của textarea từ inline thành display: block trong file style.css;

textarea{

    display: block;

}

Kết quả ta có:


Thêm font chữ, font size cho bài blog.

Cách sử dụng google font

Vào trang chủ của google font ở đường link bên dưới

https://fonts.google.com/

Tìm kiếm font mong muốn & nhấn vào biểu tượng + để chọn font

Tùy chỉnh font chữ & copy link vào HTML 

Cuối cùng chèn đường dẫn vào file index.html

<link href="/redirect?Id=HhwCEYIrCJMyzQaOUKiwNn9%2fWCbkaR3O32XUy4zYquBiLHBEihYvtMuNlHWJcI13DJaARJd53%2bUZSjsGlpwlkA%3d%3d" rel="stylesheet">

Định dạng Font-family, font-weight, font-size trong file style.css :

h1{

    color: blue;

    font-family: 'Lato', sans-serif;

    font-weight: 900;

    font-size: 50px;

}

Ta được kết quả như sau

 


Project tham khảo 

Nếu việc thực hành theo hướng dẫn không diễn ra suôn sẻ như mong muốn. Bạn cũng có thể tải xuống PROJECT THAM KHẢO ở link bên dưới! 


Kết luận

Ở bài học này, chúng ta đã tìm hiểu về CSS, cách chèn CSS và 1 số thuộc tính của CSS.

Ở bài sau, chúng ta sẽ cùng tìm hiểu về CÁC CÁCH SỬ DỤNG MÀU TRONG CSS.

Cảm ơn bạn đã theo dõi bài viết. Hãy để lại bình luận hoặc góp ý của mình để phát triển bài viết tốt hơn. Đừng quên “Luyện tập – Thử thách – Không ngại khó

 

 


Tài liệu 

Nhằm phục vụ mục đích học tập Offline của cộng đồng, Kteam hỗ trợ tính năng lưu trữ nội dung bài học Tìm hiểu về CSS và các cú pháp cơ bản của CSS dưới dạng file PDF trong link bên dưới.

Ngoài ra, bạn cũng có thể tìm thấy các tài liệu được đóng góp từ cộng đồng ở mục TÀI LIỆU trên thư viện Howkteam.com

Đừng quên like hoặc +1 Google để ủng hộ Kteam và tác giả nhé! 


Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng. 

 

Chia sẻ:
Thảo luận Hỏi và đáp Báo lỗi bài viết
Hủy bỏ   hoặc  
Hủy bỏ   hoặc  
Hủy bỏ   hoặc  

Chiến dịch

Kteam - Howkteam Free Education