Giới thiệu về CSS Basic

Ngày đăng: 03/10/2018 - Cập nhật: 07/12/2020

Mục Lục

Giới thiệu về CSS Basic
CSS có thể giúp bạn kiểm soát các thành phần sau
Cách áp dụng CSS vào trong trang web của bạn
Kết luận

Giới thiệu về CSS Basic

Cascading Style Sheets (hay còn gọi tắt là CSS) cho trình duyệt biết cách hiển thị văn bản và nội dung khác mà bạn viết bằng HTML ra cho người sử dụng như thế nào.

Lưu ý rằng CSS phân biệt chữ hoa chữ thường nên hãy cẩn thận với cách viết hoa của bạn. CSS đã được tất cả các trình duyệt chính chấp nhận và cho phép bạn kiểm soát. Nếu bạn muốn, có thể kiểm tra phiên bản CSS được trình duyệt nào hỗ trợ tại đây

CSS có thể giúp bạn kiểm soát các thành phần sau

color (màu sắc)
fonts (các loại font)
positioning (vị trí các phần tử)
spacing (khoảng cách các phần tử)
sizing (kích cỡ các phần tử)
decorations (trang trí)
transitions (chuyển động)

Cách áp dụng CSS vào trong trang web của bạn

Có ba cách chính để áp dụng CSS cho trang web của bạn.

Cách #1: CSS kiểu Internal style (nội tuyến)

Bạn có thể áp dụng kiểu nội tuyến trực tiếp cho các phần tử HTML với thuộc tính style.

Cú pháp:

		
		<style>

		    /* Đây là code CSS của bạn */

		</style>

Cách #2: CSS kiểu Inline style (CSS trực tiếp)

Bạn có thể đặt luôn CSS trong các thẻ html. Đây là kiểu CSS được ưu tiên cao nhất (nhưng hạn chế sử dụng vì nó khiến CSS lẫn với HTML. Khó sửa chữa, nâng cấp sau này)

Ví dụ:

	
	<div style="backgound: black; color:white;">Đây là nội dung thẻ div</div>

Cách #3: CSS kiểu External style (Ngoại tuyến)

Cuối cùng, bạn có thể viết các quy tắc CSS trong một file CSS riêng ở bên ngoài, sau đó tham chiếu tệp đó trong tài liệu HTML như sau:

		
		<!-- Link đến file CSS cùng thư mục file HTML -->

		<link rel="stylesheet" href="1.css">

		<!-- Link đến file CSS nằm trong thư mục style đồng cấp với thư mục chứa file index.html -->

		<link rel="stylesheet" href="./style/1.css">

		<!-- Link đến file CSS nằm trong thư mục cao hơn thư mục chứa file HTML -->

		<link rel="stylesheet" href="../1.css">

Kết luận

Thông thường thì File index.html sẽ được đặt đồng cấp với các thư mục cao nhất, ví dụ như sau:

Folder A
images
CSS
Javascript
index.html

Sau đó trong thư mục CSS chúng ta mới đặt file CSS, ví dụ: home.css

Mặc dù hai cách Internal Style và Inline Style cũng được sử dụng và có ưu điểm riêng của chúng, nhưng hầu hết các lập trình viên đều thích các trang kiểu External Style vì chúng tách biệt các file CSS với các nội dung khác.

Điều này cải thiện khả năng đọc và khả năng sử dụng lại code của bạn.

Ý tưởng đằng sau CSS là bạn có thể sử dụng bộ chọn (selector) để nhắm đến một phần tử HTML nào đó đã được định nghĩa trong DOM (Document Object Model) và sau đó áp dụng nhiều thuộc tính kiểu cho phần tử đó để thay đổi cách hiển thị của chúng trên trang.

Trong hướng dẫn căn bản nhất về CSS này, bạn sẽ thấy cách thêm các kiểu CSS vào các phần tử của ứng dụng CatPhotoApp của bạn có thể thay đổi nó từ văn bản HTML đơn giản thành một cái gì đó đẹp hơn.

Vậy trên đây tôi đã giới thiệu về CSS và cách kết nối file CSS điều chỉnh kiểu cho HTML. Chúng ta hãy cùng sang bài tiếp theo để cùng tìm hiểu một số thuộc tính cơ bản của CSS.

> Nếu bạn muốn học lập trình web nhanh hơn thì tham gia ngay KHÓA HỌC LẬP TRÌNH WEB tại NIIT - ICT Hà Nội.

---

HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI

Học Lập trình chất lượng cao (Since 2002). Học thực tế + Tuyển dụng ngay!

Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội

SĐT: 02435574074 - 0914939543

Email: hello@niithanoi.edu.vn

Website: https://niithanoi.edu.vn

Fanpage: https://facebook.com/NIIT.ICT/

#niit #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #php

Về trang trước Bài tiếp theo

Gửi email in trang