TIP - HTML/CSS ❤️✅

( html5/scss )

HTML___❤️😘

Xử lý label đi kèm với input

<label>

Your e-mail:

</label>

—————————————————————————————————————

Xử lý khi input nhập số tương thích trên mobile

<label>Phone number: <input type="tel" name="mobile"></label>

CSS___❤️😘

Grid:: xử lý bố cục phức tạp

Fload:: Xử lý hình ảnh bài đăng

Flex:: Xử lý UI nhỏ

~~~~~

<div class=“alert success”></div> ~ css: .alert.success -> viết liền

<div class=“alert”><div class=“success”></div></div> ~ css: .alert .success -> viết space

Dùng border::

.class{border: 2px solid transparent;}

.class:hover{border-color: #color}

Animation {A}

Ex::

.loader {

transform: translateY(5px);

transition: transform 0.2s ease-in-out; (1)

} ~ khởi tạo ban đầu

.loading .loader {

opacity: 1;

transform: translateY(0px) scale(1); ~ trả về vị trí cũ -> lúc này sẽ triggle (1)

}

—————————————————————————————————————

✅’:root’ ~ selector matches the document's root element.

—————————————————————————————————————

#Flex_Box ~~~~~~

✅Khi muốn div tag không căn cho div con nào bên trong thì dùng

flex-grow: 1; ~ cho div cha

✅Nếu trong 1 grid, xử lý khi 2 column không bằng nhau

(Note:: Khi content là flex & bên parent là flex -> áp dụng flex-grow)

<h1>title_long</h1>

<p>author</p>

</div>

C1:: content ~ flex; flex-grow: 1 / p ~ margin-top: auto;

C2:: content ~ flex; flex-grow: 1; justify-content: space-between;

—————————————————————————————————————

Sử dụng flex và grid song song

row m-0 space-1 d-grid d-md-flex

~~~~~~~~

—————————————————————————————————————

✅Muốn xử lý hoạt ảnh, sử dụng::

transform: translate(x, y)

Kết hợp với transition: 0.5s, transiton-delay: 0.4s ~ xử lý bị giật

+ Sử dụng transform: scale(0.9); ~ để phóng to khi hover

—————————————————————————————————————

Khoảng cách giữa các chữ cái

Letter-spacing: 1em;

—————————————————————————————————————

Khoảng cách giữa các từ

Word-spacing: 1em;

—————————————————————————————————————

Thêm ảnh/icon trong <ul><li> để vẽ Menu

List-style-image: url(“…/…”);

—————————————————————————————————————

Sử dụng background-image::

✅Khi dùng background-size: cover -> ko sử dụng background-repeat: no-repeat;

—————————————————————————————————————

Thêm content nền vừa với phần content

+ <div class=“content”>

-> position: relative

::before and ::after ->

{position: absolute;top:0;left:0;

background: linear-gradient(180.04deg, #fff7e5 47.48%, #ffffff 88.13%);

-> Riêng cho phần after: {padding-top: 43.3766%;top: 6.0625rem;background-position: top left;background-repeat: no-repeat;background-size: 100% auto;background-image: url(savings-item-background.svg);

—————————————————————————————————————

Table - tag <caption> đặt làm tiêu đề bên trong table

<caption>Monthly savings</caption>

—————————————————————————————————————

Chèn 1 icon sử dụng::, không cần dùng thẻ <icon>

&:before {

content: '';

display: block;

width: 2rem;

height: 2rem;

background-image: url(#{$path-images}/current-account.svg);

background-size: cover;

background-position: center;

position: absolute;

left: 0;

top: 50%;

transform: translateY(-50%);

}

—————————————————————————————————————

Sử dụng::

row

col-12 col-sm-6 col-lg-3

—————————————————————————————————————

#geog:before

{

display: inline-block;

width: 16px;

height: 16px;

margin-right: 5px;

content: "";

background: url("icons/geogebra.ico") no-repeat 0 0;

background-size: 100%;

}

—————————————————————————————————————

Tạo 1 input có icon ở trong input

<input type="text" class="form-control input-search"

style="width: 100%;height: 3.125rem;padding-right: 3rem" />

</div>

.icon-search {

background-image: url('../#{$path-images}/search.svg');

background-repeat: no-repeat;

background-size: contain;

width: 1.5rem;

height: 1.5rem;

position: absolute;

transform: translate(50%, 50%);

right: 1.5rem;

bottom: 0;

top: 0;

}

—————————————————————————————————————

Dùng order: 1:: để sắp xếp thữ tự

—————————————————————————————————————

Dùng biến (checked) để control show/hidden button title

<input

type="checkbox"

class="switch-button__checkbox"

(change)="onChangeLocale($event)"

[checked]="isChecked"

<bb-icon-ui class="icon-en" name="menu-en-flag" size="sm"></bb-icon-ui>

<bb-icon-ui class="icon-vn" name="menu-vn-flag" size="sm"></bb-icon-ui>

</span>

</label>

Css__________

&:checked {

& ~ .switch-button__slider {

.icon-en,

~ .switch-button__text-en {

@extend .transition;

@extend .opacity-hidden;

}

.icon-vn,

~ .switch-button__text-vn {

@extend .transition;

@extend .opacity-show;

}

—————————————————————————————————————

✅Phân biệt nhẹ min-width/max-width trong breakpoint responsive

+ max-width: Giá trị lớn nhất mà để hàm này chạy (max-width: 300px) ~ Nếu mà lớn hơn thì hàm sẽ not run. ~ set giá trị nhỏ hơn 1 đơn vị: fix cho màn 768 -> set 767

+ min-width: Giá trị nhỏ nhất mà để hàm này chạy (min-width: 299px) ~ Nếu mà nhỏ hơn thì hàm sẽ not run.

Viết cho mobile first trước nhé

~ Viết class thường cho mobile

~ Sau đó dùng @media… để viết cho các màn hình lớn hơn

—————————————————————————————————————

✅min/max-width/height

~ min-width: Giá trị nhỏ nhất mà màn có thể sd (nếu width nhỏ hơn thì sẽ lấy giá trị của min-width)

~ max-width: Giá trị lớn nhất mà màn hình có thể view (lúc này set tuỳ ý nếu width lớn hơn thì width lúc này sẽ = max-width)

—————————————————————————————————————

✅Note:: box-sizing: border-box;

-> Dùng để fix lại chiều dài và rộng của thẻ

Ví dụ 1 thẻ div có padding + height + width = kích thước thực tế

Kết quả thực tế lớn hơn mong muốn ban đầu :: height, width

Vì thế, box-sizing: border-box; -> Xác định cách tính height, width (bao gồm cả padding, border…)

—————————————————————————————————————

#Margin ~~~~~~

✅Margin collapse (Gộp margin)

+ Nếu 2 div gần nhau mà có sự góp mặt của margin đối xứng thì nó sẽ mix lại (ưu tiên giá trị nào lớn hơn)

-> Nếu using display: grid/flex ~ thì sẽ ko áp dụng mix nữa

✅Center element

+ Dùng margin: 0 auto;

-> display: block; width: fit-content; margin: 0 auto;

+ Dùng position: relative;

-> display: inline-block; position: relative; left: 50%; transform: translateX(-50%);

—————————————————————————————————————

Sử dụng max-width: sẽ tối ưu hoá width vượt ra ngoài view-port

—————————————————————————————————————

Property & attribute :: Cơ bản là giống nhau

+ Property:: Dùng cho {A} Angular

+ Attribute:: Dùng cho DOM

—————————————————————————————————————

✅Tạo 1 đường kẻ ***

~ Tạo sẵn 1 tag div

background-color: #8f92a1;

height: 1px;

width: 100%;

opacity: 0.1;

—————————————————————————————————————

✅Để tạo border bottom (inline) sử dụng before (Tạo 1 đường kẻ) ***

.account-item-btn {

position: relative;

border: 0;

padding:1.5rem;

&:not(:first-child) {

&:before {

content: "";

display: block;

height: 1px;

width: 92%;

background: $tcb-neutrals-grey;

position: absolute;

top: 0;

left: 0;

right: 0;

margin: auto;

}

—————————————————————————————————————

✅Css Combinators

~ Descendant selector (space): Chọn tất cả phần tử <p> bên trong phần tử <div>

Syntax: div p {}

~ Child selector (>): Chọn tất cả phần tử <p> có cha mẹ liền kề là phần tử <div>

Syntax: div > p {}

~ Adjacent sibling selector (+): Chọn phần tử <p> đầu tiên ngay sau phần tử <div>

Syntax: div + p {}

~ General sibling selector (~): Chọn mọi phần tử <p> khi <p> đặt sau phần tử <div>

Syntax: div ~ p {}

—————————————————————————————————————

✅Css focus | focus-within

~ focus: chỉ dừng lại ở việc triggle 1 phần tử

~ focus-within: sử dụng cho 1 div, 1 container chứa (input....), khi input triggle focus thì container sẽ được focus

✅TIP::

~ rem values are relative to the root html element, not to the parent element. That is, If font-size of the root element is 16px then 1 rem = 16px for all elements. If font-size is not explicitly defined in root element then 1rem will be equal to the default font-size provided by the browser (usually 16px).

—————————————————————————————————————

*Animation

transition: opacity 0.15s linear;

Loại bỏ dấu nháy chuột :

caret-color: transparent;

Fill color:

filter: grayscale(0);

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.