Position trong CSS dùng để định dạng vị trí của phần tử trên website. Khi sử dụng position các phần tử có thể đè lên nhau và được định dạng bằng 4 hướng là: top, right, bottom và left.

Phân loại: có 5 loại position

• Static
• Relative.
• Absolute.
• Fixed.
• Sticky.

Ở bài này, ta sẽ tìm hiểu 3 giá trị chính của position là relative, absolute và fixed nhé.

1. Relative

Relative là vị trị tương đối, phần tử sẽ lấy chính nó là góc tọa độ để định dạng vị trí và không phụ thuộc vào bất kì phần tử nào cả.

Cú pháp:

position: relative;
phương hướng: giá trị;
/* Phương hướng: top, right, bottom, left */

Ví dụ:

Ta thấy, phần tử ta định dạng position: relative đè lên các phần tử khác, ta có thể tùy chỉnh tùy ý để các phần tử không đè nhau.

Ta thấy trường hợp này thường áp dụng cho các ứng dụng có menu, giao diện thông báo, tin nhắn, …. Khi ta kích chuột vào nó sẽ hiện lên 1 menu đè lên giao diện trình duyệt.

2. Absolue

Absolute là một giá trị của thuộc tính position nó sẽ lấy góc tọa độ phụ thuộc vào phần tử cha gần nhất với nó mà có thuộc tính position.

Giả sử, ta có 2 phần tử khối hộp ta có #box2 là phần tử con của #box1, #box1 có thuộc tính position: relative, #box2 lại có thuộc tính position: absolute cho nên nó sẽ lấy góc tọa độ của #box1 để định dạng vị trí.

3. Fixed

Fixed là một giá trị định dạng phần tử dính sát đứng yên trong position, khi trình duyệt thay đổi (kích thước, scroll bar, …) thì phần tử đó vẫn mặc định dính sát đứng yên nhé.

Giả sử, ta tạo ra một thanh tiêu đề vào tạo ra thẻ ul với kích thước chiều dài là 2000px để hiển thị ra scroll bar để có thể tạo ra ví dụ dễ hiểu hơn về fixed.

Ta thấy, như clip ở trên khi ta kéo scroll bar đi thì thanh tiêu đề của chúng ta bị mất đi bây giờ ta muốn thanh tiêu đề của chúng ta dính luôn ở đầu trang khi ta kéo đi nó vẫn nằm ở đó thì ta sẽ sử dụng position: fixed nhé.

Ta thấy thanh tiêu nằm dính sát một chỗ và đè lên các phần tử khi ta kéo đi ngang qua nó. Để thanh tiêu đề lên nằm đầu trang ta đặt top bằng 0 (vì fixed phụ thuộc vào trình duyệt).

Ứng dụng của fixed ta có thể thấy thường được sử dụng cho các thanh công cụ, thanh tiêu đề của các website hoặc là của các ứng dụng mạng xã hội như: Facebook, Instagram, ….

Như vậy bài viết đến đây là kết thúc hẹn gặp lại các bạn ở những bài viết sau.

By VenusakaVXT

The post Bài 18-Position trong CSS appeared first on Sửa Máy Nhanh.

Các thuộc tính background trong CSS: background-image, background-origin, background-position, …. Mình sẽ đi tìm hiểu về từng thuộc tính background trong CSS nhé.

1. Background-image (Background hình ảnh)

Chả hạn, bây giờ mình muốn để 1 hình ảnh vào làm background cho trang web. Mình sử dụng thuộc tính background-image vào và dùng hàm url() truyền vào giá trị 1 đường link ảnh mình copy trên mạng nó sẽ được như thế này.

Ta thấy hình ảnh bị lặp lại nên để tắt trạng thái lặp lại hình ảnh ta dùng background-repeat và truyền vào giá trị no-repeat cho nó nhé.

Lưu ý: background-repeat này được dùng khi ta muốn tạo ra background mà có nhiều hình ảnh lặp lại mà vẫn theo một thể thống nhất thì ta sẽ dùng thuộc tính này thay vì phải chèn nhiều vô số hình ảnh vào 1 lúc.

Ta thấy, hình ảnh không bị lặp lại nữa nhưng mà hình ảnh vẫn không chiếm hết được nền của trình duyệt vẫn còn bị thừa nền nhiều nên ta thử sử dụng thuộc tính background-size với tham số 100% xem thử nhé.

Ta thấy hình ảnh đã được chiếm hết trong hình nền nhưng thuộc tính background-size này nó cũng phụ thuộc vào kích thước trình duyệt ở đây mình đưa giá trị 100% chỉ mới set cho chiều ngang của tấm ảnh giá sử ta thu nhỏ kích thước trình duyệt đi thì xem thử thế nào nhé.

Ta thấy khi thu nhỏ trình duyệt thì tấm ảnh chỉ chiếm hết phần chiều ngang của trình duyệt chứ chưa chiếm hết chiều dài của phần trình duyệt. Bây giờ, ta thử đưa thêm 1 thêm số vào phía sau để set chiều ngang cho tấm hình nhé.

Ta thấy khi đưa thuộc tính background-size: 100% 100% thì nó set cho cả chiều dài và chiều ngang cho tấm hình đúng với kích thước trình duyệt. Nhưng nếu khi ta truyền tham số vào quá lớn so với kích thước hình ảnh, thì tấm ảnh sẽ bị bể hình nhé.

Lưu ý: Trong background-size có 2 keyword dùng để set kích thước cho hình là:

• contain: hình ảnh vẫn giữ nguyên tỉ lệ khung hình nhưng được thay đổi kích thước để vừa với kích thước đã cho.
• cover: hình ảnh vẫn giữ nguyên tỉ lệ khung hình và lắp đầy kích thước đã cho nhưng hình ảnh sẽ được cắt bớt để phù hợp.

Một thuộc tính background có thể chứa được nhiều hình ảnh, hình nào được ghi lên trước thì hình ảnh đó sẽ có độ ưu tiên cao hơn.

Cú pháp:

background-image: url (hình ảnh 1), url (hình ảnh 2), ...

Ví dụ: Bên dưới mình chèn thêm hình ảnh vào và để nó ghi đầu tiên trước hình ảnh iron man ở trên thì hình ảnh nào được ghi trước sẽ đè lên hình ảnh ghi phía sau nhé.

Ngoài ra, chúng ta cũng có thể dùng thuộc tính background-image để tự tạo ra hình nền với những giải màu chuyển bằng phương thức linear-gradient().

Cú pháp:

/* ronate: nều là 0 độ thì ta ghi số 0,
    nếu lớn hơn 0 ta phải kèm theo đơn vị độ ở phía sau */
    background-image: linear-gradient(rotate(deg), màu sắc 1, màu sắc 2);

Chả hạn, bây giờ mình muốn tạo một hình nền chuyển màu xoay 90 độ từ màu đen sang màu trắng ta sử dụng linear-gradient() nhé.

Lưu ý: Nếu như bỏ thuộc tính góc xoay ta không truyền vào tham số cho nó thì nó sẽ mặc định góc quay là 180 độ nhé.

Chúng ta có thể sử dụng phương thức linear-gradient() và mix với hình ảnh để tạo ra hình ảnh trong suốt bằng cách thêm vào phương thức rgba() mà ta đã học ở những bài trước để làm được điều này.

2. background-origin

Ở trong background-color ta có các thuộc tính pading, border dùng để bao phủ và tăng độ dày cho phần tử. Và ta có thêm box-sizing để cân bằng kích thước giữa pading, border và phần tử với kích thước đã cho sẵn. Thì ở trong background-image ta cũng có thêm thuộc tính background-origin làm chức năng tương tự như vậy.

Đầu tiên, ta sẽ tạo padding và border cho phần tử sự dụng background-image nhé.

Ta Inspect vào phần tử background-image.

Ta thấy hình ảnh nằm ở trong phần padding luôn bởi vì background-origin đã mặc định điều này. Mặc định của nó là padding-box, ta thử ghi lại background-origin: padding-box thử xem có thay đổi gì không nhé.

Nó vẫn như cũ không thay đổi gì hết và vừa background-origin để mặc định hình ảnh nằm trong padding bây giờ ta muốn hình ảnh tràn vào phần border ta sử dụng giá trị border-box nhé.

Khi ta làm như vậy hình ảnh sẽ nằm luôn trong phần border-box nhé.

Lưu ý: Cũng như background-color không thể đổ màu sắc vào margin thì background-image cũng như vậy nó không thể đổ hình ảnh vào phần margin nhé.

3. background-position (Vị trí background)

Background-position dùng để xác định vị trí của phần tử background-image.

Ta có các hướng điều chỉnh như top (trên), right (phải), bottom (dưới), left (trái) và center (chính giữa) nhé.

Background-position nhận maximum là 2 giá trị, nếu như ta chỉ đưa cho nó 1 giá trị mặc định nó sẽ hiểu giá trị còn lại là center nhé.

Ví dụ: Ta muốn căn chỉnh hình nền sang hướng trên cùng góc bên phải ta dùng background-position: top right nhé.

Còn ta muốn để tấm hình căn ở chính giữa ta chỉ cần truyền vào 1 thuộc tính center thôi thì chương trình nó sẽ mặc định hiểu giá trị còn lại là center luôn nhé.

Ta có thể truyền giá tri tùy ý ta mong muốn vào ở sau hướng mà ta định dạng.

Lưu ý: Để hình chạy ngược lại ta dùng dấu trừ “-” đặt trước giá trị nó sẽ hiểu là giá trị âm nhé và hình sẽ chạy ngược lại theo hướng ta tùy chỉnh.

Ngoài ra, có thể kết hợp sử dụng cả giá trị tương đối và giá trị tuyệt đối nhé. Các giá trị sẽ được linh hoạt và hiển thị theo kích thước của trình duyệt nhé.

Ngoài ra, trong background-position còn có các giá trị như initial đặt phần tử về lại kích thước ban đầu hoặc inherit dùng để kế thừa giá trị của phần tử cha.

4. Cú pháp shorthand trong background

Giả sử như ta muốn viết ra hết các thuộc tính background cho hình ảnh thì chả lẽ ta cứ viết từng thuộc tính ra, như vậy sẽ rất là lâu nên ta sẽ viết shorthand để cho ngắn gọn dòng code hơn.

Cú pháp shorthand:

/* Đối với background color */
    background: màu sắc;
    /* Đối với background image */
    background: url([địa chỉ chứa hình ảnh]) [giá trị background-reapeat]
                [giá trị background-position] / [giá trị background-size] ;
    /* phải đặt dấu "/" trước background-size */

Ví dụ:

Lưu ý: Tuy ta sử dụng background-position: center nó sẽ căn chỉnh hình ở giữa cả chiều ngang và chiều dài. Nhưng do ta sử dụng thuộc tính background-size: contain nên nó sẽ ưu tiên kích thước đã mặc định cho trước.

Như vậy, ta đã tìm hiểu về background trong CSS và các thuộc tính của background. Bài viết đến đây là kết thúc hẹn các bạn ở bài sau.

By VenusakaVXT

The post Bài 17-Background trong CSS appeared first on Sửa Máy Nhanh.

Ba thuộc tính này mình đã có nhắc ở bài 6, Và cũng đã chỉ các bạn cách Inspect để xem được 3 thuộc tính này ở phần tử trên trang web các bạn có thể quay lại bài học trước để xem ở bài này mình sẽ không nhắc lại nữa.

Padding, border và margin chúng đều là thuộc tính trong CSS để hiểu rõ hơn các thuộc tính này dùng để làm gì có chức năng gì thì ta sẽ đi tìm hiểu từng thuộc tính nhé.

1. Padding (đệm)

Padding được dùng để tạo không gian xung quanh nội dung của phần tử, bên trong bất kỳ đường viền (border) nào đã xác định trước đó.

Các thuộc tính chỉ phương hướng dùng để đệm của padding gồm:

• padding-top
• padding-right
• padding-bottom
• padding left

Mình có một khối hộp được tạo ra như hình bên dưới. Mình cũng đã bật Inspect lên để tham chiếu đến phần đệm, viền và khoảng lề của khối hộp.

Phần nội dung có kích thước là 200×200 đó là mình đã định dạng trước đó trong css. Và ta thấy kích thước của padding, border, margin hiện tại đang bằng 0 tại vì ta chưa truyền giá trị cho nó bây giờ ta thử đưa giá trị vào padding xem thử nhé.

Ta thấy chiều dài và chiều rộng của khối hộp lớn hơn so với ban đầu vì mình đã thêm phần padding bọc xung quanh nó nên kích nó được tăng lên.

Như vậy ta đã thấy được mục đích khi sử dụng padding, tiếp theo mình sẽ chỉ cho các bạn 1 mẹo nhỏ giúp những dòng code viết ra được gọn gàng hơn khi set padding nhưng ý nghĩa vẫn đầy đủ.

Khi padding được gán bằng giá trị bất kì thì chương trình sẽ được hiểu là ta đã setup cho cả top right bottom và left là đều bằng giá trị đó nhé.

Còn đối với 2 tham số, thì nó sẽ hiểu là tham số đầu tiên là setup cho top và bottom, còn tham số thứ 2 là dành cho right và left.

Còn nếu 3 tham số thì sẽ là top rồi đến right và đến bottom.

Còn 4 tham số thì sẽ là top -> right -> bottom -> left. Thực ra, nó sẽ không khó nhớ đâu bạn cứ nhớ nó sẽ đi theo quy tắc chiều của kim đồng hồ là được nhé.

2. Border (viền)

Border dùng để tạo đường viền xung quanh phần tử. Nó cũng giống như padding cũng sẽ làm tăng kích thước của phần tử lên nhé.

Các thuộc tính chỉ phương hướng dùng để tạo đường viền border cho phần tử:

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

Các thuộc tính tạo đường viền của border như:

• border-radius: tạo đường tròn ở xung quanh 4 góc phần tử.
• border-block: tạo đường viền hình khối.
• border-image: tạo đường viền bằng hình ảnh.
• border-style: chỉ định loại đường viền sẽ hiển thị
• …

Các kiểu border trong border-style:

• dotted: Xác định một đường viền chấm.
• dashed: Xác định đường viền nét đứt.
• solid: Xác định một đường viền vững chắc (nếu không đưa giá trị vào mặc định đường viền mỗi bên bằng                  2pixel).
• double: Xác định đường viền kép.
• groove: Xác định đường viền có rãnh 3D (hiệu ứng phụ thuộc vào giá trị màu viền).
• ridge: Xác định đường viền có gờ 3D (hiệu ứng phụ thuộc vào giá trị màu viền).
• inset: Xác định đường viền chèn 3D (hiệu ứng phụ thuộc vào giá trị màu viền).
• outset: Xác định đường viền đầu 3D (hiệu ứng phụ thuộc vào giá trị màu viền).
• none: Xác định không có biên giới.
• hidden: Xác định một đường viền ẩn.

Lưu ý: border-style có thể chứa từ 1 đến 4 giá trị sẽ tham chiếu tương ứng từ top right bottom và left.

Cú pháp viết ngắn:

border: [kích thước border] [kiểu border] [màu sắc];

3. Margin (khoảng lề)

margin dùng để căn lề xung quanh các phần tử, bên ngoài các đường viền (border) đã xác định.

Bạn đặt câu hỏi ở đây thế nó cũng làm dày phần tử lên giống padding và border sao? Câu trả lời là không nha. Ví dụ khi bạn muốn căn lề một phần tử ra khi bạn dùng padding và border thì thực chất bạn chỉ tạo một lớp xung quanh phần tử, bây giờ phần tử và lớp này đã là 1 cho nên padding và border không thể căn lề cho phần tử. Chỉ có margin mới là thuộc tính dùng để căn khoảng cách lề cho phần tử nhé.

Các thuộc tính chỉ phương hướng của margin:

• margin-top
• margin-right
• margin-bottom
• margin-left

Ta thấy ở hình trên khối hộp ta tạo ra trên css là width: 100px và height: 100px nhưng khi ta trỏ vào phần tử trong Inspect thì nó là 120×120 tại vì ta đã thêm xung quanh phần tử padding: 10px và border: 10px nên nó sẽ cộng thêm vào kích thước phần tử.

Nhưng nó lại không cộng kích thước margin vào vì margin chỉ dùng để căn khoảng cách lề chứ không phải dùng tăng độ dày phần tử lên như padding và border.

4. Box-sizing

Ngoài tìm hiểu về padding, border và margin ra ta cũng sẽ tìm hiểu 1 thuộc tính liên quan để 3 thuộc tính trước là box-sizing.

Box-sizing là một thuộc tính sẽ giúp bạn tính toán và làm chủ được kích thước border, padding và content bên trong phần tử sao cho vừa bằng với kích thước width và height mà ta đã định nghĩa sẵn trước đó.

Chả hạn, ta có một khối hộp được tạo nhưng hình bên dưới có phần nội dung ghi đè lên là “Đây là Sua May Nhanh”.

Bây giờ, ta muốn căn chỉnh nội dung sao cho nó nằm giữa khối hộp ví dụ ta dùng padding tăng độ dày phần tử lên để chỉnh nội dung vào giữa.

Ta thấy nội dung của phần tử đã nằm giữa phần tử nhưng kích thước của cả phần tử lại tăng lên nó lại không được như kích thước mà ta đã thiết kế mong muốn ban đầu là 100×100. Vậy bây giờ ta muốn nội dung được nằm giữa mà kích thước vẫn như cũ là 100×100 thì ta phải làm sao?

Đến lúc này ta sẽ phải sử dụng box-sizing với giá trị border-box để nó thực thi định dạng lại cho ta căn chỉnh làm sao cho kích thước padding và content cộng lại đúng 100×100 nhưng nội dung vẫn sẽ được ở giữa nhé.

Ta thấy, kích thước đã trả về đúng 100×100 nhưng nội dung lại bị lọt ra khỏi phần tử. Tại vì ta đã setting cho padding giá trị quá lớn so với kích cỡ của phần tử cho nên khi sử dụng box-sizing: border-box nó lấy kích thước ban đầu là 100×100 trừ cho padding bằng giá trị nó setup cho kích thước của content nên kích thước của content không đủ chứa phần nội dung nên nó bị lọt ra đây cũng là 1 lưu ý để các bạn cân nhắc kỹ khi đặc kích thước cho padding nhé.

Bây giờ ta sẽ sửa lại padding để nội dung nằm trọn trong phần tử. Ta đặt lại padding 4 hướng bằng 20px để cho phần content còn lại là 60×60 như vậy sẽ đủ để chứa nội dung ở giữa.

Ta có thể sử dụng box-sizing: content-box để đưa về kết quả ban đầu của phần tử hoặc dùng box-sizing: unset để reset lại.

Sau này, các bạn làm những website chuyên nghiệp hơn thì thuộc tính box-sizing này các bạn sẽ sử dụng rất là nhiều để design ra một trang web đẹp đẽ và gọn gàng.

Như vậy, ta đã tìm hiểu xong về padding, border và margin. Ngoài ra, ta còn được tìm hiểu về thuộc tính box-sizing nữa.

Bài viết đến đây là kết thúc hẹn gặp lại các bạn ở những bài viết sau <3 <3 <3

By VenusakaVXT

The post Bài 16-Padding, border và margin trong CSS appeared first on Sửa Máy Nhanh.

Pseudo elements (phần tử giả) dùng với mục đích để tạo ra các phần tử nhưng được viết bằng câu lệnh CSS chứ không phải là HTML.

Cú pháp:

selector::pseudo elements
{
    properties: value;
}

Lưu ý: Ở trong cú pháp có selectors nhưng nếu bạn bỏ selectors đi nó sẽ không biết ta muốn tham chiếu đến phần tử nào thì mặc định nó sẽ tham chiếu đến phần tử gốc thì tất cả các phần tử đều sẽ bị chịu ảnh hưởng nhé.

Một số pseudo elements như: ::before, ::after, ::first-letter, ::first-line, ::selection, …. Bây giờ, chúng ta cùng tìm hiểu về một vài phần tử giả nhé.

1. ::before và ::after

::before được dùng để tạo phần tử giả đặt ở phía trước phần tử mà ta selector, còn ::after thì dùng để đặt ở phía sau phần tử.

Ta cũng có thể định nghĩa style cho phần tử giả nhé.

2. ::first-letter

::first-letter dùng để định dạng kí tự đầu trong nội dung của phần tử. Ta thường thấy áp dụng ở những trang báo họ thường viết hoa to lên kí tự đầu tiên trong bài báo.

3. ::first-line

::first-line dùng để định dạng dòng đầu tiên của phần tử.

Ví dụ ta có thẻ h1 có chứa 1 đoạn văn có rất nhiều dòng. Lưu ý: trong HTML viết từ khóa Lorem ấn tab sẽ hiện ra một đoạn văn ngẫu nhiên cho bạn.

Bây giờ, ta chỉ muốn dòng đầu tiên của phần tử h1 có thuộc tính là color màu đỏ còn lại vẫn mặc định như cũ thì ta sử dụng ::first-line nhé.

4. ::selection

::selection dùng để định nghĩa style của phần tử đó chỉ được hoạt động khi ta bôi đen chuột vào.

Ta thấy chỉ có thẻ h1 mà ta đặt id và tác dụng style vào bằng phần tử giả ::selection mới bị tác động khi ta bôi đen còn mấy phần tử khác thì không.

5. Kết hợp pseudo classes và pseudo elements

Nếu như chúng ta đã thành thạo cả 2 pseudo là pseudo classes (lớp giả) và pseudo elements (phần tử giả) thì ta có thể selectors 2 pseudo này lại với nhau để có thể linh hoạt hơn trong việc tạo style cho selectors.

Cú pháp:

selector:pseudo-classes::pseudo-elements
{
    properties: value;
}

Chả hạn, như ví dụ bên dưới

Như vậy, ta đã tìm hiểu xong pseudo-elements (phần tử giả). Hi vọng qua bài pseudo-classes và pseudo-elements các bạn có thể tự thiết kế và áp dụng được nhiều chức năng cho website của mình.

By VenusakaVXT

The post Bài 15-Pseudo elements trong CSS appeared first on Sửa Máy Nhanh.

Chúng đều được gọi là Pseudo. Trong peseudo chia thành 2 phần là: pseudo classes và pseudo element.

Thì bài hôm nay chúng ta sẽ tìm hiểu khái niệm pseudo classes (lớp giả) nhé. Ở bài tiếp theo ta sẽ tìm hiểu về pseudo element sau.

Pseudo classes (lớp giả) trong CSS dùng để thêm các hiệu ứng đặc biệt đến các selectors mà không cần sử dụng đến javascript hoặc một ngôn ngữ script khác.

Ví dụ như viết CSS để đổi màu các phần tử khi rê chuột vào hoặc đổi thuộc tính một phần tử khi nhấp vào, ….

Cú pháp:

selector:pseudo-class 
{
   properties: value;
}

Các lớp giả (pseudo classes) trong CSS

Bây giờ, chúng ta sẽ tìm hiểu một vài lớp giả (pseudo classes) trong CSS nhé.

1. :root

:root chúng ta đã được học trong bài đặt biến trong CSS thì lớp giả này dùng để tham chiếu đến phần tử gốc trong file cụ thể là cặp thẻ <html></html> dùng để bao trùm tất cả các phần tử ở trong file.

2. :hover

:hover dùng để kích hoạt một trạng thái khác khi ta rê chuột vào phần tử trên trang web. Để hiểu rõ hơn các bạn xem ví dụ bên dưới.

Mình có một trang web gồm một tiêu đề và 1 button.

Ban đầu, mình để mặc định màu chữ cho tiêu đề là màu đen và button là màu xanh. Bây giờ, mình muốn trang trí một xíu khi mình rê chuột vào tiêu đề thì dòng chữ đổi sang màu đỏ và khi rê chuột vào button từ màu xanh sang màu xàm. Thì để làm được như vậy ta sử dụng :hover nhé.

3. :active

Đối với :hover khi ta rê chuột vào phần tử thì nó mới thay đổi trạng thái, còn đối với :active thì ta phải click chuột vào phần tử nó mới thay đổi trạng thái nhé.

:active thường ứng dụng cho một số trường hợp như khi click vào đường link url nó sẽ đổi màu, hoặc là đổi màu button với chức năng on/ off, ….

4. :first-child và :last-child

:first-child dùng để truy xuất đến phần tử con đầu tiên, còn last-child dùng để truy xuất đến phần tử con cuối cùng.

Ví dụ ta có một cái menu như hình bên dưới

Chả hạn bây giờ ta muốn đổi style cho phần tử li đầu tiên và phần tử li cuối cùng. Thì ta sử dụng lớp giả :first-child và :last-child.

Lưu ý: Ở lớp giả này chúng ta select đến phần tử con là li luôn chứ không select đến phần tử cha là ul nhé. Nếu select phần tử ul nó sẽ không tham chiếu xác định được đến phần tử li đầu tiên và cuối cùng.

5. Độ ưu tiên trong pseudo classes

Có bao giờ bạn tự hỏi nếu thực hiện nhiều lớp giả một lúc với nhiều chức năng khác nhau thì lớp giả nào sẽ được thực hiện trước không? Cũng như các selectors thì các pseudo classes cũng có độ ưu tiên.

Ở đây chúng tôi sẽ chỉ đưa ra một ví dụ nhỏ cho các bạn nắm bắt được về độ ưu tiên của pseudo classes (lớp giả) nhé.

Chả hạn, ta có một đường link như trên ta muốn đưa vào một số lớp giả như: :link, :visited, :hover và :active.

:hover và :active chúng ta đã được tìm hiểu ở trên. Còn đối với :link nó được dùng để chọn tất cả các liên kết chưa được click vào, còn :visited là chọn tất cả liên kết đã được truy cập.

Ta thấy được giữa chức năng của :hover và :active hay :link và :visited thì chúng đối lập nhau nên ta hãy thử xem khi đưa 4 lớp giả này vào cùng 1 phần tử nó sẽ chạy như thế nào nhé.

Lưu ý: Chúng ta phải viết đúng thứ tự các lớp giả như hình trên từ :link -> :visited -> :hover -> :active thì chương trình mới chạy như trên do độ ưu tiên trong CSS. Còn nếu chúng ta tráo đổi vị trí như đưa a:hover lên trước a:link và a:visited thì khi ta rê chuột vào link nó sẽ không đổi màu, tương tự với việc nếu chúng ta đảo vị trí của a:active với a:hover.

Như vậy, ta đã tìm hiểu được thế nào là pseudo classes và đã tìm hiểu một số pseudo classes trong CSS. Ở bài sau chúng ta sẽ được tìm hiểu về Pseudo element nhé.

Bài viết đến đây kết thúc xin cảm ơn các bạn đã theo dõi hết bài viết. Nhớ vote 5* và <3 để tạo động lực cho suamaynhanh có thể ra nhiều bài viết thật hay hơn nữa nhé.

By VenusakaVXT

The post Bài 14-Pseudo classes trong CSS appeared first on Sửa Máy Nhanh.

Function (hàm) dùng để xử lý một nhiệm vụ và nó sẽ trả về một kết quả duy nhất nên việc trả về một đoạn CSS dài ngoằn là điều không thể, vì vậy thông thường ta dùng function trong những trường hợp xủ lý một nhiệm vụ nào đó và mục đích cuối cùng là lấy một kết quả.

Ở bài 11, ta cũng đã tìm hiểu về 1 function là hàm var() dùng để đặt biến trong CSS.

Ngoài ra, CSS còn có một số function thông dụng khác như: rgb(), rgba(), linear-gradient(), calc(), attr(), ….Ta sẽ tìm hiểu một vài hàm trong CSS nhé.

1. rgb() và rgba()

rgb (red, green, blue) là một phương thức dùng để trộn màu sắc trong CSS. Phương thức dùng để mix 3 giá trị màu sắc được truyền vào trong hàm với chỉ số thứ tự thấp nhất là 0 và maximum là 255.

Còn rgba là phần mở rộng của rgb với thành phần bổ sung là alpha quy định độ mờ, độ trong suốt của màu sắc.

2. attr()

attr() viết tắt từ Attribute là dùng để trả về giá trị của một thuộc tính mà thẻ đang sử dụng.

Ví dụ trường hợp dùng attr(), khi mình tạo một thẻ a (đã được học ở bài 3) dẫn đến trang chủ của suamaynhanh ngoài viết nội dung ra mình còn muốn kèm theo 1 url ở phía sau như hình bên dưới.

Chả hạn, nếu sau này mình muốn sửa đường link liên kết đến trang web của suamaynhanh đi thì mình sẽ phải sửa ở cả 2 nơi là ở thuộc tính href và cả phần nội dung. Nếu như vậy chúng ta nên đặt peseudo (gồm :root, ::after, ::before, … sẽ được học ở những bài sau) dùng hàm attr() để sau này sửa gián tiếp sẽ tiện hơn mà không can thiệp trực tiếp vào phần nội dung.

Trong selector a::after ta sử dụng thuộc tính content để viết nội dung vào.

Ta thấy kết quả được hiển thị như ý ta mong muốn là đã truyền được url ở phía sau phần nội dung. Bây giờ, ta qua file html để chỉnh sửa đường link chả hạn đổi .vn thành .com xem nó có update lại không nhé.

Ta thấy khi chỉnh sửa ở thuộc tính href thì pseudo ::after có content chứa hàm attr(href) cũng được cập nhật theo. Cho nên khi ta sửa đường link liên kết thì phần nội dung cũng được sửa theo.

Vừa rồi chỉ là một ứng dụng nhỏ bây giờ ta đến ứng dụng khác chả hạn ta có một phần tử hình nền ta muốn truyền giá trị của 1 biến (variable) in lên trên hình nền đó ta phải làm sao?

Ta đặt một biến tên text-variable với giá trị như trong hình để nó được đặt đè lên phần tử .box ta dùng pseudo ::after với content bằng attr(text-variable). Như ở ví dụ đầu của attr() thì vì ta muốn nối url vào phần nội dung nên ta bỏ attr() vào trong chuỗi kí tự còn đây là ta truyền thẳng vào và không nối với nội dung khác nên ta ghi thẳng hàm vào.

3. calc()

calc() viết tắt từ Calculator dùng để tính chiều rộng của phần tử bằng giá trị mà hàm calc() nhận.

Giá trị hàm calc() nhận là một biểu thức hoặc là một giá trị số bất kì (có thể dùng cả biểu thức để tính các tham số vừa đơn vị tương đối, vừa đơn vị tuyệt đối nhé).

4. translate()

translate dùng để dịch chuyển phần tử theo trục tung và trục hoành, được sử dụng trong thuộc tính transform.

Ngoài ra còn có các hàm mở rộng như translateX(giá trị của x) mặc định trục y = 0, translateY(giá trị của y) mặc định trục x = 0, translate3d() sử dụng trong không gian 3 chiều, ….

5. rotate()

rotate() cũng là một hàm được sử dụng trong thuộc tính transform dùng để xoay phần tử html (đơn vị: độ(deg)).

Mặc đinh sẽ là xoay cùng chiều kim đồng hồ, nếu muốn xoay ngược lại ta đặt dấu trừ “-” ở phía trước.

6. counter()

counter() là hàm dùng để tăng giá trị biến đếm lên 1 đơn vị hoặc đánh dấu theo dạng danh sách thường áp dụng cho đánh số thứ tự.

Chả hạn như ở ví dụ bên dưới ta dùng thuật toán đánh số chương áp dụng hàm counter().

Ngoài ra, ta có thể áp dụng một số kiểu dạng danh sách khác như thẻ ul, ol bằng cách chèn kiểu vào bên trong phương thức counter(name, type);

Một số kiểu dạng danh sách như: circle, square, upper-roman, lower-alpha.

Như vậy, ta đã tìm hiểu được một số hàm thông dụng trong CSS. Trong CSS, còn rất nhiều hàm đa dạng về chức năng mà khi thực tế các bạn đi làm sẽ thấy.

Ở đây suamaynhanh chỉ hướng dẫn một số hàm nhất định. Bài viết đến đây là kết thúc nếu thấy hay hy vọng bạn sẽ vote 5* và <3 cho bài viết của suamaynhanh ở cuối website.

Hẹn gặp lại các bạn ở bài viết sau!!! <3 <3 <3

By VenusakaVXT

The post Bài 13-Function trong CSS appeared first on Sửa Máy Nhanh.

CSS Units được chia thành 2 nhóm:

• Absolute units (nhóm đơn vị tuyệt đối).
• Relative units (nhóm đơn vị tương đối).

Chúng ta sẽ tìm hiểu về từng nhóm đơn vị nhé.

1. Absolute units

Absolute units (nhóm đơn vị tuyệt đối) là loại đơn vị có giá trị không thay đổi theo kích thước màn hình, hướng và các biến thể khác, tuy nhiên chỉ chính xác tuyệt đối khi output có độ phân giải đủ cao.

Absolute units sẽ cần thiết trong các trường hợp yêu cầu kích thước phần tử phải chính xác 100% và không được thay đổi.

Các đơn vị trong absolute units:

• px
• pt
• cm
• mm
• inch
• pc

Chúng ta sẽ tìm hiểu một số đơn vị trong absolute units nhé chả hạn như px (pixel).

Ở thực tế, pixel được xem những điểm ảnh hay còn gọi độ phân giải trên hình ảnh. Nhưng trong CSS, đối với màn hình độ phân giải thấp 1px tương ứng 1 điểm ảnh thực ở trên màn hình, còn đối với màn hình độ phân giải cao 1px tương ứng với nhiều điểm ảnh trên màn hình thực nhé. Cứ độ phân giải càng cao thì càng chiếm nhiều điểm ảnh trên màn hình.

Ví dụ ta dùng đơn vị pixel để vẻ 1 khối hình vuông hay hình chữ nhật

Ta thấy khi dùng đơn vị tuyệt đối kích thước của trình duyệt thay đổi thì kích thước của phần tử cũng không bị thay đổi theo.

Chúng ta có thể dùng đơn vị pixel để định dạng kích cỡ chữ.

Theo mặc định kích cỡ font chữ của thẻ h2 sẽ nhỏ hơn thẻ h1, nhưng ở hình trên khi ta định dạng font-size bằng đơn vị pixel lớn hơn h1 nên khi xuất ra cỡ chữ h2 sẽ to hơn h1.

2. Relative units

Relative units (đơn vị tương đối) là đơn vị được tính một cách tương đối so với phần tử phụ thuộc hoặc các phần tử khác. Đơn vị tương đối cơ động và hoạt động tốt hơn cho những thiết bị, những màn hình có kích thước và độ phân giải khác nhau.

Các đơn vị trong relative units:

• %
• rem
• em
• vw
• vh
• vmin
• vmax
• ex
• ch

Quay lại, định dạng hình vuông cho thẻ .box ở trên ta đổi đơn vị chiều rộng từ px sang % (100% = 16pixel) chả hạn như 50% nó sẽ thay đổi từ hình vuông sang hình chữ nhật.

Nhưng đặc biệt đối với những đơn vị tương đối nó sẽ tính theo phần tử mẹ (hay còn gọi là phần tử mà nó phụ thuộc).

Ta thấy ở clip trên class .box phụ thuộc vào thẻ body (phần thân chương trình) và thẻ body lại lấy theo kích thước của trình duyệt cho nên khi ta đặt chiều rộng width: 50% thì nó sẽ lấy theo 50% chiều ngang của trang web. Nên khi ta thay đổi kích thước của trang web khối hộp sẽ được thay đổi tương ứng theo một nữa chiều ngang của website.

Tiếp theo, ta sẽ đến với một đơn vị tương đối khác là rem và em.

Đầu tiên là đơn vị rem, đối với đơn vị % nó sẽ phụ thuộc và phần tử chứa nó còn đối với rem nó sẽ phụ thuộc vào thẻ html nhé.

Chả hạn, ta định nghĩa cho thẻ html với font-size là 20px khi ta định nghĩa thẻ h1 là 1 rem thì nó sẽ lấy theo giá trị font-size 20px là tương ứng 1 rem là 20px để định dạng font-size cho thẻ h1. Ta thấy thẻ h1 font chữ sẽ nhỏ hơn.

Ta có thể sử dụng đơn vị rem để tùy chỉnh theo tùy ý ví dụ bây giờ bạn muốn font-size của h1 lớn hơn 20px ta có thể tăng số rem lên.

Như hình trên ta tăng lên 2 rem nó sẽ lấy font-size cho h1 bằng 2 x 20. Tức là nó sẽ lấy số rem nhân cho giá trị font-size của thẻ html để định dạng cho h1.

Còn đối với đơn vị em nó sẽ phụ thuộc vào phần tử có chứa giá trị font-size nằm gần với nó nhất.

Để tìm được phần tử gần nhất với nó có chứa thuộc tính font-size, nó sẽ chạy từ phần tử có chứa đơn vị em đến từng phần tử liền kề gần nó, nó sẽ kiểm tra nếu có chứa thuộc tính font-size nó sẽ nhận và xử lý còn không nó chạy sang phần tử khác để kiểm tra cho đến khi đến được với phần tử cuối cùng là html. Nếu đến phần tử cuối cùng mà không có phần tử nào chứa thuộc tính font-size nó sẽ không được định dạng style cỡ chữ theo.

Ta thấy ở hình trên phần tử div nằm gần nhất với thẻ h1 so với phần tử html. Cho nên bây giờ ta định dạng font-size khác nhau cho cả thẻ html và thẻ div và truyền giá trị (đơn vị: em) vào cho h1 thử xem h1 sẽ nhận giá trị font-size của html hay div nhé.

Khi để h1 với font-size : 1em nó sẽ nhận giá trị font-size của thẻ div chứ không nhận của html. Bởi vì thẻ div là thẻ nằm gần với h1 hơn so với thẻ html nhé.

Nhưng theo recommend của mình thì ta nên sử dụng đơn vị rem nó sẽ dễ dàng kiểm soát hơn so với đơn vị em nó phải đi tìm từng phần tử một gần nó xem thử phần tử nào có chứa thuộc tính font-size. Thay vì như thế ta cứ truyền font-size tùy ý vào thẻ html và dùng đơn vị rem nó sẽ tiện lợi hơn.

Và đặc biệt, khi cần chỉnh sửa việc đi tìm từng phần tử như vậy sẽ mất thời gian thay vì ta dùng đơn vị rem và chỉ cần vào style của thẻ html để chỉnh sửa.

Tiếp theo, đơn vị tiếp theo của nhóm đơn vị tương đối mà ta tìm hiểu là vw (viewport width) và vh (viewport height) nhé.

Như định nghĩa về relative units thì mỗi đơn vị tương đối đều phải phụ thuộc theo một phần tử nào đó như : đơn vị % phụ thuộc vào thẻ body, rem phụ thuộc vào thẻ html, em phụ thuộc vào thẻ thuộc font-size gần với nó. Còn vw, vh thì sẽ phụ thuộc vào kích thước trình duyệt bạn sử dụng nhé (lưu ý: là phụ thuộc vào trình duyệt chứ không phải là thẻ body nhé, như ở ví dụ về đơn vị % thì thẻ body nó lại bằng kích thước trình duyệt thôi chứ đơn vị % không phụ thuộc vào kích thước trình duyệt nhé, chỉ vw, vh mới phụ thuộc vào kích thước trình duyệt nhé.).

Ở 2 hình trên ta thấy được khi đặt đơn vị vw và vh nó sẽ lấy tương ứng theo kích thước trình duyệt.

Khi bạn muốn tạo background color cho trang web bạn có thẻ dùng đơn vị vw và vh để tùy chỉnh chả hạn như hình bên dưới, bạn reset lại căn lề (những thuộc tính này bạn sẽ được học ở những bài sau) về bằng 0 hết và cho width bằng 100vw và height bằng 100vh sẽ được kết quả như hình bên dưới nhé.

Như vậy, ta đã tìm hiểu được về một số đơn vị phổ biến hay được sử dụng ở 2 nhóm absolute units và relative units. Chúc các bạn thành công !!!

Bài viết đến đây kết thúc. Hẹn gặp lại ở những bài sau trong lộ trình front end HTML và CSS nhé.

By VenusakaVXT

The post Bài 12-Các đơn vị trong CSS appeared first on Sửa Máy Nhanh.

Variable là kỹ thuật đặt biến trong CSS. Bây giờ, ta sẽ tìm hiểu cách sử variable trong CSS nhé.

Chả hạn, bây giờ ta muốn đặt một số biến có chức năng định dạng màu nền, màu sắc, kích cỡ hay font chữ ta sẽ đặt tên biến (quy tắc đặt tên biến để dễ phân biệt đặt hai kí tự gạch nối “–” ở phía trước tên variable) và truyền giá trị định dạng style mà ta muốn đặt vào.

Cú pháp:

:root
{
    --variable: value;
}

Vì khi khai báo biến ta sẽ đặt và sử dụng nó ở nhiều phương thức cho nên chúng ta sẽ đặt trong lớp giả :root là thành phần gốc của document (trong văn bản HTML thành phần gốc luôn luôn là thẻ <html>) để sử dụng được biến đó nhiều lần. Và để hiểu tại sao phải đặt biến và tại sao lại dùng biến đó được nhiều lần thì cùng xem ví dụ bên dưới.

Tại sao phải sử dụng Variable?

==> Có rất nhiều lý do để sử dụng biến trong CSS. Nhưng theo bản thân mình thấy thì khi sử dụng biến thì số lượng code bị lặp lại được hạn chế và dễ dàng tùy chỉnh. Chỉ cần dùng biến và thay đổi giá trị biến thì tất cả các elements dùng biến đó đều thay đổi theo.

Ví dụ ta đặt các biến như sau:

Để sử dụng được các biến trên ta gọi thuộc tính style và đặt biến phù hợp vào phương thức var() để truyền giá trị vào cho đối tượng sử dụng style.

Ta thấy, được việc sử dụng biến rất là tiện lợi. Nếu như sau này web của bạn có nhiều phần tử có cùng 1 style thay vì bạn đi tới từng phần tử đặt style cho nó thì bạn sử dụng variable để đặt biến và truyền biến vào thuộc tính style như vậy sẽ tiện hơn.

Chả hạn, như hình bên dưới các phần tử đều cần màu chữ là màu đỏ thì thay vì đặt style màu đỏ cho từng biến ta sử dụng variable định dạng trước màu đỏ và đặt biến đó vào bằng phương thức var() sẽ rất là tiện.

Đặt biến như thế này khi ta cần chỉnh sửa lại toàn bộ các phần tử chỉ cần vào :root đặt lại style cho biến đó. Các phần tử được định nghĩa sử dụng style đó trước đó sẽ được reload theo.

Nhưng chả hạn, ta muốn sử dụng một phần tử trong số các phần tử được đặt style chung đó sang 1 style khác thì ta chỉ cần vào phần tử đó định nghĩa thuộc tính đó lại bằng style khác. Ví dụ như hình bên dưới ta muốn đổi thẻ h3 sang màu xanh lá cây thì làm như hình bên dưới.

Hoặc các bạn có thể đặt giá trị lại cho biến chung ở :root trong chính phần tử cần thay đổi

Qua những tình huống trên ta thấy variable được sử dụng rất là linh hoạt chúng ta có thể tái sử dụng hoặc tùy chỉnh theo ý của chúng ta và đặc biệt những dòng code được viết ra rất là gọn gàng tránh đi việc phải lặp lại code.

Responsive với biến

Responsive trong CSS là một tính từ để chỉ một website có thể hiển thị tương thích trên mọi kích thước hiển thị của trình duyệt.

Để làm được như vậy, ta sử dụng cú pháp sau:

:root
{
    /* Phương pháp này áp dụng cho đơn vị pixel */
    --properties-first: giá trị ban đầu;
    --properties-second: giá trị ban đầu;
}
@media only screen and (max-width: chiều rộng thay đổi tối đa)
{
    :root
    {
    --properties-first: giá trị thay đổi sau đó;
    --properties-second: giá trị thay đổi sau đó;
    }
}

Ví dụ minh họa reponsive với biến trong CSS.

Như vậy, ta đã tìm hiểu xong cách sử dụng biến (variable) trong CSS. Chúc các bạn thành công!!!

Hẹn gặp lại ở bài học sau <3 <3 <3

By VenusakaVXT

The post Bài 11-Variable trong CSS appeared first on Sửa Máy Nhanh.

Giữa Internal và External?

Đầu tiên, ta sẽ tìm hiểu về độ ưu tiên giữa Internal và External. Ta đều biết Internal, External, Inline đều là những kiểu nhúng CSS vào HTML đề hiểu rõ hơn mời bạn xem ở bài học trước Cách sử dụng CSS trong HTML (phần 2).

Vậy bạn có thắc mắc khi ta thực hiện cả External và Internal vào chương trình thì element sẽ được nhận kiểu style nào.

Thực tế giữa Internal và External độ ưu tiên là bằng nhau. Khi cùng 1 phần tử mà bạn định dạng style bằng 2 cách Internal và External thì nó sẽ nhận style được viết mới nhất.

Nếu như bạn viết style kiểu Internal mới nhất thì nó sẽ update theo style của kiểu Internal. Nhưng sau đó, bạn lại viết style khác theo kiểu External thì nó sẽ nhận style mới nhất là theo kiểu External.

Nói chung cứ thằng nào viết ra sau cùng thì nó sẽ update theo style mới nhất đó.

Inline, #id, .class, tag

Vậy giữa kiểu Inline, #id, class, và tag thì cái nào sẽ được ưu tiên hơn?

Thì thật ra về độ ưu tiên Inline sẽ là cao nhất, thứ 2 là #id, thứ 3 là .class và cuối cùng độ ưu thấp nhất là tag.

Để chứng minh ta sẽ xem tình huống bên dưới. Ta sẽ xét tất cả kiểu Inline, #id , class, tag chỉnh với 4 style khác nhau thì nó sẽ nhận style nào nhé.

Ta thấy, trong 4 kiểu định dạng style thẻ h1 sẽ ưu tiên và nhận kiểu style của Inline. Bây giờ, chúng ta sẽ bỏ kiểu Inline đi để xem có phải h1 sẽ nhận tiếp style của #id không nhé.

Như vậy, ta thấy khi bỏ kiểu Inline đi vì độ ưu tiên của #id cao hơn .class và tag nên thẻ h1 sẽ nhận style của #id.

Sau khi, bỏ định dạng style của #id đi thì ngay lập tức thẻ h1 nhận ngay định dạng style của class. Vì độ ưu tiên của class lớn hơn tag. Và chắc chắn khi ta bỏ style của class đi thì style của tag h1 sẽ được nhận.

Độ đặc hiệu bằng nhau (Equal sepecificity)

Cũng như giữa độ ưu tiên External và Internal thì khi cú pháp bằng nhau hoặc định dạng nhiều style nhưng giống nhau về #id, class hay tag thì style nào được viết mới nhất thì style đó sẽ được element nhận.

Chả hạn, như hình bên dưới

Bây giờ, ta cũng gọi lại #hid với 1 định dạng style khác thì chắc chắn thẻ h1 sẽ nhận style được định dạng mới nhất. Vì ông style nào mới nhất thì ông đó sẽ trội hơn.

Nhưng bây giờ, ta lại muốn style đầu tiên với color: violet sẽ được trội hơn thì ta sẽ dùng cách cộng thêm độ ưu tiên vào bằng cách ta gọi thêm 1 class hoặc 1 tag thì độ ưu tiên sẽ được cao hơn. Vì chắc chắn độ ưu tiên của #id + class + tag sẽ cao hơn 1 #id.

Cứ độ ưu tiên bên nào được công cao hơn thì bên đó sẽ lợi thế hơn và dành chiến thắng.

Inherit tức là những phần tử con được kế thừa thuộc tính của phần tử cha.

Độ ưu tiên thì nó được xét như theo Inline, #Id, .class và tag.

Ta đã biết trong một chương trình tất cả các phần tử đều là con của cặp thẻ <html></html>. Nên khi ta xét style cho tất cả các phần tử trong chương trình ngoài dùng cú pháp “*” ta có thể xét thuộc tính cho thẻ html luôn.

Ta thử sử dụng 1 tag , class hay id để thay đổi style của phần tử cần chỉnh sửa nhé.

!Important

Như vậy, các cách xét style ở trên đều phải dựa vào độ ưu tiên, nhưng nếu ta muốn xét element có style có độ ưu tiên nhỏ hơn thì phải làm sao? Hoàn toàn làm được nhé lúc này khái niệm !important ra đời.

!important trong CSS được sử dụng để thể hiện mức độ quan trọng hơn mức bình thường. Tức là nếu chung ta sử dụng !important lên style thì nó sẽ ghi đè tất cả các quy tắc tạo kiểu trước đó của thuộc tính cụ thể trên phần tử cho dù độ ưu tiên nó nhỏ hơn so với những style khác.

Cho dù là Inline, #id, class hay tag, … đều không qua lại !important này nhé.

Rõ ràng, ta sẽ thấy .class độ ưu tiên cao hơn nên màu của thẻ h1 sẽ chuyển theo style của .class. Nhưng bây giờ, ta đặt !important và style h1 thì kết quả sẽ như thế nào xem hình bên dưới nhé.

Và ta thấy được rằng dù tag h1 có độ ưu tiên thấp hơn class .venus nhưng vì có đánh dấu !important nên h1 sẽ được định dạng theo style của tag h1 chứ không phải class .venus.

Như vậy, chúng ta đã tìm hiểu kĩ về độ ưu tiên trong CSS. Từ đó ta sẽ biết cách xét độ ưu tiên sao cho phù hợp khi viết chương trình nhé.

By VenusakaVXT

The post Bài 10-Độ ưu tiên trong CSS appeared first on Sửa Máy Nhanh.

Trong CSS, selectors là cách ta sử dụng để chọn ra phần tử (elements) mà chúng ta muốn định dạng style cho chúng.

Trong một trang web có nhiều phần tử thẻ html, để chọn ra đúng thẻ mà chúng ta mong muốn gán kiểu style thì chúng ta phải biết cách để selectors ra phần tử đó. Bài viết này suamaynhanh sẽ hướng dẫn các bạn các cú pháp của selectors.

1.Selectors id hoặc 1 class

Dưới đây, là cú pháp selectors id hoặc 1 class chúng ta đã học ở bài trước. Đối với id ta dùng dấu “#” để select, dùng dấu chấm “.” để select đến class.

2.Selectors những thẻ có nhiều class

Đối với những thẻ có nhiều hơn 1 class, thì chúng ta muốn đổi style cho những thẻ đó chúng ta sẽ select liên tiếp đến những class đó (không phân biệt thứ tự) và không được dùng dấu cách để liên kết mà viết dính vào nhau như hình bên dưới.

3. Selectors đến class có quan hệ cha con

Đối với những class nằm trong những class khác hay còn gọi là class con thì cần select đến class chứa class con và ấn dấu cách ” ” rồi select đến class con là được.

4. Selectors đến tất cả phần tử

Để selectors đến tất cả các phần tử trong trang web ta dùng cú pháp “*” và truyền thuộc tính vào cho nó như hình bên dưới.

Slectors này thường dùng cho trường hợp khi tất cả các phần tử đều cùng kiểu style hoặc khi muốn reset lại toàn bộ chương trình ta truyền hết các thuộc tính về bằng 0.

5. Selectors element

Để selectors đến element ta khai báo đến phần tử đó và định dạng kiểu style.

Trường hợp này hiếm khi dùng vì mỗi phần tử, mỗi thẻ đều được gán class và id cho nên trong 1 chương trình với nhiều kiểu định dạng khác nhau ta nên selectors vào id và class chứ không nên select chung element như thế này nó sẽ ảnh hướng đến những element mà nhiều khi ta không muốn định dạng chúng nhưng vô tình ta đã select đến nó.

6. Selectors element.class

Để selectors những element thông qua class ta dùng cú pháp element.class nhé. Chúng ta sử dụng trường hợp này khi các thẻ có cùng kiểu class nhưng ta chỉ muốn select 1 vài thẻ chứ không phải toàn bộ các thẻ trong class đó ta sẽ sử dụng cú pháp element.class này.

7. Selectors đến nhiều element và class

Để selectors đến nhiều element ta dùng cú pháp element, element hay selectors đến nhiều class thì class, class hoặc selectors đến nhiều element và class thì element, class.

8. Selectors đến element có quan hệ cha con

Cũng như selectors các class có quan hệ cha con, thì selectors các element có quan hệ cha con cũng như vậy bằng cú pháp element element.

Element đứng sau sẽ là con của element đứng phía trước.

9. Selectors element > element

Selectors element > element là cú pháp dùng để chọn element nào là con trực tiếp của element cha đứng phía trước.

Chả hạn, ta có những element có quan hệ cha con như hình bên dưới và được đổi style.

Khi dùng phương thức selector các class con .synthetic của class cha .box thì chúng đều được đổi style chả hạn bây giờ ta chỉ muốn đối style của phần tử con đầu tiên của class .box thì phải làm sao.

Lúc này, ta sử dụng cú pháp element > element để xác định được phần tử con trực tiếp.

Ta thấy chí có mỗi phần tử đầu tiên có class .synthetic được đổi style còn những phần tử con khác có cùng tên class không được thay đổi style.

10. Selectors element + element

Selectors element + element là cú pháp dùng để selectors element đứng liền kề sau với element đứng phía trước.

Ta thấy, ở hình trên element được đổi style là element có class .synthetic nằm liền kề sau với element có class .venus.

Nếu như các bạn có nhiều element cùng kiểu class nhưng các bạn muốn định dạng style toàn bộ element trừ phần tử đầu tiên thì ta có thể dùng cách selectors element + element này.

11. Selectors element ~ element

Selectors element ~ element là chọn tất cả các element đứng ở đằng sau element đứng ở phía trước trong cú pháp.

Giả sử, như hình trên nhưng ta phân cách thêm 1 thẻ h2 vào thì kết quả sẽ như hình bên dưới.

Bởi vì phần tử h1 thứ 2 không có phần từ nào như nó đứng phía trước liền kề nên bây giờ nó là phần tử đứng đầu để select đến các phần tử đứng sau bằng cú pháp element + element.

Nhưng bây giờ ta lại muốn tất cả các thẻ đều định được định dạng color: red trừ thẻ đầu tiên thì ta sử dụng cú pháp element ~ element để nó chỉ chọn tất cả các phần tử ở sau trừ phần tử đầu tiên.

Như vậy, ở bài này chúng ta đã tìm hiểu được toàn bộ các cú pháp selectors trong HTML, CSS.

Bài viết đến đây là kết thúc hẹn gặp các bạn ở bài sau nhé <3 <3 <3.

By VenusakaVXT

The post Bài 9-Selectors trong CSS appeared first on Sửa Máy Nhanh.

Trong HTML, ID và Class là thuộc tính được dùng để đặt tên (phân loại) cho các phần tử, mục đích là để tiện cho việc quản lý, định dạng các phần tử sau này.

Đối với những chương trình lớn thì việc đặt id và class là thật sự rất cần thiết để tạo tính thống nhất và phân loại sử dụng cho chương trình. Để hiểu tại sao ta phải dùng id và class thì hãy xem ví dụ bên dưới.

Chả hạn, tôi có 1 trang web có 10 thẻ h1 như hình bên dưới

Bây giờ, dùng kiểu nhúng External để chỉnh style ta vào file .css để điều chỉnh thì ta thấy kết quả như hình bên dưới

Như vậy, ta thấy khi ta chỉ chỉnh sửa 1 thẻ h1 nhưng các thẻ h1 khác đều bị tác động. Nhưng bây giờ trong chương trình ta chỉ muốn 1 hoặc chỉ vài thẻ h1 được định dạng màu vậy thì ta phải làm sao.

Đến lúc này ta phải cấp id cho thẻ mà ta muốn chỉnh style cho nó như hình bên dưới

Sau đó, để chỉnh style id ta vào file .css để truy cập được id ta dùng dấu “#” kèm theo tên id và ta định dạng style cho nó.

Lưu ý: Đã là id tức là nó như một khóa riêng biệt, cho nên các thẻ không được đặt trùng tên id với nhau tức là 1 thẻ là 1 id. Nếu các bạn đặt nhiều thẻ trùng id với nhau mục đích để tiện và nhanh cho việc chỉnh style đối với những thẻ có cùng style thì chương trình vẫn chạy nhưng thứ nhất theo quy chuẩn viết chương trình thì việc làm như thế là không hợp lệ , thứ hai là khi sử dụng kết hợp javascript để viết chương trình thì việc select đối tượng sẽ bị lỗi nhé.

Chính vì thế, ta mới có thuộc tính class dùng để chỉnh style cho nhiều thẻ tương đồng style với nhau.

Để sử dụng thuộc tính class cho file .css ta dùng dấu chấm “.” kèm theo tên class

Lưu ý: Tên của class phải dính liền nhau không được dùng dấu cách ” “, nếu dùng dấu cách nó sẽ xác định element đó có 2 class khác nhau. Bởi vì, 1 element có thể có nhiều class cho nên nếu element của bạn có 1 class thì nên đặt tên không có dấu cách , còn trong trường hợp có nhiều class thì ta ngăn cách nhau bới dấu cách ” “.

Như vậy, ta đã tìm hiểu thế nào là ID và Class trong HTML ta thấy được việc cực kì cần thiết của ID và Class. Vừa rồi ví dụ trên chỉ là ví dụ nhỏ cho các bạn hình dung ra , nhưng các bạn vẫn nên tập nó thành 1 thói quen hãy sử dụng id và class để khi viết những project lớn các bạn sẽ làm quen được cách đặt id và class. Chứ một chương trình lớn có thể có hàng trăm, hàng ngàn phần tử mà các bạn không sử dụng id và class khi muốn chỉnh sửa ta phải truy cập lại từng phần tử để chỉnh sửa thật sự rất tốn thời gian và độ hiệu quả không cao.

Bài viết đến đây kết thúc suamaynhanh cảm ơn các bạn đã theo dõi bài viết.

By VenusakaVXT

The post Bài 8-ID và Class trong CSS appeared first on Sửa Máy Nhanh.

Có 3 cách để nhúng CSS trong HTML:

Inline

Inline là nhúng trực tiếp css vào tài liệu html thông qua cặp thẻ style. Cách này chúng ta cũng đã sử dụng ở bài 5.

Internal

Internal là ta sử dụng thẻ style bên trong thẻ head để viết lệnh CSS.

External

External là tạo một tập tin .css riêng và liên kết vào tài liệu HTML thông qua thẻ link.

Đầu tiên, bạn tạo một file .css trước

Giao diện file css được mở ra, bây giờ bạn sẽ định dạng style cho trang web bằng file css này (khi viết file css không sử dụng thẻ style chúng ta cứ khai báo thuộc tính cho thẻ được định dạng như bình thường) và để file html nhận được lệnh css ta liên kết qua một thẻ link cú pháp như sau:

Chúng ta nhập link ấn enter hoặc tab cú pháp sẽ hiện ra sẵn trong đó:

• rel = “stylesheet” : là yêu cầu chỉ định mối quan hệ giữa tài liệu html và tài liệu css.
• href : chứa đường dẫn đến file css cần liên kết.

Sau khi, nhập địa chỉ file css vào thuộc tính href của thẻ link thì chương trình ngay lập tức được thực thi.

Thông thường đặc biệt là những project lớn để mang tính thống nhất cho chương trình và giúp cho những dòng code được gọn gàng và phân bố hợp lí, dễ nhìn thì thường các lập trình viên sẽ viết CSS vào HTML theo kiểu External nhiều hơn so với 2 kiểu kia.

Như vậy, chúng ta đã tìm hiểu xong cách sử dụng CSS trong HTML. Chúc các bạn thành công <3 <3 <3 !!!

By VenusakaVXT

The post Bài 7-Cách sử dụng CSS trong HTML (phần 2) appeared first on Sửa Máy Nhanh.