CSS Cơ bản và Nâng cao - Tối giản (P1)
Bài đăng này đã không được cập nhật trong 3 năm
Như tiêu đề mình đã đề cập, chủ đề này mình sẽ chia sẻ về CSS cơ bản và nâng cao theo những gì mình đã học và đang học một cách tối giản nhất, có thể có nhiều thiếu sót, để tìm hiểu sâu hơn mọi người có thể tìm kiếm theo từ khóa ở các mục lớn trong bài. Cảm ơn mọi người đã theo dõi.
CSS là gì?
- Theo trang W3Schools, CSS viết tắt của Cascading Style Sheets.
- CSS mô tả cách các phần tử HTML được hiển thị trên màn hình hoặc các phương tiện khác.
- CSS giúp bạn kiểm soát bố cục của nhiều trang web cùng một lúc. Do đó nó tiết kiệm được rất nhiều thời gian cho bạn trong công việc.
1. Cú pháp cơ bản
Selector {property: value;}
Selector: đối tượng sẽ được áp dụng: VD: body, h1, h2, img, .username, #title…
Ngoài viết tên selector theo class, id, tag. Chúng ta có thể viết tên selector theo phân cấp để chỉ các ảnh trong #entry. VD: #entry img.
VD 1 đoạn mã về input
<input name = "Search" type = "text" value = "Key Word">
Để áp dụng CSS cho riêng thuộc tính tìm kiếm này, ta dùng input[name= “Search”]
Dùng selector ảnh hưởng đến toàn trang web * {color: red}
Property: các thuộc tính quy định cách trình bày: VD: background-color, font-family, color, padding,..
Value: giá trị của thuộc tính: VD: #FFF định màu trắng cho nền trang.
2. Chú thích trong CSS
Chú thích (comment) sẽ được trình duyệt bỏ qua và không hiển thị trên trang web. Sử dụng cấu trúc /*.........*/ ở trên 1 dòng hoặc nhiều dòng để chú thích. VD:
/* Style for image */
Ngoài ra để viết chú thích nhanh hơn, bạn hãy gõ đoạn text bạn cần chú thích, sau đó bôi đen và sử dụng cú pháp Ctrl + / để tạo chú thích.
3. Nhúng CSS vào HTML
Có 3 cách để thêm CSS vào file HTML
- External CSS: viết CSS ở một file riêng, đặt tên là
<name>.css, sau đó sử dụng thẻlinkđể nhúng file này vào trong phần<head>của file html.
VD: file myStyle.css:
h1
{
color: white;
background–color: purple;
}
.content
{
color: red;
background–color: white;
text-align: center;
}
file html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="myStyle.css">
</head>
<body>
<h1>H1 works!</h1>
<p class="content">p work!.</p>
</body>
</html>
- Internal CSS: đặt trong mục
headcủa file html, được cấu trúc bằng cặp thẻ<style></style>
VD: file html
<!DOCTYPE html>
<html>
<head>
<style>
h1
{
color: white;
background–color: purple;
}
.content
{
color: red;
background–color: white;
text-align: center;
}
</style>
</head>
<body>
<h1>H1 works!</h1>
<p class="content">p work!.</p>
</body>
</html>
- Inline CSS: áp dụng trực tiếp vào phần tử. CSS bằng cách này không được khuyến khích, việc quản lý file sẽ rất khó nếu chỉ sử dụng
Inline CSS, vì nó chỉ áp dụng cho một element duy nhất.
VD: file html
<!DOCTYPE html>
<html>
<body>
<h1 style="color:white; background–color: purple;">H1 work!</h1>
<p style="color:red; background–color: white; text-align: center;">p works!</p>
</body>
</html>
4. Đơn vị CSS:
Đơn vị chiều dài
%: phần trăm, là đơn vị tham chiếu tỉ lệ so với một phần tử mẹ dựa vào kích thước.in: inch (1 inch = 2,54 cm)em: 1em tương đương với kích thước font chữ hiện hành, nếu font hiện hành có kích thước 14px thì 1em = 14pxex: 1ex bằng chiều cao của chữ x hiện hànhpt: Point (1pt = 1/72 inch)pc: Pica (1pc = 12pt)px: Pixel (điểm ảnh trên màn hình máy tính)cm: định nghĩa đơn vị đo bằng cmmm: định nghĩa đơn vị đo bằng mmvh: 1% chiều cao của khung nhìnvw: 1% chiều rộng của khung nhìn
5. Sự ưu tiên về vị trí đặt CSS
CSS Nội tuyến > CSS bên trong > CSS bên ngoài > CSS mặc định của trình duyệt
Thay đổi độ ưu tiên cho thuộc tính CSS:
selector {property: value !important}
Nếu cùng một thuộc tính cho một selector, nếu cả 2 đều có !important thì cái sau được lấy.
6. Background
6.1. Màu nền:: (background-color)
background-color: red;
6.2 Ảnh nền: (background-image)
background-image: url(avatar.png)
6.3 Lặp lại ảnh nền: (background-repeat)
background-repeat: no-repeat
+ repeat-x: /* Lặp lại theo phương ngang */
+ repeat-y: /* Lặp lại theo phương dọc */
+ repeat: /* Lặp lại theo 2 phương (Đây là giá trị mặc định) */
+ no-repeat: /* Không lặp lại ảnh */
6.4.Khóa ảnh nền: (background-attachment)
background-attachment: fixed
+ scroll: /* Ảnh nền cuộn xuống cùng nội dung trang web (Giá trị mặc định) */
+ fixed: /* Ảnh nền cố định khi cuộn nội dung trang web. */
6.5. Định vị ảnh nền: (background-position)
background-position: 5cm 2cm
/* Ảnh được định vị 5cm từ trái qua, 2cm từ phải qua */
Chúng ta có thể nhóm thuộc tính CSS:
background-color: transparent;
background-image: url(avatar.png)
background-repeat: no-repeat
background-attachment: fixed
background-position: right bottom
thành một dòng ngắn
background: transparent url(avatar.png) no-repeat fixed right bottom;
7. Font chữ
7.1. Font-family
Định nghĩa danh sách ưu tiên các font sẽ được dùng để hiện thị lên trang web.
Có hai loại font được chỉ định: family-names và generic families
+ family-names: Tên cụ thể của font: Roboto, Arial, Time New Roman…
+ generic families: Tên của một họ gồm nhiều font: sans-serif, serif,…
body {font-family: “Roboto”, sans-serif;}
7.2. Font-style
Định nghĩa việc áp dụng các kiểu in thường, in nghiêng, hay in xiên cho chữ.
h1 {font-style: italic;}
/* (normal, oblique) */
7.3. Font-variant
Được dùng để chọn chế độ bình thường và chế small-caps (chữ in hoa có kích cỡ nhỏ hơn chữ in hoa bình thường) của một font chữ.
h1 {font-variant: small-caps;}
7.4. Font-weight
Được dùng để chọn chế độ bình thường hay in đậm
h1 {font-weight: bold;}
7.5. Font-size
Được dùng để chỉnh kích thước font chữ
h1 {font-size: 14px;}
7.6. Rút gọn font:
Từ việc bạn viết
h1 {
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 14px;
font-family: “Roboto”, sans-serif;
}
thì có thể rút ngắn lại thành
h1 {font: italic small-caps bold 14px “Roboto”, sans-serif}
8. Text
8.1. Màu chữ (color)
Để định màu chữ cho một thành phần nào đó trên trang web
body {color: #FFF}
8.2. Text-indent
Tạo khoảng thụt đầu dòng cho dòng đầu tiên của văn bản
p {text-indent: 30px}
8.3. Text-align
Canh chỉnh văn bản cho các thành phần trong trang web. Có 4 giá trị: left (canh trái), right (canh phải), center (canh giữa), justify (canh đều).
p {text-align: justify}
8.4. Letter-spacing
Dùng để chỉnh khoảng cách giữa các ký tự trong một văn bản.
h1 {letter-spacing: 5px}
8.5. Text-decoration
Thêm các hiệu ứng: underline (gạch chân), line-through (gạch xiên), overline (gạch đầu), blink (hiệu ứng nhấp nháy).
h1 {text-decoration: overline}
8.6. Text-transform
Quy định chế độ in hoa hay in thường của văn bản mà không phụ thuộc vào văn bản gốc trên HTML. Có 4 giá trị: uppercase (in hoa), lowercase (in thường), capitalize (in hoa ký tự đầu tiên trong mỗi từ) và none (không áp dụng hiệu ứng).
h1 {text-transform: uppercase}
Tạm thời kết thúc phần 1 ở đây nhé. Cảm ơn mọi người đã xem bài.
All rights reserved
