Scribd
Upload
23 views

Css

The document discusses different CSS styles approaches and properties. It compares inline styles, <style> element styles, and external stylesheets. It then covers various CSS properties like color, background-color, font properties, text properties, box model properties (margin, padding, border), selectors, pseudo-classes, and the display property.

Uploaded by

Tuấn Đỗ
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
23 views

Css

The document discusses different CSS styles approaches and properties. It compares inline styles, <style> element styles, and external stylesheets. It then covers various CSS properties like color, background-color, font properties, text properties, box model properties (margin, padding, border), selectors, pseudo-classes, and the display property.

Uploaded by

Tuấn Đỗ
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 71

Inline styles (not good idea)

Add style directly inline to any of elements, difficult to share styles without duplicating them, have to
change individually

<Style> element

Write your style inside of a <style> element. It is easy but makes it possible to share styles between
documents, not recommend

Add <style></style> element in the <head>

This is an approach of inline styles

Had problem with different document, different web page

External stylesheet (best choice)

Make a new file separate file where we write our CSS, include that file in our own document

Use <link> to connect with css file, put it into <head>


Css properties

Color: can have different styles of value

https://developer.mozilla.org/en-US/docs/Web/CSS/color

all the value is just color using text

this property changes just text color

if a button, just change text on the button

background-color: change background color of whatever element we are selecting

https://developer.mozilla.org/en-US/docs/Web/CSS/background-color

if change background color of block, it changes all the color of row (like h1-h6), the color takes up
whatever space is available in the container

You can just use background to change color but property is different, background can do more than
background-color
Css colors

Rgb color

Hexadecimal

You can this

Color : #cc55ee => #c5e

000000=>000

Semicolon

At the end of every property, it is essential


Common text property

Text-align: set the horizontal alignment on elements like this (align the inline-level content inside a
block element)

https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

but it does not mean how an element is aligned on the page itself, not spatially where it goes, but
within itself(like the text inside it will aligned)

So text-align is not going to move the entire H1 around, only operates in the confines of the content
for that H1

The text of paragraph will all be aligned to the right of their respective paragraph, sort of content
boxes

Font weight : control boldness or lightness of given piece of text

Text-decoration: under, line through, overline, you can color the line, or control the style of the line,
wavy, …

You can use it with <a> to delete the line text-decoration : none

Also can change the thickness of the line

Text-decoration : solid underline purple 4px

Line height: khoảng cách giữa các dòng text, control that height of each line of text, so it does not
control the text size but the hightlight of the text.

Letter-spacing: control the space between letters


Font size

https://developer.mozilla.org/en-US/docs/Web/CSS/font-size

absolute unit

px: it does not necessarily equal the width of exactly 1 pixel on your machine, it varies depending on
the size of your display

font family property

font-family: change the font text of the element, not easy, depend on the font on the build in to your
browser

font-family: Arial, Helvetica, sans-serif;


there is choice if your machine does not have that font, after coma

iff you type fantasy font (family font), it will pick any in this

we can include our custom form

https://www.cssfontstack.com/

text-transform: uppercase, lowercase


universal and css selectors

universal (*): select everything

element selector

img{}

p{}

button{}

selector list

use a comma to combine multiple selectors

h1,h2{}: select all h1 and all h2, it styles both of them

id selector

#id{}

We cam use id for any element for our css to single out a single element, to style one thing
differently

Class selector

.class{}

Similar to id, except that a class can be applied to multiple elements, so we can have different groups
and style them similarly

Descendant selector(using space)

Li a {}: select all anchor tags that are nested or are descendant of an li, different comma

.class a{}: anything anchor tag inside a class .class

Section span a{}

Use this when you don’t want to tag class or id to any element

Adjacent selector

H1+p{}: h1 right after p

h2+button

Just style the button comes right after h2 on the same level

Descendant directly

Div > li {}: li are direct children of div

#heading_id.heading_class: tất cả các thẻ vừa có id là heading_id vừa có class tên là heading_class

.class1.class2: tất cả các thẻ có class là “class1 class2” (phải có dấu cách)
.class1 .class2: tất cả các thẻ có class là class2 là con (nằm bên trong) thẻ có class1 (ko cần phải là
con trực tiếp)

div.box: tất cả các thẻ div có class = “box”

div,h2: chọn tất cả thẻ div và h2

https://www.w3schools.com/cssref/css_selectors.php

Attribute selector

Selector[attribute = ..]{}

Input[type = ‘password”]= {} : all input type password

Section[class = “post”]{}: section where class = post

Section.post{}: only section with class post

And many of them in the link

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
pseudo class

hover

a:hover{}: when hover to element a, it styles differently for element a

.post button:hover{}: hover over button inside of class post

:active (when click): example: a button when you click (de chuot),buuong chuot de thanh hover,
different than hover, hover just moves a mouse around that element

:checked: use for input checkbox or radio when check

:first-of-type()

:ntn-of-type(): helps us select based upon position in a group of siblings

:ntn-of-type(3) : only the third

:ntn-of-type(3n): every 3rd

Section:first-of-type h1:ntn-of-type(1)

Pseudo element

H2::first letter:

p::first line:

::selection: this is going to apply to any part of the document that we have highlighted (clicking and
dragging the mousse across the text)

Pseudo element: selecting particular pieces, actual things on the page, things or part of an element
we selecting

Pseudo : is a state

:root{

--text-color: red

H1{

(--text-color: green - local)

Color: var(--text-color)

:root: để tạo biến (toàn cục), có thể đặt local


The Cascade: the order your styles are declared in and linked to matters (the same selector)

specificity

.post button:hover > button:hover

Id > class > element

Universal : *, 0 điểm

Inherited: 0 điểm

Section p {}

Id selectors: 0

Class, attribute, pseudo-class selectors = 0

Element and pseudo-element selectors = 2

 2

#submit {}:

---- = 1

---- = 0

---- = 0

 100

100 > 2

Nav a.active{}

--- = 0

--- = 1(pseudo class)

--- = 2(2 element)

Specificity.keegan.st

.post button:hover : 021

Button:hover : 011

But 0028< 010

It will apply for the attribute get conflict


Inline styles (not recommend)

Important(not recommend) : use on individual style declaration

When you a style is !important, overide any other declarations, can think of super specific

Inheritance

Inherit the closest, nearest parent

Button and input is not inheritanced, certain elements dont inherit things by default, if you want
them, there is a workaround

Color :inherit

Not every single property can be inherited


Box model

Idea everything in css is a box

Margin, padding, border, inner content box(width, height)

For now, width and height control inner content box

When you hover <div> element, the blue area is the content box (when you set width and height,
you are setting the content box, not the border, padding, margin)

When you set back-ground color, only styles the content area, it doesn’t go all the way across the
page if we set the width and the height,if not it will go across the page

Border: the border of element

Border – width : control the thickness

Border – color:

Border – style: dashed, solid ,. …

Border changes the size of the element

Nó sẽ làm thay đổi kích thước element, ví dụ nếu ta thêm border-width : 5px, chiều cao element <p>
sẽ tăng thêm 10px, nhưng chiều rộng element <p> lại chiếm hết chiều rộng trình duyệt nên phần
content sẽ bị giảm xuống để nhét border vào

Nếu ta sử dụng thẻ div cũng tương tự, nhưng nếu ta thêm thuộc tính box-sizing : border-box

Now the width of the element is going to go from border to border, from the outside edge to the
outside edge of the entire element, if we set width = 200px, then the width of the element is exactly
200px even we change the border size. It is going to subtract from that 200px, then the content is
190px the the border is 5px

So the border will change the size of the element, then the width is just set the width of the content,
but if we add box-sizing : border-box, then the width is the width of entire box, contain border

You can also set border-left-color

Border : width | style | color

Border radius: if value is 50 %, it will be a circle (% of width height of our box)

Padding: the space between the actual content box and the border of an element

Padding – left/right/bottom/top

Short hand Padding

Green area is the padding

Blue is the content

Yellow is border

Orange is margin

Padding change the size of element


Padding will add some space and to make things larger without making the text inside larger

Padding : 10px (all)

Padding : 10px 10px (top-bottom left-right)

Padding : 1px 2px 3px (top left-right bottom)

The background-color also sets for padding and content by default

Margin : the space outside of an element’s border, between that element and something else

Padding is the spacing on the inside of the border, margin is the spacing on the outside

Margin does not change the size of the element

Background color ko xét đến margin, chỉ xét đến padding và content khi default

Width chỉ width của content chứ ko đụng đến padding hay border by default (nếu ta chỉnh box-
sizing : border-box thì nó sẽ tính luôn cả padding và border)
Display property

Display : inline, block, inline block …

Nếu xét 1 thag inline thành block thì nội dung của thằng đó sẽ chiếm toàn bộ 1 hàng

With inline element(span, a, ..), width is ignore, height is ignored, padding is working but , if change
margin, it will affect 1 line (chỉ tác động left and right) that element is on (example we have span in
the paragraph) also with padding

With block elements(div, h1, …), width will be working (change width of the content), height will be
working, padding will be working (padding everywhere, not upfront or bottom something), margin
will be working --- unlike the inline element, which only worked on this one line of text, everything
else is like overlapping

Inline-block: behaves like an inline element except width, height, margin, and padding are respected

Example if we have this (3 div)

what if we want three of them in a row

if we set display: inline the result is

because with inline element, width and height can not work

But if we set inline block

(three of them are now on one line, if


with put a inline element(like span) next to, it will be on the line with three of them, and if you put
margin on one of them, they will shift together but not one of them, if you want one of them shift,
you can use position: relative)
New they are behaving like inline elements, they are the space, the row, they are sitting in line
together, but all of the other properties with respect to the box model are going to work

Like margin, padding, width, height

Display: none : không còn thấy element đó nữa


Css unit

Relative unit

%: always relative to some other value (% of something) (chỉ phụ thuộc đúng vào thẻ chứa nó (ko
phụ thuộc vào thẻ ông))

Để một thẻ có thể đặt height theo % thì thẻ nó phụ thuộc phải có một chiều cao mang tính cố định

Thường sử dụng % để chia layout

Side bar 30%, box content 70% kiểu vậy

For example

If we set width to be 50%: width : 50%, we are setting it to be half the width of the parent

Tương tự với height nhưng parent ko đc body

Line height : 50% : half the font-size of the element itself

Em: if we set its font-size to be 1 em, it will have the same font size as its parent element (phụ thuộc
vào thẻ cha gần nhất chứa nó mà có thuộc tính font-size), nếu mà mặc định thì 1 em = 16px

2em = 2 fontsize of parent element

With other properties, 1 em is equal to the computed font-size of the element itself

Article

button

Example

button{

font-size : 2em

padding : 0 1em

border-radius: 0.5em

Article{

Font-size: 20px

Em in padding =(reference) font-size(2em) of button

Em in border-radius =(reference) font-size(2em) of button

Em in font-size = font-size of parent(20px)

So em keep things relatively with each other

But the element will relative with its font-size of its parent if we set its font-size
It could be dangerous

Ul

Li

Ul

Li

With this if we set ul font-size = 2em (whatever its parent font-size), then the nested il will grow
because it will take this ul is the parent and then continue with ul inside this il, the font size will grow

Rem (font-size html = 100% = 16px)

Relative to the root html element’s font size. Often easier to work with.

If the root font-size is 20px, 1rem is always 20px, 2rem is always 40px,…

Relative to 1 font size to the entire document

Vw: viewport width

Vh : viewport height

Viewport: cái khung, độ rộng của trình duyệt khi đang ở vị trí nhất định

1vw: 1% chiều rộng trình duyệt


Position properties

Relative: offset element from its current position, the element is positioned relative to where it
normally would be, its place in the document is still there

Top : 50px(cách top ban đầu của nó 50px xuống dưới)

Left: 50px(cách left ban đầu của nó 50px sang phải)

Absolute: the element is removed from the normal document flow, and no space is created for the
element in the page layout

For example: change div middle position: absolute

Change to
The fact is: the background-blue div on the right is still there, it is behind the black div, now the black
div has no space

But it is positioned relative to its closest positioned ancestor(parent nào gần nó nhất có position
ngoài static), if any; otherwise, it is paced relative to the initial containing block (<body>, nếu ko thì
nó sẽ được position theo body)

So absolute: does not have space for the element, set its position relative to its positioned nearest
parent (top,left,right,bottom)

Relative: set its position relative to its place on the document

Fixed:the element is removed from the normal document flow, and no space is created for the
element in the page layout, and it is positioned relative to the initial containing block, it will fixed in
the page if we scroll down the page

Sticky: scroll down and hit it, and it will stick to the top if we continue scrolling down
Transition (transition sẽ kết hợp với transform như là animation của transform) (transition sẽ đặt bên
trong css của element)

Animation when switch from css properties to another css properties when hover(for example)
(should use with hover to slow down or make hover smooth)

Transition: 1s (set to the element not the hover)

Transition: propertie name | duration | timingfunction | delay

Transition: background-color(all for all properties) 3s (only background-color will take 3s, the change
will take 3s to finish, delay is that it take 1s to begin to change)

Timing function: all of value of timing function will take the same amount of time to go from the
beginning to the end, but they get there in very different ways, commonly used with hover effects

(Easings.net)

(có thể bạn chưa biết ta có thể set hover margin left cho các element đấy :+), để các element khi ta
hover sẽ tự động trượt sang phải)

Element{

Transition: all ….

Element:hover{

Transform: translate…

}
Transform properties

Rotate things, scale them, move them across the page ,…

Left and right margin auto, that element is actually going to be centered in its container

Transform : rotate(45deg); : rotate element 45 độ happening from the middle point of element

Transform-origin: center | bottom right. change where this rotation is happening from (default is
middle)

Transform: scale(0.5): make it little than the original size 0.5 time (width, height shrinking half of the
origin)

Scale(2): double its size

Scale(2,1): height stay the same, width double (text sẽ bị biến dạng) (scaleY: chiều cao, scale x: chiều
rộng)

Transform:TranslateX(200px): move over 200px theo hàng ngang to the right

Transform:translateY(-200px): move over 200px theo hàng dọc up

Translate(-200px,100px) : move it left 200px, move it down 100px

Nhớ: dương, X: phải, Y : xuống dưới

Nên sử dụng translate để sử dụng để di chuyển vị trí theo ý muốn (vd như một chút di chuyển đi lên
của button when hover hoặc giấu đi thanh nav dành cho mobile translate: -100%)

Translate giống với position: relative(cũng thay đổi so với vị trí ban đầu, vị trí của element đó sẽ
không biến mất, cũng có thể kết hợp giữa position và translate, sau khi transform/position, coi như vị
trí đó là vị trí của element, sau đó lại transform/position tiếp)

Transform: rotate(20deg) scale(1.3);

Nó có thể di chuyển và đè lên các element khác

Transform is actually going to apply to whatever the contents are of our element

If we transform h1, and there is a button in h1, it will also transform like we transform h1

Or

<Section>h1, h1,h1</section>: and if we transform: scale(0,7), every h1 will be shrink 0,7 time of
their actual size

Color will change color of text and border


The best way to accomplish that is terms of performing is not to set a margin or something, just use
transform

Cursor: pointer (change cursor)


Background

Background-image, background-size: cover/contain/20%, background-position: top, bottom, center

Background-size: 100px (xét theo chiều ngang, width, chiều dọc auto theo tỉ lệ hình ảnh)

Có thể chèn nhiều bực ảnh vào, cách nhau bởi dấu phẩy, bức ảnh nào viết trước sẽ đè lên bức ảnh
viết sau

Background-image: linear-gradient(45deg,333,ccc): chèn dải màu thay vì hình ảnh, tham số đầu tiên
là deg, có thể kết hợp hình ảnh với dải màu này, linear sẽ để ở trên hình ảnh, và nên sử dụng
rgba(255,255,255,0.5) cho màu dải màu

Background position: 20px 50px, x = 20px, y = 50px, left center, bottom center, left 50px top 20px

Background-origin (sử dụng kèm với background-image): đổ background-image đến đâu trong thẻ

Mặc định là padding-box là đổ background image đến padding, nếu chuyển border-box nó sẽ đổ ra
tận border, nếu chuyển sang content-box thì chỉ đổ hết content

Nếu bức tranh không chứ đủ sẽ thừa rất nhiều khoảng trống

Còn background-clip sẽ quyết định background-color nó sẽ đổ đến đâu

No-repeat

Short : background:

Background-image khác với thẻ img

Img là 1 thẻ

Background-image là một thuộc tính

Và các thẻ có background-image chỉ hiện ảnh khi có kích thước width và height rồi, nếu không sẽ ko
có, bức ảnh lúc đầu sẽ có được repeat và lấp đầy background, nếu set no-repeat thì sẽ còn 1 ảnh và
sẽ còn dư nhiều space của thẻ chưa background-image
Khi chỉnh padding, border của một element thì container của element đó sẽ giãn ra theo padding,
border đó để chứa đủ element đó, tương tự với margin (nhưng nếu quá width hay height của
container thì cũng sẽ bị lòi ra)

Inline element

If we do this

<span>hello</span>

<span>world</span>

Sẽ có 1 khoảng trắng ở giữa hello và world

Nhưng nếu ta ko xuống hàng, sẽ không có khoảng trắng nào cả

Tương tự với image, i, a, …


Flex box

We have some container and we want to distribute space inside of that container

Mechanism to decide how much space or who gets the most space

Within one element, how do we distribute space across different elements to make those element
larger, add space between, …

We can create flexible layout, the boxes, and this is not even %, we don’t always use %, because
some point the are even, or larger others, … the box, element inside is flexible

Flex box properties

Display: inline/block/inline-block/flex/inline-flex

<section id = container>

Div

Div

Div

Div

Div

Container{

Width:90%

Height: 500px

Margin: 0 auto;

Display: flex

#container div{

Width: 200px

Height: 200px

So we have 5 div in the container, and it will over flow because height all > height container
But if we add display: flex, all div will line up left to right (và vừa container), now we can cover all the
other properties that rely on display being set to flex

In flex box world


When we designate a some box or some container

There are axes, main axis and cross axis

The default main axis, left to right

Flex-direction: decide on the main axis direction in our container

Default is row (left -> right)

Row-reverse: go to from right side over to the left

Column: our main axis goes from top to bottom, và nó sẽ cắt bớt size của element div để vừa
container, thật sự là nó sẽ thay đổi kích thước của các thẻ div luôn để vùa container
Also column-reverse

It just determines how the content flows in this container

Justify-content: determines how the actual elements, how the content is distributed across the main
axis

The default is going to flex start

If our main axis goes from left to right, the start is on the left

Flex end

Take the content and move it to the end of the man axis

Left to right so the end is right, start is left

Center

Center will center our content along the main axis


Space between: chia đều khoảng cách giữa các item mà ko có chia khoảng cách giữa element và
border của container

space-around

Nó sẽ chia đều nếu còn khoảng trống dư, nếu không thì sẽ không chia ra, nếu width tổng cộng của
mấy ông div này lớn hơn container thì sẽ ko còn khoảng trống, lúc đó space-around,space-
between đều ko có tác dụng

Space-evely: giống 2 cái trên nhưng nó còn chia đều cho element và container

(space … có thể dùng cho cả dọc và ngang)


Justify-content depens on flex dicrection, depends on main axis and that main axis can change

Flex wrap (is how we change that direction of the cross axis)

Determines whether our elements are going to wrap along the main axis onto a new line or ,…

Wrap

Or column reverse
Or row
Or flex start
Flex end

Wrap reverse: change cross axis from right to left


Ban đầu nó là như vậy

Cross axis : left to right


Nếu main axis là row, cross axist wrap sẽ là đi từ trên xuống dưới

Wrap-reverse sẽ là đi từ dưới lên trên(upward)

Nếu main axis là column, cross axist wrap sẽ là đi từ trái sang phải

Vậy main axist sẽ là cái hướng mà các éléments trong container đi trong một hàng ngay hay dọc,
cross sẽ là hướng để nó qua hàng mới (dọc hoặc ngang)

Align-item is on cross axis

Align-item : flex-end/flex-start/center (similar to justify-item but on cross axis)


Nếu muốn căn giữa chiều dọc, lẫn chiều ngang

Align-item: center

Justify-item: center
Something new

is how we change that direction of the cross axis


và nếu ta chỉnh width thẻ div lên 1 tí

You will see it go upward(thứ tự đúng ban đầu: trắng xanh tims nâu đỏ )

Nếu chỉ là wrap mà ko phải wrap-reverse

Align-item

Align item across cross axis

Justify-content is main axis

Flex-direction: direction of main axis


Flex-wrap: direction of cross axis
Align-content (cross axist)

Only work if have row and column,and control the space between them, work if there is flex-wrap:
wrap/wrap-reverse

Align-content : space-between (cách đều khoảng cách giữa các dòng và các cột)

Center: các cột và các dòng chụm lại, không có khoảng cách giữa các dòng hoặc cột, chụm lại vào gữa

Flex-start: giống center, nhưng chụm lại theo phía start của cross axis

Align-self: ko còn xài cho container, mà xài cho từng phần tử được

Ta có thể có một flex box khác bên trong một flex box

Giả sử ta có

<Nav>

<a>

<ul>

<li><li>

<li><li>

<li><li>

</ul>

<a>

</nav>

Vậy bên trong nav chỉ có 3 item <a>, <ul>, <a> khi set display: flex cho <nav>,

Ngoài ra ta có thể set <ul> là display : flex

Và có thể set các thứ bth như là justify-content, align item, ..

Ta có thể ứng dụng flex cho responsive, nếu như width nhỏ lại bằng kích thước điện thoại, hoặc nhỏ
hơn kích thước ban đầu, thì ta set flex-direction: column cho thằng container, như vậy thì nav bar sẽ
biến thành hàng dọc
Flex-basis: is just initial size that an element should be added into our box as it might, it is along main
axis, it may the width or height depending on the main exis direction

(cho từng phần tử nhỏ)

Defines the initial size of an element before additional space is distributed

Flex-grow: 1 (cho từng phần tử nhỏ) chiếm hết diện tích phần còn lại, control the amount ofspace
that element takes up if there is available space (main axis)
If we do for all

It shrink equally, cho dù chúng ta thu nhỏ màn hình lại

Hay thu nhỏ lại nữa


Nó sẽ lại xuống hàng nếu cái width của từng div nó nhỏ hơn 200px như ta đã xét cho nó

Có thể thay đổi tính chất này

Nếu ta thêm vào #container div

Flex-basis : 600px

Nó sẽ shrink equally

Nhưng nếu ta thêm flex-shrink : 2 cho phần tử bất kì, nó sẽ shrink (thu nhỏ lại) nhanh hơn những
element khác

Nếu 1 div có flex-grow = 1

Và 1 div khác có flex-grow = 2 thì nếu có space trống, div này sẽ lấy số space trống nhiều gấp 2 div kia

Flex-shrink: 0 thì div đó sẽ không bị thu nhỏ lại dù có làm gì đi nữa, chỉ có các div kia bị thu nhỏ
Shorthand:

Flex: flex grow | flex shrink | flex basis

https://developer.mozilla.org/en-US/docs/Web/CSS/flex?retiredLocale=vi

nếu ko muốn flex grow lấy quá nhiều diện tích, có thể set max-width

nếu mà một cái block chưa có nội dung gì hết, thì nếu tạo khối cho nó ko cần tạo width và height, chỉ
cần display block cho thằng parent rồi flex-grow:1 cho thằng con thì tự động block đó sẽ phồng ra

cách để 3 ông, nhưng ông giữa chiếm diện tích gấp đôi

display:flex
Thay đổi thứ tự (dựa vào main axis), order nhỏ nhất đứng ở main start

Cho 3 ông kích thước khác nhau, đều nhau, cách nhau đều
Sử dụng space-around: có khoảng trống 2 bên, khoảng cách ở giữa lớn hơn

Space-evenly: các khoảng trống đều nhau hết dù bên trong hay ngoài

Khi co lại sẽ không xuống dòng, các khoảng cách dần biến mất

Justify-content, flex-grow, flex-basis, flex-direction phụ thuộc vào main axis


media queries: một chuỗi truy vấn giúp khoanh vùng để viết css

có một vùng để viết riêng biệt của pc, tablet, mobile, ta sẽ viết css gọn vào 3 vùng này

allow us to change properties as the screen size changes, write in our css

all media queries begin with @media

width

@media (width/min-width/max-width: 360px){

Div{

Color:red;

Khi mà viewport có width đúng là 360px, tất cả thẻ div sẽ đổi màu font chữ thành red (khi sử dụng
width)

Thường sử dụng min-width hoặc max-width nhiều hơn

Min-width: khi mà viewport có width >= 360 thì tất cả thẻ div có font chữ đỏ

Max-width: khi mà viewport có width <=360 thì tất cả thẻ div có font chữ đỏ

Combine thing using and

@media (min-width: 360px) and (max-width:500px){

Div{

Color:red;

} (when 360<=viewport’s width<=500px)


@media (max-width: 1500px){

Div{

Color:yellow;

@media (max-width: 1000px){

Div{

Color:orange;

@media (max-width: 500px){

Div{

Color:red;

When it <= 500, it will be red

500<It <=1000, it will be orange

1000<it <= 1500, it will be red

Div{

Color: red

@media (min-width: 500px){

Div{

Color:yellow;

@media (min-width: 1000px){

Div{
Color:orange;

@media (min-width: 1500px){

Div{

Color:red;

Change from yellow, orange, red (khi mà làm bự size ra)

@media(orientation: landscape){}: set khi mà để màn hình điện thoại nằm ngang

Small devices (landscape phones, 576px and up)

@media(min-width: 576px){}

Medium devices (tablet, 768px and up)

@media(min-width: 768px){}

Large devices (desktop, 992 px and up)

@media(min-width: 992px)

Extra large (1200px)

<meta name = « viewport » content = « width = device-width, initial-scale = 1.0”>

Khi mà truy cập trên device thật mà ta thiếu đi thẻ meta này, thì nhưng trình duyệt mà nó ko tự fix
được thì sẽ bị như này (bị che khuất nội dung, bị zoom lên, dùng 2 ngón tay để thu nhỏ lại) 

Content có cái thuộc tính, width: chiều ngang viewport, initial-scale: độ zoom ban đầu (để ko bị zoom
lên lúc vào web), minimum-scale/ maximum..: độ zoom tối thiểu/ cực đại mà cho ng dùng zoom

Nguyên tắc bất ngờ nhỏ nhất: đừng tạo ra những cái bất ngờ cho người dùng

Keywords: not, only, and, or

Mediatypes: (các trường hợp muốn sử dụng css), print (css cho chế độ in), screen (màn hình pc, tivi,
laptop, đt, …), speech, all-default

Media features: min-width, max-width, …


@media not|only mediatype and (mediafeature and|or|not mediafeature){

Css code

@media (only) screen {h1{color: red}} (trường hợp in thì color vẫn màu đen)

@media only screen and (max-width: 1024px){h1{color: red}}

Có thể link 3 file css, 1 cho pc, 1 cho mobile, 1 cho tablet

<!—PC-->

<link rel = “stylesheet” media(mediafeature)= “(min-width: 1024px)” href = “./style_1.css”>

Nghĩa là style1.css chỉ áp dụng khi min-width: 1024, kích thước tối thiểu màn hình (có thể để print
hay screen vào và hiểu cùng nghĩa)

<!—mobile-->

<link rel = “stylesheet” media= “(max-width: 724px)” href = “./style_2.css”>

Và khi thêm vào media=””, thì ko cần thêm vào @media nữa

Bên trong Style_1.css

H1{

Color: red

Style2.css

H1{

Color:green

Vậy khi ta kéo to màn hình thì màu đỏ, kéo nhỏ màn hình thì là mobile

Cách này ko nên sử dụng do phát sinh file css

Breakpoints là những điểm/vị trí mà bố cục website sẽ thay đổi – thích ứng để tạo nên giao diện
responsive, kích thước là bao nhiêu để hỉu là mobile, tablet

Mobile: width < 740px

Tablet: width >= 740px width < 1024px

Pc: width >=1024

Nếu lật ngang đt, width tăng thì nó sẽ đổi tùy theo width đã quy định như trên
Media query: px em rem

Nên dùng em/rem trong media query, ko phụ thuộc vào ai hết, cứ 1em = 16px

Mobile: width <= 739px = 46.1875em

Tablet: width >= 740px=46,25em width <= 1023px = 63.9375em

Pc: width >=1024px= 64em


Reset css

Một số thẻ mặc định có margin được set sẵn bởi trình duyệt

Một số thẻ như <body>, h1, p,…

https://meyerweb.com/eric/tools/css/reset/

Lưu ý ko liên quan :

Nếu có element trong body, kích thước content body = kích thước của các element

Nếu ko có thì body ko có height nhất định, phải set cho nó height hoặc có element trong nó thì body
mới có height

Thẻ div sẽ luôn kích thước margin, border,padding của element trong conten của div
Cách tạo overlay
Grid system (ko chỉ dành cho việc thiết kế web mà còn trong thực tế, nghệ thuật)

Tạo giao diện có sự thống nhất, trật tự, cân bằng

Hệ thống lưới gồm:

Lưới nhiều cột(muiticolumn grid)

Lưới một cột (single) – như trên mobile

Vai trò:

Tổ chức: tạo đường căn gióng tiện lơi, dễ dàng sắp xếp thành phần được ngăn nắp

Cân bằng: dừ là đối xứng hay bất đối xứng, đẹp mắt, dễ nhìn, nhìn vào phân bietj được ngay

Tách biệt nội dung, tọa khoảng cách các thành phần hiệu quả

ứng dụng

quan trọng trong ui, ux, quạn trọng trong responsive web design

ui: giao diện đẹp

ux: trải nghiệm ng dùng tốt

thành phần chính (lý thuyết)

column

sử dụng giá trị tương đối %, để tương thích

số lượng cột được xác định trước (pc 12/16 cột,, tablet 8 cột, mobile 4 cột)

gutter

đường ngăn cách giữa các cột, khoảng cách 2 phía của 1 cột, độ rộng này có thể thay đỏi để phù hợp
độ rộng màn hình

(vd: pc/tablet: 24px, mobile 16px) – có thể thay đổi

margin – phần lề

là khoảng cách trái phải của bố cục chính

phần lề lớn thích hợp với màn hình lớn

thành phần chính (làm việc với css)

grid lưới (chứa row và column)

row dòng (chiều ngang, chứa column, 1 hoặc nhiều column)

column
css framework

bootrap

think of it sort of like a physical framework for something you are constructing in the real world,
building, sculpture, build skeleton

speed up process

helps us quickly create nice looking, responsive css modern website so we don’t have to write as
much css as we might

v4,5

<head>:
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2
" crossorigin="anonymous">

Above </body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/
tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

Elements

Container: most basic layout element of bootrap, contain and pad content within them
It is responsive too, we can define it, but we will comeback after learn grid

Container fluid: full width container and it will span the entire width of the viewport

Content goes all the way across the screen, there still be some margin

Responsive version

Allow us to say we want the container to be all the way across the screen 100% wide until you hit
you hit the small breakpoint or large or …

Container-sm small

Container-md medium

Container-lg large

Container-xl extra large


For example medium

And if we scroll

Hit a md breakpoint and then go to the normal container (not width across all way, add more margin)
Button
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

Use other element and make them look like button


Hoac thay doi kich thuoc or block level button

<button type="button" class="btn btn-info btn-lg">info</button>

Just remember color can change, meaning behind them is important

https://getbootstrap.com/docs/4.5/components/buttons/
blockquote : loi trich dan

<blockquote class = “blockquote text-center/right (footer va noi dung cua quote se can giua hoac
phai, cai nay co the dung cho ca h1,h2 duoc luon, dung cho bat cu element nao de can giua text)”>

<p class = “mb-0 (bo di margin bottom voi cai footer)”>aaaaaaaaaaaaaaaa</p>

<footer class = “blockquote-footer”></footer >

</blockquote>

Ultilities

color

<div class = “p-3 mb-2 bg-primary/secondary.. text-white/dark/…”>

Nhung cai to dam la utilities

https://getbootstrap.com/docs/4.5/utilities/colors/

badge used for displaying a count or some sort of a label, mix and match them with heading, put it in
a button

number of notification, update, ..

scale based on the element that they are inside of

co the ket hop voi button


https://getbootstrap.com/docs/4.5/components/badge/
button group

Can change the size of it

https://getbootstrap.com/docs/4.5/components/button-group/
alert

is supposed to provide some sort of feedback to user, after some action or when the page load like
welcome back, logging you back, …

you can put text, button, .. inside of alert

Dismissing alert – alert with x to close

&time la entity code cua chu x

Area-hidden: does not need to showing up at all on screen readers

Screen-reader will rea aria-label = “close”

Fade show: add on top right, little animation fade out

Role alert: for screen reader

This works if we have js bottstrap bottom of file

https://getbootstrap.com/docs/4.5/components/alerts/
grid system bootstrap

layout content, create responsive layout

only work inside of a class = “ container”

then using the class row

div class contain

div class row

content(div class col-sm, …)

every row in bootstrap has 12 units of space

<div class="container">
        <h1 class="text-center text-primary">toi la tuan</h1>
        <div class="row">
            <div class="col-6 bg-success">i am hahah</div>
            <div class="col-1 bg-info"></div>
        </div>
    </div>
<div class="container">
        <h1 class="text-center text-primary">toi la tuan</h1>
        <div class="row">
            <div class="col-6 bg-success text-center">i am hahah</div>
            <div class="col-1 bg-info"></div>
        </div>
        <div class="row">
            <div class="col-3 bg-success text-center">i am hahah</div>
            <div class="col-6 bg-info"></div>
            <div class="col-3 bg-success text-center">i am hahah</div>
        </div>
    </div>

We can put whatever content we want inside of these columns instead of just a background, form,
button, image, …

Or we just use class col, nó sẽ tự động chia ra theo số class col mình đã ghi

Vd: có 2 thẻ div class col, nó sẽ tự động chia 2 thẻ div thành 6 và 6, 3 thẻ thì 3 3 3

Hoặc là

<div class="container">
        <h1 class="text-center text-primary">toi la tuan</h1>
        <div class="row">
            <div class="col bg-success text-center">i am hahah</div>
            <div class="col-9 bg-info"></div>
            <div class="col bg-success text-center">i am hahah</div>
            <div class="col bg-info"></div>
        </div>
    </div>

Lưu ý là container có thể là fluid container, là full dòng width

Responsive layout grid

 <div class="container">
        <h1 class="text-center text-primary">toi la tuan</h1>
        <div class="row">
            <div class="col-md-6">Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Incidunt molestias commodi
                optio ut eligendi, officia iusto officiis maxime vitae et nisi
cum ipsam laudantium praesentium, vel
                doloremque veniam ad possimus!</div>
            <div class="col-md-6">Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Incidunt molestias commodi
                optio ut eligendi, officia iusto officiis maxime vitae et nisi
cum ipsam laudantium praesentium, vel
                doloremque veniam ad possimus!</div>
        </div>
    </div>

Khi mà để nguyên màn hình


Nhưng khi thu nhỏ màn hình lại, nhỏ hơn cái điểm breakpoint của medium

Vậy col-md-6 có nghĩa là nếu màn hình từ điểm medium trở lên thì nó chiếm 6 unit

Nếu ko thì chiếm hết hàng (tức là 12 unit)


Useful grid ultilities

Flexbox are actually used in bootstrap, uses flexbox terminology

<div class="row">
            <div class="col-3 bg-info">Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Incidunt molestias
                commodi
                optio ut eligendi, officia iusto officiis maxime vitae et nisi
cum ipsam laudantium praesentium, vel
                doloremque veniam ad possimus!</div>
            <div class="col-3 bg-danger">Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Incidunt molestias
                commodi
                optio ut eligendi, officia iusto officiis maxime vitae et nisi
cum ipsam laudantium praesentium, vel
                doloremque veniam ad possimus!
                Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Voluptas alias voluptates autem adipisci
                impedit obcaecati in, totam aliquam reprehenderit recusandae
inventore vero quas mollitia quidem dolor
                dolores itaque beatae hic?</div>
            <div class="col-3 bg-success">Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Incidunt molestias
                commodi
                optio ut eligendi, officia iusto officiis maxime vitae et nisi
cum ipsam laudantium praesentium, vel
                doloremque veniam ad possimus!</div>
            <div class="col-3 bg-primary">Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Incidunt molestias
                commodi
                optio ut eligendi, officia iusto officiis maxime vitae et nisi
cum ipsam laudantium praesentium, vel
                doloremque veniam ad possimus!</div>
        </div>

Ta thấy là đoạn màu đỏ dài hơn nên các đoạn khác phải kéo dài ra đúng bằng đoạn màu đỏ
Ta thấy div row thực chất đang display flex

T có thể thêm vào như sau

Nó sẽ theo chiều của cross-axis

Như vậy là ta đã căn chỉnh đúng theo height của nó

Có thể sử dụng align-self cho từng thẻ div khác nhau chẳng hạn

Ta cũng có thể sử dụng justify content cho row

Ta có thể thêm vào justify-content-sm/lg/md/xl-end/center.between (có thể ghi nhiều nhiều cái này
cho một row giống như bên cột có col-6, col-sm-7,…)

Dành cho responsive khi mà ko muốn lúc nào cũng là center hoặc là start

https://getbootstrap.com/docs/4.5/layout/grid/

you can add border to row (class = “row border”), nó sẽ tạo ra border cho cái row đó
:before, :after

Before element will insert a piece of content before element’s content that we can then style

But it wont do that until style content property

Or after

It is before or after the content, not before or after the element <p>, but it is still inside the
paragraph

Good use, what to do

Insert cosmetic content

We don’t have to put a empty div


Or do this

You might also like